Asp.Net Mvc Razor Syntax Basics Complete Guide

Complete Examples, Step by Step for Beginners: ASP.NET MVC Razor Syntax Basics

What is Razor Syntax?

• Razor is a syntax used by ASP.NET Web Pages, MVC, and Web Forms.
• It allows you to write C# or VB.NET code directly within HTML.
• The Razor engine will process the file before sending it to the client's browser, converting the Razor markup into HTML.

Setting Up Your Environment

Before diving into Razor syntax, ensure you have the following:

1. Visual Studio: The free Community edition or the Pro/Enterprise versions.
2. .NET SDK: Ensure that you have the latest version installed.
3. Create a New ASP.NET MVC Project:
   • Open Visual Studio.
   • Create a new project (File > New > Project).
   • Select ASP.NET Web Application (.NET Framework).
   • Choose MVC and click Create.

Basic Razor Syntax Concepts

1. Code Blocks
2. Expressions
3. Directives
4. Statements
5. Comments

1. Code Blocks

Code blocks are used to write multiline statements. They start with @{ and end with }.

Example:

@{
    int a = 10;
    int b = 20;
    int sum = a + b;
}
<p>The sum of @a and @b is @sum</p>

In this example, variables a, b, and sum are defined inside a code block.

2. Expressions

Expressions are used to render a value directly onto the page. Expressions start with the @ symbol.

Example:

@{
    int value = 42;
}
<h1>My favorite number is @value</h1>

The @value expression evaluates to the value variable and renders its content onto the page.

3. Directives

Directives provide instructions to the Razor parser about how to process a page. Directives start with @ followed by a keyword.

Common Directives:

• @model: Specifies the data type of the model object passed to the view.
• @using: Includes a namespace in the view.
• @addTagHelper, @removeTagHelper: Manages Tag Helpers.
• @section: Allows you to define a section of the page in a view. Typically used for layout files.

Example:

@model string

<h1>Hello, @Model!</h1>

Here, @model string states that the view expects a string as a model, and @Model renders the value of the model.

4. Statements

Statements are like code blocks but are single-line pieces of code.

Example:

<p>@DateTime.Now.ToString("yyyy-MM-dd")</p>
<p>@{ var greeting = "Welcome"; }</p>
<p>@greeting</p>

In this example, @DateTime.Now.ToString("yyyy-MM-dd") is an expression that outputs the current date. The @{ var greeting = "Welcome"; } is a statement defining the variable greeting.

5. Comments

Comments in Razor can be written in two styles: HTML comments and Razor comments.

HTML Comments:

<!-- This is an HTML comment -->

These comments are sent to the browser and visible when inspecting the DOM.

Razor Comments:

@* This is a Razor comment *@

These comments are processed by the Razor engine and do not appear in the final HTML sent to the client.

Practical Example: Creating a Simple ASP.NET MVC Application

Let’s walk through creating a simple ASP.NET MVC application that uses Razor syntax to display a list of movies.

Step 1: Create the Model

Under Models, create a Movie.cs class.

public class Movie
{
    public string Title { get; set; }
    public int Year { get; set; }
}

Step 2: Create a Controller

Under Controllers, add a MoviesController.cs controller.

public class MoviesController : Controller
{
    public ActionResult Index()
    {
        List<Movie> movies = new List<Movie>
        {
            new Movie { Title = "The Shawshank Redemption", Year = 1994 },
            new Movie { Title = "The Godfather", Year = 1972 },
            new Movie { Title = "The Dark Knight", Year = 2008 }
        };

        return View(movies);
    }
}

Step 3: Create a View for the Index Action

Right-click on the Index action method, select Add View, name it Index, and choose List as the template. Set the model class to Movie from the dropdown menu.

Index.cshtml (Generated Template)

The default template generated would look something like this:

@model IEnumerable<MvcApp.Models.Movie>

@{
    ViewBag.Title = " Movies";
}

<h2>Movies</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Title)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Year)
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Title)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Year)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.Year }) |
            @Html.ActionLink("Details", "Details", new { id=item.Year }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.Year })
        </td>
    </tr>
}

</table>

Index.cshtml (Simplified Using Pure Razor)

Let's simplify the template without using the HTML helpers provided by MVC.

@model IEnumerable<MvcApp.Models.Movie>

@{
    ViewBag.Title = "Movies";
}

<h2>Movies</h2>

<table class="table">
    <thead>
        <tr>
            <th>Title</th>
            <th>Year</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var movie in Model)
        {
            <tr>
                <td>@movie.Title</td>
                <td>@movie.Year</td>
            </tr>
        }
    </tbody>
</table>

Explanation:

• @model IEnumerable<MvcApp.Models.Movie> tells the view that the data object being passed into the view is a collection of Movie objects.
• The @foreach loop iterates over each Movie in the Model.
• Inside the loop, @movie.Title and @movie.Year output the Title and Year of the currently iterated Movie.

Step 4: Run the Application

Navigate to /Movies/Index and you should see your list of movies displayed on a basic HTML table.

Additional Tips

1. Mixing HTML and Razor: You can freely mix HTML and Razor code within the same page.
2. Code Formatting: Use Razor syntax to control whitespace and structure of your HTML.
3. Debugging: Use Razor to print values and debug your views directly.
4. Security: Be cautious with expressions that render user input to prevent XSS attacks.

Conclusion