LearnNowOnline

Blog

ASP.NET MVC Views: Comparing the Web Forms and Razor View Syntaxes

By Martin Schaeferle | August 07, 2012

The views in your ASP.NET MVC application are what a user sees. Views are the window into your application, and so is one of the most important parts of the application...along with all the rest of it! Views provide one of the biggest reasons to use MVC instead of Web forms. Unlike Web forms, you have complete control over the HTML that the application generates.

There are no server controls as there are in Web forms that spew HTML, which you have little control over or that are hard to use with CSS and client-side JavaScript. In this article, you'll learn a little bit about the view engine that makes it all work!

Web Forms and Razor View

Whether you are coming to MVC 3 as a seasoned ASP.NET MVC pro or are a novice to this style of Web development, it can be useful to explore the syntaxes of the two view engines. If you're new to MVC, it can provide some help in deciding which view engine you want to learn and use most often, since both are first class view engines in MVC 3.

If you are experienced with earlier versions of MVC, or are an ASP.NET Web forms developer, it can be helpful to see how the two syntaxes differ. In this section, you'll see how the two view engines implement the most common features of a Web page, and explore their differences. The fundamental difference between a Web forms view and Razor is the syntax used to embed code nuggets in a view. The Web forms view uses the following syntax for code nuggets, with an opening <% and closing %> delimiters.

<%: Html.ActionLink("Register", "Register") %>

Razor uses a simple @ symbol to designate code nuggets, like the following. Razor doesn't require you to close the code block because it has semantic knowledge of the HTML and C# code within the nugget. Razor can identify the code within each nugget and implicitly close the block.

This alone can save innumerable keystrokes in a view, and the @ symbol is much easier to type than the angle brackets and percent sign, often followed by a colon. And like the <%: %> delimiters in the Web forms engine, @ will automatically encode the string placed in the HTML so you don't have to do anything else to provide that kind of protection for an application.

@Html.ActionLink("Register", "Register")

The standard Logon view in the Account controller of a project created using the MVC Web application project template in MVC 2 and 3 can show a good example of the difference between the two forms engines. This sample solution was built using MVC 2 and the Web forms engine. Figure 2 shows the LogOn.aspx view, with some of the redundant code removed to save space on the page.

Figure 2. The LogOn view using the ASP.NET Web forms view engine.

Figure 3 shows the Logon.cshtml view, with some of the redundant code removed to save space on the page.

Figure 3. The LogOn view using the Razor view engine. There are a number of differences between the views in Figure 2 and Figure 3:

• The Web forms view is defined in a LogOn.aspx file, using the .aspx file extension long used for Web forms. The Razor view is defined in LogOn.cshtml, with a custom Razor file extension. (The equivalent VB file extension is .vbhtml.)
• The Web forms page has a Page directive at the top that identifies the language used in the page, the master page file, and the type of model object used in the view:

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<DogApp.Models.LogOnModel >" %>

The Razor page has only an @model directive to identify the type of model object, as shown in the following code. It figures out the language from the file extension and the master page is defined elsewhere, as you'll see later.

@model DogApp.Models.LogOnModel

TIP: If you prefer the full syntax of specifying that the WebViewPage object is of a specific type when using Razor, like in the Web forms engine, you can use the @inherits statement at the top of the view instead of @model. There really is no reason to use @inherits, particularly since it is a syntax that Microsoft introduced with a preview version of MVC 3. This puts it in the awkward position of providing backwards compatibility with a feature introduced in a pre-beta release.

• As mentioned earlier, all code nuggets in the Web forms view use the <% %> delimiters, while Razor uses @. Notice how much cleaner and simpler the Razor view is as a result. By default, Visual Studio highlights both types of code nugget markers in yellow, making them stand out on the page.
• The using block code is much cleaner in Razor. The Web forms code can only be described as busy:

<% using (Html.BeginForm()) { %> ... <% } %>

While the Razor code is much cleaner and better reflects how the block is defined in a regular language code file, including the opening and closing curly brackets:

@using (Html.BeginForm()) { ... } 

Get more training on ASP.NET MVC 2 & 3!