Dot Net Stuff

Understand ASPX and Razor View Engine


ASP.NET MVC is one of the most popular frameworks for these days and the term “View Engine” is belongs to that. I this section we are try to understand about Razor View Engine and ASPX View Engine.


Introduction of View Engine

There are two types of view engine supported by ASP.NET MVC. In this Article we will go through the Razor and ASPX view engine View Engines are responsible for rendering the HTML from your views to the browser. The view engine template will have different syntax for implementation.

What is @Razor ?

Razor using an @ character instead of aspx's <% %> and Razor does not require you to explicitly close the code-block, this view engine is parsed intelligently by the run-time to determine what is a presentation element and what is a code element. Razor view engine is compatible with unit testing frameworks. This is the default view engine in MVC 3 and MVC 4. Web pages with Razor syntax have the special file extension cshtml (Razor with C#) or vbhtml (Razor with VB).

What is <%ASPX%> ?

This is the default view engine for MVC 1 and MVC 2. The syntax for writing views with this engine is the same syntax that the ASP.NET Web Forms uses and the file extensions are also taken from ASP.NET Web Form (.aspx, .ascx, .master) .

Syntax and Uses of @Razor and <%ASPX%>

It will be easy for ASP coder to learn about ASPX View Engine, and if you are comfortable with C# language then you can easily go with Razor view engine. Let's go through how we can use Razor and or ASPX view engine in our application. Let's start reviewing some of the usages. In this article I am try to cover both syntax with each other by grouping, this help us to understand and compare the syntax also it will help to you to remember easily.

Comment in ASPX and Razor View Engine

Comments are delimited in Razor syntax by @* *@ where in ASPX comments are delimited by <%-- --%>

 
@*Your Razor Comment Here*@   
<%--Your Razor Comment Here--%>  

In a C# code block the comment for Razor or ASPX will be // and /* */ comment delimiters. Following code shows comments inside a c# code block.

 
@{
    //Razor
    //Single line comment
    /* Multi
       line comment
    */
} 

<% 
//ASPX   
//Single line comment
/* Multi
line comment
*/ 
%> 

Code Block in ASPX and Razor View Engine

Writing a server side code blocks in the source html is shown below for Razor

 
@{ 
    string strVariable = "Razor Stirng";
    bool isRazor = true;
    string[] arrRazor = new string[] { "MVC", "RAZOR", "AXPS"};
} 

The above code declares a string variable, bool variable and a array variable in Razor and the variables are got initialized with appropriate data in it. This code block is written in .cshtml file for Razor with C# and .vbhtml file for Razor with VB (must use VB syntax). The same code is written in .aspx (ASPX C#).

 
<%  
    string strVariable = "Razor Stirng";
    bool isRazor = true;
    string[] arrRazor = new string[] { "MVC", "RAZOR", "AXPS"};
%> 

Razor and ASPX with HTML Markup

Following code block shows how we can integrate the Razor Code block with html markup when working in a dynamic web page we often required mixing code and html tags.

 
@Your Code 

The above code is written for Razor(C#) and the below code will acheive the same in ASPX(C#) view engine.

 
<%:YourCode %> 

There may be some other cases , in which we can marge HTML tag with Razor or ASPX view engine.

 
@if (isRazor)
{
    ViewEngine:Razor
}
else
{
    ViewEngine:Other
} 

The above code used with ASPX view engine will be.

 
<%if (isRazor)
{
    ViewEngine:Razor
}
else
{
    ViewEngine:Other
} %>

You can do more mixing of HTML tags with Razor and ASPX View Engine, Following code block shows how you can do that.

 
Your Sample Html Code or Text @RazorCode (@AnotherRazorCode)
Your Sample Html Code or Text <%: ASPXCode %> (<%:AnotherASPXCode %>) 

When the above code will rendered with the value of RazorCode and AnotherRazorCode variable is replaced as we do in server side coding. Similarly you can assign dynamic HTML attribute for any HTML tags. Let’s understand by an example.

 
 
    

Conditional Statement in ASPX and Razor View Engine

Below is a sample Conditional statement for Razor (C#).

 
@if(isRazor)
{   
  

View Engine:Razor

} else {

View Engine:Other

}

Below is a sample Conditional statement for ASPX (C#).

 
<% if (isASPX)
{ %>
    

View Engine:ASPX

<% } else { %>

View Engine:Other

<% } %>

The above usage gives us a very easy approach for rendering things conditionally.

Looping Statement in ASPX and Razor View Engine

The below statement in Razor view engine is used for rendering the ListItem .

 
    @foreach (var item in ListItem) {
  • @item
  • }

Razor view engine is smart enough to identify the tag as an <li> html tag and the @item as a server side value. The <li> will be rendered multiple times with the list of products.

 
    <%foreach (var item in ListItem) { %>
  • <%=item%>
  • <%} %>

Calling Server Side in Method in ASPX and Razor View Engine

To understand to call let’s assume that we have a static method named ViewEngineMethod in a class and called inside a

tag using the appropriate view engines syntax.

 

@{RazorASPXViewEngine.Models.SampleUtility.ViewEngineMethod();}

This code will be rendering with the output returned from the ViewEngineMethod()

 

<%=RazorASPXViewEngine.Models.SampleUtility.ViewEngineMethod();%>

Creating a Delegate in Method in ASPX and Razor View Engine

The delegates Razor can be define as templates build by C# and HTML. Here we have used Func instead of using Func. and we have used the 'item' to get the value inside the Func<>.

 
@{
    Func SomeList = 
    @
    @foreach (string p in item) {
  • @p
  • }
; } Some listing from delegate- @SomeList(ListItem);

Creating a method using ASPX and Razor View Engine

The @functions block in Razor helps you to define utility functions directly in the view.

 
@functions{
    public string myMethod()
    {
        return "My Method";
    }
}
Name:@myMethod(); 

We should create the function only when the function is specific to the view and can't be done using other conditional statement. By using @function we can separate view specific logic from controller.

Escape Character in ASPX and Razor View Engine

To escape an @ symbol just add @@ and it will render a single @ symbol. Razor language parser is very smart to konw the @ symbol is used for a static content or dynamic content. Let's take an example to understand this.

 
@@@ViewEngine
@@ViewEngine
example@DotNet-Tutorial.com   

The fist line will print @C# where as the second line will print @@ViewEngine. The third one will be parsed intelligently by the parser and will print the email address example@DotNet-Tutorial.com. The second line printed @@ViewEngine because of the escape symbol the variable will not be considered/evaluated.

Summary: Razor view engine is widely used because of the lightweight syntax, readability, maintanability, TDD, and more. Razor uses @ symbol whereas ASPX uses <% %>. File extensions are different for Razor (C#-cshtml, VB-vbhtml) and ASPX(aspx, ascx, master) . Namespace for Razor is System.Web.Razor and for ASPX it's System.Web.Mvc.WebFromViewEngine. Razor sytax is very clean and easy to learn than ASPX view engine.

Keen to hear from you...!

If you have any questions related to what's mentioned in the article or need help with any issue, ask it, I would love to here from you. Please MakeUseOf Contact and i will be more than happy to help.

About the author

Anil Sharma is Chief Editor of dotnet-stuff.com. He's a software professional and loves to work with Microsoft .Net. He's usually writes articles about .Net related technologies and here to shares his experiences, personal notes, Tutorials, Examples, Problems & Solutions, Code Snippets, Reference Manual and Resources with C#, Asp.Net, Linq , Ajax, MVC, Entity Framework, WCF, SQL Server, jQuery, Visual Studio and much more...!!!

Loading