Razor view engine in ASP.NET 4.0

The default view engine used in MVC 2 is called Web Forms View Engine, because it uses the same ASPX/ASCX/MASTER files and syntax used in Web Forms. Razor was designed specifically as a view engine syntax. It has one main focus: code-focused templating for HTML generation.

To see the differences between two view engines two markups related to the ASP.NET MVC Music Store project (http://mvcmusicstore.codeplex.com/) are presented.

The next code lines show a Web Forms page

 

<%@ Page Language=”C#” MasterPageFile=”~/Views/Shared/Site.Master”

Inherits=”System.Web.Mvc.ViewPage<MvcMusicStore.ViewModels.StoreBrowseViewModel>”

%>

<asp:Content ID=”Content1” ContentPlaceHolderID=”TitleContent” runat=”server”>

Browse Albums

</asp:Content>

<asp:Content ID=”Content2” ContentPlaceHolderID=”MainContent” runat=”server”>

<div class=”genre”>

<h3><em><%: Model.Genre.Name %></em> Albums</h3>

<ul id=”album-list”>

<% foreach (var album in Model.Albums) { %>

<li>

<a href=”<%: Url.Action(“Details”, new { id = album.AlbumId }) %>”>

<img alt=”<%: album.Title %>” src=”<%: album.AlbumArtUrl %>” />

<span><%: album.Title %></span>

</a>

</li>

<% } %>

</ul>

</div>

</asp:Content>

 

The next code lines show how that same markup would be generated using Razor:

 

@model MvcMusicStore.Models.Genre

@{ViewBag.Title = “Browse Albums”;}

<div class=”genre”>

<h3><em>@Model.Name</em> Albums</h3>

<ul id=”album-list”>

@foreach (var album in Model.Albums)

{

<li>

<a href=”@Url.Action(”Details”, new { id = album.AlbumId })”>

<img alt=”@album.Title” src=”@album.AlbumArtUrl” />

<span>@album.Title</span>

</a>

</li>

}

</ul>

</div>

 

The core benefits provided by Razor are the following:

– The Razor syntax is easier to type, and easier to read. Razor doesn’t have the XML-like heavy syntax of the Web Forms view engine.

– Compact, expressive and fluid: Razor’s (ahem) sharp focus on templating for HTML generation yields a very minimalist syntax. You can see this in action when writing out some model properties in a loop in the second example. Razor also simplifies markup with an improvement on the Master Pages concept — called Layouts — that is both more flexible and requires less code.

– Not a new language: Razor is a syntax that lets you use your existing .NET coding skills in a template in a very intuitive way.

– Easy to learn: It’s easy to learn, because Razor is not a new language. You know HTML, you know .NET; just type HTML and hit the @ sign whenever you need to write some .NET code.

– Works with any text editor: Because Razor is so lightweight and HTML-focused, you’re free to use the editor of your choice

– IntelliSense: For things like viewing the properties your model object supports, Razor does offer nice IntelliSense within Visual Studio 2010.

– Unit testable: The Razor view engine’s core compilation engine has no dependencies on System.Web or ASP.NET whatsoever — it can be executed from unit tests, or even from the command line.