ASP.NET MVC 3 Preview 1 - Razor View Engine
Posted by: Malcolm Sheridan ,
on 8/21/2010,
in
Category ASP.NET MVC
Abstract: The following article demonstrates how to use the new Razor view engine in ASP.NET MVC 3 Preview 1 release.
In the last couple of weeks, we've been able to see what the future holds for ASP.NET MVC with the release of ASP.NET MVC 3 Preview 1. This is the first public release of MVC 3 and there are some notable additions to the framework. The biggest in my opinion is the new Razor view engine. You've always had the ability to plug in thrid party view engines such as Spark, but now out of the box, Microsoft has introduced the new Razor view engine. What this engine aims to do is simplify the HTML and readability of your view. Another bonus is less code to write because of the new syntax. This article will go through how to setup a new project, and a future article will outline the new Razor syntax.
To see this in action, you'll need to download ASP.NET MVC 3 Preview 1. For beta software, I always recommend installing this on a virtual machine, just in case something goes wrong.
Open Visual Studio 2010 and go File, New Project. In this release you'll see there are two project templates for C#:
ASP.NET MVC 3 Web Application (ASPX)
ASP.NET MVC 3 Web Application (Razor)
When ASP.NET MVC 3 is released, there will only be one project template, and that will allow you up front to choose which view engine you would like to use. One important thing to note is Visual Basic does not support the Razor view engine yet, so that template is not available if you choose Visual Basic as your language. For this example I'm using C#. Another thing to note is this is a preview release, so Studio 2010 does not yet have colourization or intellisense for the Razor views. Also from time to time, Studio has crashed.
The first thing you'll notice is the folder structure is the same. You still have a Controller, Model and View folder. The thing that has changed is the view pages themselves. Their extension is cshtml, which is the extension for a razor file. If you open the Index.cshtml file Under Views/Home, you'll notice the page is small:
@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
<ahref="http://asp.net/mvc"
title="ASP.NET MVC Website">http://asp.net/mvc</a>.
</p>
The syntax above is Razor specific. To me this immediately makes the pages more readable because of the lack of <%: %> syntax, but I'll get into that in another article. Without getting into the syntax, the main code to look at is this:
@{
View.Title = "Home Page";
LayoutPage = "~/Views/Shared/_Layout.cshtml";
}
This code block instructs the view which layout page to use. The layout page is similar to a master page because it allows you to define a central template and also give you the ability to create multiple sections. Open up the _Layout.cshtml page under Views/Shared:
@inherits System.Web.Mvc.WebViewPage
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>@View.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="page">
<div id="header">
<div id="title">
<h1>My MVC Application</h1>
</div>
<div id="logindisplay">
@Html.Partial("_LogOnPartial")
</div>
<div id="menucontainer">
<ul id="menu">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
</ul>
</div>
</div>
<div id="main">
@RenderBody()
<div id="footer">
</div>
</div>
</div>
</body>
</html>
The main piece of code in @RenderBody(). This is where your view will be inserted when the page is compiled and viewed. You've still got access to all the Html helpers you're used to, such as @Html.ActionLink and @Html.Partial. You'll also notice the page is much easier to read than what the standard page looks like when using the ASPX view engine.
In the next article, I'll dig into the Razor syntax and show you some cool features of what's ahead for ASP.NET MVC 3.
The entire source code of this article can be downloaded over here
Give me a +1 if you think it was a good article. Thanks!