如何在 Razor mvc5 中每第 3 列创建一行？

Question

我目前正在尝试使用剃刀为每个第 3 列添加一个新行。但是，在当前代码中，只有前三列被换行，其余的被跳过。我一直在四处寻找修复方法，但 none 似乎适用于我的代码。有人对此有解决方案吗？

@model IEnumerable<Byporten.createpost>
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_LayoutClient.cshtml";
}

<div class="container">

    @{
        var itemCount = 0;
    }

    @while (itemCount < 3)
    {
        foreach (var item in Model.Reverse().Take(9))
        {
            if(itemCount == 0 )
            {
                @:<div class="row">
            }

            <div class="col-lg-4 col-md-6 col-sm-6">
                <div class="image-section">
                    <img src="~/images/uploads/@Html.DisplayFor(modelItem => item.ImageURL)"/>
                </div>
                <div class="title-section">
                    <h5><span class="fa fa-pencil"></span> @Html.DisplayFor(modelItem => item.Title)</h5>
                    @Html.ActionLink("Les mer", "viewArticle", new { id = item.Id })
                </div>
            </div>

            itemCount++;

            if ((itemCount % 3) == 0)
            {
                @:</div>
            }

        }
        
    }
    @{itemCount = 0;}
</div>

Answer 1

这将导致标记无效，因为 itemCount == 0 只会为真一次。将 if (itemCount == 0) 替换为 if (itemCount % 3 == 0 || itemCount % 3 == 3).

我还会摆脱 while 循环和底部的 itemCount 重置。

Answer 2

使用 Html.Raw() 方法避免条件结束标记的编译问题，使用临时变量 insertRow 避免在行条件中重复：

<div class="container">

@{
    var itemCount = 0;
}

@{
    foreach (var item in Model.Reverse().Take(9))
    {
        var insertRow = itemCount % 3 == 0;

        if(insertRow)
        {
            @Html.Raw("<div class="row">")
        }

        <div class="col-lg-4 col-md-6 col-sm-6">
            <div class="image-section">
                <img src="~/images/uploads/@Html.DisplayFor(modelItem => item.ImageURL)"/>
            </div>
            <div class="title-section">
                <h5><span class="fa fa-pencil"></span> @Html.DisplayFor(modelItem => item.Title)</h5>
                @Html.ActionLink("Les mer", "viewArticle", new { id = item.Id })
            </div>
        </div>

        if (insertRow)
        {
            @Html.Raw("</div>")
        }

        itemCount++;
    }
}
</div>

而且 while (itemCount < 3) 循环看起来很奇怪，对于您的任务来说是不必要的。

Answer 3

所以，我知道我来晚了一点，并且有一个公认的答案，但是，我想添加我的演绎版，因为它不需要重复的 if 语句，也不需要代码编译曲线。

我的方法是根据您在创建新行之前希望拥有的列数使用内部 for 循环：

<table>
        <thead>
                <tr>
                     <td><b>My List Data:</b></td>
                </tr>
        </thead>
        <tbody>
                @{
                   var items = Model.MyList;
                   const int colCount = 2;
                }
                @for (var i = 0; i < items.Count(); i += colCount)
                {
                  <tr>
                        @for (var c = 0; c < colCount && i + c < items.Count(); c++)
                        {
                            <td>@(items[i + c].Display):</td>
                        }
                  </tr>
                }
        </tbody>
</table>

前提是确定你的列数是多少，也就是上面用const int colCount =2;

显示

然后，使用 for 循环在您的列表上循环，但不是像传统那样递增 1，而是递增 colCount 值。

然后，有你的行标签。这意味着每 n+colCount 个项目将创建一行。

在该行标记内，使用另一个递增 1 的 for 循环，直到您到达 colCount 或您的父迭代器加上您的 colCount 迭代器等于或超过列表中的项目总数。

在该 for 循环中，只需创建一个位于 i（外部迭代器）+ c（colCount）迭代器索引处的单元格。

这为您提供了一个很好的从左到右、从上到下的 table 平面列表结构，没有额外的 if 语句和编译警告。

Answer 4

None 其中对我有用，但以下对我有用：

@foreach (var item in Model.Items)
{
    var itemCount = 0;
    foreach (var listItem in ((ListViewModel)item).ListItemViewModel.Items)
    {
        if (itemCount == 0)
        {
            @:<div class="row">
        }

        <div class="col-md-4">
            <a href="#" data-sf-role="toggleLink" class="organogram-title"><span class="organogram-outter-ring"></span>@listItem.Fields.Title</a>
            <div style="display:none;" class="sf-list-content">
                @Html.Raw(listItem.Fields.Content)
            </div>
            <div class="organogram-outter-ring"></div>
        </div>

        if (itemCount == 2)
        {
            itemCount = 0;
            @:</div>
        }
        else
        {
            itemCount++;
        }
    }
}

如何在 Razor mvc5 中每第 3 列创建一行？

How can I create a row for every 3rd column in Razor mvc5?

html

c#

asp.net-mvc

razor

asp.net-mvc-5