在 ASP.Net 中创建剃刀动态 html table

Question

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

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

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

Answer 1

这行得通吗？不能 post 它作为评论，我假设与@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 的解决方案似乎更好

以下是示例输出

Answer 2

使用列表和 css 规则而不是 table:

可以轻松实现

<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

Answer 3

您可以使用简单的 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>
}

在 ASP.Net 中创建剃刀动态 html table

Creating a razor dynamic html table in ASP.Net

c#

asp.net

rss

asp.net-mvc

razor