How Razor Engine Works With Views in MVC 4

All of us know what views are and what their purpose are in ASP.NET MVC 4. Views in an analogy are similar to web forms in ASP.NET that are used for displaying the data or the HTML content on the user's screen.

The User interacts with our application using views. In MVC 4, views can be rendered using the following two view engines:

• Razor View Engine: That was introduced in MVC 3 and enhanced in MVC 4.
• Aspx view engine/WebForms View Engine: That basically supports aspx expressions and earlier versions of MVC like MVC 2.

For our demo since we are using MVC 4, the view engine that we are using is Razor.

So let's start with an example. I'm creating a new VS2010 MVC 4 project named ViewsInDepth. Select the Project Template as “Basic”. I'm not doing any unit testing here so I'm not selecting the unit testing checkbox. Once the project/solution is ready, add a new controller with the name “Home” and select the scaffolding option as Empty.

Add a new Model class with the name “Employee”. Here is the code snippet for it.

namespace ViewsInDepth.Models
{
    public class Employee
    {
        public int EID { get; set; }

        public string EName { get; set; }

        public string EAdd { get; set; }

        public string EDesignation { get; set; }
    }
}

Now try to add the following code inside the Home Controller.

public class HomeController : Controller
    {
        List<Employee> lstEmployees = new List<Employee>()
        {
            new Employee(){EID=1,EName="Vishal Gilbile",EAdd="Andheri",EDesignation="Sr.Software Developer"},
            new Employee(){EID=2,EName="Rahul Bandekar",EAdd="Santacruz",EDesignation="Accountant"},
            new Employee(){EID=3,EName="Neetu Agarwal", EAdd="Dadar",EDesignation="Tech Lead"},
            new Employee(){EID=4,EName="Lincy Pullan",EAdd="Worli",EDesignation="DBA"},
            new Employee(){EID=5,EName="Suvarna Bhosle",EAdd="Andheri",EDesignation="Accountant"},
            new Employee(){EID=6,EName="Paresh Rahate",EAdd="Thane",EDesignation="Project Manager"},
            new Employee(){EID=7,EName="Ollin D'Souza",EAdd="Mumbra",EDesignation="Software Developer"}
        };


        public ActionResult Index()
        {
            return View(lstEmployees);
        }

    }

Before moving further just compile the project once so that you can find the class inside the strongly typed view name dropdownlist when you try to add a view. Now try to add a view by right-clicking on the Index function. The view will be a strongly typed view since we are ing the list of Employees to the view. And also check the checkbox to use a layout or a master page. Here is the snapshot for it.



Here is the view code.

@model IEnumerable<ViewsInDepth.Models.Employee>
@{
    ViewBag.Title = "Index";
}
<h2>
    Index</h2>
<div>
    <table>
        <thead>
            <tr>
                <td>
                    EID
                </td>
                <td>
                    Name
                </td>
                <td>
                    Address
                </td>
                <td>
                    Designation
                </td>
            </tr>
        </thead>
        <tbody>
            @foreach (var emp in Model)
            {
                <tr>
                    <td>
                        @emp.EID
                    </td>
                    <td>
                        @emp.EName
                    </td>
                    <td>
                        @emp.EAdd
                    </td>
                    <td>
                        @emp.EDesignation
                    </td>
                </tr>
            }
        </tbody>
    </table>
</div>

Now whenever you run your application and try to access a view then what the Razor View Engine does is, it converts the View code into a C# class file. It will not convert the view to a C# class until and unless you try to access the view. The first request to the view will ask the Razor View Engine to convert it into C# class file. The advantage of doing that is it provides a faster response to the user since the files are already compiled and just need to be executed. To find a copy of the razor generated class file just press “%temp%” in the run command and click on the “Temporary ASP.NET Files” folder then click on the “root” folder view then check/view the files/folders according to the system time. Let's say you ran your application at 5 0'clock then there will a folder with an encrypted name created at 5 0'clock inside the root folder. Here is a snapshot of that.



The one highlighted is my application folder that the razor engine created. Finding these files are a little difficult because they have encrypted names but you can find them using the strategy that we adopted that is by using system time. The advantage of compiling the view files into C# classes is that the access to the page/view is much faster because a compile file needs to be processed and the other benefit is that you are able to incorporate the C# code inside the View.

Here is the compiled file code. Again I'm saying you need to search a little to find the file because they have encrypted names. Here my file name is “App_Web_cp4ukq2j.0.cs”

#pragma checksum "D:\Vishal\Mvc\ViewsInDepth\ViewsInDepth\Views\Home\Index.cshtml" "{ff1816ec-aa5e-4d10-87f7-6f4963833460}" "D0F32B1AF3DA597F11B766D5A7FB28D9C575671A"
//------------------------------------------------------------------------------
// <auto-generated>
//     This code was generated by a tool.
//     Runtime Version:4.0.30319.18408
//
//     Changes to this file may cause incorrect behavior and will be lost if
//     the code is regenerated.
// </auto-generated>
//------------------------------------------------------------------------------

namespace ASP
{
    using System;
    using System.Collections.Generic;
    using System.IO;
    using System.Linq;
    using System.Net;
    using System.Web;
    using System.Web.Helpers;
    using System.Web.Security;
    using System.Web.UI;
    using System.Web.WebPages;
    using System.Web.Mvc;
    using System.Web.Mvc.Ajax;
    using System.Web.Mvc.Html;
    using System.Web.Optimization;
    using System.Web.Routing;


    public class _Page_Views_Home_Index_cshtml : System.Web.Mvc.WebViewPage<IEnumerable<ViewsInDepth.Models.Employee>>
    {

        #line hidden

        public _Page_Views_Home_Index_cshtml()
        {
        }

        protected ASP.global_asax ApplicationInstance
        {
            get
            {
                return ((ASP.global_asax)(Context.ApplicationInstance));
            }
        }

        public override void Execute()
        {

        #line 2 "D:\Vishal\Mvc\ViewsInDepth\ViewsInDepth\Views\Home\Index.cshtml"

            ViewBag.Title = "Index";


        #line default
        #line hidden
            WriteLiteral(@"
                <h2>Index</h2>
                <div>
                    <table>
                        <thead>
                            <tr>
                                <td>
                                    EID
                                </td>
                                <td>
                                    Name
                                </td>
                                <td>
                                    Designation
                                </td>
                            </tr>
                    </thead>
                <tbody>");


            #line 23 "D:\Vishal\Mvc\ViewsInDepth\ViewsInDepth\Views\Home\Index.cshtml"


            #line default
            #line hidden

            #line 23 "D:\Vishal\Mvc\ViewsInDepth\ViewsInDepth\Views\Home\Index.cshtml"
            foreach (var emp in Model)
            {


            #line default
            #line hidden
                WriteLiteral(@"                <tr>
                    <td>
                        emp.EID
                    </td>
                    <td>
                        emp.Name
                    </td>
                    <td>
                        emp.Designation
                    </td>
                </tr>
            ");


            #line 36 "D:\Vishal\Mvc\ViewsInDepth\ViewsInDepth\Views\Home\Index.cshtml"
            }


        #line default
        #line hidden
            WriteLiteral("        </tbody>\r\n    </table>\r\n</div>\r\n");

        }
    }
}

Notes 

1. Our class is inherited from System.Web.Mvc.WebViewPage<IEnumerable<ViewsInDepth.Models.Employee>>. Here IEnumerable<ViewsInDepth.Models.Employee> is there because we created a strongly typed view of IEnumerable<ViewsInDepth.Models.Employee>. If your view is strongly typed with some other types like int or string or any other custom class then that class will appear over here. That means the WebViewPage class is generic in nature.
2. From the Excecute method we can see that the “WriteLiteral” function is used for writing HTML contents and the “Write” function is used for writing C# code. Both of these functions write the content to the TextWriter Object that in turn is used by the IView that is an interface for creation of the view.
3. Also check the name of the C# class. It provides a full description of the view path.
4. Also your View @ code is just written as C# code.