Slide 1

WebMatrixWeb PagesWebMatrixMicrosoft 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. WebMatrixWebMatrix 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.

WebStackA 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.

The current date and time is: @DateTime.NowRazor C#@{ var PageTitle = "My Home Page"; }

@PageTitle

@PageTitleThe current date and time is: @DateTime.Now

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 spaceExtra 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 literalRazor C# - code blocksThe number is: @( 12 * 4 )Code block@{var movies = new List();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#

@PageTitle

@foreach (var movie in movies){

@movie}

Razor C# - @@{ var telephoneNumber = "01632 567890"; }Please contact support@example.com or @telephoneNumber

@{ var stevelydford = "me"; }Follow me on twitter: @@stevelydfordRazor C# - text, code, markupIf 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 , , or Use the special tag .@: outputs a single line of content containing plain text or unmatched HTML tags.

Razor C#@if (loggedIn){

WelcomeThe time now is:@DateTime.Now.ToShortTimeString()
Have a nice day!

}Razor C# - HTML encodingAll 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 logged in
to use this site.";}@messageRazor C#The server will send the following encoded HTML to the browserYou must be logged in to use this site.Razor C#To prevent this encoding, use the Html.Raw() method.@{var message = "You must be logged in to use this site.";}@Html.Raw(message)Razor C# - LayoutComplete 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# - LayoutContent 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();

Normally , such pages are kept in the shared folder.Razor C# - Layout

Partial PageContent Page_Header.cshtml .: Bapatla Engineering College::Bapatla :. _Footer.cshtml Copyright 2011 Bapatla Engineering College | All Rights Reserved Default.cshtml@{var PageTitle = "Branches Offered"; } @PageTitle

@RenderPage("/Shared/_Header.cshtml")@PageTitle Default.cshtml

1. CSE
2. IT
3. ECE
4. EIE
5. EEE
6. MECH
7. CIVIL
8. CHEMICAL

@RenderPage("/Shared/_Footer.cshtml")

OUTPUT

Razor C# - Layout templateTo 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 templateThe 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@{ } @RenderPage("/Shared/_Header.cshtml") @RenderBody() @RenderPage("/Shared/_Footer.cshtml") Default.cshtml@{Layout = "/Shared/_Layout.cshtml"; var PageTitle = "Branches Offered"; }@PageTitle

1. CSE
2. IT
3. ECE
4. EIE
5. EEE

OUTPUT

Razor C# - @RenderSection()At times, the content in the content page may be organized as different sections. A section is defined as @section { }These sections can then be placed in the Layout page according to the required design by @RenderSection().

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{@PageTitle

1. CSE
2. IT
3. ECE

}Default.cshtml

1. Civil
2. Mech
3. Chemical

_Layout.cshtml @RenderPage("/Shared/_Header.cshtml") @RenderSection(CKTBranches)@RenderBody() @RenderPage("/Shared/_Footer.cshtml") @{@PageData[college]=Bapatla Engineering College;}

Passing data to partial pagesPassing data to partial pages @RenderPage("/Shared/_Header.cshtml") @RenderBody() @RenderPage("/Shared/_Footer.cshtml")

_Header.cshtml .: @PageData[college]::Bapatla :. Default.cshtml@{Layout = "/Shared/_Layout.cshtml"; var PageTitle = "Branches Offered"; }@PageTitle

1. CSE
2. IT
3. ECE
4. Civil
5. Mech

Default.cshtml

1. Civil
2. Mech
3. Chemical

Razor C# - HelpersHelpers 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# - HelpersThe 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# - HelpersA 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# - FunctionsFunctions 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 StateHTTP 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 sessionRazor C# - Session StateThe 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 VariablesSession 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 objectThe 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 Session Variables @if(Session["UserName"]!=null){ Hello, @Session["UserName"] }else{Visit Login Page} Razor C# - Session Variables@{ if(IsPost){Session["UserName"]=Request["uname"]; Response.Redirect("~/Default.cshtml"); } }

Login Page

Razor C# - Session Variables Welcome Bapatla Engineering College