Cú pháp Razor trong ASP.NET MVC

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:

0
1
2
3
4

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ớ:

  1. Sử dụng ký tự @ để viết mã phía máy chủ.
  2. Khối mã phía máy chủ nằm trong cặp dấu ngoặc nhọn @{...}.
  3. Sử dụng @: hoặc thẻ <text></text> để hiển thị văn bản trong khối mã.
  4. Sử dụng @if {} cho biểu thức điều kiện.
  5. Sử dụng @for cho vòng lặp.
  6. 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.
ASP.NET MVC
Bài Viết Liên Quan:
Sự khác biệt giữa HTML Encode và URL Encode trong .NET
Trung Nguyen 26/10/2021
Sự khác biệt giữa HTML Encode và URL Encode trong .NET

Bài viết này sẽ giúp bạn tìm hiểu lớp WebUtility trong ASP.NET MVC và cách nó mã hóa / giải mã dữ liệu có khả năng bị phá vỡ.

Bundle và minify js, css trong ASP.NET MVC
Trung Nguyen 11/04/2021
Bundle và minify js, css trong ASP.NET MVC

Các kỹ thuật bundle (gộp file) và minify (rút gọn file) đã được giới thiệu trong ASP.NET MVC 4 để cải thiện thời gian tải trang.

Filter trong ASP.NET MVC
Trung Nguyen 10/04/2021
Filter trong ASP.NET MVC

Trong hướng dẫn này, bạn sẽ tìm hiểu filter trong ASP.NET MVC là gì? Có những loại filter nào và cách sử dụng filter trong ASP.NET MVC.

ViewBag, ViewData và TempData trong ASP.NET MVC
Trung Nguyen 10/04/2021
ViewBag, ViewData và TempData trong ASP.NET MVC

Trong hướng dẫn này, bạn sẽ tìm hiểu ViewBag, ViewData và TempData là gì và cách sử dụng chúng trong ASP.NET MVC