Home > DeveloperSection > Articles > Introduction of Razor View Engine in ASP.NET MVC

Introduction of Razor View Engine in ASP.NET MVC


ASP.NET MVC ASP.NET MVC 
Ratings:
0 Comment(s)
 7992  View(s)
Rate this:

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.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:

Open New Project à Select ASP.NET MVC 3 Web Application à Click OK.

Introduction of Razor View Engine in ASP.NET MVC

Select Razor View engine from the DropDownList for your application and Click OK.

Introduction of Razor View Engine in ASP.NET MVC

When the application is ready add a view in your project and select Razor as a View engine. Add it in your project.

Introduction of Razor View Engine in ASP.NET MVC

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:

Introduction of Razor View Engine in ASP.NET MVC

When we click on hyperlink it will displays the product below:

Introduction of Razor View Engine in ASP.NET MVC

By using the above code example you can easily learn how to use razor view syntax in a MVC Application.


Don't want to miss updates? Please click the below button!

Follow MindStick