The Razor View Engine

0
204
views
Razor View Engine
The Razor View Engine

To render a view inside a browser, MVC uses Razor View Engine as the default view engine. The Razor view engine uses a specific syntax to manage the rendering of Web pages.

Razor View Engine is a clean, lightweight, and simple view engine with a minimum amount of syntax and code. Razor View Engine allows embedding server-side code in a view.

Defining Razor View Engine

Razor View Engine is a markup syntax that allows you to embed server-side code (written in C# or VB) in an HTML markup.

A file containing the server-side code in the C# syntax has an extension of .cshtml. However, a file containing the server-side code in VB has an extension of .vbhtml.

The Razor Syntax Rules

The Razor View Engine syntax follows certain rules. Some of these are:

  • The @ character indicates a transition from markup to code.
  • Razor code statements end with a semicolon (;).
  • The C# code is case-sensitive.
  • Variables should be declared by using the var keyword.
  • Strings should be enclosed within quotation marks.

You have seen some of the basic Razor syntax rules. Now, let us discuss the syntax of various constructs in Razor.

The Razor View Engine Syntax Guide

The Razor View Engine View Engine view engine is responsible for interpreting the server-side code embedded inside a view file. For this, Razor View Engine needs to distinguish the server-side code from the markup code.

To distinguish the server-side code from the markup code, Razor View Engine uses the @ symbol.

Including Code Expressions

Consider the following code snippet:

<h1>Displaying @myList.length items.</h1>

In the preceding code snippet, @myList.length is interpreted as the server-side code. Notice that here, you do not need to specify the end of the Razor View Engine code.

RazorView Engine is smart enough to distinguish between the markup code and the server-side code.

However, sometimes, you may need to override the logic that the Razor View Engine uses to distinguish the server-side code. For example, if you want to display the @ symbol within an email address, you can use @@, as shown in the following code snippet:

<h1>your email ID is: mark@@newbay.com</h1>

In the preceding code snippet, Razor View Engine interprets the first @ symbol as an escape sequence character. Razor uses an implicit code expression to determine parts of a line that is server-side code.

However, sometimes, Razor View Engine interprets an expression as the markup that needs to be run as server-side code. For example, consider the following code snippet:

<span>Price of product including Sales Tax: @Model.Price * 1.2</span>

The preceding code snippet renders output as Price of the product including Sales Tax: 5 * 1.2 if the price of the product is 5.

You can use parentheses to explicitly delimit expressions, as shown in the following code snippet:

<span>Price of the product including Sales Tax: @(Model.Price * 1.2)</span>

The preceding code snippet will display output as Price of the product including Sales Tax: 6 if the price of the product is 5.

Including Code Blocks

Sometimes, you may need to write multiple lines of server-side code. You can do this without prefixing every line of code with the @ symbol by using the Razor View Engine code block.

In a Razor View Engine code block, lines are enclosed with curly braces in addition to an @ symbol, as shown in the following syntax

Combining Code and Markup

You can use a Razor View Engine code block to run conditional statements and loop through collections. Here, you can mix the code blocks with the markup to generate the required output.

Razor View Engine loops are useful for displaying a list of items in a collection. For example, consider the following code snippet:

@foreach (var item in products)
{
<li> The item name is @item. </li>
}

In the preceding code snippet, the for each loop is defined, which displays each item individually in the products collection. In the preceding code snippet, the @foreach loop automatically transitions to the markup with the opening tag, transitions back to the code when the @item is encountered.

Moreover, the Razor View Engine automatically transitions back to the markup when the closing tag is encountered.

In addition, you can use conditional constructs for making decisions on the basis of some condition. For example, consider the following code snippet:

@if (@ViewBag.Product!=null) {
<Text>Product is in stock. </text>
}

In the preceding code snippet, the @if construct is defined, which displays the text, Product is in stock, if the condition, @ViewBag.Product!
=null is satisfied.

Including Comments

You can declare a Razor comment within the @* and
@ delimiters, as shown in the following code example: @ You comment goes here. *@

Using Partial Views

Consider a scenario where you want to include some common markup in a number of views. One option is to include the common markup in each view.

However, this is a time-consuming task as you have to write the markup on every view. In addition, if you need to make a change in the markup, the same change needs to be applied to all the views that contain the markup.

To overcome this problem, you can create a partial view and invoke it wherever required. A partial view is a part of a view that can be used on multiple pages. Partial views are created in the /Views/Shared folder. By convention, the name of a partial view is prefixed with an underscore
( _ ) character.

You can render a partial view in a view by using the @Html.Partial() method. MVC inserts the partial view, HTML, into the parent view, and then returns the complete Web page to the browser. For example, the following code snippet renders a partial view named _partialsummary within a view: @Html.Partial(“_partialsummary”)

In the preceding code snippet, a partial view named
_partialsummary is rendered within a tag.

LEAVE A REPLY

Please enter your comment!
Please enter your name here