---
title: "Introduction of Razor View Engine in ASP.NET MVC"  
description: "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 numbe"  
author: "Chris Anderson"  
published: 2011-10-06  
updated: 2020-03-04  
canonical: https://www.mindstick.com/articles/766/introduction-of-razor-view-engine-in-asp-dot-net-mvc  
category: "asp.net mvc"  
tags: ["asp.net mvc"]  
reading_time: 5 minutes  

---

# Introduction of Razor View Engine in ASP.NET MVC

**[ASP.NET MVC](https://www.mindstick.com/articles/1571/start-with-asp-dot-net-mvc-4) 3 introduces a new [view engine](https://www.mindstick.com/forum/155782/explain-different-types-of-block-statements-in-razor-view-engine) named Razor that offers the following benefits:**

- [Razor syntax](https://www.mindstick.com/forum/160235/what-is-razor-syntax-and-how-does-it-help-in-embedding-server-side-code-within-a-view) 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](https://www.mindstick.com/articles/12378/visual-studio-for-mac-is-out-of-beta-preview-now-officially-available) includes [IntelliSense](https://answers.mindstick.com/qa/115739/why-is-intellisense-not-working-in-visual-studio-2026) 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](https://www.mindstick.com/forum/105/what-events-fire-when-binding-data-to-a-data-grid), complete with paging and sorting functionality.
- **Crypto:** Uses hashing [algorithms](https://www.mindstick.com/articles/12297/google-algorithms-why-so-important) 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](https://www.mindstick.com/articles/13069/progressive-web-application-pwas-all-you-need-to-know-about) à Click OK.

![Introduction of Razor View Engine in ASP.NET MVC](https://www.mindstick.com/mindstickarticle/24ffc38c-a3dd-4d12-be11-de4fc56950df/images/1ee74ef0-0fa3-4534-b24c-179e3821a073.png)

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

![Introduction of Razor View Engine in ASP.NET MVC](https://www.mindstick.com/mindstickarticle/24ffc38c-a3dd-4d12-be11-de4fc56950df/images/4cb8bd32-1a82-49b5-96ec-db9dd122c411.png)

When the application is ready add a view in [your project](https://www.mindstick.com/forum/156583/best-way-to-link-bootstrap-file-in-your-project) and select Razor as a View engine. Add it in your project.

![Introduction of Razor View Engine in ASP.NET MVC](https://www.mindstick.com/mindstickarticle/24ffc38c-a3dd-4d12-be11-de4fc56950df/images/e8f71601-c4ff-4ef8-b157-02a2cb019bc2.png)

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](https://www.mindstick.com/mindstickarticle/24ffc38c-a3dd-4d12-be11-de4fc56950df/images/f027c5c5-9ef3-4ea2-a708-b1c53765f2ad.png)

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

![Introduction of Razor View Engine in ASP.NET MVC](https://www.mindstick.com/mindstickarticle/24ffc38c-a3dd-4d12-be11-de4fc56950df/images/dfb28391-cdb3-47db-abf9-b50367d8f674.png)

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

---

Original Source: https://www.mindstick.com/articles/766/introduction-of-razor-view-engine-in-asp-dot-net-mvc

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.