Published: 08 Aug 2011
By: Brian Mains

This article is going to help ASP.NET MVC developers translate their ASP.NET MVC view engine skills to Razor.

Contents [hide]

The ASP.NET Razor series

  • Part 1 This article is going to help ASP.NET MVC developers translate their ASP.NET MVC view engine skills to Razor.
  • Part 2 Brian Mains examines functions and helpers in ASP.NET MVC 2 with the Razor engine.
  • Introduction

    Razor has been quite the paradigm shift in application development. Razor provides a totally different UI style of application development than ASP.NET web forms or MVC developers are used to. Razor is more concise, less verbose, intelligent, and diverse in its UI offerings. This article is going to help ASP.NET MVC developers translate their ASP.NET MVC view engine skills to Razor.

    C# Syntax

    Razor does away with the <%= %> syntax of ASP.NET MVC view engine, replacing it with the at sign ("@"). For most tasks, believe it or not, this character is powerful enough to handle most, if not all, of everything that ASP.NET MVC provides to developers. Razor also combines other combinations to provide both inline and code block statements.

    In C#, Razor provides three types of inline or block statements. The first type of statement is illustrated in Listing 1.

    Listing 1: Inline Statement

    Listing 1 is an inline code statement between HTML markup, in which the Razor view engine can distinguish what is code and what is markup. In this example, the view engine properly interprets that object.Property is inline code, but <span></span> is markup. If the property of the object is the value "X", this yields the markup of <span>X</span> to the browser. Even though it seems odd, the Razor view engine is powerful enough to interpret what is actually code and what is markup successfully, which it does at design time. Listing 2 illustrates some successfully interpreted inline code segments.

    Listing 2: Sample Inline Statements

    Razor is intelligent to interpret object-oriented code because it can properly determine where the start and end of the code segment is (object-oriented code is pretty easy to figure out). It's also flexible enough to handle more complicated constructs like for and foreach, while and do, and if code blocks in a single inline statement prefaced with the "at" character.

    What won't work are multi-line code statements on a single line. While the engine is intelligent to handle complex statements such as if, switch, foreach, and other statements, multi-line code statements can't be handled inline because the engine can't interpret that the code statement should continue to the next statement (not necessarily on a new line). Razor will interpret the second statement as markup. Inline statements aren't also meant for generic statements in C#; generics throw off the parser because it interprets the generic type in C# as an HTML element. Lastly, static content with an @ in the content may be an issue too; these can be escaped by using the double at sign (@@).

    So what if we have a code segment that needs multiple lines or defines generics? We have two other block statements in the arsenal, which can appear as the following:

    Listing 3: Block statements

    The @ character with parentheses signify that all content within this structure is strictly server-side code. This means that generics easily fit within the parenthesis and are not interpreted as HTML. Multi-line server-side code blocks are denoted with curly braces. Curly braces allow for full server-side processing of the internal code.

    Surprisingly enough, even in server-side code blocks, we can directly output HTML, and even mix in client-side content, using a new syntax. In this scenario and a few others, a special <text> element signifies that the inner content is text to render to the client directly. So for instance, using the sample in Listing 3, the browser renders "X selected" when the someVal variable equals "X".

    Listing 4: Rendering Text to the Browser

    Interestingly enough, even inline content can be rendered directly inside of a <text> statement, fully illustrating the power of the Razor view engine. Take a look at an illustration of this in Listing 5.

    Listing 5: Rendering inline statements in a text block

    Lastly, Razor also supports server-side code comments within the view by using an asterisk with the "@" character. Comments are similar to code-blocks in that there is an ending designation because the Razor view engine could not possibly interpret what content is code commenting versus markup.

    Listing 6: Code Comments

    VB Syntax

    The Razor view engine also supports the use of the VB language. VB syntax looks very similar in concept, but a few differences exist between the C# and VB constructs. Let's start from the inline code statement, which looks identical to C#'s version in Listing 1.

    Listing 7: Inline Statement

    As you can see, Listing 7 looks identical; however, even inline code-statements must also conform to the language, which means that multiple lines must use the underline character as you would in any VB class. Also, VB doesn't natively use angle-brackets for generic type definitions, VB doesn't have as many issues with using generics in inline code-blocks as we saw above.

    Code blocks are supported in VB using a common, but different, syntax. The @Code / End Code segment defines a code-block, sticking with the traditional VB syntax of block definitions. The following is a code segment in VB.

    Listing 8: Code Blocks in VB

    The <text> element is also supported in VB as it is in C#; however, VB prefaces all templates the @ character also to denote a template within a code block. The following example taken from Listing 4 and 5 is formatted here to support VB syntax. Note that VB also supports adding an inline code statement inside of a template, using the @ character. VB can quickly become confusing with continuing @ characters, but it's not too bad once you get used to it.

    Listing 9: Markup and Inline Statements in Code Blocks


    This article is meant to give the ASP.NET MVC developer a good overview of the new syntax the Razor view engine provides. A lot of markup changes have happened, making the view engine function like some of the more popular third-party view engines on the market. Using an @ character, the view can render inline or code-blocks using various constructs.

    Razor supports both the C# and VB languages, with some differences between the two languages. Both language constructs are natively supported, similarly to how you would often write code for a C# of VB class.

    The ASP.NET Razor series

  • Part 1 This article is going to help ASP.NET MVC developers translate their ASP.NET MVC view engine skills to Razor.
  • Part 2 Brian Mains examines functions and helpers in ASP.NET MVC 2 with the Razor engine.
  • <<  Previous Article Continue reading and see our next or previous articles Next Article >>

    About Brian Mains

    Brian Mains is an application developer consultant with Computer Aid Inc. He formerly worked with the Department of Public Welfare. In both places of business, he developed both windows and web applications, small and large, using the latest .NET technologies. In addition, he had spent many hou...

    This author has published 73 articles on DotNetSlackers. View other articles or the complete profile here.

    Other articles in this category

    Code First Approach using Entity Framework 4.1, Inversion of Control, Unity Framework, Repository and Unit of Work Patterns, and MVC3 Razor View
    A detailed introduction about the code first approach using Entity Framework 4.1, Inversion of Contr...
    Exception Handling and .Net (A practical approach)
    Error Handling has always been crucial for an application in a number of ways. It may affect the exe...
    jQuery Mobile ListView
    In this article, we're going to look at what JQuery Mobile uses to represent lists, and how capable ...
    Book Review: SignalR: Real-time Application Development
    A book review of SignalR by Simone.
    JQuery Mobile Widgets Overview
    An overview of widgets in jQuery Mobile.

    You might also be interested in the following related blog posts

    An Extensive Examination of LINQ: Extension Methods, Implicitly Typed Variables, and Object Initializers read more
    The Oslo Developer Center: Letter from the Editors read more
    Why I Love F#: Lists - The Basics read more
    From/Select and Select/From in LINQ read more
    More Encryption Syntax Changes in SQL Server 2005 read more
    XML Data type in ADO.Net v2.0 - Part I read more

    Please login to rate or to leave a comment.