ASP.NET MVC 3 Preview 1 – Razor Syntax
Posted by: Malcolm Sheridan ,
on 8/31/2010,
in
Category ASP.NET MVC
Abstract: The following article demonstrates how to use the new syntax in the Razor view engine in ASP.NET MVC 3 Preview 1.
Recently I posted an article on the new view engine in ASP.NET MVC 3 Preview 1 - Razor View Engine. The response from that article was good, so I'm continuing on with the new features in the Razor view engine. This article will focus on the Razor syntax. To see this in action, you'll need to download ASP.NET MVC 3 Preview 1 which can be found here. For beta software, I always recommend installing this on a virtual machine, just in case something goes wrong.
Open studio 2010 and create a new ASP.NET MVC 3 Web Application (Razor) project. Let's get into the Razor syntax. Everything in Razor begins with the @ symbol. So to print out the date and time, do this:
The date and time is @DateTime.Now
The @ symbol relaces both of the following server syntax:
<%: %>
<% %>
Immediately you can see the amount of code that is being reduced. One character is replacing many. Everything in the Razor view engine is auto HTML encoded by default, so we could do this safely if we wanted to:
@("<script>alert('Hello world!');</script>")
This is only for demonstration purposes. Running the script now produces the following result:
If you wanted the syntax to not be auto HTML encoded, then the easiest way is to wrap it in an MvcHtmlString object. This tells the framework you know what you're doing, so let me control this output of this totally. The above code can be rewritten like this:
@MvcHtmlString.Create("<script>alert('Hello world');</script>")
The result produces the JavaScript dialog:
Doing a for loop is simple in Razor, and you'll see there's less typing than in the ASPX view engine:
@for(int i = 0;i < 10;i++) {
<li>@i</li>
}
To do the exact same in the ASPX view engine:
<% for(int i = 0;i < 10;i++) { %>
<%: @i %>
<% } %>
A lot less code for the same result. Another newbie in the syntax is @View. This gives the view access to the ViewData object, and also the new ViewModel object. ViewModel is a dynamic object that touches the same data dictionary as ViewData, so both of the following lines of code do the same thing:
ViewModel.Message = "Welcome to ASP.NET MVC!";
ViewData["Message"] = "Welcome to ASP.NET MVC!";
To access the Message value from the view, use the @View object:
@View.Message
The ViewModel is not limited to simple types such as strings, you can assign collections to it as well:
ViewModel.Numbers = Enumerable.Range(0, 10);
And to access the numbers use a foreach loop:
@foreach(var number in View.Numbers) {
<li>@number</li>
}
But ViewModel doesn't just stop there. You can also use a dynamic object like this:
dynamic car = new ExpandoObject();
car.Wheels = 4;
car.Make = "Chevrolet";
car.Model = "Camaro";
ViewModel.Car = car;
In the code above I've create a new dynamic object to store info about a car. To access it I can use the following code:
The make is @View.Car.Make and the model is @View.Car.Model
Nice and simple!
One last thing to show you is a new piece of syntax called RenderSection. This gives you the ability to create multiple sections in your layout page, thus allowing it to act like a master page. To create a new section, open the _Layout.cshtml page and do this:
@RenderSection("footer")
To use that section in the view, add some code to fill it:
@section footer {
<b>Footer here</b>
}
But what if I didn't want a section on a particular view? If you removed the above code and ran the site, you'd get this error:
You're getting that error because the section is mandatory. To make it optional, add a second parameter which is a new .Net 4.0 optional parameter:
@RenderSection("footer", optional: true)
That's basically it for the Razor syntax. In the next article I'll show you a cool trick to getting the most out of the Razor view engine.
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