It’s pretty sharp…don’t cut yourself!

Microsoft just released the first preview of the ASP.Net MVC 3 web development framework.  This is an early evaluation-only-don’t-dream-of-putting-this-into-production release of features planned for the 3.0 release of ASP.Net MVC.

I was anxious to see this, primarily because it includes the new Razor View Engine.  While I find ASP.Net MVC to be a superior web development framework to WebForms (WebForms guys, you can start your flame-throwers now), I was certainly not happy to see a resurrection of the “Angle-bracket hell” we all experienced when using “classic” asp.  It may be shallow to say this, but I find this kind of code only marginally better than the crap ViewState spits out.  The difference is I as a developer don’t need to read the ViewState info, but I do have to understand all those angle brackets.   Worse, with MVC2, Microsoft added a new syntax – <%: – which (while a welcome improvement in many ways) meant that I had to stop and think about whether to use <%, <%= or <%: which hurts my poor little brain.

The razor syntax appears to solve all these issues, and is far more readable and elegant.  Let’s compare, shall we?  The code below is from a scaffolded MVC2 page:

<% foreach (var item in Model) { %>
		<tr>
			<td style="width:175px">
				<%: Html.ActionLink("Edit", "Edit",
                                    new { id=item.ID }) %> |
				<%: Html.ActionLink("Details",
                                    "Details", new { id=item.ID })%> |
				<%: Html.ActionLink("Delete",
                                    "Delete", new { id=item.ID })%>
			</td>
			<td>
				<%: item.Team.TeamName  %>
			</td>
			<td>
				<%: item.Contact.ContactName %>
			</td>
			<td>
				<%: item.Contact.ManagerID %>
			</td>
			<td style="width: 75px">
				<%: item.Contact.Pager %>
			</td>
			<td>
				<%: String.Format("{0:g}",
                                    item.oncallDate) %>
			</td>
			<td>
				<%: String.Format("{0:g}",
                                    item.oncallEnds) %>
			</td>
		</tr>
	<% } %>

See what I mean?  The code is intermixed with the HTML and this is inherently difficult to read.  Now, let’s look at the razor version of this:

@inherits System.Web.Mvc.WebViewPage

@{
    View.Title = "Home Page";
    LayoutPage = "~/Views/Shared/_Layout.cshtml";
}

<h2>@View.Message</h2>
<p>
    To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc"
    title="ASP.NET MVC Website">http://asp.net/mvc</a>.
    @View.Moretext
</p>

Now that’s more like it!  Razor’s @ syntax makes it much simpler to embed items from the View or Model into the HTML without the need for all those messy angle brackets.  There are some other nice additions.  Note the @View.Moretext line above.  This is the equivalent to ViewData[“Moretext”], but is more succinct.  While there is some asymmetry between the view and the controller – in the controller you use ViewModel.Moretext (because View is already a method in the controller), this is still far easier to type then the hash table ViewData version of things.  Phil Haack – PM for the ASP.Net MVC Team – is open to suggestions on how to name these items consistently, so let him know your thoughts.

Overall, Razor is a big improvement.  I’ll be keeping an eye on it as the preview releases become available.  You should too!