时间戳

首页 > 解决方案 > 将附加数据传递给 Blazor 组件中的通用 RenderFragment

c# - 将附加数据传递给 Blazor 组件中的通用 RenderFragment

问题描述

我有一个简单的 Blazor 组件，它遍历一个通用列表：

@typeparam TItem;

 @foreach (var item in List)
        {
            @ElementTemplate(item); // What code should be here to pass i to the ElementTemplate????
            i++;
        }

@code {
    int i = 0;


    [Parameter] public List<TItem> List { get; set; }
    [Parameter] public RenderFragment<TItem> ElementTemplate { get; set; }
  }

我有另一个简单的组件，它将获取一个项目和一个索引来呈现数据（员工）：

<div> @Index . @Person.Name </div>

@code{
    [Parameter] public Person { get; set; }
    [Parameter] public int Index { get; set; }

}

在我的主页中，我有以下内容：

<GenericList List="employees">
    <ElementTemplate>
        <Employee Person="context" Index="?"></Employee>
    </ElementTemplate>
</GenericList>

如您所见，Employee 组件需要一个 Index 参数，如何从 GenericList 组件传递 Index？在此示例中，变量“i”应传递给 ElementTemplate 以及 Generic TItem 对象本身。

标签： c#asp.net-coregenericsblazor

解决方案

我发现快速/简单的方法是使用元组作为 RenderFragment 上下文：

@foreach (var item in List)
{
  @ElementTemplate((item,i));
  i++;
}

@code {
  int i=0;
  [Parameter] public List<TItem> List { get; set; }
  [Parameter] public RenderFragment<(TItem item, int index)> ElementTemplate { get; set; }
}

然后你的标记变成：

<GenericList List="employees">
    <ElementTemplate>
        <Employee @key=@context.index Person=@context.item Index=@context.index></Employee>
    </ElementTemplate>
</GenericList>

如果您愿意，可以在 GenericList 中使用实用程序类而不是元组。

推荐阅读