ASP.NET MVC 3: Razor View Engine

One of the reasons why I was (or am) a fan of ASP.NET MVC over ASP.NET is the fact that it feels more like a web technology. The guys of Microsoft did a great job making a platform (ASP.NET) to easily make websites, with viewstate and all the things that we know from ASP.NET:

  • RAD development
  • rich controls
  • familiar model when you are coming from a windows form background

With the arrival of MVC, lots of these concepts have been removed and replaced with new advantages like

  • full control over the rendered HTML
  • Test Driven Development
  • SEO
  • No ViewState

In the release of ASP.NET MVC 3, the did an extra step to make the development of views a lot easier and faster. It’s a minor change and once you get the hang of, it makes a big difference. In ASP.NET (MVC 1 or 2) or let’s say, HTML you always have to work with open and close tags. In the case you want to work with data in your markup it gets worse, you have to type <%= or <%#, … With this new view engine, this code has been replaced with a simple @

If we would compare, for example, the code that Scott Guthrie used in his NerdDinner (with MVC 1 or MVC 2) tutorial and compare this with the razor code this would be the difference:

When I create a View to list the dinners, I can now choose between a ASPX view or  a Razor view engine.


And the generated markup code:


<% foreach (var item in Model) { %>
                <%: Html.ActionLink(“Edit”, “Edit”, new { id=item.DinnerID }) %> |
                <%: Html.ActionLink(“Details”, “Details”, new { id=item.DinnerID })%> |
                <%: Html.ActionLink(“Delete”, “Delete”, new { id=item.DinnerID })%>
                <%: item.DinnerID %>
                <%: item.Description %>
                <%: item.HostedBy %>
                <%: item.Location %>
    <% } %>


@foreach (var item in Model) {
            @Html.ActionLink(“Edit”, “Edit”, new { id=item.DinnerID }) |
            @Html.ActionLink(“Details”, “Details”, new { id=item.DinnerID }) |
            @Html.ActionLink(“Delete”, “Delete”, new { id=item.DinnerID })

Just compare the yellow tags and you’ll see why I love this syntax. If we take a look at the details page of a dinner you will notice following specific tags:

Tag referencing to the model object that is used on the page

@model NerdDinnerv3.Models.Dinner

Page settings. Because we don’t have a <head> on our page, this is the place where we will set the title and also reference to a layout or masterpage:

          ViewBag.Title = “Details”;
          Layout = “~/Views/Shared/_Layout.cshtml”;

And of course the view itself. Mind that I’m typing the ‘@’ character twice, to escape the razor syntax:

    <strong>When:</strong> @Model.EventDate.ToShortDateString()
    <strong> @@ </strong> @Model.EventDate.ToShortTimeString()

So, I think you have an understanding of the “razor” view engine, take a minute to play with it, it’s really easy.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: