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.cshtmlor _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:
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.
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.
Leave Comment