如何管理子参数数组

时间:2019-11-14 18:10:58

标签: asp.net-core blazor

我尝试实现un grid组件,但是遇到了blazor组件的逻辑问题。

我实际上是这样管理我的网格的

<MyGrid>
<GridHeader>
<th scope="col">Nom</th>
 <th scope="col">Statut</th>
</GridHeader>
<GridBody Context="child">
<td>@child.NomPrenom</td>
<td>@child.LibStatut</td>
</GridBody>
</MyGrid>
and on the Mygrid component like this
[Parameter]
        public RenderFragment GridHeader { get; set; }
[Parameter]
        public RenderFragment<TableItem> GridBody { get; set; }
[Parameter]
        public IEnumerable<TableItem> Items { get; set; }

<thead>
                    <tr>
                        @GridHeader
                    </tr>
                </thead>
@foreach (var element in Items)
{
    <tr
        @GridRow(element)
    </tr>
}
I want to change this for a column based system, like this

<MyGrid>
<GridColumns Context="child">
<GridColumn Header="Nom">
@child.NomPrenom
</GridColumn>
<GridColumn Header="Statut">
@child.LibStatut
</GridColumn>
</GridColumns>
</MyGrid>

在网格组件上,对列进行迭代以首先呈现标题,然后对列和项目进行迭代以呈现表主体。

令人惊讶的是,我没有在互联网上找到这样的例子,也没有找到实现这一目标的好方法。

这是有可能的,因为我在这里找到了这样的示例:https://blazor.syncfusion.com/demos/Grid/DefaultFunctionalities,但不幸的是我没有源代码。

您是否知道我该如何实现?

感谢您的帮助!

1 个答案:

答案 0 :(得分:-1)

  

这是有可能的,因为我在这里找到了这样的示例:https://blazor.syncfusion.com/demos/Grid/DefaultFunctionalities,但是很遗憾,我无法访问源代码。

这是一个简单的演示,如下所示:

1。安装<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Sample Project</title> </head> <body> <form id="form" name="form" method="POST"> {% csrf_token %} {{ form.as_p }} <input type="submit" value="Save"> </form> </body> </html> NuGet软件包。

注意:对于asp.net core 3.0,您可以安装以下版本:Syncfusion.EJ2.Blazor,而不是最新的预发行版。

2。通过17.2.0.52-beta中的CDN或本地npm软件包添加客户端资源。

~/Pages/_Host.cshtml

3。创建剃刀组件:

<head>
<link href="https://cdn.syncfusion.com/ej2/17.3.27/fabric.css" rel="stylesheet" />
<script src="https://cdn.syncfusion.com/ej2/17.3.27/dist/ej2.min.js"></script>
<script src="https://cdn.syncfusion.com/ej2/17.3.27/dist/ejs.interop.min.js">
</script>
</head>

4。结果:

enter image description here

参考:https://ej2.syncfusion.com/blazor/documentation/grid/data-binding/