Создание таблиц с помощью WebMatrix - PullRequest
Новая
       13

Создание таблиц с помощью WebMatrix

1 голос
/ 27 декабря 2011

Я пытаюсь создать таблицу HTML с помощью WebMatrix (веб-страницы ASP.NET), но у меня возникают проблемы из-за способа открытия и закрытия тегов 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>

Любые предложения о том, как лучше всего это сделать.

Ответы [ 2 ]

4 голосов
/ 27 декабря 2011

Как насчет группировки вашего набора данных перед его печатью? В 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>

Это делает код более читабельным. Как вы можете видеть, использование модели представления позволяет избежать написания некрасивого кода спагетти в представлениях.

Каждый раз, когда у вас есть несколько непревзойденных тегов, и вам нужно делать целочисленные деления и деления по модулю и прочее в представлении, вы, вероятно, делаете это неправильно, поскольку не выбрали правильную модель представления.

1 голос
/ 27 декабря 2011

Обновленный пример кода на основе пересмотренного требования: 

@{
    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 , чтобы сделать это для вас.

...