我可以在 Blazor 中编写一个函数来动态呈现视图中的元素吗？

Question

我有一个名为 BusinessUnit 的对象，它包含一个子业务单位列表，我需要一个函数来为其父项下的每个子项呈现

元素。到目前为止我的代码如下：

<ul id="Level0">
    @foreach (var bizUnit in businessUnitViewModel.BusinessUnitInfos)
    {
        <li>
            <span>@bizUnit.BusinessUnitName</span>
                <ul class="nested">
                    @foreach (var childOfbizUnit in bizUnit.Children)
                    {
                        <li>@childOfbizUnit.BusinessUnitName</li>
                    }
                </ul>
        </li>
    }
</ul>

嵌套的 foreach 与第一个基本相同，但对它们进行硬编码限制了我可以拥有的层级数。我需要这样的功能：

 public void HasKids(BusinessUnitInfo bizUnit)
    {
        foreach (var bizUnitChild in bizUnit.Children)
        {
            //Render an <li> tag element with bizUnitChild's 
            name<li>bizUnitChild.Name</li>

            HasKids(bizUnitChild);
        }
    }

有谁知道我可以为最后一个代码块中的注释做些什么吗？我可以使用 C# 代码动态呈现列表标签吗？比 :)

Answer 1

如果结构是一棵树，那么您实际上需要一个递归组件。

注意：出于性能原因，在从循环生成 UI 标记时，您应该始终使用 @key 指令。您可以在 Blazor University.

阅读更多内容

<li>
  @Item.Name
  if (@Item.Children.Any())
  {
    <ul id="@level">
      @foreach(var child in Item.Children)
      {
        <ShowItem Item=@child Level="@(Level + 1)" @key=child/>
      }
    </ul>
  }
</li>

@code {
  [Parameter] MyElementClass Item { get; set; }
  [Parameter] int Level { get; set; }
}

在您的主页中，您只需执行此操作

<ul level="0">
  @foreach(var item in TopLevelItems)
  {
    <ShowItem Item=@item Level=1 @key=item/>
  }
</ul>

Answer 2

我对 Peter Morris 的代码做了一些改进：

<li>
  @Item.Name
  @if (Item.Children != null && Item.Children.Any())
  {
    <ul class="@Level">
      @foreach(var child in Item.Children)
      {
        <ShowItem Item=@child Level="@(Level + 1)" @key=child/>
      }
    </ul>
  }
</li>

@code {
  [Parameter] public MyElementClass Item { get; set; }
  [Parameter] public int Level { get; set; }
}

我添加了 null 检查，因为当属性为 null 时我遇到了问题，修复了 ul 的 Id 中的拼写错误并将 id 更改为 class。

我可以在 Blazor 中编写一个函数来动态呈现视图中的元素吗？

Can I write a function in Blazor that dynamically renders elements in a View?

mvvm

razor

blazor

blazor-server-side