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
This article has been editorially reviewed by Suprotim Agarwal.
C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.
We at DotNetCurry are very excited to announce The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).
Organized around concepts, this Book aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on the latest .NET Core 3.0, .NET Standard and C# 8.0 (final release) too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.
Click here to Explore the Table of Contents or Download Sample Chapters!
Was this article worth reading? Share it with fellow developers too. Thanks!
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