2列布局循环通过MVC c#模型实现

本文关键字：模型 实现 MVC 布局 循环 2列 | 更新日期: 2023-09-27 18:19:02

我试图创建一个2列引导布局与动态数据来自MVC模型，使用Razor。目标是在循环完成之前，每列中都有唯一的数据。下面的代码在两列中重复相同的数据。我需要什么逻辑才能使它工作

@{
int i=1;
foreach (var item in Model)
{
    <div class="row">
        <div class="col-md-6">
            <input type="checkbox" checked="@item.Checked" />
            @item.Description
        </div>
        <div class="col-md-6">
            <input type="checkbox" checked="@item.Checked" />
            @item.Description
        </div>
    </div>
    i++;
}

}

2列布局循环通过MVC c#模型实现

您需要在每个列上迭代项，以便在每个列中获得不同的项。一种方法是跟踪"偶数"answers"奇数"迭代，并在此基础上显示项目。

<div class="row">
int cnt1 = 0;
foreach (var item in Model)
{
  if(cnt1 % 2 == 0) {
    <div class="col-md-6">
        <input type="checkbox" checked="@item.Checked" />
        @item.Description
    </div>
  }
  cnt1++;
}
int cnt2 = 0;
foreach (var item in Model)
{
  if(cnt2 % 2 != 0) {
    <div class="col-md-6">
        <input type="checkbox" checked="@item.Checked" />
        @item.Description
    </div>
  }
 cnt2++;
}
</div> //end row

另一种实现方法是在控制器中将项目划分为2个列表，并迭代列表1的第一列和列表2的第二列。

对于生成的解决方案，您甚至可以在单个foreach循环中完成。它会更快，因为你只迭代一次循环。

  <div class="row">
        @{int a = 0; }
        @foreach (var auhtor in authors)
        {
            if (a % 2 == 0)
            {
            <div class="col-sm-6">
                @Html.ActionLink(auhtor, "Author", new { id = auhtor }, new { @class = "btn text-primary" })
            </div>
            }
            else
            {
            <div class="col-sm-6">
                @Html.ActionLink(auhtor, "Author", new { id = auhtor }, new { @class = "btn text-primary" })
            </div>
            }
            a++;
        }
    </div>
相关文章：