Blazor 损坏 div

Question

我正在使用 .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。有什么建议吗？

Answer 1

这样效果更好，但我仍然需要考虑 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>
    }

Answer 2

尝试使用下面的code.If i+3>=DashboardData.GadgetData.Count(),only iterator from i to DashboardData.GadgetData.Count()-1.如果i+3<DashboardData.GadgetData.Count(),only iterator from 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>
}

Blazor 损坏 div

Blazor breaking div

.net

c#

razor

asp.net-core

blazor