ASP.NET Razor – Markup

Welcome to The Coding College, where we simplify web development for aspiring and experienced developers alike. In this tutorial, we’ll delve into ASP.NET Razor Markup, a key feature of Razor syntax that combines server-side code with HTML to create dynamic web pages seamlessly.

What Is Razor Markup?

Razor Markup is the syntax used in ASP.NET Web Pages to write server-side code alongside HTML. It’s lightweight, easy to learn, and integrates seamlessly with the .NET ecosystem, enabling developers to create powerful web applications.

Key Features of Razor Markup:

  • Simple syntax with minimal noise.
  • Combines C# or VB.NET with HTML.
  • Automatically encodes output to prevent security issues like cross-site scripting (XSS).

Razor Markup Syntax Basics

1. Embedding C# Code

Razor uses the @ symbol to transition between HTML and C# code.

Example:

<p>The current year is: @DateTime.Now.Year</p>

2. Code Blocks

Code blocks allow you to include multiple lines of server-side code.

@{
    var name = "John";
    var age = 30;
}
<p>Name: @name</p>
<p>Age: @age</p>

3. Inline Expressions

You can directly embed C# expressions within HTML.

<p>2 + 2 = @(2 + 2)</p>

Razor Markup with HTML Elements

1. Dynamic Content

You can dynamically generate content using Razor Markup.

@{
    var fruits = new[] { "Apple", "Banana", "Cherry" };
}
<ul>
    @foreach (var fruit in fruits)
    {
        <li>@fruit</li>
    }
</ul>

2. Conditional Rendering

Display content conditionally with Razor.

@{
    var isLoggedIn = true;
}
@if (isLoggedIn)
{
    <p>Welcome back!</p>
}
else
{
    <p>Please log in.</p>
}

Combining Razor and HTML Attributes

Razor can generate dynamic HTML attributes using server-side logic.

1. Dynamic Class Names

@{
    var isActive = true;
}
<div class="menu-item @(isActive ? "active" : "")">Home</div>

2. Dynamic Links

<a href="/profile/@userId">View Profile</a>

Working with Razor Loops

Loops are an integral part of Razor Markup for rendering repetitive content.

Example: Using a for Loop

@{
    for (var i = 1; i <= 5; i++)
    {
        <p>Item @i</p>
    }
}

Example: Using a foreach Loop

@{
    var items = new[] { "Item 1", "Item 2", "Item 3" };
}
<ul>
    @foreach (var item in items)
    {
        <li>@item</li>
    }
</ul>

HTML Encoding in Razor

Razor automatically encodes output to protect your application from XSS attacks.

Example: Safe Encoding

@{
    var script = "<script>alert('Hello!')</script>";
}
<p>@script</p> <!-- Output: <script>alert('Hello!')</script> -->

To render raw HTML, use the Html.Raw method:

<p>@Html.Raw(script)</p> <!-- Output: <script>alert('Hello!')</script> -->

Best Practices for Razor Markup

  1. Keep Razor and HTML Separate
    Minimize inline server-side code within your Razor views.
  2. Use View Models
    Pass structured data to your Razor pages to keep the code organized.
  3. Avoid Logic in Views
    Use the controller to process logic, keeping Razor focused on presentation.
  4. Comment Your Code
    Use @* *@ for Razor-specific comments. @* This is a Razor comment *@
  5. Optimize for Readability
    Use consistent indentation and naming conventions to improve readability.

Why Choose Razor Markup?

  1. Simplified Development
    Razor reduces the complexity of writing dynamic pages by seamlessly integrating server-side logic and HTML.
  2. Secure by Default
    Built-in encoding protects against common vulnerabilities like XSS.
  3. Developer-Friendly
    Familiar syntax and minimal learning curve make it an excellent choice for beginners.

Build Your Web Development Skills with The Coding College

At The Coding College, we’re committed to providing tutorials that empower you to create robust, secure, and modern web applications. Razor Markup is just one of the many tools ASP.NET offers to simplify development and maximize productivity.

For more tutorials like this, visit The Coding College and start your journey to becoming an ASP.NET expert!

Have questions or need more examples? Let us know in the comments below, or explore our other ASP.NET tutorials to deepen your knowledge.

Leave a Comment