ASP.NET MVC Razor Syntax Basics Step by step Implementation and Top 10 Questions and Answers
 Last Update: April 01, 2025      19 mins read      Difficulty-Level: beginner

ASP.NET MVC Razor Syntax Basics

ASP.NET MVC (Model-View-Controller) is a popular web framework for building dynamic web applications. One of its components, Razor, is a markup syntax used within ASP.NET MVC views to embed server-based code into web pages. Razor syntax simplifies the process of creating complex views while maintaining a clean and readable structure. This article will provide a detailed explanation of Razor syntax basics, highlighting important information to get you started effectively.

What is Razor?

Razor is a server-side markup syntax developed by Microsoft that allows you to seamlessly blend HTML with C# or VB.NET code. Introduced as part of ASP.NET MVC, Razor is known for its simplicity, performance, and ease of use. Razor files typically have a ".cshtml" extension for C# and ".vbhtml" for VB.NET.

Key Features of Razor Syntax

  1. Inline C# Code: Razor allows you to write C# code directly within your HTML. This enables dynamic content generation and manipulation.
  2. Implicit Expression: With implicit expressions, you can directly output the results of a C# expression within HTML without explicitly using a code block.
  3. Code Block: Code blocks allow you to write multiple lines of C# code. Enclosed in @{ ... }, these blocks can include control structures, loops, and any logic required.
  4. HTML Helpers: Razor supports HTML helpers, which are methods that help generate HTML markup. They encapsulate common tasks and improve code readability.
  5. Layouts: Razor allows you to define a layout page that can be reused by multiple views, ensuring a consistent look and feel across your web application.
  6. Sections: Sections enable you to define placeholders within a layout page that can be filled with content from individual views.
  7. Mixing HTML and C#: Razor makes it easy to switch between HTML and C# code, allowing for seamless integration and dynamic content generation.

Basic Syntax

Let's dive into some fundamental Razor syntax elements.

Implicit Expressions

Implicit expressions in Razor begin with @. The result of the expression is output directly to the rendered page.

<p>Hello, @DateTime.Now.ToString("dddd, dd MMMM yyyy")!</p>

In this example, @DateTime.Now.ToString("dddd, dd MMMM yyyy") outputs the current date in a friendly format.

Code Blocks

Code blocks allow you to write longer C# code segments using @{ ... }. These blocks can include variables, loops, conditions, and other control structures.

@{
    var items = new List<string> { "Item 1", "Item 2", "Item 3" };
    foreach (var item in items)
    {
        <p>@item</p>
    }
}

HTML Helpers

HTML helpers provide a way to render HTML elements in a strongly-typed manner. They help prevent common mistakes and improve code readability.

@Html.TextBoxFor(model => model.Username, new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.Username)

Layouts

Layouts in Razor provide a template that can be reused across multiple views. This ensures consistency in the look and feel of your application.

<!-- _Layout.cshtml -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
    <div class="container">
        @RenderBody()
    </div>
</body>
</html>

To use the layout in a view:

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    ViewBag.Title = "Home Page";
}

<h1>Welcome to our application!</h1>

Sections

Sections allow you to define placeholders within a layout page that can be filled with content from individual views.

In the layout file:

<!-- _Layout.cshtml -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    @RenderSection("head", required: false)
</head>
<body>
    <div class="container">
        @RenderBody()
        @RenderSection("scripts", required: false)
    </div>
</body>
</html>

In the view file:

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    ViewBag.Title = "Home Page";
}

@section head {
    <link href="~/Content/custom.css" rel="stylesheet" />
}

<h1>Welcome to our application!</h1>

@section scripts {
    <script src="~/Scripts/custom.js"></script>
}

Mixing HTML and C#

Switching between HTML and C# in Razor is straightforward and intuitive.

<p>Welcome, 
@{
    string name = "John";
    if (name != null)
    {
        @: @name!
    }
    else
    {
        @: Guest!
    }
}
</p>

Practical Example

Here's a comprehensive example that combines several Razor syntax elements:

  1. Layout Page: Defines the overall structure and appearance of the site.
  2. View Page: Incorporates the layout and adds specific content.
  3. HTML Helpers: Generates input fields and validation messages.
  4. Code Blocks: Manages dynamic data.

Layout Page (_Layout.cshtml)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    @RenderSection("head", required: false)
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Sample Site", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <footer>
            <p>&copy; @DateTime.Now.Year - Sample Site</p>
        </footer>
    </div>
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

View Page (Index.cshtml)

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    ViewBag.Title = "Home Page";
}

@section head {
    <link href="~/Content/custom.css" rel="stylesheet" />
}

<div class="jumbotron">
    <h1>Hello, world!</h1>
    <p>This is a simple example using Razor syntax in ASP.NET MVC.</p>
    <p>@DateTime.Now.ToString("dddd, dd MMMM yyyy")</p>
</div>

<div class="row">
    <div class="col-md-4">
        <h2>Welcome to Our Site</h2>
        <p>Feel free to explore our services and contact us for more information.</p>
    </div>
    <div class="col-md-4">
        <h2>Contact Form</h2>
        @using (Html.BeginForm("Contact", "Home", FormMethod.Post))
        {
            <div class="form-group">
                @Html.LabelFor(model => model.Name)
                @Html.TextBoxFor(model => model.Name, new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.Name)
            </div>
            <div class="form-group">
                @Html.LabelFor(model => model.Email)
                @Html.TextBoxFor(model => model.Email, new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.Email)
            </div>
            <button type="submit" class="btn btn-primary">Send Message</button>
        }
    </div>
    <div class="col-md-4">
        <h2>Latest News</h2>
        <ul>
            @{
                var newsItems = new List<string> { "News Item 1", "News Item 2", "News Item 3" };
                foreach (var item in newsItems)
                {
                    <li>@item</li>
                }
            }
        </ul>
    </div>
</div>

@section scripts {
    <script src="~/Scripts/custom.js"></script>
}

In this example, the layout page (_Layout.cshtml) defines the overall structure, including a navigation bar and a footer. The view page (Index.cshtml) uses this layout, adds specific content, and includes a form and a list generated using Razor syntax.

Best Practices

  • Consistent Code Styling: Follow consistent coding conventions to improve readability and maintainability.
  • Use HTML Helpers: Leverage HTML helpers for generating form elements, links, and other HTML components.
  • Avoid Complex Logic in Views: Keep views focused on presentation. Offload complex business logic to the controller or model.
  • Leverage Layouts and Sections: Use layouts to maintain a consistent look and feel across your application. Sections allow for modular content placement.
  • Comment Your Code: Adding comments can help others (and your future self) understand the purpose and functionality of your code.

Conclusion

Razor syntax is a powerful and intuitive tool for creating dynamic web pages in ASP.NET MVC. By mastering its basics, you can efficiently blend HTML and C# code, generate dynamic content, and maintain a clean and organized codebase. Understanding key elements like implicit expressions, code blocks, HTML helpers, layouts, and sections will enable you to build robust and scalable web applications. With practice and application of best practices, you can harness the full potential of Razor syntax in your projects.

ASP.NET MVC Razor Syntax Basics: Step-by-Step Examples

If you're new to ASP.NET MVC and Razor syntax, you’re in for a great adventure into the world of web development. ASP.NET MVC (Model-View-Controller) is a popular framework for building dynamic web applications, and Razor syntax is its templating engine that makes writing views clean and efficient. Here’s a step-by-step guide to get you started.

Setting Up Your Environment

Before you dive into Razor syntax, ensure you have the necessary tools installed:

  • Visual Studio: The IDE provided by Microsoft, which supports ASP.NET development. The Community version is free and sufficient for beginners.
  • .NET SDK: The software development kit that includes the .NET runtime and the .NET Command Line Interface (CLI).

Step 1: Creating a New ASP.NET MVC Project

  1. Open Visual Studio.
  2. Click on Create a new project.
  3. From the list of templates, choose ASP.NET Core Web App (Model-View-Controller).
  4. Click Next.
  5. Give your project a name and choose a location on your computer.
  6. Click Create.
  7. Choose the target framework (e.g., .NET 6.0 (Long-term support)) and click Create.

Step 2: Understanding the MVC Framework Structure

An ASP.NET MVC project is divided into three main components: Model, View, and Controller.

  • Model: Represents the data and the business logic of the application.
  • View: Displays data to the user.
  • Controller: Handles the application logic and interacts with the model and views.

Step 3: Setting Up a Route

Routing in ASP.NET MVC defines which controller and action to execute based on the URL requested.

Open Startup.cs (Program.cs in .NET 6) located in the project root. The routing configuration is defined here.

// .NET 6 Example
var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddControllersWithViews();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Home/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

app.Run();

In this example, the route "{controller=Home}/{action=Index}/{id?}" means that if no controller and action are specified in the URL, it defaults to using the Home controller and its Index action method.

Step 4: Running the Application

  1. Click on the green play button in Visual Studio or press F5 to run the application.
  2. Your default browser should open displaying the home page of your application.

Step 5: Creating a Simple MVC Application

Let’s create a simple application with a home page that shows a welcome message.

  1. Model: Create a new C# class called WelcomeModel in the Models folder.
using System;

namespace YourProjectName.Models
{
    public class WelcomeModel
    {
        public string Message { get; set; }
    }
}
  1. Controller: Open HomeController.cs in the Controllers folder and modify it as follows:
using Microsoft.AspNetCore.Mvc;
using YourProjectName.Models;

namespace YourProjectName.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            WelcomeModel model = new WelcomeModel();
            model.Message = "Welcome to ASP.NET MVC with Razor!";
            return View(model);
        }
    }
}
  1. View: Create a new Razor view for the Index method. Right-click on the Views/Home folder and add a new Razor View called Index.cshtml.
@model YourProjectName.Models.WelcomeModel

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
</head>
<body>
    <h1>@Model.Message</h1>
</body>
</html>

In this Razor view, @model declares the data type of the model passed from the controller, and @Model.Message outputs the Message property of the model.

Step 6: Data Flow Step-by-Step

  1. User Request: A user navigates to the root URL of your application.
  2. Routing: The routing engine matches the URL to the HomeController and its Index method.
  3. Controller Action: The Index action method in HomeController is called.
  4. Model Creation: A new WelcomeModel object is created and its Message property is set.
  5. Model Passed to View: The WelcomeModel object is passed to the Index view.
  6. View Rendering: The Razor view renders the Message property, displaying it to the user.

Conclusion

You've now learned how to set up a route, create a simple MVC application with Razor syntax, and understand the basic data flow in ASP.NET MVC. Practice is key, so try experimenting with more complex models, views, and controllers to deepen your understanding. Happy coding!

Certainly! Below is a detailed list of the Top 10 questions and answers pertaining to ASP.NET MVC Razor Syntax Basics. These answers are designed to provide a comprehensive understanding of the Razor syntax used in ASP.NET MVC applications.

1. What is Razor Syntax in ASP.NET MVC?

Answer: Razor syntax is a template markup syntax for creating Web pages with server-based code using ASP.NET. Razor is an embedded syntax that allows you to use C# or VB.NET code within HTML markup in ASP.NET MVC applications. It simplifies the process of writing markup and server-side code together, making it easier to create dynamic Web content.

2. How do you declare Razor code blocks in a View?

Answer: Razor code blocks are used to write multiple lines of server-side code within a Razor view. You enclose these blocks within @{ }. For example:

@{
    string message = "Hello, world!";
    int number = 10;

    if (number > 5)
    {
        message += " The number is greater than 5.";
    }
}

In this example, multiple variables and a simple if statement are defined within a Razor code block.

3. How does Razor handle HTML encoding?

Answer: Razor automatically HTML-encodes strings unless you explicitly tell it not to. To output a string without HTML encoding, you can use the Html.Raw method. Here’s an example:

@{
    string htmlContent = "<p>This is <strong>bold</strong> text.</p>";
}

@* HTML Encoded *@
@htmlContent
@* Raw Output *@
@Html.Raw(htmlContent)

In this example, the first output will display <p>This is <strong>bold</strong> text.</p> as plain text, whereas the second output will render it as HTML.

4. What is the difference between @ and @@ in Razor syntax?

Answer:

  • @: This symbol is used to transition from HTML to Razor code, such as to embed expressions or use Razor code blocks.
  • @@: If you want to output a literal @ symbol in Razor, you use @@. For example:
<p>The @ symbol is used in Razor.</p>
<p>To output an @ symbol, use @@.</p>

The first line will be interpreted as Razor, and the second line will output a literal @.

5. How can you pass data from the Controller to the View using Razor?

Answer: Data is typically passed from the Controller to the View using the ViewBag, ViewData, or a strongly-typed model.

  • Strongly Typed Model:
public class Product
{
    public int Id { get; set; }
    public string Name { get; set; }
}

public ActionResult Index()
{
    var product = new Product { Id = 1, Name = "Laptop" };
    return View(product);
}

In the View:

@model YourNamespace.Models.Product

<p>Product ID: @Model.Id</p>
<p>Product Name: @Model.Name</p>
  • ViewBag:
public ActionResult Index()
{
    ViewBag.ProductId = 1;
    ViewBag.ProductName = "Laptop";
    return View();
}

In the View:

<p>Product ID: @ViewBag.ProductId</p>
<p>Product Name: @ViewBag.ProductName</p>
  • ViewData:
public ActionResult Index()
{
    ViewData["ProductId"] = 1;
    ViewData["ProductName"] = "Laptop";
    return View();
}

In the View:

<p>Product ID: @ViewData["ProductId"]</p>
<p>Product Name: @ViewData["ProductName"]</p>

6. How do you create a Razor form using the Html.BeginForm helper method?

Answer: The Html.BeginForm helper method in Razor is used to create an HTML form element that submits data to the server. Here’s an example:

@using (Html.BeginForm("SubmitForm", "Home", FormMethod.Post))
{
    <label for="name">Name:</label>
    @Html.TextBox("name", null, new { @class = "form-control" })
    <br />
    <label for="email">Email:</label>
    @Html.TextBox("email", null, new { @class = "form-control" })
    <br />
    <button type="submit" class="btn btn-primary">Submit</button>
}

This generates a form that posts data to the SubmitForm action method in the Home controller.

7. How can you display validation messages in Razor views using Data Annotations?

Answer: You can use Data Annotations in your model class to add validation rules, and then display these validation messages in your Razor view using the Html.ValidationMessageFor, Html.ValidationSummary, and Html.IsValid helper methods. Here’s an example: Model:

using System.ComponentModel.DataAnnotations;

public class User
{
    [Required(ErrorMessage = "Name is required.")]
    public string Name { get; set; }

    [Required(ErrorMessage = "Email is required.")]
    [EmailAddress(ErrorMessage = "Invalid Email Address.")]
    public string Email { get; set; }
}

View:

@model YourNamespace.Models.User

@using (Html.BeginForm("Register", "Account", FormMethod.Post))
{
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    <label for="name">Name:</label>
    @Html.TextBoxFor(m => m.Name, new { @class = "form-control" })
    @Html.ValidationMessageFor(m => m.Name, "", new { @class = "text-danger" })
    <br />
    <label for="email">Email:</label>
    @Html.TextBoxFor(m => m.Email, new { @class = "form-control" })
    @Html.ValidationMessageFor(m => m.Email, "", new { @class = "text-danger" })
    <br />
    <button type="submit" class="btn btn-primary">Register</button>
}

In this example, the Html.ValidationSummary method displays a summary of all validation errors, while the Html.ValidationMessageFor methods display specific validation messages next to the corresponding input fields.

8. How do you create a Razor layout template?

Answer: A Razor layout template allows you to define a common layout for multiple views, reducing redundancy and making it easier to update the shared structure. You create layout files with the .cshtml extension in the Views/Shared folder. Layout File (e.g., _Layout.cshtml):

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title - MyApp</title>
    <link rel="stylesheet" href="~/Content/bootstrap.min.css" />
</head>
<body>
    <div class="container">
        <header>
            <h1>My App</h1>
        </header>
        <main>
            @RenderBody()
        </main>
        <footer>
            &copy; @DateTime.Now.Year MyApp. All rights reserved.
        </footer>
    </div>
    <script src="~/Scripts/jquery-3.6.0.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
</body>
</html>

In a view file, you specify which layout to use with the Layout property:

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    ViewBag.Title = "Home";
}
<p>This is the home page content.</p>

The @RenderBody() method is a placeholder where the content of the specific view will be injected.

9. How do you use the @foreach loop in Razor syntax?

Answer: The @foreach loop in Razor is used to iterate over a collection and generate HTML content for each item. Here’s an example: Controller:

public ActionResult Index()
{
    var products = new List<string> { "Laptop", "Tablet", "Smartphone" };
    return View(products);
}

View:

@model IEnumerable<string>

<ul>
    @foreach (var product in Model)
    {
        <li>@product</li>
    }
</ul>

In this example, the @foreach loop iterates over the products list and generates an <li> element for each product name.

10. How do you include partial views in Razor views?

Answer: Partial views in Razor are used to split the view into smaller, reusable components. You create partial views with a leading underscore (e.g., _PartialView.cshtml) and render them using the Html.Partial or Html.RenderPartial helper methods. Partial View (e.g., _PartialView.cshtml):

<p>This is a partial view.</p>

Main View:

<p>This is the main view.</p>
<hr />
@Html.Partial("_PartialView")

Alternatively, you can use Html.RenderPartial:

<p>This is the main view.</p>
<hr />
@{ Html.RenderPartial("_PartialView"); }

Both methods render the content of the partial view at the specified location in the main view.

Conclusion

Razor syntax in ASP.NET MVC provides a powerful and flexible way to create dynamic web content. By understanding and utilizing the basics of Razor syntax, you can write cleaner, more maintainable, and more efficient code. Whether you're working with data models, validation, loops, partial views, or layouts, Razor offers the tools needed to build robust web applications.