使用 WebMatrix 构建表格

发布于 2024-12-23 10:19:10 字数 584 浏览 3 评论 0原文

我正在尝试使用 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>

有关如何最好地实现这一目标的任何建议。

原文

I am trying to build a HTML table using WebMatrix (ASP.NET Web Pages) but am having trouble due to the way the HTML tags are opened and closed.

What I am trying to achieve is to create a table from a recordset, with three columns, and then fill in any empty columns.

This is some test code I am using to work out how to do this using 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>

Any suggestions for how best to accomplish this.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

感性 2024-12-30 10:19:10

在打印之前对数据集进行分组怎么样？在 ASP.NET MVC 术语中，这称为视图模型。不幸的是，在 WebMatrix 中，您没有一个控制器可以完成准备此视图模型的工作，但您可以在代码隐藏中或 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>

它使代码更具可读性。正如您所看到的，视图模型的使用可以避免您在视图中编写丑陋的意大利面条式代码。

每当您有一些不匹配的标签并且需要在视图中进行整数和模除法等操作时，您可能会做错，因为您没有选择正确的视图模型。

How about grouping your dataset before printing it? It ASP.NET MVC terms this is called view model. Unfortunately in WebMatrix you don't have a controller which could do the job of preparing this view model but you could do it in the codebehind or whatever this section of the Razor page is called:

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

and if you had a dataset of complex objects and not just integers, here's how the grouping could be done:

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

and then:

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

It kind of makes the code much more readable. As you can see the usage of a view model avoids you from writing ugly spaghetti code in the views.

Every-time you have some unmatched tags and you need to do integer and modulo divisions and stuff in a view you are probably doing it wrong as you didn't pick up the correct view model.

回复收藏 0 原文

怪我太投入 2024-12-30 10:19:10

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

@{
    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">
                             
                        </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 为您执行此操作。~~

Updated code sample based on the revised requirement:

@{
    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">
                             
                        </td>
                    }
                }
                if(counter % 3 == 0){
                    @:</tr>
                }
            }
        </table>
    </body>
</html>

Hopefully, I've understood what you are after this time.

~~If you want to build the table from a recordset, why not do that? Here's an example using the Northwind database:~~

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

~~Or you could use the WebGrid to do this for you.~~

回复收藏 0 原文

~没有更多了~