Webmatrix: Web Pages

WebMatrix
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 and time

is: @DateTime.Now</p>
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. *@
}

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 support@example.com 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 &lt.
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 page) using
@RenderPage(“<page name>”);
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>
<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>
</html>
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.
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.
_Layout.cshtml
@{
}
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
</head>
<body>
<center>
<div id="content">
@RenderBody()
</div>
@RenderPage("/Shared/_Footer.cshtml") </center>
</body>
</html>
Default.cshtml
@{
Layout = "/Shared/_Layout.cshtml";
}
<h1>@PageTitle<h1>
<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
@{
}
@section CKTBranches{
<h1>@PageTitle<h1>
<li>CSE</li>
<li>IT</li>
<li>ECE</li>
</ol>
}
Default.cshtml
<li>Civil</li>
<li>Mech</li>
<li>Chemical</li>
</ol>
_Layout.cshtml
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
</head>
<body>
<center>
<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>
<title></title>
</head>
Passing data to partial pages
<body>
<center>
<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
@{
}
<h1>@PageTitle<h1>
<li>CSE</li>
<li>IT</li>
<li>ECE</li>
<li>Civil</li>
<li>Mech</li>
</ol>
Default.cshtml
<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 client-
content) 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# - 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.
<html lang="en">
<head>
<title>Session Variables</title>
</head>
<body> @if(Session["UserName"]!=null){
<p>Hello, @Session["UserName"]</p> }else{
<p>Visit Login Page</p>
}
</body>
</html>
@{
if(IsPost){
Session["UserName"]=Request["uname"];
Response.Redirect("~/Default.cshtml");
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Login Page</title>
</head>
<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>

Webmatrix: Web Pages

Uploaded by

Webmatrix: Web Pages

Uploaded by

WebMatrix

It integrates a web server with database and

WebMatrix can be used to start a new website using

These components include the operating system, the

Razor is a simple to use, yet extremely powerful,

An ASP.NET Web Page (.cshtml or .vbhtml) in WebMatrix,

The server-side content contains code to be executed

<p>The current date and time

@{ var stevelydford = "me"; }

This means that reserved HTML characters are

Web Pages in a website generally have common items

A Layout template cab be defined. This facilitates

The content of the partial page can be imported into

Normally , such pages are kept in the shared folder.

Layout page contains the common content and design

The Layout property of the content page is set to the

When a request is made to the content page, the

The content outside of any section is fetched by

HttpCookie aCookie = new

You might also like