ASP.NET MVC – Razor

ASP.NET MVC – Razor Engine

Razor is a markup syntax that lets you embed server-based code into web pages using C#. It is not a programming language. It is a server side markup language.

Razor is one of the view engine supported in ASP.NET MVC. Razor allows you to write mix of HTML and server side code using C#. Razor view using C# syntax has .cshtml file extension.

Razor syntax has following Characteristics:

• Compact: Razor syntax is compact which enables you to minimize number of characters and keystrokes required to write a code.
• Easy to Learn: Razor syntax is easy to learn where you can use your familiar language C#.
• Intellisense: Razor syntax supports statement completion within Visual Studio.

Razor has no ties to ASP.NET MVC because Razor is a general-purpose templating engine. You can use it anywhere to generate output like HTML. It's just that ASP.NET MVC has implemented a view engine that allows us to use Razor inside of an MVC application to produce HTML.

Razor Vs ASPX

·        Razor is very similar to how ASPX (classic ASP pages) files work. ASPX files are templates, which contain literal text and some C# code that specifies where your data should appear. We execute those to generate the HTML for our application.

·        ASPX files have a dependency on the ASP.NET runtime to be available to parse and execute those ASPX files. Razor has no such dependencies.

Main Razor Syntax Rules for C#

ü Razor code blocks are enclosed in @{ ... }

ü Inline expressions (variables and functions) start with @

ü Code statements end with semicolon

ü Variables are declared with the var keyword

ü Strings are enclosed with quotation marks

ü C# code is case sensitive

ü C# files have the extension .cshtml

Let’s learn to use razor View

Inline expression

We start with @ symbol to write server side C# code with Html code. For example, write @variable_name to display a value of a server side variable. Write @DateTime.Now to display current datetime as shown below. A single line expression does not require a semicolon at the end of the expression.

Razor Syntax (C#)

<h2>RazorTest</h2>

<span>@DateTime.Now.ToString()</span>

<h3>The above code displays current date and time</h3>

Code block with multiple statements

We can write multiple line of server side code enclosed in braces @{ ... }. Each line must ends with semicolon same as we do in C#.

Example of multiple statements to embed server side code into razor

 @{

    ViewBag.Title = "RazorTest";

    var date = DateTime.Now.ToLongDateString();

    var message = "Hello, C# Naija";

}

<h2>RazorTest</h2>

<h3>Today's Date is @date</h3>

<h3>We say @message to our fans</h3>

Model

We use @model to use model object anywhere in the view. But remember to import the model object you want to use with the @model and the object path as shown below

@model DatabaseFirstApproach.Models.employee

@{

    ViewBag.Title = "RazorTest";

    var date = DateTime.Now.ToLongDateString();

    var message = "Employee Details";

}

<h2>RazorTest</h2>

<h3>@message</h3>

<ul>

    <li>Employee Name: @Model.FirrstName</li>

    <li>Employee Phone Number: @Model.PhoneNumber</li>

    <li>Employee Address: @Model.Address</li>

</ul>

Variable Declarations

Declare a variable in a code block enclosed in brackets and then use those variables inside html with @ symbol.

@{

    var str = string.Empty;

    if (100 > 10)

    {

        str = "Hello, C# naija!";

    }

}

<p>@str</p>

Remember the following

Use @ to write server side code.

 Server side code block starts with @{* code * }

 Use @: or <text></<text> to display text from code block.

 if condition starts with @if{ }

 for loop starts with @for

 @model allows you to use model object anywhere in the view.