The Razor View Engine
Yesterday was the second MVCConf virtual conference. Since version 3 of the ASP.NET MVC framework was released last month, it was one of the more popular topics. Perhaps one of the most obvious additions to the framework is the Razor view engine.
One of the main design ideas behind the ASP.NET MVC framework is extensibility. To demonstrate this, you can have Visual Studio start a minimal ASP.NET MVC project that includes almost no code as opposed to the default project that includes some boilerplate controllers and such. However, you can also supply you own ORM, IoC container and testing framework. Another way to extend ASP.NET MVC is with view engines. The view engine that has been provided by default in the first two versions has been an adaption of WebForms using the .aspx extension. While version 3 also supports this view engine, a new view called Razor is the default.
Interestingly enough, Razor was not developed for ASP.NET MVC. It was developed for the ASP.NET WebMatrix (blog post on that soon). In fact, the engine was designed to have no dependencies on ASP.NET at all. It can be used in other project types as well.
The idea behind Razor is to permit code and markup to mix easier. The .aspx view engine requires explicit tags to mark the begin and end of code and markup. The Razor view engine tries to reduce the need for these extraneous tags and have the difference determined by the engine. Here is an example of Razor:
@{
var names = new string[] {"John", "Joseph", "James", "Jake"};
<ul>
@foreach(var name in names) {
<li>@name</li>
}
</ul>
}
There is a lot less markup needed to show where code blocks begin and end. In fact, tags are not used in that manner at all in Razor. The ‘@’ character is the beginning of a code block and Razor knows (most of the time) where the code block ends and the markup begins. The above code will render an unordered list with one list item for each of the items in the array.
We can also put comments in Razor views. To comment code, place the comment in between ‘@*’ and ‘*@’. In order to render a literal ‘@’, escape it with an ‘@’ like ‘@@’.
It is worth noting that the ‘@’ character auto HTML-encodes the content it renders by default which is something you had to do explicitly in .aspx views. If you need to disable this for content, use the @Html.Raw helper. Usually you will want to use this to render HTML passed into the page through the model. Otherwise, you will see the tags as text in the page.
An issue can come up when using Razor to help build filenames. Take the following code:
@ {
var profile = “myProfile”;
<a href=”@profile.html”>Profile Link</a>
}
What we are trying to do is render the name of the profile and append the ‘.html’ extension. This code will cause an error because it will think that .html is a property on @profile. We will get an error because strings have no property ‘html’. To fix this problem:
<a href=”@(profile).html”>Profile Link</a>
Surround the name of the object in parentheses.
That’s all for now. I’ll post more about Razor and how to use it in WebMatrix along with more of what I learned about MVC 3 during MVCConf later.
