ASP.NET enables something that is called a view engine. A view engine is a pluggable module that allows new template syntax options. The standard view engine is the same as ASP.NET WebForms, with .aspx, .acx, .master files. Two other very popular view engines are Spark and Nhaml.
Microsoft now announces their own new view engine called Razor. With this new view engine they are aiming to make it easy to learn. Razor will be included in the final release of the upcoming ASP.NET MVC Framework 3.0.
Scott Guthrie is one of the people that have been working on this project. He has posted an article about this on his blog. Read it here.
Introduction
As told before a view engine brings new ways of writing code. But first let us consider this code written in standard ASP.NET markup:
<ul>
<% foreach(var item in list)
{ %>
<li><%= item.Title %></li>
<% } %>
</ul>
Now, lets have a look at how it is expressed with Razor syntax.
<ul> @foreach(var item in list){
<li>@item.Title</li>
}
</ul>
As seen it is a lot more cleaner and less confusing than standard markup. Isn’t it pretty?!
An ’@’ is simply added to tell the parser that it is C# code, or any other supported language that is being used, like VB. A statement like the foreach statement shown here may even contain both HTML markup and code. The parser will resolve each construct one by one. Code and markup is separated. So it is yes indeed very clean and also very easy to write.
Multiple statements can be created by enclosing the statements with brackets:
@{ string first = “foo”;
string full = first + “bar”; }
<b>@full</b>
Razor code reside inline in a XHTML-file with the extension .cshtml. The syntax eliminates most of the common needs of writing a lot of code-behind.
<html>
<head>
<title>Message</title>
@{
link = “http://www.robertsundstrom.eu/”;
text = “Go to Robert Sundström’s Weblog”;
}
</head>
<body>
<h1>Message</h1>
<p>
<a href=”@link”>@text</a>
</p>
</body>
</html>
Layout templates
You can easily do layout templating with Razor. This is a file called SiteLayout.cshtml which contains our layout. The @RenderSection method is defining what should be replaced on each page. The name of the section to insert followed by a named parameter called “optional”. If it is set to true errors are ignored if no matching section is found.
<!DOCTYPE html>
<html>
<head>
<title>My site</title>
</head>
<body>
<div id=”header”>
<a href=”/Home”>Home</a>
<a href=”/About”>About</a>
</div>
<div id=”left-menu”>
@RenderSection(“menu”, optional: true)
</div>
<div id=”body”>
@RenderBody()
</div>
<div id=”bottom”>
@RenderSection(“bottom”, optional: true)
</div>
</body>
</html>
The content is contained within the main content files. One may look like the following one.
This is About.cshtml:
<h2>About</h2>
<p>
Some stuff about this page.
</p>
<p>
The current date and time: @DateTime.Now
</p>
@section menu {
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
}
@section bottom {
Copyright (c) 2010, Robert Sundström.
}
This will be merged with the layout template at runtime when the site is requested. Notice that the content of the “body” div-element is not wrapped inside a section in this example. This will be inferred by the @RenderBody method.
HTML helpers
ASP.NET has HTML helpers that come with the full development environment. HTML helpers are re-usable modules of code that cleanly encapsulate HTML into libraries that can be re-used across different projects and sites.
The HtmlHelper class in ASP.NET MVC is a container of helpers for generating Web UI. The HtmlHelper and its members can also be accessed through the Html property in the View class.
<%= Html.CheckBox("OptionName") %>
These helpers are of course statically declared in a library. It has its disadvantages.
In Razor you can define your own HTML helpers using a declarative and more dynamic approach.
@helper ProductListing(List<Product> products) {
<ul id=”products”>
@foreach(var p in products) {
<li>@p.Name (@p.Price dollars)</li>
}
</ul>
}
The helpers are declared in .cshtml files that are placed in the “Views\Helpers” directory. Once they are placed there then they are ready to be used in your project.
<body>
<h1>My products</h1>
<p>
Here are my products.
</p>
<div>
@ProductListing(products)
</div>
</body>
Tools
Razor is going to be a part of ASP.NET MVC Framework 3.0 and Visual Studio 2010 support is on the way to be released in a preview.
Microsoft has also created a new tool called WebMatrix that is targeted primarily for hobbyists and beginners. It is a task-based development environment that does not require much knowledge from the user to get started with. ASP.NET MVC and Razor will be the highlights in WebMatrix.
WebMatrix is currently in the beta stage and obtainable through the Web Platform Installer 3 (Web PI), also a beta.
Getting it
Download the Web Platform Installer 3 to get WebMatrix beta.
Meanwhile, don’t forget to checkout Scott Guthrie’s blog for more information.