c# - 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。请问有什么建议吗？

标签： c#.netasp.net-corerazorblazor

Answer 1

尝试使用以下代码。If i+3>=DashboardData.GadgetData.Count(),only iterator from ito DashboardData.GadgetData.Count()-1.If ,only i+3<DashboardData.GadgetData.Count()iterator from ito 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>
}