Làm cách nào để viết mã Razor trong cshtml?

Một tập tin với. tiện ích mở rộng cshtml là một tệp C# HTML được sử dụng ở phía máy chủ bởi công cụ Razor Markup để hiển thị các tệp trang web cho trình duyệt của người dùng. Mã hóa phía máy chủ này tương tự như ASP tiêu chuẩn. NET cho phép tạo nội dung web động một cách nhanh chóng khi trang web được ghi vào trình duyệt. Máy chủ thực thi mã phía máy chủ bên trong trang trước khi gửi trang được tạo tới trình duyệt. Các tác vụ phức tạp như truy cập cơ sở dữ liệu và hiển thị các chế độ xem phức tạp. Các tệp CSHTML có thể được tạo và lập trình bằng Microsoft Visual Studio

Định dạng tệp CSHTML

Các tệp CSHTML là các tệp văn bản tuân theo cú pháp được vạch ra bởi công cụ đánh dấu Razor. Razor hỗ trợ cả C# và VB. NET, dễ học và dễ sử dụng hơn ASP và ASP cổ điển. NET. w3schools có hướng dẫn cú pháp C# và VB đơn giản mà hiệu quả. NET mã hóa của Razor

Tất cả các tệp Dao cạo kết thúc bằng. cshtml. Hầu hết các tệp Dao cạo đều có thể duyệt được và chứa hỗn hợp mã phía máy khách và phía máy chủ, khi được xử lý, dẫn đến HTML được gửi tới trình duyệt. Các trang này thường được gọi là "trang nội dung". Phần này xem xét kỹ hơn các trang nội dung và các tệp PageModel được liên kết của chúng

Trang nội dung

Để một tệp hoạt động như một trang nội dung Razor, nó phải có ba đặc điểm

  • Nó không thể có dấu gạch dưới hàng đầu trong tên tệp của nó
  • Phần mở rộng tập tin là. cshtml
  • Dòng đầu tiên trong tệp là @page

Đặt chỉ thị @page làm dòng mã đầu tiên là rất quan trọng. Nếu điều này không được thực hiện, tệp sẽ không được xem dưới dạng trang Dao cạo và sẽ không được tìm thấy nếu bạn cố duyệt đến tệp đó. Có thể có khoảng trống trước chỉ thị @page, nhưng không thể có bất kỳ ký tự nào khác, kể cả một khối mã trống. Nội dung khác duy nhất được cho phép trên cùng một dòng với chỉ thị @page là một

Các trang nội dung có thể có một tệp bố cục được chỉ định, nhưng điều này không bắt buộc. Chúng có thể tùy chọn bao gồm các khối mã, HTML, JavaScript và mã Razor nội tuyến

Cú pháp dao cạo

Các trang nội dung chủ yếu bao gồm HTML, nhưng chúng cũng bao gồm cú pháp Razor cho phép đưa mã C# thực thi vào nội dung. Mã C# được thực thi trên máy chủ và thường dẫn đến nội dung động được bao gồm trong phản hồi được gửi tới trình duyệt

Phương pháp tiếp cận tệp đơn

Mặc dù không được khuyến khích nhưng vẫn có thể phát triển các ứng dụng Razor Page chỉ dựa trên các trang nội dung. Ví dụ sau đây mô tả cách tiếp cận gần giống với cách tiếp cận quen thuộc nhất với các nhà phát triển có nền tảng về tập lệnh, như PHP hoặc ASP cổ điển

Thí dụ. cshtml

@page 
@{
    var name = string.Empty;
    if (Request.HasFormContentType)
    {
        name = Request.Form["name"];
    }
}

Name:
@if (!string.IsNullOrEmpty(name)) {

Hello @name!

}

Trang nội dung Dao cạo yêu cầu chỉ thị @page ở đầu tệp. Thuộc tính

@page

@functions {
    [BindProperty]
    public string Name { get; set; }
}

Name:
@if (!string.IsNullOrEmpty(Name)) {

Hello @Name!

}
2 được sử dụng để xác định xem một biểu mẫu đã được đăng hay chưa và bộ sưu tập
@page

@functions {
    [BindProperty]
    public string Name { get; set; }
}

Name:
@if (!string.IsNullOrEmpty(Name)) {

Hello @Name!

}
3 được tham chiếu trong khối mã Razor với giá trị liên quan trong đó được gán cho biến
@page

@functions {
    [BindProperty]
    public string Name { get; set; }
}

Name:
@if (!string.IsNullOrEmpty(Name)) {

Hello @Name!

}
4

Khối mã Razor được biểu thị bằng dấu mở

@page

@functions {
    [BindProperty]
    public string Name { get; set; }
}

Name:
@if (!string.IsNullOrEmpty(Name)) {

Hello @Name!

}
5 và được kết thúc bằng dấu đóng
@page

@functions {
    [BindProperty]
    public string Name { get; set; }
}

Name:
@if (!string.IsNullOrEmpty(Name)) {

Hello @Name!

}
6. Nội dung trong khối là mã C# tiêu chuẩn

Cấu trúc điều khiển đơn lẻ không cần khối mã. Bạn có thể chỉ cần đặt trước chúng bằng ký hiệu

@page

@functions {
    [BindProperty]
    public string Name { get; set; }
}

Name:
@if (!string.IsNullOrEmpty(Name)) {

Hello @Name!

}
7. Điều này được minh họa bằng khối
@page

@functions {
    [BindProperty]
    public string Name { get; set; }
}

Name:
@if (!string.IsNullOrEmpty(Name)) {

Hello @Name!

}
8 trong ví dụ trước

Để hiển thị giá trị của một biến hoặc biểu thức C#, bạn đặt trước nó bằng ký hiệu

@page

@functions {
    [BindProperty]
    public string Name { get; set; }
}

Name:
@if (!string.IsNullOrEmpty(Name)) {

Hello @Name!

}
7 như được hiển thị với biến
@page

@functions {
    [BindProperty]
    public string Name { get; set; }
}

Name:
@if (!string.IsNullOrEmpty(Name)) {

Hello @Name!

}
4 trong khối
@page

@functions {
    [BindProperty]
    public string Name { get; set; }
}

Name:
@if (!string.IsNullOrEmpty(Name)) {

Hello @Name!

}
8

Khối chức năng

Ví dụ tiếp theo dẫn đến chức năng tương tự như ví dụ trước, nhưng nó sử dụng khối

@functions{
    void DisplayDate(DateTime dt)
    {
        @dt.ToString("dddd, dd MMMM yyyy")
    }
}
2 để khai báo một thuộc tính công khai được tô điểm bằng thuộc tính
@functions{
    void DisplayDate(DateTime dt)
    {
        @dt.ToString("dddd, dd MMMM yyyy")
    }
}
3, đảm bảo rằng thuộc tính đó tham gia vào liên kết mô hình, loại bỏ nhu cầu gán giá trị biểu mẫu theo cách thủ công

Thí dụ. cshtml

@page

@functions {
    [BindProperty]
    public string Name { get; set; }
}

Name:
@if (!string.IsNullOrEmpty(Name)) {

Hello @Name!

}

Cách tiếp cận này là một cải tiến so với cách tiếp cận trước đó ở chỗ sử dụng kiểu gõ mạnh và trong khi logic xử lý có thể bị hạn chế đối với khối

@functions{
    void DisplayDate(DateTime dt)
    {
        @dt.ToString("dddd, dd MMMM yyyy")
    }
}
2, trang sẽ trở nên khó bảo trì và kiểm tra hơn. Tuy nhiên, có thể khai báo các phương thức và thậm chí cả các lớp lồng nhau trong khối
@functions{
    void DisplayDate(DateTime dt)
    {
        @dt.ToString("dddd, dd MMMM yyyy")
    }
}
2

Bạn cũng có thể sử dụng khối

@functions{
    void DisplayDate(DateTime dt)
    {
        @dt.ToString("dddd, dd MMMM yyyy")
    }
}
2 để khai báo các phương thức cục bộ bao gồm HTML để hoạt động như trình trợ giúp hiển thị cho trang hiện tại. Bạn có thể làm điều này nếu một trang có nhiều khối mã bao gồm HTML và yêu cầu áp dụng định dạng tương tự. Điều này chỉ có thể trong ASP. NET lõi 3. x

Trong các ví dụ sau, một phương thức được khai báo để định dạng các giá trị

@functions{
    void DisplayDate(DateTime dt)
    {
        @dt.ToString("dddd, dd MMMM yyyy")
    }
}
7

@functions{
    void DisplayDate(DateTime dt)
    {
        @dt.ToString("dddd, dd MMMM yyyy")
    }
}

Bất cứ nơi nào bạn muốn hiển thị một ngày với định dạng này trong một trang, bạn sẽ làm như sau

@DisplayDate(myDate)

Điều này hữu ích nếu bạn cần sửa đổi đầu ra, vì bạn chỉ cần thực hiện thay đổi ở một nơi

Có thể làm điều gì đó tương tự trong Razor Pages 2. x, nhưng phương thức phải được khai báo trong một khối mã như sau

@{
    Func DisplayDate = @@item.ToString("dddd, dd MMMM yyyy");
}

Biến

@functions{
    void DisplayDate(DateTime dt)
    {
        @dt.ToString("dddd, dd MMMM yyyy")
    }
}
8 là một biến đặc biệt đề cập đến tham số đầu tiên được truyền vào phương thức. Cách sử dụng là như nhau, nhưng bạn sẽ cần thêm chỉ thị
@functions{
    void DisplayDate(DateTime dt)
    {
        @dt.ToString("dddd, dd MMMM yyyy")
    }
}
9 cho
@DisplayDate(myDate)
0

Tập tin mô hình trang

Cách được khuyến nghị để phát triển các ứng dụng Razor Pages là giảm thiểu số lượng mã phía máy chủ trong trang nội dung đến mức tối thiểu nhất. Bất kỳ mã nào liên quan đến việc xử lý đầu vào hoặc dữ liệu của người dùng phải được đặt trong các tệp PageModel, chia sẻ ánh xạ một-một với trang nội dung được liên kết của chúng. Chúng thậm chí chia sẻ cùng một tên tệp, mặc dù có thêm một. cs ở cuối để biểu thị thực tế rằng chúng thực sự là các tệp lớp C#

Đoạn mã sau hiển thị Ví dụ. tệp cshtml được điều chỉnh để hoạt động với PageModel

Thí dụ. cshtml

@page
@model ExampleModel

Name:
@if (!string.IsNullOrEmpty(Model.Name)) {

Hello @Model.Name!

}

Và đây là mã cho lớp PageModel

Thí dụ. cshtml. cs

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace RazorPages.Pages
{
    public class ExampleModel : PageModel
    {
        [BindProperty]
        public string Name { get; set; }
    }
}

Lớp PageModel có một thuộc tính duy nhất được định nghĩa như trong ví dụ trước và nó được tô điểm bằng thuộc tính

@functions{
    void DisplayDate(DateTime dt)
    {
        @dt.ToString("dddd, dd MMMM yyyy")
    }
}
3. Trang nội dung không còn có khối
@functions{
    void DisplayDate(DateTime dt)
    {
        @dt.ToString("dddd, dd MMMM yyyy")
    }
}
2 nữa, nhưng giờ đây nó bao gồm một chỉ thị
@DisplayDate(myDate)
3, xác định rằng
@DisplayDate(myDate)
4 là mô hình cho trang. Điều này cũng cho phép trình trợ giúp Thẻ trong trang, tận dụng thêm việc kiểm tra loại thời gian biên dịch

Các dự án mặc định tạo các trang nội dung được ghép nối với các tệp PageModel. Đây là cách tiếp cận được khuyến nghị. Tuy nhiên, cũng rất hữu ích khi biết cách làm việc với các trang nội dung không có PageModel trong những trường hợp không cần thiết

Cshtml có phải là Dao cạo không?

tệp cshtml chỉ ra rằng tệp là Trang Razor .

@{} trong Cshtml là gì?

@{ } dành cho viết mã C# bên trong một. trang dao cạo cshtml . Tất cả mã C# được viết bằng. cshtml chỉ được biên dịch 1 lần cho mỗi yêu cầu, bạn không thể sử dụng nó để tương tác với người dùng ở phía máy khách.

Làm cách nào để tạo chế độ xem Dao cạo trong MVC?

Nhấp chuột phải vào thư mục Lượt xem\HelloWorld và nhấp vào Thêm, sau đó nhấp vào MVC 5 Xem trang có bố cục (Dao cạo) . Trong hộp thoại Chỉ định Tên cho Mục, nhập Chỉ mục, rồi bấm OK. Trong hộp thoại Select a Layout Page, chấp nhận _Layout mặc định. cshtml và nhấp vào OK.

Cú pháp Razor trong MVC là gì?

Razor là cú pháp đánh dấu cho phép bạn nhúng mã dựa trên máy chủ vào các trang web bằng C# và VB. Mạng . Nó không phải là một ngôn ngữ lập trình. Nó là một ngôn ngữ đánh dấu phía máy chủ. Dao cạo không có quan hệ với ASP. NET MVC vì Razor là một công cụ tạo khuôn mẫu đa năng.