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.

image

And the generated markup code:

ASPX:

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

Razor:

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

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:

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

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

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s

%d bloggers like this: