ASP.NET MVC 3 Preview 1 - Razor View Engine

Posted by: Malcolm Sheridan , on 8/21/2010, in Category ASP.NET MVC
Views: 58587
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.
Update: You may also want to check out ASP.NET MVC 3 Preview 1 – 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)
 
Image_2
 
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.
 
Image_1
 
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 a +1 to this article if you think it was well written. Thanks!
Recommended Articles
Malcolm Sheridan is a Microsoft awarded MVP in ASP.NET, a Telerik Insider and a regular presenter at conferences and user groups throughout Australia and New Zealand. Being an ASP.NET guy, his focus is on web technologies and has been for the past 10 years. He loves working with ASP.NET MVC these days and also loves getting his hands dirty with jQuery and JavaScript. He also writes technical articles on ASP.NET for SitePoint and other various websites. Follow him on twitter @malcolmsheridan


Page copy protected against web site content infringement by Copyscape


User Feedback
Comment posted by Jorris Griff on Friday, August 27, 2010 5:26 AM
Sweet.Malcolm Sheridan I love your articles. Do you have anything on dynamic props in view data?
Comment posted by Malcolm Sheridan on Friday, August 27, 2010 9:18 PM
@Jorris
Glad you like them!  I can think of something to write if you like :)
Comment posted by Jorris Griff on Saturday, August 28, 2010 6:28 AM
yes that would be sweet. how to access view data using the new mvc3 dynamic properties?
Comment posted by Malcolm Sheridan on Sunday, August 29, 2010 7:08 AM
@Jorris
Done.  Keep an eye out for it soon.
Comment posted by Bart Czernicki on Thursday, October 14, 2010 6:05 PM
What a COMPLETE waste of my time coming here...article after article on this site is nothing but short articles that show no information and game the SEO for search engine ranks.
Comment posted by Noam Y on Monday, October 18, 2010 4:57 AM
Bart you seem lost. This article rocks!
Comment posted by Bart Czernicki on Tuesday, October 26, 2010 9:19 PM
@Noam Y

I seem lost?  DotnetCurry is nothing more than a SEO grab of .net terms.  This article does not explain anything.  It's just a nice title to grab links from search engines.
Comment posted by SEO Google BOT on Sunday, January 2, 2011 5:23 AM
@Bart JEW - as a google bot i have realized that you are wrong.
Comment posted by 99 on Thursday, April 26, 2012 5:38 AM
6
Comment posted by a on Tuesday, October 16, 2012 2:48 AM
a
Comment posted by Garry Winogrand on Thursday, June 13, 2013 5:00 AM

This is very informative article. Thanks for sharing with us. Below links a very helpful to complite my task.

http://www.mindstick.com/Articles/e56c9dca-f331-455d-810d-fdeac1e14a6c/?MVC%20Application%20using%20Razor%20View

http://www.asp.net/mvc/videos/mvc-3/mvc-3-razor-view-engine

Post your comment
Name:  
E-mail: (Will not be displayed)
Comment:
Insert Cancel