Razor In ASP.NET Core

In this blog, you will learn about Razor in Asp.net Core.

Introduction

Razor expressions are used to generate HTML content in views dynamically. Razor is a syntax for combining HTML markup with C# code to produce dynamic web pages. Razor expressions are enclosed in the @ symbol, including C# code, HTML markup, and another Razor-specific syntax. Razor expressions can perform conditional logic, loop over collections, display data, and format content.

Examples of Razor expressions,

1. Display a value

<p>The value of x is @x</p>

This expression uses the @ symbol to output the value of the x variable.

Perform a conditional check,

// Controller
public IActionResult Index() {
    bool isAdmin = true;
    return View(isAdmin);
}
// View
@model bool

@if (Model)
{
    <h1>Welcome Admin</h1>
}
else
{
    <h1>Welcome Guest</h1>
}

If the Model variable is true, the view will display an <h1> element with the "Welcome Admin" text. Otherwise, it will display an <h1> element with the "Welcome Guest" text. The value is True to show Welcome Admin in H1 Font.

2. List Data Bind in Table

// Model Class 
public class ProductM {
    public int Id {
        get;
        set;
    }
    public string Name {
        get;
        set;
    }
    public string Description {
        get;
        set;
    }
    public decimal Price {
        get;
        set;
    }
}
// Controller
public ActionResult Product() {
    List < ProductM > products = new List < ProductM > {
        new ProductM {
            Id = 1, Name = "Laptop", Description = "Hp 5262 I5 ", Price = 55000
        },
        new ProductM {
            Id = 2, Name = "Laptop", Description = "Dell 52 I5 ", Price = 58000
        },
        new ProductM {
            Id = 3, Name = "Laptop", Description = "Lenovo 3", Price = 45000
        },
        new ProductM {
            Id = 4, Name = "Mobile", Description = "Nokia ", Price = 5000
        },
        new ProductM {
            Id = 5, Name = "Mobile", Description = "RealMe", Price = 58000
        },
        new ProductM {
            Id = 6, Name = "Mobile", Description = "MI", Price = 45000
        }
    };
    return View(products);
}
// View page


@using CSharpCornerTest.Models
@model List<ProductM>
@{
        ViewBag.Title = "Product";
}

<h2>Product</h2>

<table class="table table-striped">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Description</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var product in Model)
        {
            <tr>
                <td>@product.Id</td>
                <td>@product.Name</td>
                <td>@product.Description</td>
                <td>@product.Price.ToString("C")</td>
            </tr>
        }
    </tbody>
</table>

3 . Perform a Switch Case

// View Page
@using CSharpCornerTest.Models
@model StatusM
@{
    ViewBag.Title = "StatusCode";
}

<style>
    span.badge.badge-primary {
        font-size: 48px;
        margin: -73px 0 0 139px;
    }
</style>

@switch (Model.Status)
{
    case "Open":
        <h1>Status :  </h1>
        <span class="badge badge-primary">Open</span>
        break;
    case "Closed":
        <span class="badge badge-secondary">Closed</span>
        break;
    default:
        <span class="badge badge-danger">Invalid</span>
        break;
}
// Class
public class StatusM {
    public string Status {
        get;
        set;
    }
}
// Controller
public ActionResult StatusCode() {
    var model = new StatusM {
        Status = "Open"
    };
    return View(model);
}