在 ASP.Net 中创建一个剃刀动态 html 表

【问题标题】：Creating a razor dynamic html table in ASP.Net在 ASP.Net 中创建一个剃刀动态 html 表
【发布时间】：2015-01-30 10:05:59
【问题描述】：

我正在尝试一次在第三行中显示 RSS 新闻项目。我目前可以使用代码一次在每一行中显示每个项目：

@foreach (var item in ViewBag.RSSFeed)
    {
        <tr>
            <td>
                @Html.Raw(item.Description)
            </td>
        </tr>
    }

我尝试使用两个循环语句，但无法让它不破坏代码。有人如何使用循环语句在 RSS 提要中一次动态生成三行中的内容？

【问题讨论】：

无法理解您的代码有什么问题，看起来不错有什么问题？
你提到的代码看起来不错有什么问题？您的意思是要在一行中并排显示？
我猜 OP 正试图每行显示 3 列。

标签： c# asp.net asp.net-mvc razor rss

【解决方案1】：

使用列表和css规则而不是表格可以轻松实现：

<ul>
    @foreach (var item in ViewBag.RSSFeed)
    {
        <li>
            @Html.Raw(item.Description)
        </li>
    }
</ul>

CSS：

ul {
    list-style-type: none;
}

ul li {
    float: left;
    padding: 5px;
}

ul li:nth-child(3n + 4) {
    clear: left;
    float: left;
}

JSFIDDLE

【讨论】：

这不是一个很好的解决方案，因为当
元素的长度不同时它会中断。

【解决方案2】：

您可以使用简单的for loop 代替foreach 循环来实现目标。

@{var items = ViewBag.RSSFeed;}
@for (int i = 0; i < items.Count(); i++)
{ 
<tr>
    <td>
        @Html.Raw(items[i].Description)
    </td>
    @{i++;}

    @if (i < items.Count())
    {
        <td>
            @Html.Raw(items[i].Description)
        </td>
    }
    @{i++;}

    @if (i < items.Count())
    {
        <td>
            @Html.Raw(items[i].Description)
        </td>
    }
</tr>
}

【讨论】：

【解决方案3】：

这行得通吗？不能将其作为评论发布，我假设@Zabavsky 所说的相同。

  @{var i = 0;
  var idx = 0;
  var j = 2;}
<table>
    @while (i <= j)
    {
        <tr>
            @while (idx < ViewBag.RssFeed.Length && i <= j)
            {
                <td>
                    @Html.Raw(ViewBag.RssFeed[idx]);
                    @{idx++; i++;}

                    i++;
                </td>
            }
            @{j += 3;
            }
            @if (idx >= ViewBag.RssFeed.Length)
            {
                break;
            }
        </tr>
    }
</table>

这只是一个示例

已修改：这将每行打印 3 个。但@Zabavsky 的解决方案似乎更好

以下是示例输出

【讨论】：