Blazor 打破 div答案

【问题标题】：Blazor breaking divBlazor 打破 div
【发布时间】：2021-11-21 22:04:08
【问题描述】：

我正在使用 .NET 5 和 blazor。

我很困惑为什么这段代码可以正常工作：

     <div class="row">
        <div class="col-md-4">
            <DonutChart GadgetData="@DashboardData.GadgetData.ToList()[0]" />
        </div>
        <div class="col-md-4">
            <DonutChart GadgetData="@DashboardData.GadgetData.ToList()[1]" />
        </div>
        <div class="col-md-4">
            <DonutChart GadgetData="@DashboardData.GadgetData.ToList()[2]" />
        </div>
    </div>

但是当我尝试添加一些逻辑并尝试构建类似的结构时，它会破坏我的 div：

    @foreach (GadgetData gadgetData in DashboardData.GadgetData)
    {
        switch (GadgetCounter) 
        {
            case 1:
                @:<div class="row">
                    <div class="col-md-4">
                        <DonutChart GadgetData="@gadgetData" />
                        <br />
                        <p>@GadgetCounter</p>
                    </div>
                break;
            case 2:
                <div class="col-md-4">
                    <DonutChart GadgetData="@gadgetData" />
                    <br />
                    <p>@GadgetCounter</p>
                </div>
                break;
            case 3:
                  <div class="col-md-4">
                      <DonutChart GadgetData="@gadgetData" />
                      <br />
                      <p>@GadgetCounter</p>
                  </div>
                @:</div>
                GadgetCounter = 0;
                break;
        }

        GadgetCounter += 1;
    }

我还显示了计数器以确保它是正确的：

<p>@GadgetCounter</p>

是的，它正确显示了 1,2 和 3。

它创建的 HTML 是这样的：

<div class="row"></div>

<div class="col-md-4">
   ......
</div>
<div class="col-md-4">
  ......
</div>
<div class="col-md-4">
 ......
</div>

如您所见，行 div 不包含列 div。有什么建议吗？

【问题讨论】：

将@:<div class="row"> 和@:</div> 移出foreach 循环？
另外，考虑在循环outside做开闭div，那么你可能根本不需要开关。
我无法移出 foreach，因为我正在注入组件。我可以有 3 个或 9 个组件，或者任何随机数量的组件来注入。如果我有 9，我想创建 3 行，每行应该有 3 列
循环之外是不可能的，正如我之前解释的那样
@mjwills 案例 1：注入第一个组件，使其具有行 div 和第一列 div (col-md-4)，案例 2 注入将放置在第二列中的第二个组件行的，所以我不放行 div，案例 3 它关闭到行 div 并且计数器再次启动以防有更多组件要注入，所以将开始一个新行

标签： c# .net asp.net-core razor blazor

【解决方案1】：

尝试使用下面的代码。如果i+3>=DashboardData.GadgetData.Count()，只有从i到DashboardData.GadgetData.Count()-1的迭代器。如果i+3<DashboardData.GadgetData.Count()，只有从i到i+3的迭代器：

@for (int i = 0; i < DashboardData.GadgetData.Count(); i = i + 3)
{
    var j = (i + 3 < DashboardData.GadgetData.Count()) ? i + 3:DashboardData.GadgetData.Count();
    <div class="row">
        @for (int k = i; k < j; k++)
        {
            <div class="col-md-4">
                <DonutChart GadgetData="@DashboardData.GadgetData[k]" />   
            </div>
        }

    </div>
}

【讨论】：

【解决方案2】：

这效果更好，但我仍然需要考虑 Take() 将具有 1 或 2 个元素的情况。

    for (int i = 0; i < DashboardData.GadgetData.Count(); i=i+3)
    {
        var items = DashboardData.GadgetData.Skip(i).Take(3);

        <div class="row">
            <div class="col-md-4">
                <DonutChart GadgetData="@items.ToList()[0]" />
            </div>
            <div class="col-md-4">
                <DonutChart GadgetData="@items.ToList()[1]" />
            </div>
            <div class="col-md-4">
                <DonutChart GadgetData="@items.ToList()[2]" />
            </div>
        </div>
    }

【讨论】：

在分配给items之前使用ToList而不是三次。
为什么不直接用 i+0、i+1 和 i+2 的变量索引 GadgetData？所有的skip/take/tolist似乎都没有必要