使用 ASP.NET MVC 的 Div 表答案

【问题标题】：Div Tables with ASP.NET MVC使用 ASP.NET MVC 的 Div 表
【发布时间】：2010-11-12 22:14:03
【问题描述】：

我正在尝试找到一种更好的方法来使用带有 ASP.NET MVC 的 div 表，我看到的问题是如果我必须使用传统的 @987654321，你需要执行大量循环，而不是一个循环@表。

例子

<div class="column">
  <div class="row">Name</div>
    <% foreach (Person person in (List<Person>)ViewData.Model) {%>
      <div class="row"><%= Html.Encode(person.Name) %></div>
    <%} %>
  </div>
<div class="column">
  <div class="row">Email</div>
    <% foreach (Person person in (List<Person>)ViewData.Model) {%>
      <div class="row"><%= Html.Encode(person.Email) %></div>
    <%} %>
  </div>
<div class="column">
  <div class="row">Phone</div>
    <% foreach (Person person in (List<Person>)ViewData.Model) {%>
      <div class="row"><%= Html.Encode(person.Phone) %></div>
    <%} %>
  </div>

【问题讨论】：

标签： html asp.net-mvc loops css-tables

【解决方案1】：

如果它看起来像一张桌子，闻起来像一张桌子，为什么不使用一张桌子呢？

但是，如果您想以这种方式很好地做到这一点，请尝试为您的 Html 属性构建一个扩展方法，该方法生成此 html 代码，并将列表作为参数，也可能是您的列的列表，要生成您的 html 代码，您可以使用 TagBuilder 类。

【讨论】：

+1 当人们处理本质上是表格结构的事情时，会花费太多时间避免使用表格
+1。同意。在基于表格的布局（将它们用于导航栏、图像地图等）之后，表格的名声很差。但是表格可以（并且应该）用于“表格”数据。事实上，在这里使用 div 是一种丑陋的、非语义的、不正确的“解决方案”。
同意，但是，使用 div 也有好处，因为它允许用动画完成有趣的事情。

【解决方案2】：

这是一个相当主观的问题，但我认为您实际上并不需要使用 div 来这样做，因为您只是显示数据表，这就是我们需要“table”标签的原因。

div 和 CSS 布局的引入并不是要替换 table 标签，而是要让 table 标签从做格式化和布局的工作中解放出来。

编辑

此外，您仍然可以在一个循环中完成您的工作。与其遍历列，不如遍历行（姓名、电话...）

<% foreach(Person person in (List<Person>)ViewData.Model)) %>
<div class="row">
    Name: <%= Html.Encode(person.Name) %>
    Email: <%= Html.Encode(person.Email) %>
    ...
</div>

虽然我个人还是更喜欢使用 table（连同 tr 和 td）。

【讨论】：

【解决方案3】：

如果您要显示表格数据，这就是表格标签存在的原因。人们只建议 div，而不是关于布局的 table。所以在展示key-value类型的信息时使用table标签是完全可以的。

【讨论】：

【解决方案4】：

我同意其他人所说的（你真的应该只使用一张桌子） - 但是我也会尝试为你的问题想出一个解决方案。

我认为没有一种优雅的方法可以克服“循环多次”的问题，但至少我们可以让向列表中添加新列变得“更容易”：

var myList = (List<Person>)ViewData.Model;
var myColumns = new Dictionary<string, List<string>>();

myColumns.Add("Name", new List<string>());
myColumns.Add("Email", new List<string>());
myColumns.Add("Phone", new List<string>());
foreach(var person in myList){
    myColumns["Name"].Add(Html.Encode(person.Name));
    myColumns["Email"].Add(Html.Encode(person.Email));
    myColumns["Phone"].Add(Html.Encode(person.Phone));
}

那么现在你可以这样做了：

<% foreach(var column in myColumns){ %>
<div class="column">
  <div class="row"><%= column.Key %></div>
    <% foreach (string value in column.Value) {%>
      <div class="row"><%= value %></div>
    <%} %>
  </div>
<% } %>

与使用 -tag 相比，它的性能仍然很差，我真的不明白为什么您要在这种情况下避免这种情况。

【讨论】：