View Engine in ASP.NET MVC

View Engine renders the view into html form to the browser. By default, Asp.net MVC comes with two flavors Form (ASPX) and Razor View Engine. There are many types of view engines.

1) ASPX
2) Razor
3) Spark
4) NHaml
5) NDJango
6) Hasic
7) Brail

These engine works between your view and browser to provide HTML to your browser. ASPX View Engine is the default view engine for the ASP.NET MVC that comes with ASP.NET MVC from the start (MVC 1.0) but Razor View Engine is introduced with MVC3 or latter version.

  • In Razor View Engine we use Layouts and in ASPX View Engine we use masterPages.
  • In Razor View Engine we use PartialPage and in ASPX View Engine we use WebUserControls.
  • Razor View Engine has .cshtml (with C#) and .vbhtml (with VB) extension for views, Layout and Partial views but in ASPX it uses same extension as in web application.
  • Razor View Engine supports Test Driven Development but ASPX engine does not.
  • Razor Engine prevents Cross-Site Scripting Attacks.

Razor Syntax in C#

Razor view engine uses @ character to start inline expressions, single statement blocks, and multi-statement blocks.

Example:

<html>
<body style="font-family:Arial; font-size:medium; color:darkblue">
    <h2>Vew Engin Demo</h2>
    <!-- Single statement blocks  -->
    @{ var RollNo = 7; }
    @{ var StudentName = "Raj Parihar";
    <!-- Inline expressions -->
    <p>The student RollNo is:= @RollNo </p>
    <p>Name := @StudentName</p>
    <!-- Multi-statement block -->
    @{
          var greeting = "Welcome to our site! Mr. " + @StudentName;
          var Department = "Your department is IT";
          var myMessage = greeting + " " + Department;
    }
    <p>The greeting is: @myMessage</p>


Execute the above program you will get the following output.

view engine demo

Foreach loop

Example:

@if (Model != null)  
   {  
       foreach (var item in Model)  
       {  
        <ul>  
           <li>  
               @Html.DisplayFor(modelItem => item.Name)  
           </li>  
           <li>  
               @Html.DisplayFor(modelItem => item.Address)  
           </li>  
           <li>  
               @Html.DisplayFor(modelItem => item.City)  
               <br />  
           </li>   
         </ul>  
       }  
   }

ASPX view

This is the default view engine for MVC 1 and MVC 2. ASPX View Engine is also known as Web Form View Engine and its syntax is for rendering server-side contents are as “<%= %>” or “<%: %>”

Code Block in ASPX view engine

<%
    string strVariable = "Hello World !!";
    bool boolVar = true;
    string[] arrVar = new string[] { "A", "B", "C"};
%>


Looping statement in ASPX view engine

<ul>
    <%foreach (var item in ListItem)
        {  %>
     <li><%=item%></li>
           <%}
       %>
</ul>


Example:
Let take an example that have hyperlink and textbox control in aspx view. Create a view and update the code as follows.

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<!DOCTYPE html>
<html>
<head runat="server">
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div>
        <p>
             To learn more MVC, click the following link:
             <%= Html.ActionLink("About this Website", "Home" ) %>
             <br/><br/>
             <label for=”FirstName”>First Name:</label>
             <%= Html.TextBox("FirstName") %>
             <%= Html.ValidationMessage("FirstName", "*") %>
         </p>
    </div>
</body>
</html>


Output:

aspx view

Difference between ASPX and Razor View Engine

ASPX View EngineRAZOR View Engine
System.Web.Mvc.WebFormViewEngine is the namespace for ASPX View Engine.System.Web.Razor is the namespace for ASPX view Engine.
Default view engine from the beginning (MVC 1.0)Introduced in ASP.NET MVC v3
.aspx is file extension for web page and .ascx is for user controls.cshtml (with C#) and .vbhtml (with VB) extension for views, Layout and Partial views
No support for TDD (Test Driven Development).Supports TDD (Test Driven Development).
ASPX View Engine is comparatively fast.It is slow as compared to ASPX View Engine.
No support for Cross-Site Scripting attacks.Supports for Cross-Site Scripting attacks.
▲