Updated on Kisan Patel
ASP.NET MVC 3 introduces the new view engine Razor, which was conceived to simplify the current syntax used in ASP.NET web pages. In this lab you will learn how to create Razor views inside an MVC solution. In the beginning of this Lab you will first get familiar with Razor syntax and its features: general rules, code blocks, inline HTML and layout pages. Once you have learned the basics, in Exercise 2 you will add Razor views in the MVC Music Store solution to provide the same functionality you have in ASP.NET views, but with a clearer and reduced code. At the end of this lab, in Exercise 3, you will learn how to create and consume third party Razor Helpers.
Razor Helpers
ASP.NET helpers are components that can be accessed by single lines of Razor code. You can build your own helper using Razor syntax, or use built-in ASP.NET helpers. Below is a short description of some useful Razor helpers:
Razor was designed specifically as a view engine syntax. It has one main focus: code-focused templating for HTML generation. Here’s how that same markup would be generated using Razor:
@model MvcMusicStore.Models.Genre
@{ViewBag.Title = "Browse Albums";}
<div class="genre">
<h3><em>@ModeI.Name</em>Albums</h3>
<ul id="album-list">
@foreach (var album in Model.Albums)
{
<Ii>
<a href="@Url.Action("Details", new {id = album.Albumld })">
<img alt="@album.Title" src="@album.AlbumArtUrl" />
<span>@album.Title</span>
</a>
</Ii>
}
</ul>
</div>
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.
We’ve talked about how working with the Razor syntax feels different. To put this in more quantifiable terms, let’s look at the team’s design goals in creating the Razor syntax: