Cú pháp Razor trong ASP.NET MVC

Trung Nguyen
27/05/2020
4 min read

Nội dung chính của bài viết

Razor View là một trong những view engine được hỗ trợ trong ASP.NET MVC. Razor View cho phép bạn viết hỗn hợp mã HTML và mã phía máy chủ bằng C# hoặc VB.NET.

Razor View cho VB.NET có phần mở rộng của tập tin là .vbhtml và cho C# có phần mở rộng của tập tin là .cshtml.

Razor View sử dụng cú pháp Razor bắt đầu bằng ký tự @ để viết mã phía máy chủ bằng C# hoặc VB.NET.

Cú pháp Razor có các đặc điểm sau:

Nhỏ gọn: Cú pháp Razor rất nhỏ gọn cho phép bạn giảm thiểu số lượng ký tự cần thiết để viết mã.
Dễ học: Cú pháp Razor rất dễ học vì bạn có thể sử dụng ngôn ngữ quen thuộc là C# hoặc Visual Basic.
Intellisense: Cú pháp Razor hỗ trợ tự động hoàn thành câu lệnh trong Visual Studio.

Nào, bây giờ hãy tìm hiểu làm thế nào để viết mã Razor.

Cú pháp Razor cho biểu thức một dòng

Bắt đầu bằng ký tự @ để bắt đầu viết mã phía máy chủ bằng C# hoặc VB.NET. Chẳng hạn: viết @Variable_Name để hiển thị giá trị của biến phía máy chủ.

Ví dụ: DateTime.Now để trả về ngày và giờ hiện tại. Bây giờ để hiển thị ngày giờ hiện tại bạn có thể sử dụng cú pháp Razor như sau.

<h1>Razor syntax demo</h1>

<h2>@DateTime.Now.ToShortDateString()</h2>

Kết quả đầu ra:

Razor syntax demo 
05-27-2020

Lưu ý: Biểu thức một dòng không yêu cầu dấu chấm phẩy ở cuối biểu thức.

Cú pháp Razor cho khối mã nhiều câu lệnh

Bạn có thể viết nhiều dòng mã phía máy chủ được đặt trong cặp dấu ngoặc nhọn @{ ... }. Mỗi dòng phải kết thúc bằng dấu chấm phẩy giống như cú pháp C#.

@{
    var date = DateTime.Now.ToShortDateString();
    var message = "Hello World";
}

<h2>Today's date is: @date </h2>
<h3>@message</h3>

Kết quả đầu ra:

Today's date is: 05-27-2020
Hello World!

Cú pháp Razor hiển thị văn bản trong khối mã

Sử dụng @: hoặc thẻ <text></text> để hiển thị văn bản trong khối mã.

@{
    var date = DateTime.Now.ToShortDateString();
    string message = "Hello World!";
    @:Today's date is: @date <br />
    @message                               
}

Kết quả đầu ra:

Today's date is: 05-27-2020
Hello World!

Hiển thị văn bản bằng thẻ <text></text> trong một khối mã được trình bày như bên dưới.

@{
    var date = DateTime.Now.ToShortDateString();
    string message = "Hello World!";
    <text>Today's date is:</text> @date <br />
    @message                               
}

Kết quả đầu ra:

Today's date is: 05-27-2020
Hello World!

Cú pháp Razor cho biểu thức điều kiện if...else

Viết biểu thức điều kiện if...else bắt đầu bằng ký tự @. Khối mã của biểu thức if...else phải được đặt trong cặp dấu ngoặc {}, ngay cả đối với câu lệnh đơn.

@if (DateTime.IsLeapYear(DateTime.Now.Year))
{
    @DateTime.Now.Year @:is a leap year.
}
else 
{ 
    @DateTime.Now.Year @:is not a leap year.
}

Kết quả đầu ra:

2020 is a leap year.

Cú pháp Razor cho vòng lặp

@for (int i = 0; i < 5; i++) { 
    @i.ToString() <br />
}

Kết quả đầu ra:

Cú pháp Razor cho Model

Sử dụng @model để khai báo lớp Model sử dụng trong Razor View và @Model để sử dụng đối tượng của Model. Hãy xem ví dụ minh họa về sử dụng Model trong Razor View như sau:

@model Student

<h2>Student Detail:</h2>
<ul>
    <li>Student Id: @Model.StudentId</li>
    <li>Student Name: @Model.StudentName</li>
    <li>Age: @Model.Age</li>
</ul>

Kết quả đầu ra:

Student Detail:
            
- Student Id: 1 
- Student Name: John 
- Age: 18

Cú pháp Razor để khai báo biến

Khai báo biến trong một khối mã được đặt trong cặp dấu ngoặc nhọn @{...} và sau đó sử dụng các biến đó trong mã HTML với ký hiệu @.

@{ 
    string str = "";

    if(1 > 0)
    {
        str = "Hello World!";
    }
}

<p>@str</p>

Kết quả đầu ra:

Hello World!

Đây là một số cú pháp Razor quan trọng. Bạn có thể truy cập asp.net để tìm hiểu thêm về cú pháp Razor.

Những điểm cần nhớ:

Sử dụng ký tự @ để viết mã phía máy chủ.
Khối mã phía máy chủ nằm trong cặp dấu ngoặc nhọn @{...}.
Sử dụng @: hoặc thẻ <text></text> để hiển thị văn bản trong khối mã.
Sử dụng @if {} cho biểu thức điều kiện.
Sử dụng @for cho vòng lặp.
Sử dụng @model để khai báo lớp Model cho view và @Model để sử dụng đối tượng Model ở bất cứ đâu trong view.