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

在我的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>

@foreach（模型中的var项目）
{
@DisplayFor（modelItem=>item.name）
}

结果是：

荷马

巴特

丽莎

玛吉

麦琪

教育部

但是我该怎么做才能使它看起来像这样：（

|

只是为了显示它们在不同的列中）

荷马·玛吉

巴特·麦琪

丽莎·莫

PS:这只是一个例子！我使用的数据库包含100多个条目，因此我需要一个能够处理大量行而不是2列的解决方案。我想在一个专栏中有10个条目，如果我有其他条目，它会出现在一个新的专栏中

提前感谢

试试这个：

<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>

观点：

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

@for（int i=0；iModel.Items[i+j].Name）
}
}

控制器中的操作：

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);
}

public ActionResult Index（）
{    
MyViewModel模型=新的MyViewModel
{
项目=新列表
{
新人{Name=“Homer”}，
新人{Name=“Lisa”}，
新人{Name=“Maggie”}，
新人{Name=“DoctorWho”}，
新人{Name=“SantaClaus”}，
新人{Name=“Pippi”}，
},
ColumnCount=3
};
返回视图（模型）；
}

ViewModel和Person类：

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

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

公共类MyViewModel
{
公共列表项{get；set；}
公共int ColumnCount{get；set；}
}
公共阶层人士
{
公共字符串名称{get；set；}
}

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

作为旁注：您应该添加代码来处理边缘情况。也就是说，当列表中的人数为10，而您的列计数为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>

观点：

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

@for（int i=0；iModel.Items[i+j].Name）
}
}

控制器中的操作：

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);
}

public ActionResult Index（）
{    
MyViewModel模型=新的MyViewModel
{
项目=新列表
{
新人{Name=“Homer”}，
新人{Name=“Lisa”}，
新人{Name=“Maggie”}，
新人{Name=“DoctorWho”}，
新人{Name=“SantaClaus”}，
新人{Name=“Pippi”}，
},
ColumnCount=3
};
返回视图（模型）；
}

ViewModel和Person类：

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

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

公共类MyViewModel
{
公共列表项{get；set；}
公共int ColumnCount{get；set；}
}
公共阶层人士
{
公共字符串名称{get；set；}
}

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

作为旁注：您应该添加代码来处理边缘情况。也就是说，当列表中的人数为10，而您的列计数为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>

@对于（int i=0；iitem[i].name）
@DisplayFor（modeleItem=>item[（Model.Count/2）+i+1].name）
}

试试这个：

<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>

@对于（int i=0；iitem[i].name）
@DisplayFor（modeleItem=>item[（Model.Count/2）+i+1].name）
}

此处不适合使用表元素，因为您不显示表格数据，而只显示数据列中的集合。如果您对在页面上显示数据感到满意，那么

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

如果要在页面下方显示它们（每列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>

---

注意：在上面的示例中，您可以将

if（i>0&&i%10==0）

替换为

if（i>0&&i%@ViewBag.Rows==0）

，以控制控制器中每列的项目数

使用表格元素在这里不合适，因为您不显示表格数据，您只需在数据列中显示一个集合。如果您对在页面上显示数据感到满意，那么

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

如果要在页面下方显示它们（每列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>

---

注意：在上面的示例中，您可以将

if（i>0&&i%10==0）

替换为（比如）

if（i>0&&i%@ViewBag.Rows==0）

，以控制控制器中每列的项目数。您可能想要查看。它可以工作，但不是我真正想要的。我更新了我的帖子，使其更清晰（不确定我是否达到了它）但我想要的是，当我在一列中达到10行时，下一行进入另一列，etc@SamGhatak：什么是项目？它可以工作，但它不是我真正想要的。我更新了我的帖子以使其更清晰（不确定我是否达到了它）但我想要的是，当我在一列中达到10行时，下一行进入另一列，etc@SamGhatak：什么是项目？它可以工作，但它不是我真正想要的。我更新了我的帖子以使其更清晰（不确定我是否达到了它）但我想要的是，当我在一列中达到10行时，下一行进入另一列，等等，这是什么项目？它起作用了，但这不是我真正想要的，我更新了我的帖子以使其更清晰（不确定我是否达到了），而是我想要的