Blazor breaking div-CodePudding

I am using .NET 5 and blazor.

I am getting very confused why this code works fine:

     <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>

But when I try to put some logic and try to construct a similar structure it breaks my div's:

    @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;
    }

I was also displaying the counter to be sure that is correct:

<p>@GadgetCounter</p>

and yes it shows properly 1,2 and 3.

The HTML it creates is this:

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

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

As you can see the row div does not contain the column divs. Any suggestion, please?

CodePudding user response：

Try to use the following code.If i 3>=DashboardData.GadgetData.Count(),only iterator from i to DashboardData.GadgetData.Count()-1.If i 3<DashboardData.GadgetData.Count(),only iterator from i to 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>
}

CodePudding user response：

This is working better, but I still need to consider the cases when the Take() will have 1 or 2 elements.

    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>
    }