Welcome ASP.NET Razor View - Part 1

Introduction

Asp.net MVC3 introduces a new View Engine "Razor", which greatly simplifies the creation of view components and improves productivity. Once you have installed MVC3 from http://www.asp.net/mvc/mvc3, when you create an Asp.net MVC3 application using Visual Studio 2010, you are going to see a prompt like the following where you need to specify the View Engine (Either Aspx or Razor):

Figure : Specify View Enginge while creating an Asp.net MVC3 application 

Specifying "Razor" as the view engine results in creating an MVC application based on Razor view engine where the file extensions end up with .cshtml.

Interesting thing is, once you install Asp.net MVC3, you get a new template in Visual Studio to create an Asp.net web site based on Razor view engine. Go to File->New->Web Site->Asp.net Web Site(Razor) to add a Razor based Asp.net web site in Visual Studio:

 Figure : Adding an Asp.net Razor web site in Visual Studio

Doing so would result in adding the following Web Site in Visual Studio, which is based on Razor view engine:

 

 Figure : Asp.net Razor web site in Solution explorer

Run the application using Visual Studio and you are likely to see the following output:

Figure : Home page of Asp.net Razor web site

Hm..seems good. Lets try to understand how this works!

Default.cshtml

First of all, there is no aspx in Razor, and, no server control, ascx or CodeBehind. All you see is some plain cshtml files all over the web site.

Open the Default.cshtml in Visual Studio (Which results in the above page output in browser) and you will see it contains the following markup:

  Figure : Default.cshtml Markup

As you can see, it contains some plain old basic HTML and some C# scripts written in some new syntax. Yes, you got it right. Razor introduces a new simple way of writing scripts in HTML, which basically could be thought of as a simplified version of writing scripts which we were used to write in Aspx markup.

Conventionally, we used to write scripts or expressions in aspx as follows:

<%     var date = DateTime.Now; %> Current date is : <%=date %>

This expression becomes the following in Razor syntax:

@{      var date = DateTime.Now; } Current date is : @date

As a result, the markups in Razor view components (cshtml files) becomes a lot cleaner, saves a lot of key strokes for you and lets not forget this syntax is fully supported by Visual Studio intellisence. So, you are getting the best of both worlds.

Understanding _SiteLayout.cshtml

Notice the markup of Default.cshtml and you will see it contains a very minimal amount of codes. Yet it results in a good amount of output in the browser. How is that possible?

Well, the answer is _SiteLayout.cshtml. It acts like what the MasterPage does in a Web Form application and it is used in a Razor web site to define a common layout across a group of pages (cshtml files).

In Razor, if you start a cshtml file name with an underscore (_), user cannot browse the file using URL request (It is prohibited internally). The layout files are files which are to be used as an internal purpose (To define the common layout of the pages) and hence, a layout file name should always start with an underscore (_), like the default layout file _SiteLayout.cshtml.

Open the _SiteLayout.cshtml and you will see the following markups:

Figure : _SiteLayout.cshtml makrup

Notice, its just plain old basic HTML stuff along with some Razor expressions which start with @. Most importantly, notice the @RenderBody() method call in Red box. At run time, the @RenderBody() method call is replaced by the HTML markups defined in the child page (The page which includes this layout page).

So, when the Default.cshtml is browsed, the @RenderBody() method call is replaced by the HTML defined in Default.cshtml, which is nothing but the following simple HTML:

<p>     ASP.NET Web Pages make it easy to build powerful .NET based applications for the web. p>

Note that, there is no restriction of name with the layout pages except the fact that, it should always start with an underscore(_). Name it as you like and everything should be alright as long as you include the layout page correctly in children pages as follows:

@{      Layout = "~/_MyLayoutPage.cshtml"; }

Understanding _AppStart.cshtml

If you need to run some initialization functionality when the application starts, _AppStart.cshtml is the place to do so. Unlike the layout pages, it has a standard name and you cannot rename it other than _AppStart.cshtml.

Open the _AppStart.cshtml and you would see the following markup:

Figure : _AppStart.cshtml markup

Basically, it contains some codes to initialize the database when the application runs.

Others

Expand the Accounts folder and you will see several other cshtml files implemented for User Login, Registration and other user account oriented functionality. All of these utilizes Razor syntax and use the built in helpers in Razor for rendering various UI elements or built in classes for implementing several functionality.

Like a conventional Asp.net web site, a Razor web site also can have Asp.net standard folders like the App_Data for holding database and other data sources, or, App_Codes for holding cs files. Similarly, the Razor web site can hold a reference to other class libraries to be able to invoke methods on those libraries to achieve desired functionality. Most importantly, it contains many rich built in "Helpers" which help rendering some common UI output and functionality (Like, Adding a Twitter feed, or, Social network bookmarks) which you would simply love to have!

The next post is going to cover some of the detailed stuff of Razor and I hope you would find it helpful.