WebMatrixを使用したテーブルの構築

WebMatrix（ASP.NET Web Pages）を使用してHTMLテーブルを作成しようとしていますが、HTMLタグのオープンおよびクローズの方法に問題があります。WebMatrixを使用したテーブルの構築

私が達成しようとしているのは、3つの列を持つレコードセットからテーブルを作成し、次に空の列を入力することです。

これはWebMatrixを使用してこれを行う方法を理解するために使用しているテストコードです。

<table> 
@{ 
int row = 0; 
int col = 0; 
for (int i = 0; i < 20; i++) //20 cells for test purposes 
{ 
    col++; 
    if (col == 4) 
    { 
    col = 1; 
    } 
    if (col == 1) 
    { 
    row++; 
    if (row != 1) 
    { 
    </tr> 
    } 
    <tr> 
    } 
    <td>@i</td> 
} 
for (int i = col; i <=3; i++) 
{ 
    <td>empty</td> 
} 
</tr> 
} 
</table>

これを最もうまく実行する方法についてのご意見をお寄せください。改訂された要件に基づいて

出典

2011-12-26 johna

更新コードサンプル：

@{ 
    var db = Database.Open("Northwind"); 
    var data = db.Query("SELECT * FROM Products"); 
    var total = data.Count(); 
    var counter = 1; 
    var rows = total/3; 
    var spares = total % 3 > 0 ? 3 - total % 3 : 0; 
    if(spares > 0){ 
     rows += 1; 
    } 
} 
<!DOCTYPE html> 

<html lang="en"> 
    <head> 
     <meta charset="utf-8" /> 
     <title></title> 
    </head> 
    <body> 
     <table style="border:1px solid black"> 
      @for(var i = 1; i <= rows; i++){ 
       if(counter % 3 == 1){ 
        @:<tr> 
       } 
       for(var cell = 1; cell <= 3 && counter <= total; cell++){ 
        <td style="border:1px solid black"> 
         <div>@data.ElementAt(counter-1).ProductId</div> 
         <div>@data.ElementAt(counter-1).ProductName</div> 
         <div>@data.ElementAt(counter-1).CategoryId</div> 
        </td> 
        counter++; 
       } 
       if(counter > total && spares > 0){ 
        for(var j = 1; j <= spares; j++){ 
         <td style="border:1px solid black"> 
          &nbsp; 
         </td> 
        } 
       } 
       if(counter % 3 == 0){ 
        @:</tr> 
       } 
      } 
     </table> 
    </body> 
</html>

うまくいけば、私はあなたがこの時間以降であるかを理解してきました。

~~レコードセットからテーブルを作成する場合は、そのようにしないでください。~~

~~<table> @foreach(var row in data){ <tr> <td>@row.ProductId</td> <td>@row.ProductName</td> <td>@row.CategoryId</td> </tr> } </table>~~

~~それとも、あなたのためにこれを行うには WebGridを使用することができます。ここでは、Northwindデータベースを使用した例です。~~

出典

2011-12-27 06:19:52

私はWebGridを使いたくありません。各セルにはデータベース行が1つ含まれるため、残念ながらあなたのアプローチは適切ではありません。 – johna

編集していただきありがとうございます。それが私が探していたものです。新しいTRを開始する前にTRを閉じるためにいくつかの行を追加する必要がありました。 – johna

ダーリンの答えは私のものと同じですが、はるかに優れています。 –

印刷する前にデータセットをグループ化するのはどうですか？ ASP.NET MVCという用語は、ビューモデルと呼ばれています。残念ながら、WebMatrixの中で、あなたは、このビューモデルを準備する仕事をすることができ、コントローラを持っていないが、あなたは分離コードまたは何カミソリページのこのセクションが呼び出されるでそれを行うことができます：

@{ 
    // group the dataset by 3 elements 
    var data = Enumerable.Range(0, 20).GroupBy(x => x/3); 
} 

<table> 
@foreach (var group in data) 
{ 
    <tr> 
     @foreach (var item in group) 
     { 
      <td>@item</td> 
     } 
     @for (int i = 0; i < 3 - group.Count(); i++) 
     { 
      <td>empty</td> 
     } 
    </tr> 
} 
</table>

とあればあなたは、複雑なオブジェクトだけでなく、整数のデータセットを持っていた、ここでのグループ化を行うことができ方法は次のとおりです。

var dataset = Enumerable.Range(0, 20).Select(x => new { Text = "item " + x }); 
var data = dataset 
    .Select((value, index) => new { Index = index/3, Item = value }) 
    .GroupBy(pair => pair.Index);

、その後：

<table> 
@foreach (var group in data) 
{ 
    <tr> 
     @foreach (var element in group) 
     { 
      <td>@element.Item.Text</td> 
     } 
     @for (int i = 0; i < 3 - group.Count(); i++) 
     { 
      <td>empty</td> 
     } 
    </tr> 
} 
</table>

これはコードをもっと読みやすくします。ご覧のとおり、ビューモデルを使用すると、ビューに醜いスパゲッティコードを書くことができなくなります。

都合のよいタグがあり、ビューで整数とモジュロの除算を行う必要があるたびに、適切なビューモデルを選んでいないと間違っている可能性があります。

出典

2011-12-27 13:10:05

WebMatrixを使用したテーブルの構築

答えて

関連する問題