ASP.NET MVCでDivテーブルを作成する

Question

ASP.NET MVCでdivテーブルを使用するより良い方法を見つけようとしていますが、私が見る問題はループが1つではなく、従来の<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プロパティの拡張メソッドを作成してください。リストをパラメータとして、おそらく列のリストにしてください。htmlコードを生成するにはTagBuilderクラスを使用できます。

Answer 2

それはかなり主観的な問題ですが、私はあなたが本当にあなたは、単にデータのテーブルを表示しているだって、そうするためにdivを使用する必要はありませんだと思うと、私たちは「テーブル」を必要とする理由ですタグ。

divとCSSレイアウトの導入は、テーブルタグを置き換えるのではなく、テーブルタグをフォーマットおよびレイアウトジョブから解放することです。

編集

さらに、1つのループでジョブを実行することもできます。むしろ列をループ行（名前、電話...）を通して、なぜループより

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

私は個人的にはまだ代わりに（一緒にTRとTDとの）テーブルを使用して好むが。

Answer 3

表形式のデータを表示している場合は、そのため表のタグが表示されます。レイアウトに関しては、テーブルの代わりにdivだけを提案します。したがって、Key-Valueタイプの情報を表示する場合は、テーブルタグを使用することは完全にOKです。

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

それは - タグを使用して、あなたは、このシナリオでそれを避けたいと思いますなぜ本当に私は表示されませんに比べて、まだパフォーマンスの低下です。