Question

我目前正在尝试使用剃刀为每个第3列添加一个新行。但是，使用当前代码，只有前三列被包装成一行，其余列被跳过。我一直在寻找修复，但似乎没有一个与我的代码一起工作。有人有解决方案吗？

@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

这些都不适合我，但以下是：

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

Answer 2

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

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

Answer 3

使用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 4

所以，我知道我的游戏有点晚了并且有一个接受的答案，但是，我想添加我的演绎，因为它不需要重复的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项将创建一行。

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

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

这样就可以从平面列表中为您提供从左到右，从上到下的表结构，而不需要额外的if语句和编译警告。

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

4 个答案: