Разделение таблиц с помощью ASP.NET MVC

Question

Я пытаюсь найти лучший способ использовать таблицу div с ASP.NET MVC, проблема, которую я вижу, заключается в том, что вам нужно выполнять множество циклов, а не один цикл, если мне пришлось использовать традиционный <table> таблица.

Пример

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

Answer 1

Если он выглядит как стол и пахнет как стол, почему бы не использовать стол?

Но если вы хотите сделать это таким образом, попробуйте создать метод расширения для вашего свойства HTML, который генерирует этот HTML-код и имеет список в качестве параметра и, возможно, список ваших столбцов. можно использовать класс TagBuilder.

Answer 2

Я согласен с тем, что сказали все остальные (что вам действительно следует просто использовать таблицу) - однако я постараюсь найти решение и вашей проблемы.

Я не думаю, что есть элегантный способ преодолеть проблему «цикл более одного раза», но по крайней мере мы можем немного упростить добавление новых столбцов в список:

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, и на самом деле я не понимаю, почему вы хотели бы избежать этого в этом сценарии.

Answer 3

Если вы используете табличные данные, вот почему есть табличный тег. Люди только предлагают div, а не table, когда речь идет о макете. Поэтому вполне нормально использовать табличный тег при отображении информации типа ключ-значение.

Answer 4

Это довольно субъективный вопрос, но я думаю, что вам не нужно использовать div для этого, потому что вы просто отображаете таблицу данных, и поэтому нам нужен тег "table".

Внедрение div и CSS layout не заменяет тег table, а освобождает тег table от выполнения форматирования и макета.

Редактировать

Более того, вы все еще можете выполнять свою работу за один цикл. Вместо того, чтобы перебирать столбцы, почему бы не перебрать строки (имя, телефон ...)

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

Хотя я лично все же предпочитаю использовать таблицу (вместе с tr и td).