Terminologies in MVC: Part 2 (Razor Engine Syntax vs Web Form)

By Abhishek Jaiswal :) on Mar 21, 2015

In this article we learn about Razor Engine Syntax vs Web Form in MVC ASP.NET.

Quick View

This article is all about the Razor Engine Syntax and traditional Web form explanations. I'll try to compare and differentiate between both using few parameters and some coding convention examples.

The following image says it all, but I'll try to explain all this in words and some code syntaxes.

So let's see what I have for you guys in this article. Here are some parameters based on which I'll compare both of the two.

Implicit Code Expression

Code expressions are generally evaluated and written to the response.

Code expressions in the Razor Engine are always HTML encoded but on the other hand in Web Forms the syntax automatically encodes the value.

In the following table I'll show how yu typically display a value in a view.

Let's have a look:

Razor	<span>@model.Message</span>
Web Form	<span><%: model.Message %></span>

Explicit Code Expression

In an explicit code expression, code expressions are evaluated and written to the response. In the following table I'll show how you typically would display a value in a view.

Let's have a look:

Razor	<span>SSN@ (ssn)</span>
Web From	<span>SSN<%: ssn %></span>

Encoded Code Expression

Let's have a close look at this definition:

"HTML encoded values are done by Encoded Code Expression."

Razor	<span>@RazorViewEngine</span>
Web Form	<span><%: RazorEngineView %></span>

Un-encoded Code Expression

Let's have a close look at this definition:

"Un-Encoded Code Expression is used for rendering un-encoded values."

In various cases we need to explicitly render some values that should not be HTML encoded. For that we need to use the Html.Raw method to ensure that the value is not encoded as determined. For this unencoded code expression with the Html.Raw method comes into the action.

Let's have a look at code expression:

Razor	<span>@Html.Raw(model.Message)</span>
Web Form	<span><%: Html.Raw(model.Message)%></span>

Code Block/Segment

Before going any further let's have a close look at the code block:

"Unlike code expressions, code blocks/segment are simply sections of code that are executed (evaluated and output to the response)."

• They are useful for declaring variable that you may need to use later.
• They are set of several code expressions.
• Evaluated one by one.

Let's have a look at code expression:

Razor	@{  int A = 5; string C = "CSharpCorner."; }
Web Form	<% int A = 5; string C = "CSharpCorner."; %>

Combining Text and Markup

This segment of article represents what an intermixing of text and markup looks like using both a Razor Engine and Web Form.

Let's have a look at code expression:

Razor	@foreach (var item in items){ <span>Item @item.Name </span> }
Web Form	<% foreach (var item in items){ %> <span>Item <%: item.Name %></span> <% } %>

Mixing Code and Plain Text

The Razor Engine always looks for the beginning of the tag to determine when to transition from code to markup but we often get some situations where we want to output the plain text immediately after a code block. Say, displaying some plain text within a conditional block.

Let's have a look at code expressions:

Razor	@if (showMessage) { <h1>@ViewBag.Message</h1> }
Web Form	<% if (showMessage) { %> <h1><% : ViewBag.Message %></h1> <% } %>

Server-side Comment

Let's have a close look at this definition:

"Server-side Comment syntax allows you to completely disable content/code/controls within a page."

• Helps in preventing the browser from parsing/running/displaying the HTML content within it.
• Server-side comments executes on the server.
• You can do server-side comments in both ways, either with the Razor Engine or with Web Forms.

Razor	@* Its Multiline server-side comment. @if (showMessage) { <h1>@ViewBag.Message</h1>  } This comment will be end here.. *@
Web Form	<%-- Its Multiline server-side comment. <% if (showMessage) { %> <h1><% : ViewBag.Message %></h1> <% } %> This comment will be end here.. --%>

Escaping the Code Delimiter

Delimiter

Before going any further let's have a look at some important keywords:

"A delimiter is a sequence of one or more characters used to specify the boundaries between separate, independent regions in plain text or other data streams."

An example of a delimiter is a "Comma"

• A delimiter specifies boundaries in the data stream, declaration notation.
• Delimiters can be broken down into Field-Record and Bracket Delimiter.
• Caused Delimiter Collision.

Escaping Delimiter

Now I'll explain what a delimiter is escaping.

Delimiter collision is a problem that occurs when a programmer introduces delimiters into code without actually intending them to be interpreted as boundaries between separate regions.

The following are methods that can be used for avoiding Delimiter collision:

• Escaping Character
• Escaping Sequence
• Dual Quoting Delimiter
• Padding Quoting Delimiter
• Multiple Quoting Delimiter

Razor	My Twitter Handle is @jabhij (or you can write it as:) My Twitter Handle is @@jabhij
Web Form	<% Expression %> as you like it

Calling a Generic Method

Generic method

Before going any further let's have a look at its definition:

"A Generic Method is a method that is declared with type parameters."

• A generic method can be overloaded on several type parameters.
• Within a generic class several non-generic methods can access several class level type parameters.
• Constraints can be used to enable more specialized operations on type parameters in methods.

Razor	@(Html.MyMethod<AType>())
Web Form	<%: Html.MyMethod<AType> () %>

Points to Remember

The following are some important points that one needs to remember.

Razor Engine View

• Introduced with MVC 3.0
• Not a new language. It's a new "Markup Syntax"
• Supports Test Driven Dev (TDD)
• Has new advanced syntax that is compact, expressive and reduces typing
• Easy to learn and clean in compression to "Web Forms"
• Prevents Cross Site Scripting (XSS) attacks
• Has different file extensions.
• Doesn't support design mode.

Web Form Engine

• Introduced with MVC 1.0
• Doesn't support Test Driven Dev (TDD)
• System.Web.UI.Page Namespace is used in it for testing (but still it makes the testing complex)
• A bit faster in comparison to Razor
• Does not prevent from Cross Site Scripting (XSS) attacks

Summary

I hope this was helpful.

A few tips from my side is that, if you guys really want to become familiar with MVC then:

• Take your time
• Do as much practise as you can (Implementation)
• Try to "Learn" things, don't just "Study" (I mean it)
• Try to discuss things with friends, colleagues or in forums (C# Corner)
• If you experience any problem, then your queries are welcome.

I hope you guys enjoyed this.