Blazor Grid 组件如何安装

Posted 2023-03-27

【中文标题】Blazor Grid 组件如何安装

【英文标题】：Blazor Grid component how to install it

【发布时间】：2022-01-16 18:15:35

【问题描述】：

刚刚发现Blazor 有一个新的grid 组件；然而，当我尝试在我的Razor 页面上使用它时，标记未被识别。我应该从 nuget 安装额外的 packages 还是？它到底在哪里？

<div class = "InventoryGrid">
<Grid Items="@forecasts" ItemSize="35" Virtualize="true">
    <PropertyColumn Title="Date" Property="@(x=>x.Date)" />"
</Grid>
</div>

【问题讨论】：

Blazor 没有内置组件“网格”

你指的是这个docs.microsoft.com/en-us/mobile-blazor-bindings/ui/grid-layout

给我的消息。我刚刚检查了 Repo，唯一的 Grid 是用于基准测试的剃须刀组件github.com/dotnet/aspnetcore/blob/main/src/Components/…

@MrCakaShaunCurtis 看这里：youtube.com/watch?v=kesUNeBZ1Os 9:01

【参考方案1】：

您所指的 Grid 组件是 Steve Sanderson 的 BlazeOrbital 演示解决方案中的项目代码。你可以找到它here。

它不是 Net6 中 Blazor 的一部分。

【讨论】：

是否有任何官方网格作为 Sanderson 的网格，或者只是在生产环境中使用 Sanderson 网格，你觉得呢？

我只是提升史蒂夫的代码并根据我的需要使用/调整它。我有我自己的 5.0 版本，你可以在这里看到例如 cec-blazor-database.azurewebsites.net/fetchdata。但它绑定到我的其他 UI 组件中。

【参考方案2】：

我强烈建议您制作自己的<ArieGrid> 组件，将表格数据作为Parameter 接收。在<ArieGrid> 中，对于每一行数据，您都有一个<ArieGridRow> 组件来获取一行数据。在<ArieGridRow> 中，对于每个数据单元格，您都有一个<ArieGridCell> 组件，它接收一个数据项。

在我看来，自己做这件事可能比试图弄清楚别人的组件是如何工作的要快。

【讨论】：

是的，但是当我们谈到排序、分页、虚拟网格等时，我没有太多时间去做更大的工作。我认为我可以使用开箱即用的东西。

【参考方案3】：

您可以在此处试用 RadZen 数据网格组件 - https://blazor.radzen.com/datagrid。我发现这很容易集成。

【讨论】：

但它不是免费的吗？

Radzen Blazor 组件是开源的，可免费用于商业用途。提供付费支持。