03Feb

THE RAZOR VIEW ENGINE IN MVC

View Engine is responsible for rendering the view into html form to the browser.

ASP.NET MVC includes two different view engines, the newer Razor View Engine and the older Web Forms View Engine.

What is Razor?

The Razor view was introduced with ASP.NET MVC 3 and is the default view engine moving forward.

Razor provides a streamlined syntax for expressing views that minimizes the amount of syntax and extra characters. It effectively gets out of your way and puts as little syntax as possible between you and your view markup.

Razor accomplishes this by understanding the structure of markup so that it can make the transitions between code and markup as smooth as possible.

To understand this concept let us see a small example.

After creating a MVC application, add an INDEX view and select Razor as the view engine.

 

@{
ViewBag.Title = "Index";
}
@{
 var items = new string[] { "one", "two", "three" };
}
<html>
<head><title>Sample View
<body>
<h1>Listing @items.Length items.
<ul>
@foreach (var item in items)
{
<li>The item name is @item.
}
ul>
body>
html>

The above code sample uses C# syntax, which means the file has the .cshtml file extension. Similarly, Razor views, which use the Visual Basic syntax,have the .vbhtml file extension.

These file extensions are important, as they signal the code language syntax to the Razor parser.

The key transition character in Razor is the “at” sign (@). This character is used to switch from markup to code and sometimes again back to markup.

There are two basic types of transitions: code expressions and code blocks.

Code expressions are evaluated and written to the response.

In the above example consider the line

<h1>Listing @items.Length items.

 

In the above line the moment the Razor view sees the

tag it is intelligent enough to recognize it as an html tag.

 

After that we need to print the length of the items. For this we need to switch from html to C# mode.

To do that we are preceding it with @ symbol. After that we are closing the

tag i.e. we are again switching from C# to html.

 

 

Note: We have to notice that we don’t need to demarcate the end of code expression unlike with the web forms view.

 

Listing <%: items.Length %> items.

 

 

Razor is smart enough to know that the space character after the expression is not a valid identifier, so it transitions smoothly back into markup.

This ability for Razor to automatically transition back from code to markup is one of its big appeals and is the secret in keeping the syntax compact and clean.

 

In addition to code expressions, Razor also supports code blocks within a view.

 

In the Example above consider the lines

@foreach (var item in items)

{

<li>The item name is @item.

}

 

This block of code iterates over an array and displays a list item element for each item in the array. The foreach statement automatically transitions to markup with the open

  • tag.

     

    Razor understands the structure of HTML markup, it also transitions automatically back to code when the

  • tag is closed.

     

    Blocks of code require curly braces to delimit the block of code in addition to an @ sign. It is commonly used for variable declarations, to perform calculations etc.

     

    @{

        var items = new string[] { "one", "two", "three" };

       }

     

    Note that curly braces are not required for block statements, such as foreach loops and if statements, because the Razor engine has special knowledge of those C# keywords.

     

    The output for the above example is as shown below.

     

    raz

Related

Token Based Authentication for Web API's

Securing ASP.NET Web API using Custom Token Based AuthenticationProviding a security to the Web API&...

Read More >

ASP.NET: Audit Trail Implementation using Entity Framework

When you are working with certain projects which involves the Customer records, you might need to tr...

Read More >

Asynchronous actions in MVC 5

What does it mean?Asynchronous actions allow developers to handle more concurrent requests and can b...

Read More >

ELMAH Integration in ASP.NET MVC Application

ELMAH(Error Logging Modules And Handlers)What is ELMAH?ELMAH (Error Logging Modules and Handlers) is...

Read More >

Unit testing in .NET

Unit Testing – ExplainedA process which involves writing code to verify a system at a lower an...

Read More >

ViewData and ViewBag in MVC

ASP.NET MVC provides us two options ViewData and ViewBag for passing data from controller to view.Vi...

Read More >

Creating a Simple Form with Validation Using ASP.NET MVC 4 Empty Template

There are multiple Validation attributes available in MVC. Validation attributes comes from System.C...

Read More >

Brief Journey to Asp.Net MVC Framework

Introduction: ASP.NET MVC is a  framework for building web applications that uses the mode...

Read More >

Share

Post a Comment

  • Recent
  • Popular
  • Tag
Monthly Archive
Subscribe
Name

Contact Us
  • *
  • *