Transcript Slide 1
Web Pages
WebMatrix
Microsoft WebMatrix is a free tool (stack) from
Microsoft that developers can use to create, customize,
and publish websites to the Internet. WebMatrix
supports many different options to build sites.
It integrates a web server with database and
programming frameworks to create a single, integrated
experience.
WebMatrix
WebMatrix can be used to code, test, and publish
ASP.NET , PHP and other open source technology
based website.
WebMatrix can be used to start a new website using
popular open-source apps like DotNetNuke, Umbraco,
WordPress, or Joomla.
WebStack
A web stack, in its simplest sense, is the collection of
components that a website needs in order to run.
These components include the operating system, the
web server, the database, and the runtime and
programming framework that underpins the web
application.
WebMatrix
Web Pages (Razor C#)
ASP.NET Web Pages with Razor Syntax is a web framework
and part of WebMatrix.
Razor is a simple to use, yet extremely powerful,
programming syntax for inserting server-side code into
web pages.
An ASP.NET Web Page (.cshtml or .vbhtml) in WebMatrix,
is a file that has two totally separate types of content:
client-side
server-side.
Web Pages (Razor C#)
The client-side content of an ASP.NET Web Page can
contain HTML, JavaScript, and CSS.
The server-side content contains code to be executed
by the web server in C# (or VB.NET), which is used to
create dynamic content and interact with other
resources, such as databases and file systems.
Web Pages
Web Page
Razor Engine
Forms
Forms
Forms
Razor C#
A single line of server-side code can be added to an
ASP.NET Web Page using the @ symbol.
The code is added in-line with the client-side content,
such as HTML, and is recognised and processed
automatically by the web server, substituting the Razor
code with relevant dynamic content.
<p>The
current date
is: @DateTime.Now</p>
and
time
Razor C#
@{ var PageTitle = "My Home Page"; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>@PageTitle</title>
</head>
<body>
<h1>@PageTitle</h1>
<p>The current date and time is:
@DateTime.Now</p>
</body>
</html>
Razor C# - comments
@{
// This is a comment.
var myVar = 17;
/* This is a multi-line comment that uses
C# commenting syntax. */
@* A one-line code comment. *@
@* This is a multiline code comment. It
can continue for any number of lines. *@
}
<!-- This is a comment. -->
Razor C# - white space
Extra spaces in a statement (and outside of a string
literal) don't affect the statement:
@{ var lastName =
"Smith"; }
A line break in a statement has no effect on the statement,
and you can wrap statements for readability.
However, you can't wrap a line in the middle of a string
literal.
You can use the concatenation operator (+).
You can also use the @ character to create a verbatim string
literal
Razor C# - code blocks
<p>The number is: @( 12 * 4 )</p>
Code block
@{
var movies = new List<string>();
movies.Add(“Guns of Navarone");
movies.Add("The Godfather");
movies.Add("The Godfather: Part II");
movies.Add("The Good, the Bad and the Ugly");
movies.Add("Pulp Fiction");
}
Razor C#
<body>
<h1>@PageTitle</h1>
<ul id="movies">
@foreach (var movie in movies)
{
<li>@movie</li>
}
</ul>
</body>
Razor C# - @
@{
var telephoneNumber = "01632 567890";
}
<p>Please contact [email protected] or
@telephoneNumber</p>
@{ var stevelydford = "me"; }
<p>Follow me on twitter:
@@stevelydford</p>
Razor C# - text, code, markup
If you are nesting a block of client-side content within
a server-side code block, it is necessary to wrap the
content within an HTML element such as <p>,
<span>, or <div>
Use the special tag <text>.
@: outputs a single line of content containing plain
text or unmatched HTML tags.
Razor C#
@if (loggedIn)
{
<div>
<h1>Welcome</h1>
The time now is:
@DateTime.Now.ToShortTimeString()<br />
Have a nice day!
</div>
}
Razor C# - HTML encoding
All content output to the browser, using Razor, is
HTML encoded for security purposes.
This means that reserved HTML characters are
converted to their equivalent codes for display on the
page : a < symbol is converted to <.
Razor C#
@{
var message = "You must be <a
href='login.cshtml'>logged in</a><br
/>to use this site.";
}
<p>@message</p>
Razor C#
The server will send the following encoded HTML to
the browser
<p>You must be <a
href='login.cshtml'>logged
in</a> to use this site.</p>
Razor C#
To prevent this encoding, use the Html.Raw()
method.
@{
var message = "You must be <a
href='login.cshtml'>logged in</a> to
use this site.";
}
<p>@Html.Raw(message)</p>
Razor C# - Layout
Complete control on the look and feel of the Web
Page.
Web Pages in a website generally have common items
such as headers, footers, navigation and common
application specific content.
A Layout template cab be defined. This facilitates
consistency of design and user experience.
Razor C# - Layout
Content shared across the web site is placed in a
partial page.
The content of the partial page can be imported into
the content page (requested
@RenderPage(“<page name>”);
page)
using
Normally , such pages are kept in the shared folder.
Razor C# - Layout
Partial Page
Content Page
_Header.cshtml
<div id="header">
<h1>.: Bapatla Engineering
College::Bapatla :.</h1>
<hr />
</div>
_Footer.cshtml
<div id="footer">
<hr />
<p>Copyright © 2011 Bapatla
Engineering College | All Rights
Reserved</p>
</div>
Default.cshtml
@{
var PageTitle = "Branches Offered";
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>@PageTitle</title>
</head>
<body>
<center>
@RenderPage("/Shared/_Header.cshtml")
<h2>@PageTitle</h2>
Default.cshtml
<ol style="list-style-type: none">
<li>CSE</li>
<li>IT</li>
<li>ECE</li>
<li>EIE</li>
<li>EEE</li>
<li>MECH</li>
<li>CIVIL</li>
<li>CHEMICAL</li>
</ol>
@RenderPage("/Shared/_Footer.cshtml")
</center>
</body>
OUTPUT
Razor C# - Layout template
To create a common web page design throughout the
website, Layout pages are used.
Layout page contains the common content and design
shared across all the pages.
The Layout property of the content page is set to the
path of the Layout page.
Razor C# - Layout template
The content page when requested inherits the Layout
page.
When a request is made to the content page, the
response serves the Layout page with the content page
replacing @RenderBody(); statement in the Layout
page.
Razor C# - Layout template
_Layout.cshtml
@{
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<center>
@RenderPage("/Shared/_Header.cshtml")
<div id="content">
@RenderBody()
</div>
@RenderPage("/Shared/_Footer.cshtml") </center>
</body>
</html>
Default.cshtml
@{
Layout = "/Shared/_Layout.cshtml";
var PageTitle = "Branches Offered";
}
<h1>@PageTitle<h1>
<ol style="list-style-type: none">
<li>CSE</li>
<li>IT</li>
<li>ECE</li>
<li>EIE</li>
<li>EEE</li>
</ol>
OUTPUT
Razor C# - @RenderSection()
At times, the content in the content page may be
organized as different sections.
A section is defined as @section <name> { }
These sections can then be placed in the Layout page
according
to
the
required
design
by
@RenderSection(“<sectionname>”).
The content outside of any section is fetched by
@RenderBody()
Razor C# - sections
Default.cshtml
@{
Layout = "/Shared/_Layout.cshtml";
var PageTitle = "Branches Offered";
}
@section CKTBranches{
<h1>@PageTitle<h1>
<ol style="list-style-type: none">
<li>CSE</li>
<li>IT</li>
<li>ECE</li>
</ol>
}
Default.cshtml
<ol style="list-style-type: none">
<li>Civil</li>
<li>Mech</li>
<li>Chemical</li>
</ol>
_Layout.cshtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<center>
@RenderPage("/Shared/_Header.cshtml")
<div id="content">
@RenderSection(“CKTBranches”)
@RenderBody()
</div>
@RenderPage("/Shared/_Footer.cshtml") </center>
</body>
</html>
Passing data to partial pages
@{
@PageData[“college”]=“Bapatla
Engineering College”;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
Passing data to partial pages
<body>
<center>
@RenderPage("/Shared/_Header.cshtml")
<div id="content">
@RenderBody()
</div>
@RenderPage("/Shared/_Footer.cshtml")
</center>
</body>
</html>
_Header.cshtml
<div id="header">
<h1>.: @PageData[“college”]::Bapatla
:.</h1>
<hr />
</div>
Default.cshtml
@{
Layout = "/Shared/_Layout.cshtml";
var PageTitle = "Branches Offered";
}
<h1>@PageTitle<h1>
<ol style="list-style-type: none">
<li>CSE</li>
<li>IT</li>
<li>ECE</li>
<li>Civil</li>
<li>Mech</li>
</ol>
Default.cshtml
<ol style="list-style-type: none">
<li>Civil</li>
<li>Mech</li>
<li>Chemical</li>
</ol>
Razor C# - Helpers
Helpers are another way to achieve DRYness in your
site design. A helper is a custom component that can
receive a list of parameters in a way similar to a
method call, and return HTML (or any kind of clientcontent) to be rendered on the page.
Helpers and functions must be created within a folder
in the root of the website called App_Code.
This folder name is an ASP.NET convention that
automatically makes all code within it available for use
in the rest of your application.
Razor C# - Helpers
The App_Code folder can contain sub-folders, the
contents of which will also be accessible to the code in
the rest of the site.
Razor C# - Helpers
A call to this helper method can be made within any
page by using an @ symbol followed by the filename
and helper name, separated by a dot.
@ProductHelpers.ProductInfo(“PenDrive",
“USB 8 GB", 5.00)
Razor C# - Functions
Functions are static methods that can be called from
anywhere in the WebMatrix application.
Unlike helpers, which can return only a block of
HTML for rendering in the browser, a function can
return any valid C# type.
Razor C# - Functions
Razor C# - Functions
Razor C# - Session State
HTTP is a stateless protocol. This means that a Web
server treats each HTTP request for a page as an
independent request.
The server retains no knowledge of variable values that
were used during previous requests.
ASP.NET session state identifies requests from the
same browser during a limited time window as a
session, and provides a way to persist variable values
for the duration of that session
Razor C# - Session State
The ASP.NET session state facilitates to store and
retrieve data per user, as they browse the web
application.
A session is started when the user first visits a page in
the web site and ends either when the user closes the
browser, or when the session “times out” due to
inactivity after a predetermined period of time (set in
IIS as twenty minutes, by default).
Razor C# - Session Variables
Session variables are stored in a dictionary on the server,
and are unique to each visitor per session. Session variables
are exposed through the Session property of the
WebPage object
The Session variable collection is indexed by a string or an
integer index.
Session variables do not have to be explicitly added to the
collection, they can simply be added or retrieved by
referring to their name or index.
By default, session variables can hold any valid .NET data
type, including generic collections and custom objects.
Razor C# - Session Variables
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Session Variables</title>
</head>
<body>
@if(Session["UserName"]!=null){
<p>Hello, @Session["UserName"]</p>
}else{
<p>Visit Login Page</p>
}
</body>
</html>
Razor C# - Session Variables
@{
if(IsPost){
Session["UserName"]=Request["uname"];
Response.Redirect("~/Default.cshtml");
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Login Page</title>
</head>
Razor C# - Session Variables
<body>
<h1>Welcome</h1>
<h1> Bapatla Engineering College</h1>
<form action="" method="post" >
<input type="text" name="uname" id="uname"
/></br>
<input type="password" name="upass"
id="upass" /></br>
<input type="submit" value="login" </form>
</body>
</html>
Razor C# - Session Identifier
All sessions created and maintained by the server are
given a unique identifier, which is stored in the
SessionID property of the page.
Each new request for a page is examined to see if it
already has a valid SessionID–if one is not present;
the server starts a new session and assigns a new
SessionID.
Razor C# - Cookies
Cookies provide a means in Web applications to store
user-specific information.
For example, when a user visits your site, you can use
cookies to store user preferences or other information.
When the user visits your Web site another time, the
application can retrieve the information it stored
earlier.
A cookie is a small bit of text that accompanies
requests and pages as they go between the Web server
and browser. The cookie contains information the Web
application can read whenever the user visits the site.
Razor C# - Cookies
For example, if a user requests a page from your site and
your application sends not just a page, but also a cookie
containing the date and time, when the user's browser gets
the page, the browser also gets the cookie, which it stores
in a folder on the user's hard disk.
Later, if user requests a page from your site again, when the
user enters the URL the browser looks on the local hard
disk for a cookie associated with the URL. If the cookie
exists, the browser sends the cookie to your site along with
the page request. Your application can then determine the
date and time that the user last visited the site.
Razor C# - Cookies
Response.Cookies[“LastVisit"].Value =
"patrick";
Response.Cookies[“LastVisit"].Expires =
DateTime.Now.AddDays(1);
HttpCookie aCookie = new
HttpCookie(“LastVisit");
aCookie.Value = DateTime.Now.ToString();
aCookie.Expires = DateTime.Now.AddDays(1);
Response.Cookies.Add(aCookie);
Razor C# - Cookies
@if(Request.Cookies[“LastVisit"] != null){
<p>You visited this page at Request.
Cookies[“LastVisit"].Value)</p>
}
Razor C# - Cookies
@{
var lv="";
if(Request.Cookies["LastVisit"]==null){
Response.Cookies["LastVisit"].Value=
DateTime.Now.ToString();
}else{
lv=Request.Cookies["LastVisit"].Value;
Response.Cookies["LastVisit"]
.Value=DateTime.Now.ToString();
}
Response.Cookies["LastVisit"].Expires=
DateTime.Now.AddDays(1);
}
Razor C# - Cookies
<body>
<h1>Welcome to Bapatla Engineering
College</h1>
<hr>
@if(!lv.IsEmpty()){
<p>You Last Visited this page at @lv
</p>
}
</body>