Introduction of Razor View Engine in ASP.NET MVC
ASP.NET MVC 3 introduces a new view engine named
Razor that offers the following
benefits:
-
Razor
syntax is clean and concise, requiring a minimum number of keystrokes.
-
Razor is
easy to learn, in part because it's based on existing languages like C# and
Visual Basic.
-
Visual
Studio includes IntelliSense and code colorization for Razor syntax.
Some new Razor features include the following:
-
@model syntax for specifying the type being
passed to the view.
-
@* *@ comment syntax.
-
The
ability to specify defaults (such as
layoutpage) once for an entire site.
-
The
Html.Raw method for displaying text without
HTML-encoding it.
-
Support
for sharing code among multiple views (_viewstart.cshtml
or _viewstart.vbhtml
files).
Razor also includes new HTML helpers, such as the following:
-
Chart: Renders a chart, offering the same
features as the chart control in ASP.NET4.
-
WebGrid: Renders a data grid, complete with
paging and sorting functionality.
-
Crypto: Uses hashing algorithms to create
properly salted and hashed passwords.
-
WebImage: Renders an image.
-
WebMail: Sends an email message.
Let’s we create our first MVC Application by using Razor View syntax:
Open New
Project
à Select ASP.NET MVC 3 Web Application
à Click OK.
Select
Razor View engine from the DropDownList for your application and Click OK.
When the
application is ready add a view in your project and select
Razor as a View engine. Add it in your project.
Here, I
have created two properties ((name,
productid) in a Model class that
return the name of an individual and productid respectively.
namespace MVCRazorExample.Models
{
public class
Product
{
public string
name
{
get {
return
"Rohit";
}
}
public int
productid
{
get {
return 1;
}
}
}
}
Here in a
HomeController class I have created
two action methods Index() and
Product() that return an Index and
Product View respectively.
using System.Collections.Generic;
using System.Web.Mvc;
using MVCRazorExample.Models;
namespace MVCRazorExample.Controllers
{
public class
HomeController :
Controller
{
public ActionResult
Index()
{
return View(new
Product());
}
public ActionResult
Products(int id)
{
if (id == 1)
{
List<string>
products = new List<string>();
products.Add("ThumsUp");
products.Add("Pepsi");
products.Add("Limca");
products.Add("Mountain Dew");
ViewBag.Products=products;
}
return View();
}
}
}
Index View:
We denote
the start of a code block with Razor using a
@ character. Unlike <% %> code
nuggets, Razor does not require you to explicitly close the code-block:
@model
MVCRazorExample.Models.Product
<h1>Razor Example</h1>
<h3>Hello
@Model.name,
Today is @DateTime.Now.DayOfWeek
</h3>
<p>
Checkout <a
href="/Home/Products/@Model.productid">this product</a>
</p>
@{
ViewBag.Title =
"Index";
}
Product View:
In the
below code we started a “foreach”
loop using the @ symbol, and then
contained a line of HTML content with code blocks within it. Because the
Razor parser understands the C# semantics in our code block, it was able to
determine that the <li> content
should be contained within the foreach and treated like content that should be
looped. It also recognized that the trailing} terminated the foreach
statement.
@model
MVCRazorExample.Models.Product
@{
ViewBag.Title =
"Products";
}
<ul> <h2>Products</h2>
@foreach (var
product in ViewBag.Products)
{
<li>@product</li>
}
</ul>
Here in
the browser we can see the output of our application:
When we click on hyperlink it will displays the product below:
By using the above code example you can easily learn how to use razor view
syntax in a MVC Application.
|