TOC

This article is currently in the process of being translated into Vietnamese (~96% done).

Layout:

Sections

Layout cho phép tái sử dụng phần chung giữa các trang khác nhau nhưng đôi khi ta muốn thay đổi nội dung đi một chút. Kịch bản chung la ta có thể dùng mã JavaScript trong phầ HEAD, và thêm vào menu sẵn có một menu mới hoặc thự hiện sidebar tùy biến dựa trên phần của web site ma người dùng sử dụng. Đó là Section - cho phép bạn định nghĩa phần nào đó trong Layout, trang/View có thể thêm vào tùy biến giao diện. Chúng ta bắt đầu tìm hiểu.

Trước hết, chúng ta dùng RenderSection() trong Layout:

_Layout.cshtml:

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>_Layout</title>
</head>
<body>

    @RenderBody()
    
    <p>Lots of Layout content goes here...</p>

    @RenderSection("Footer")

</body>
</html>

Lưu ý rằng để gọi RenderSection() - giống RenderBody() vì chỉ đơn giản khai báo trong Layout. Như vậy chúng ta muốn trả về section "Footer" gần cuối trang view. Chúng ta phải định nghĩa Section trong trang/view dùng Layout. Đây là hai View khác nhau, dùng Layout, nhưng mỗi view sẽ có section footer khác biệt.

About.cshtml:

@{
    ViewData["Title"] = "About";
}

@section Footer {
    Hello from the About page!
}

<h2>About</h2>

Khai báo đơn giản dùng Razor: ký tự @, theo sau là từ khóa section và sau đó là tên của Section bạn muốn định nghĩa. Bên trong dấu {} là nội dung của section. Ví dụ trên chúng ta chỉ dùng dòng text đơn giản, thực tế có thể phức tạp hơn. Ta hãy thử làm với Product:

Products.cshtml:

@{
    ViewData["Title"] = "Products";
}

@section Footer {
    <span>
        Hello from the <b>Products</b> page!
    </span>
}

<h2>Products</h2>

Đã có _ViewStart thì hai view này sẽ dùng Layout có chứa section tùy biến. Bạn sẽ thấy chúng có cùng layout nhưng chứa footer khác biệt.

Optional Sections

Tất cả các section đều được hiển thị theo mặc định. Có nghĩa là nếu trang của bạn dùng Layout với một hai vài section được định nghĩa thì trang của bạn cần phải định nghĩa tất cả section - nếu không thì sẽ có lỗi khi biên dịch. Tuy nhiên bạn có thể chuyển đổi section bắt buộc thành section tùy chọn:

@RenderSection("Footer", required : false)

Chỉ ra rằng section tùy chọn không bắt buộc. Nếu section chưa được định nghĩa thì cũng không có lỗi xảy ra.

Checking if a Section has been defined

Khi khai báo Section là tùy chọn thì có thể kiểm tra có section đó hay không:

@RenderSection("Footer", required : false)

@if(!IsSectionDefined("Footer"))
{
    <span>Generic footer message!</span>
}

Lúc này, nếu Section footer không có thì trang sẽ trả về dòng phản hồi.

Tổng kết

Section cho phép bạn định nghĩa phần mà ta muốn đưa vào layout. Rất hưu ích cho nhiều tình huống khác biệt.

This article has been fully translated into the following languages:
Is your preferred language not on the list? Click here to help us translate this article into your language!