The ASP.NET Razor Syntax

Vinod Unny, Enterprise InfoTech

When Microsoft introduced the MVC pattern in ASP.NET MVC 1 for .NET 3.5, it was actually built as a wrapper around the existing ASP.NET WebForms engine and therefore also shared a lot of the technologies and syntax from it. ASP.NET MVC2 was a ground-up rewrite for .NET 4.0 that divided the ASP.NET stack into two different models — WebForms and MVC — but did not bring about any change in the syntax. It's with ASP.NET MVC3 that MVC finally gets its own specialized syntax which is optimized for working in a view of the model. This new syntax is named Razor and further segregates the usage of the correct syntax with the appropriate ASP.NET technology.

What is Razor?

It's not a new language. It's simply a new syntax of writing the same old C#/VB code mixed with HTML markup but offers many advantages for the coder. It uses much lesser number of keystrokes as compared to other declarative syntaxes like that in ASP.NET WebForms or PHP. It's also very easy to learn and comes with great IntelliSense when used within Visual Studio.

Razor makes typing in declarative code much more simpler. All one needs to do is use the “@” symbol to denote code elements and the system recognizes code fragments versus HTML fragments automatically after that. To understand the difference, let's look at similar code written in three different syntaxes.

ASP.NET Web Forms syntax

PHP Syntax

Razor Syntax

Notice the last code segment — it's not only much cleaner and simpler to type and read, but also makes a fairly logical transition between what should be code and what should be markup. In the only place where it could be ambiguous, the code was explicitly marked with an @ sign. See the place where the actual multiplication occurs — if this code had read “2 * @i” the page would have rendered the “2 *” as markup. But enclosing them inside an @, executes the code. There are no explicit code/markup boundaries between the braces ({ and }) and the lite item HTML elements ( < li> and < /li>).

This is because the Razor engine makes an educated assumption on the way the code is written and works as such. Let me give you one more example of how this works. When using Razor syntax, typing out the following line of code:

< li>The value of i is: @i.

will automatically trigger the intellisense at the period (.) showing all the properties and methods of the current object. If I do choose one and make it:

< li>The value of i is: @i.ToString()< /li>

Everything works as expected. However, if do cancel out and end it immediately after the period as:

< li>The value of i is: @i.< /li>

This is valid too. The @ symbol now renders the period itself in the markup instead of taking it as part of the object's dot-hierarchy. Taking this further, you can simply type in a line of markup like this:

My email address is: vinod@test.com

Without having to worry about whether the @ symbol will try to “execute” test.com as code.

Pages, layouts and helpers

Pages are the unit of work in Razor. An ASP.NET MVC Razor page has the extension .CSHTML or .VBHTML depending on the language of the code within the file. This is unlike the .ASPX and .ASPX.CS/.VB files used by the Web Forms View engine. Each page with the CSHTML/VBHTML extension is executed as a single unit and code and markup are intelligently deduced and rendered.

Layouts are to Razor what Master Pages are to Web forms. These allow you to quickly create modules of pages that let you render all pages within a site in a consistent format. Unlike Master Pages, however, Layout pages do not have a different file extension — they continue to use the .(CS/VB)HTML ones.

Layouts are simple enough to create and use. To create a layout page, simply create a normal Razor syntax page with code and markup as usual. In the area that you want the “child” pages content to show up, simply add a “@RenderBody” code piece. In the Child page, just mention the name of the layout page like this:

@{ Layout = “MyLayout.cshtml”; }

You can also do advanced things like have different sections being rendered by different pages etc.

Helpers are small code “fragments” that help you achieve a particular objective. For instance, when you have bound some data to your View page and want to display the data (coming in a later article), you can use the @DisplayFor() helper to show the data in a read-only state or @EditorFor() helper to automatically create a rich editor for the fields in the bound element. There are many helpers built-in, you can download many more, or write your own if you wish.

MVC3's Razor syntax makes creating work driven pages very easy for developers. The amount of code required is much lesser and makes for cleaner reading as well.