Div Tables with ASP.NET MVC

Question

I'm trying to find a better way to use a div table with ASP.NET MVC, the problem I see is that you need to do loads of looping, rather than one loop if I had to use a traditional <table> table.

Example

<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

It's rather subjective issue, but I think you don't really need to use divs to do so, coz you are simply displaying table of data and this is why we need "table" tag.

The introduction of div and CSS layout is not to replace the table tag, but to free table tag from doing formatting and layout job.

Edit

Moreover, you can still do your job in one loop. Rather than loop through columns, why not loop through rows (name, phone... )

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

Although I personally still prefer using table (together with tr and td) instead.

Answer 2

If it looks like a table and smells like a table why not use a table?

But if you want to do it in this way well try to build a extention method for your Html property that generates this html code and have the list as a parameter and maybe a list for your columns, To generate your html code you can use the TagBuilder class.

Answer 3

If you are dislaying tabular data, that's why the table tag is there. People only suggest div, instead of table when it's about layout. So it's perfectly OK to use the table tag when you are displaying key-value type of information.

Answer 4

I agree with what everyone else have said (that you really should just use a table) - however I will try to come up with a solution to your issue too.

I don't think there's an elegant way to overcome the "loop more than once" issue, but at the very least we can make it a bit "easier" to add new columns to the list:

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

Then now you can do this:

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

It is still poor performance compared to using the -tag and really I don't see why you'd want to avoid that in this scenario.