ASP.NET - MVC - Cú pháp Razor

Cú pháp Razor trong MVC ASP.NEt

Razor View Engine là 1 ngôn ngữ ngắn gọn, rõ ràng và hữu ích, mà nó cho phép bạn tạo ra các giao diện cho ứng dụng ASP.NET MVC trong khi vẫn giữ được sự phân chia rõ ràng, khả năng có thể kiểm tra, và sự phát triển dựa trên pattern. Các lập trình viên ASP.NET MVC đang tìm kiếm cho mình 1 ngôn ngữ có cú pháp rõ ràng, ngắn gọn, và bây giờ nó đã được xây dựng sẵn (dĩ nhiên là có rất nhiều các View Engine của hãng thứ 3 khác) với ngôn ngữ quen thuộc là C#.

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

  • Compact:  Razor là nhỏ gọn cho phép bạn giảm thiểu số lượng ký tự và tổ hợp phím cần thiết để viết mã.
  • Easy to Learn:  Razor dễ học bạn có thể dụng các ngôn ngữ lập trình: C#, Visual Basic.
  • Intellisense: Razor hỗ trợ các câu lệnh trong Visual Studio.
  • Unit Testable: Razor hỗ trợ khả năng unit test cho các view mà không cần các controller hoặc web-server.

 Cú pháp Razor

Razor sử dụng ký tự @ để chuyển HTML sang C#.  Có 2 cách để khai báo:

  • Sử dụng Razor expression
  • Sử dụng khối lệnh Razor

Các biểu thức này được xử lý bởi Razor View Engine và được gán vào response.

<h1>Razor syntax demo</h1>

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

Kết quả:

Razor syntax demo 
08-09-2014

Khối lệnh 

Chúng ta có thể viết nhiều dòng lệnh phía máy chủ được đặt trong 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 #.

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

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

Kết quả:

Today's date is: 08-09-2014
Hello World!

Hiển thị văn bản từ khối lệnh
Sử dụng @: hoặc <text> / <text> để hiển thị văn bản trong khối lệnh.

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

Kết quả:

Today's date is: 08-09-2014
Hello World!

Hiển thị văn bản bằng <text> trong một khối mã như được hiển thị 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ả:

Today's date is: 08-09-2014
Hello World!

Câu lệnh điều kiện (if.. else)

Viết điều kiện if-else bắt đầu bằng ký hiệu @. Khối mã if-else phải được đặt trong 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ả:

2014 is not a leap year.

Vòng lặp

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

Kết quả:

0
1
2
3
4

Model

Sử dụng @model để sử dụng đối tượng model ở bất cứ đâu trong view.

@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ả:

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

Khai báo biến

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

@{ 
    string str = "";

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

<p>@str</p>

Kết quả:

Hello World!

Xem thêm cú pháp về  razor syntax .

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

  1. Sử dụng @ để viết mã phía máy chủ.
  2. Khối mã phía máy chủ bắt đầu bằng @ {* code *} Sử dụng @: hoặc để hiển thị văn bản từ khối mã.
  3. Câu lệnh điều kiện bắt đầu bằng @if {}
  4. Vòng lặp bắt đầu bằng @for.
  5. @model cho phép bạn sử dụng đối tượng model ở bất cứ đâu trong View.