The Razor Syntax

The Razor syntax refers to how you write code mixed inside your view markup. Remember that this code is meant to run on the server. The Razor syntax strives to make it easy to embed code throughout your page. If you have done this in earlier versions of ASP, you will recall things like brackets and percent signs (<% ... %>) to indicate code start and end blocks. These statements were painful to write and hard to read. Razor makes it much easier.

Razor uses the at sign, @, to indicate an inline expression of code. Typically, this is all you need to tell the engine that you intend it to process some code on your page. If you have just a single line of code, you can embed it right within your HTML. The following markup with Razor shows an example. Here you can see markup (the div and p tags) combined with code as written using the @ character. This code simply uses the server-side object, DataTime, to get the current year and add it to the output, as in © 2015 – VS Unleashed.

Click here to view code image

<div class="float-left">
  <p>&copy; @DateTime.Now.Year – VS Unleashed</p>
</div>

If you have code that runs across multiple lines, you can use brackets {}. (VB developers can go without the brackets and simply use things like End If and Next.) You can, of course, still mix markup with this code. Consider the following markup and code from the default template partial view, _LoginPartial.cshtml.

Click here to view code image

@using System.Security.Principal

@if (User.Identity.IsAuthenticated)
{
  using (Html.BeginForm("LogOff", "Account", FormMethod.Post,
    new { id="logoutForm", @class = "navbar-right" }))
  {
    @Html.AntiForgeryToken()
    <ul class="nav navbar-nav navbar-right">
      <li>
        @Html.ActionLink("Hello " + User.Identity.GetUserName() +
          "!", "Manage", "Account", routeValues: null,
          htmlAttributes: new { title = "Manage" })
      </li>
      <li><a href="javascript:document.getElementById('logoutForm').submit()">
        Log off</a></li>
    </ul>
  }
}
else
{
  <ul class="nav navbar-nav navbar-right">
    <li>@Html.ActionLink("Register", "Register", "Account", routeValues: null,
     htmlAttributes: new { id="registerLink" })</li>
    <li>@Html.ActionLink("Log in", "Login", "Account", routeValues: null,
     htmlAttributes: new { id="loginLink" })</li>
  </ul>
}

There is a lot going on in this partial view. However, notice that the page starts out with code that uses Razor to call an @if statement. This @if statement’s true portion is then defined inside brackets. However, the brackets contain markup and more code (including HTML helpers, which you will read about in a moment). The Razor engine can parse all this just fine. This leaves developers free to easily express server-side code and client markup on the same page.

For longer sections of code, you can declare the @ character followed directly by a bracket. This is typically used when you only want to write code (no markup). Inside the brackets, you can make server-side calls, declare variables to be used later, run other code, create loops; pretty much anything you can write in C# or VB can be added to your web page using the Razor syntax.

Click here to view code image

@{
  ViewBag.Title = "Home Page";
  var requestTime = DateTime.Now.TimeOfDay;
}

Notice that in the previous examples, all the code and markup combinations include markup inside of HTML tags (like <p> and <ul>). This makes it easy for the Razor engine to distinguish between what is code and what is markup. Sometimes, however, you might want to output text to the page from within your code that is not surrounded by tags. In this case, you need to use the @ sign with a colon, also called the @: operator. The following code shows an example.

Click here to view code image

@if(WebSecurity.IsAuthenticated) {
  @: Current time: <br /> @DateTime.Now
}

Another key part of the Razor syntax is the @Html helper objects. Let’s take a look at these next.