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:
Nào, bây giờ hãy tìm hiểu làm thế nào để viết mã Razor.
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.
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!
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!
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.
@for (int i = 0; i < 5; i++) {
@i.ToString() <br />
}
Kết quả đầu ra:
0
1
2
3
4
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
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ớ:
@
để viết mã phía máy chủ.@{...}
.@:
hoặc thẻ <text></text> để hiển thị văn bản trong khối mã.@if {}
cho biểu thức điều kiện.@for
cho vòng lặp.@model
để khai báo lớp Model cho view và @Model
để sử dụng đối tượng Model ở bất cứ đâu trong view.Lớp HtmlHelper trong ASP.NET MVC là gì? Cách sử dụng HtmlHelper để tạo ra các phần tử HTML trong Razor View.
Tìm hiểu cách tạo view cho chức năng chỉnh sửa thông tin sinh viên trong ASP.NET MVC.
Tìm hiểu về Model Binding trong ASP.NET MVC. Tự động nạp các tham số của phương thức hành động.
Tìm hiểu cách kết hợp Controller, View và Model để tạo ra các chức năng hoàn chỉnh trong ASP.NET MVC.