Phạm Duy Anh

Blazor bao gồm các layouts để giúp bạn dễ dàng viết mã các phần tử giao diện người dùng (UI) phổ biến sẽ xuất hiện trên nhiều trang trong ứng dụng của bạn.

Giả sử bạn đang làm việc trong trang web của công ty giao bánh pizza và bạn đã tạo nội dung cho hầu hết các trang chính dưới dạng một tập hợp các Blazor components . Bạn muốn đảm bảo rằng các trang này có cùng branding, menu điều hướng và phần chân trang, nhưng bạn không muốn phải sao chép và dán mã đó vào nhiều tệp.

Tại đây, bạn sẽ học cách sử dụng các ayout components trong Blazor để hiển thị HTML chung trên nhiều trang.

Code một Blazor layout

Blazor layout  là một loại component cụ thể, vì vậy việc viết  Blazor layout  là một nhiệm vụ tương tự như viết các component khác để hiển thị giao diện người dùng trong ứng dụng của bạn.

Ví dụ: bạn sử dụng khối @code và nhiều lệnh theo cùng một cách. layout  được xác định trong các tệp có phần mở rộng .razor. Tệp thường được lưu trữ trong thư mục Shared trong ứng dụng của bạn, nhưng bạn có thể chọn lưu trữ tệp ở bất kỳ vị trí nào mà các component sử dụng tệp có thể truy cập được.

Hai yêu cầu là duy nhất đối với các thành phần bố cục:

• Bạn phải kế thừa lớp LayoutComponentBase.
• Bạn phải đưa chỉ thị @Body vào vị trí mà bạn muốn hiển thị nội dung của các thành phần tham chiếu.

@inherits LayoutComponentBase

<header>
<h1>Blazing Pizza</h1>
</header>

<nav>
<a href="Pizzas">Browse Pizzas</a>
<a href="Toppings">Browse Extra Toppings</a>
<a href="FavoritePizzas">Tell us your favorite</a>
<a href="Orders">Track Your Order</a>
</nav>

@Body

<footer>
@new MarkdownString(TrademarkMessage)
</footer>

@code {
public string TrademarkMessage { get; set; } = "All content is &copy; Blazing Pizzas 2021";
}

Layout components không bao gồm chỉ thị @page vì chúng không xử lý các yêu cầu trực tiếp và không nên tạo một route  cho chúng. Thay vào đó, các components  tham chiếu sử dụng chỉ thị @page.

Nếu bạn đã tạo ứng dụng Blazor của mình từ  Blazor project template, layout mặc định của ứng dụng là thành phần Shared / MainLayout.razor.

Sử dụng một layout trong một Blazor component

Để sử dụng một layout từ một component khác, hãy thêm chỉ thị @layout với tên của layout để áp dụng. HTML của thành phần sẽ được hiển thị ở vị trí của chỉ thị @Body.

@page "/FavoritePizzas/{favorite}"
@layout BlazingPizzasMainLayout

<h1>Choose a Pizza</h1>

<p>Your favorite pizza is: @Favorite</p>

@code {
[Parameter]
public string Favorite { get; set; }
}

Sơ đồ này minh họa cách một component và một layout được kết hợp để hiển thị HTML cuối cùng:

Nếu bạn muốn áp dụng layout  cho tất cả các thành phần Blazor trong một thư mục, bạn có thể sử dụng tệp _Imports.razor làm lối tắt. Khi trình biên dịch Blazor tìm thấy tệp này, nó sẽ tự động bao gồm các chỉ thị của nó trong tất cả các component trong thư mục. Kỹ thuật này loại bỏ sự cần thiết phải thêm chỉ thị @layout vào mọi thành phần và áp dụng cho các thành phần trong cùng thư mục với tệp _Imports.razor và tất cả các thư mục con của nó.

Không thêm chỉ thị @layout vào tệp _Imports.razor trong thư mục gốc của dự án của bạn vì điều đó dẫn đến một vòng lặp bố cục vô hạn.

Nếu bạn muốn áp dụng bố cục mặc định cho mọi component trong tất cả các thư mục của ứng dụng web của mình, bạn có thể làm như vậy trong thành phần App.razor, nơi bạn định cấu hình thành phần Bộ định tuyến, như bạn đã học trong phần bài trước Trong thẻ <RouteView> , sử dụng thuộc tính DefaultLayout.

<Router AppAssembly="@typeof(Program).Assembly">
<Found Context="routeData">
<RouteView RouteData="@routeData" DefaultLayout="@typeof(BlazingPizzasMainLayout)" />
</Found>
<NotFound>
<p>Sorry, there's nothing at this address.</p>
</NotFound>
</Router>

Các component có bố cục được chỉ định trong chỉ thị @layout của riêng chúng hoặc trong tệp _Imports.razor, sẽ ghi đè cài đặt bố cục mặc định này.

theo: https://docs.microsoft.com/en-us/learn/modules/use-pages-routing-layouts-control-blazor-navigation/6-build-reusable-component-using-layouts