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)，以便控制控制器中每列的项目数

Answer 2

试试这个：

观点：

@for (int i = 0; i < Model.Items.Count; i += Model.ColumnCount)
{
    <tr>
        @for (int j = 0; j < Model.ColumnCount; j++)
        {
            <td style="border:0 none;">
                @Html.DisplayFor(modelItem => Model.Items[i+j].Name)
            </td>
        }
    </tr>
}

控制器中的行动：

public ActionResult Index()
{    
    MyViewModel model = new MyViewModel    
    {
            Items = new List<Person>
            {
                new Person { Name = "Homer"},
                new Person { Name = "Lisa"},
                new Person { Name = "Maggie"},
                new Person { Name = "DoctorWho"},
                new Person { Name = "SantaClaus"},
                new Person { Name = "Pippi"},
            },
            ColumnCount = 3
        };
        return View(model);
}

ViewModel和Person-class：

public class MyViewModel
{
    public List<Person> Items { get; set; }
    public int ColumnCount { get; set; }
}

public class Person
{
    public string Name { get; set; }
}

编辑：我调整我的答案以反映您的问题

作为旁注：您应该添加代码来处理边缘情况。即当列表中的人数为10，并且您的列数为3时，某些事情就会破裂。

Answer 3

试试这个：

<table class="table" cellspacing="0">
    @for (int i = 0; i < Model.Count/2; i++)
    {
        <tr>
            <td style="border:0 none;">
                @Html.DisplayFor(modelItem => item[i].name) 
            </td>
            <td style="border:0 none;">
                @Html.DisplayFor(modelItem => item[(Model.Count/2)+i+1].name)
            </td>
        </tr>
    }
</table>

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

3 个答案: