ASP.NET MVC多列显示在视图中

Question

在我的asp.net mvc网站上,我有一个包含6个条目的模型,我使用此代码来显示它:

<table class="table" cellspacing="0">
    @foreach (var item in Model)
    {
    <tr>
        <td style="border:0 none;">
            @Html.DisplayFor(modelItem => item.name)
        </td>
    </tr>
    }
</table>

Resulet是:

荷马

巴特

丽莎

玛吉

劣质煤

萌

但是我怎么能让它看起来像这样:( |仅用于显示它们在不同的列中)

荷马| 玛吉

巴特| 劣质煤

丽莎| 萌

PS:这只是一个例子!我使用一个数量超过100个条目的数据库,所以我需要一个可以处理大量行而不是特别是2列的解决方案.我希望列中有10个项目,如果我有另一个,它会进入一个新列

提前致谢

Answer 1

在这里使用表元素是不合适的,因为您不显示表格数据,只是在数据列中显示集合.如果您对在整个页面中显示数据感到满意,那就简单了

@foreach (var item in Model)
{
    <div class="column">@item.name</div>
}

css在哪里

.column {
    width: 25%; // adjust based on the number of columns you want
    float: left;
}

如果你想在页面上显示它们(每列10个项目),那么它

@{ int i = 0; }
<div class="container">
    <div class="column">
        @foreach (var item in Model)
        {
            if (i > 0 && i % 10 == 0)
            {
                // close the div and start again
                @:</div><div class="column">
            }
            <div>@item</div>
            i++;
        }
    </div>
</div>

css在哪里

.container {
    width: 800px;
    overflow-x: scroll;
    white-space:nowrap;
}
.column {
    display: inline-block;
    width: 200px;
}

请注意,在上面的示例中,您可以替换if (i > 0 && i % 10 == 0)为(例如)if (i > 0 && i % @ViewBag.Rows == 0)以控制控制器中每列的项目数