Bài viết này sẽ hướng dẫn bạn cách tận dụng **Blazor Bootstrap Grid** để hiển thị dữ liệu dạng bảng một cách hiệu quả trong ứng dụng Blazor của bạn. Chúng ta sẽ khám phá các tính năng mạnh mẽ như **lọc dữ liệu**, **phân trang**, **sắp xếp**, và đặc biệt là **chi tiết dạng xem (Detail View)**, giúp bạn tạo ra các bảng dữ liệu tương tác cao và dễ sử dụng.
Blazor Bootstrap Grid là một component mạnh mẽ cho phép bạn hiển thị dữ liệu từ nguồn dữ liệu trong định dạng bảng. Nó hỗ trợ các tính năng như lọc ở phía máy khách và máy chủ, phân trang, và sắp xếp, cung cấp một trải nghiệm người dùng mượt mà và hiệu quả.
Để kích hoạt **Detail View**, bạn cần thiết lập tham số AllowDetailView thành true. Điều này cho phép bạn hiển thị thông tin chi tiết bổ sung cho mỗi hàng trong bảng khi người dùng tương tác. Đây là một cách tuyệt vời để trình bày dữ liệu liên quan mà không làm lộn xộn bảng chính.
Ví dụ:
<Grid TItem="Product" Class="table table-hover border-top" Data="products" AllowDetailView="true" AllowSorting="true">
<GridColumns>
<GridColumn TItem="Product" HeaderText="Id" PropertyName="Id" SortKeySelector="item => item.Id">@context.Id</GridColumn>
<GridColumn TItem="Product" HeaderText="Employee Name" PropertyName="Name" SortKeySelector="item => item.Name">@context.Name</GridColumn>
<GridColumn TItem="Product" HeaderText="Active" PropertyName="IsActive" SortKeySelector="item => item.IsActive">@context.IsActive</GridColumn>
</GridColumns>
<GridDetailView TItem="Product">
<Grid TItem="Ingredient" Class="table table-hover border-top" Data="GetIngredients(context.Id)">
<GridColumns>
<GridColumn TItem="Ingredient" Context="emp1" HeaderText="Id" PropertyName="Id">@emp1.Id</GridColumn>
<GridColumn TItem="Ingredient" Context="emp1" HeaderText="Description" PropertyName="Description">@emp1.Description</GridColumn>
<GridColumn TItem="Ingredient" Context="emp1" HeaderText="Unit" PropertyName="Unit">@emp1.Unit</GridColumn>
<GridColumn TItem="Ingredient" Context="emp1" HeaderText="Quantity" PropertyName="Quantity">@emp1.Quantity</GridColumn>
</GridColumns>
</Grid>
</GridDetailView>
</Grid>
Để phân biệt rõ ràng các cột dữ liệu chính (GridColumn) với phần hiển thị chi tiết (GridDetailView), hãy lồng các thẻ <GridColumn> vào bên trong thẻ <GridColumns>. Điều này giúp cấu trúc code dễ đọc và bảo trì hơn.
Hãy xem xét một ví dụ nơi bạn có danh sách sản phẩm và muốn hiển thị danh sách các thành phần cho mỗi sản phẩm. Sử dụng Blazor Bootstrap Grid, bạn có thể hiển thị danh sách sản phẩm trong bảng chính, và khi người dùng mở rộng một hàng, một bảng chi tiết sẽ hiển thị các thành phần liên quan đến sản phẩm đó.
Đoạn code Razor sau đây minh họa cách triển khai **Detail View** với một **nested grid**:
<Grid TItem="Product" Class="table table-hover border-top" Data="products" AllowDetailView="true" AllowSorting="true">
<GridColumns>
<GridColumn TItem="Product" HeaderText="Id" PropertyName="Id" SortKeySelector="item => item.Id">@context.Id</GridColumn>
<GridColumn TItem="Product" HeaderText="Tên sản phẩm" PropertyName="Name" SortKeySelector="item => item.Name">@context.Name</GridColumn>
<GridColumn TItem="Product" HeaderText="Hoạt động" PropertyName="IsActive" SortKeySelector="item => item.IsActive">@context.IsActive</GridColumn>
</GridColumns>
<GridDetailView TItem="Product">
<Grid TItem="Ingredient" Class="table table-hover border-top" Data="GetIngredients(context.Id)">
<GridColumns>
<GridColumn TItem="Ingredient" Context="emp1" HeaderText="Id" PropertyName="Id">@emp1.Id</GridColumn>
<GridColumn TItem="Ingredient" Context="emp1" HeaderText="Mô tả" PropertyName="Description">@emp1.Description</GridColumn>
<GridColumn TItem="Ingredient" Context="emp1" HeaderText="Đơn vị" PropertyName="Unit">@emp1.Unit</GridColumn>
<GridColumn TItem="Ingredient" Context="emp1" HeaderText="Số lượng" PropertyName="Quantity">@emp1.Quantity</GridColumn>
</GridColumns>
</Grid>
</GridDetailView>
</Grid>
Để code hoạt động bạn cần định nghĩa dữ liệu như sau:
@code {
private List<Product> products = new List<Product>
{
new Product { Id = 10, Name = "Product 10", IsActive = true },
new Product { Id = 20, Name = "Product 20", IsActive = true },
new Product { Id = 30, Name = "Product 30", IsActive = true },
new Product { Id = 40, Name = "Product 40", IsActive = true },
new Product { Id = 50, Name = "Product 50", IsActive = true }
};
private List<Ingredient> ingredients = new List<Ingredient>
{
new Ingredient { Id = 10105, ProductId = 10, Description = "Ingredient 1", Unit = "UNIT1", Quantity = 350 },
new Ingredient { Id = 10106, ProductId = 10, Description = "Ingredient 2", Unit = "UNIT1", Quantity = 600 },
new Ingredient { Id = 10107, ProductId = 10, Description = "Ingredient 3", Unit = "UNIT2", Quantity = 13 },
new Ingredient { Id = 10108, ProductId = 10, Description = "Ingredient 4", Unit = "UNIT3", Quantity = 25 },
new Ingredient { Id = 20109, ProductId = 20, Description = "Ingredient 5", Unit = "UNIT1", Quantity = 750 },
new Ingredient { Id = 20110, ProductId = 20, Description = "Ingredient 3", Unit = "UNIT2", Quantity = 13 },
new Ingredient { Id = 10111, ProductId = 10, Description = "Ingredient 4", Unit = "UNIT3", Quantity = 25 },
new Ingredient { Id = 20112, ProductId = 20, Description = "Ingredient 5", Unit = "UNIT1", Quantity = 750 },
new Ingredient { Id = 40113, ProductId = 40, Description = "Ingredient 3", Unit = "UNIT2", Quantity = 13 },
new Ingredient { Id = 50114, ProductId = 50, Description = "Ingredient 4", Unit = "UNIT3", Quantity = 25 },
new Ingredient { Id = 20115, ProductId = 20, Description = "Ingredient 5", Unit = "UNIT1", Quantity = 750 },
};
private IEnumerable<Ingredient> GetIngredients(int productId) => ingredients.Where(i => i.ProductId == productId);
public record class Product
{
public int Id { get; set; }
public string? Name { get; set; }
public bool IsActive { get; set; }
}
public record class Ingredient
{
public int Id { get; set; }
public int ProductId { get; set; }
public string? Description { get; set; }
public string? Unit { get; set; }
public int Quantity { get; set; }
}
}
**Blazor Bootstrap Grid** với tính năng **Detail View** là một công cụ mạnh mẽ để hiển thị dữ liệu một cách có cấu trúc và dễ tương tác. Bằng cách tận dụng các tính năng lọc, phân trang, sắp xếp và chi tiết dạng xem, bạn có thể tạo ra các ứng dụng Blazor chuyên nghiệp và thân thiện với người dùng.
Bài viết liên quan