Asp 4-razor-introduction of view engine

Introduction of View Engine
There are two types of view engine supported by ASP.NET MVC. 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 <%-- --%>
?
1
2
@*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.
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@{
//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
?
1
2
3
4
5
@{
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#).
?
1
2
3
4
5
<%
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.
?
1 @Your Code
The above code is written for Razor(C#) and the below code will acheive the same in
ASPX(C#) view engine.
?
1 <%:YourCode %>
There may be some other cases , in which we can marge HTML tag with Razor or ASPX view
engine.
?
1
2
3
4
5
6
7
8
@if (isRazor)
{
ViewEngine:Razor
}
else
{
ViewEngine:Other
}
The above code used with ASPX view engine will be.
?
1
2
3
4
5
6
7
8
<%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.
?
1
2
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.
?
1
2
<input type="checkbox" checked="@isRazor">
<input type="checkbox" checked="<%:isASPX%>">
Conditional Statement in ASPX and Razor View Engine
Below is a sample Conditional statement for Razor (C#).
?
1
2
3
4
5
6
@if(isRazor)
{
View Engine:Razor
} else {
 View Engine:Other
}
Below is a sample Conditional statement for ASPX (C#).
?
1
2
3
4
5
6
7
8
<% 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 .
?
1
2
3
4
5
6
<ul>
@foreach (var item in ListItem)
{
<li>@item</li>
}
</ul>

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.
?
1
2
3
4
5
6
<ul>
<%foreach (var item in ListItem)
{ %>
<li><%=item%></li>
<%} %>
</ul>
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.
?
1 @{RazorASPXViewEngine.Models.SampleUtility.ViewEngineMethod();}
This code will be rendering with the output returned from the ViewEngineMethod()
?
1 <%=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<>.
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
@{
Func<string[], object=""> SomeList =
@<ul>
@foreach (string p in item)
{
<li>@p</li>
}
</ul>;
}
Some listing from delegate-
@SomeList(ListItem);
</string[],>

Creating a method using ASPX and Razor View Engine
The @functions block in Razor helps you to define utility functions directly in the view.
?
1
2
3
4
5
6
7
@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.
?
1
2
3
@@@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.

Asp 4-razor-introduction of view engine

More Related Content

What's hot (13)

Similar to Asp 4-razor-introduction of view engine (20)

More from Fajar Baskoro (20)

Recently uploaded (20)

Asp 4-razor-introduction of view engine