使用 WebMatrix 构建表格

Question

我正在尝试使用 WebMatrix（ASP.NET 网页）构建 HTML 表格，但由于 HTML 标记的打开和关闭方式而遇到问题。

我想要实现的是从记录集创建一个包含三列的表，然后填充任何空列。

这是我用来确定如何使用 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>

关于如何最好地完成此任务的任何建议。

Answer 1

如何在打印之前对数据集进行分组？它被 ASP.NET MVC 术语称为视图模型。不幸的是，在 WebMatrix 中，您没有可以完成准备此视图模型的工作的控制器，但您可以在 codebehind 或 Razor 页面的此部分被称为的任何内容中完成它：

@{
    // 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>

它使代码更具可读性。如您所见，视图模型的使用避免了您在视图中编写难看的意大利面条代码。

每次你有一些不匹配的标签，你需要在一个视图中进行整数和模除法等等，你可能做错了，因为你没有选择正确的视图模型。

Answer 2

根据修改后的要求更新了代码示例：

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

希望，这次之后我明白了你的意思。

如果您想从记录集构建表，为什么不这样做呢？下面是使用 Northwind 数据库的示例：

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

或者您可以使用WebGrid 为您执行此操作。