Razor Syntax Samples in ASP.NET MVC3 Razor

Home » MVC 3 » Razor » Razor Syntax Samples in ASP.NET MVC3 Razor

Razor Syntax Samples in ASP.NET MVC3 Razor

Posted by 20Fingers2Brains on Tags: MVC 3 , Razor

This article provides samples meant to illustrate the syntax for Razor by comparing a Razor example with the equivalent example using the Web Forms View Engine syntax.
Each example will highlight a specific Razor concept.

Implicit Code Expression

The code expressions are evaluated and written to the response. This is the typical way how you display value in a view.

Razor:

        <span>@Model.message</span>

Web Forms:

        <span><%: Model.message %></span>

Code expressions in Razor are always HTML encoded.

Explicit Code Expression

Razor:

        <span>Item@(item)</span>

Web Forms:

        <span>Item<%: item %></span>

Unencoded Code Expression

In some cases, you need to explicitly render some value that should not be HTML encoded. You can use the Html.Raw method to ensure that the value is not encoded.

Razor:

        <span>@Html.Raw(Model.message)</span>

Web Forms:

        <span><%: @Html.Raw(Model.message) %></span>

        <span><%= Model.message %></span>

Code Block

Unlike code expressions which are evaluated and outputted to the response, blocks of code are sections of code that are executed.
They are useful for declaring variables that you may need to use later.

Razor:

        @{
            int x = 123;
            string y = "Hello World";
        }

Web Forms:

        <%
            int x = 123;
            string y = "Hello World";
        %>

Combining Text and Markup

Razor:

        @foreach (var item in Items)
        {
            <span>@item</span>
        }

Web Forms:

        <% foreach (var item in Items){ %>
            <span><%: item %></span>
        <% } %>

Mixing Code and Plain Text

Razor looks for the beginning of a tag to determine when to transition from code to markup. Sometimes we need to dislpay plain text immediately after a code block.

Razor:

        @if (showMessage)
        {
            <text>This is plain text</text>
        }
        
        or 

        @if (showMessage)
        {
            @:This is plain text.
        }

Web Forms:

        <% if (showMessage) { %>
            This is plain text
        <% } %>

There are two ways of displaying plain text in Razor. The first case uses the special <text> tag. The tag itself is not written to the response, only its content. The second approach uses a special syntax for switching from code to plain text.

Escaping the Code Delimiter

We can display @ by encoding it using @@. Alternatively you always have option to use HTML encoding.

Razor:

        My Twitter handle is &#64;hacked

        or 

        My Twitter handle is @@hacked

WebForms:

        &lt;% expression %&gt; everyone.

Server Side Comment

Razor includes a nice syntax for commenting out a block of markup and code.

Razor:

        @*This is example for server side comment
        @if (showMessage)
        {
            <span>Hello world</span>
        }*@

Web Forms:

        <%--
        This is example for server side comment
        <% if (showMessage){ %>
            <span>Hello world</span>
        <% } %>
        --%>

Calling a Generic Method

This is really no different than an explicit code expression. Even so many get tripped up when trying to call a generic method. The confusion comes from the fact that the code to call a generic method includes angle brackets, and angle brackets cause razor to transition back to markup unless you wrap whole expression in parentheses.

Razor: