Razor View Syntax in ASP .NET MVC

Razor View Syntax in ASP .NET MVC

Introduction: Razor is a view engine used in ASP.NET MVC that allows you to combine code with HTML markup seamlessly. It provides a compact and expressive syntax for writing views in ASP.NET MVC applications.

1. Razor Syntax Basics: Razor syntax uses the @ symbol to switch between HTML markup and code. Here are some basic syntax rules:

Variables and Expressions:

csharp
<p>Welcome, @Model.Name!</p>
<p>The sum of 2 and 3 is: @(2 + 3)</p>

Explanation: The @ symbol is used to indicate that we're switching to code. We can directly access model properties or perform calculations within the markup using the @() syntax.

Code Blocks:

csharp
@if (Model.IsLoggedIn)
{
    <p>Welcome, @Model.Name!</p>
}
else
{
    <p>Please log in to continue.</p>
}

Explanation: Razor provides code blocks using the @{ } syntax. This allows us to conditionally render HTML based on the result of an expression or statement.

Looping Structures:

csharp
@foreach (var item in Model.Items)
{
    <p>@item.Name</p>
}

Explanation: Razor supports looping structures like foreach. We can iterate over collections and render HTML dynamically based on the data.

2. Razor Expressions and Helpers: Razor provides various built-in expressions and helpers to simplify common tasks. Here are a few examples:

Conditional Attributes:

csharp
<p class="@(Model.IsActive ? "active" : "inactive")">Status: @(Model.IsActive ? "Active" : "Inactive")</p>

Explanation: We can conditionally apply attributes to HTML elements based on the result of an expression. In the example above, the CSS class and status text are determined by the Model.IsActive property.

Partial Views:

csharp
@Html.Partial("_UserCard", Model.User)

Explanation: Razor allows us to include reusable components called partial views using the @Html.Partial helper. It renders the specified partial view with the given model.

HTML Helpers:

csharp
@Html.ActionLink("Home", "Index", "Home")

Explanation: Razor provides HTML helpers that generate HTML elements with correct URLs and attributes. In the example above, @Html.ActionLink creates an anchor tag for navigating to the "Index" action of the "Home" controller.

Conclusion: Razor view syntax in ASP.NET MVC offers a concise and powerful way to combine HTML markup with code. With its intuitive syntax and built-in helpers, developers can create dynamic and interactive views easily. The examples provided above demonstrate some of the essential features and usage of Razor in ASP.NET MVC applications.