MVC - 如何垂直而不是水平地用数据填充表格？答案

【问题标题】：MVC - How can I fill a table with data vertically instead of horizontally?MVC - 如何垂直而不是水平地用数据填充表格？
【发布时间】：2020-01-24 20:29:13
【问题描述】：

我想使用 c# 用数据填充我的 HTML 表，它将数据从上到下堆叠 4 行，然后以相同的方式添加一个新列，再增加 4 行，继续这种模式直到那里列表中没有生成数据。给出我的意思的基本概念：

C# 列表（8 个“项目”的列表）：

List<string> items = new List<string>();
for (var x = 0; x < 8; x++)
{
    //Add 8 items to the list object
    items.Add("Item " + x.ToString());
}

普通表的工作原理：

[Item 1]|[Item 2]|[Item 3]|[Item 4]
[Item 5]|[Item 6]|[Item 7]|[Item 8]

我希望它如何运作：

[Item 1]|[Item 5]
[Item 2]|[Item 6]
[Item 3]|[Item 7]
[Item 4]|[Item 8]

我已经考虑了几种方法来做到这一点，但我的测试都没有接近我想要完成的目标。

【问题讨论】：

查看 CSS 的 column-* 属性（例如，column-count、column-rule 等）。这些将允许您指定您的内容将自动分类到的列。它还具有响应迅速的优势，因此它可以在较小的屏幕上折叠成一列。
既然你已经标记了 ASP.NET MVC，那么最好遵守 MVC 设计模式......在 MVC 中，视图意味着尽可能少的逻辑（视图意味着愚蠢)...他们的工作是显示控制器为他们构建的模型...所以最好在控制器中垂直构建模型（表）并将其传递给视图，而不是向视图添加逻辑把你的模型变成一个垂直的桌子。
@HoomanBahreini 那么如何在控制器中执行此操作？
你不要在控制器中这样做。您在视图中执行此操作。控制器只是将 8 个列表发送到视图。 8 如何在实现细节中显示以供视图处理。
@sjohn285：你的问题似乎是一个简化的场景，我只是给你一个关于MVC的一般指南......如果实际问题就这么简单，那么你可以使用一些css格式显示结果（如下面的答案所示）...如果问题更复杂，那么您可能希望在 Controller 中构建模型...

标签： c# html asp.net-mvc

【解决方案1】：

您可以使用 CSS 和 Flexbox 来执行此操作。我使用了ul 和li，但这也可能只是一组嵌套的div。

参考： https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox

在这里尝试一些东西： https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox_skills

ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 3em;
}

ul li {
  height: 1em;
}

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
</ul>

【讨论】：