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.
