Таблица - Вертикальный заголовок и динамическое количество столбцов

#asp.net-mvc #twitter-bootstrap #razor #grid

#asp.net-mvc #twitter-bootstrap #бритва #сетка

Вопрос:

Я пытаюсь создать таблицу с вертикальным заголовком и динамическим количеством столбцов. Я хочу использовать ASP.NET MVC Razor и foreach цикл для создания столбцов.

У меня есть постоянное количество заголовков (строк) и динамическое количество столбцов, каждый столбец которых имеет значение для каждой строки

Что я хочу получить:

 Header1 Value1,Value2,Value3
Header2 Value1,Value2,Value3
Header3 Value1,Value2,Value3

Модель:

 public class RootViewModel
{
    public List<Column> Columns { get; set; }
}
public class Column
{
    public int Header1Value { get; set; } //Value1
    public int Header2Value { get; set; } //Value2
    public int Header3Value { get; set; } //Value3
}

Я действительно не знаю, как решить эту проблему, не используя ‘foreach’ для каждого свойства.

1. классу Column потребуется 4 свойства, по одному для каждого значения столбца, и тогда все, что вам нужно, — это один foreach цикл

2. У меня есть постоянное количество заголовков (строк) и динамическое количество столбцов, каждый столбец которых имеет значение для каждой строки

3. Затем вашей модели представления требуется свойство для первого столбца и свойство коллекции для остальных столбцов, например string Name , IEnumerable<int> Values и затем вам понадобятся 2 цикла: один для генерации строки и 1-го столбца и внутренний цикл для значений

4. Можете ли вы хотя бы подтвердить, что первый столбец — a string , а все последующие столбцы — typeof int ?

5. Да, первый столбец — это имя свойства, остальные — значения int

Ответ №1:

Вам необходимо изменить свои модели представления, чтобы представить то, что вы хотите отобразить в представлении.

 public class RootViewModel
{
    public List<RowViewModel> Rows { get; set; }
}

public class RowViewModel
{
    public string Header{ get; set; }
    public List<int> Values { get; set; }
}

чтобы в представлении вы могли сгенерировать таблицу с помощью

 @model RootViewModel
<table>
    @foreach(var row in Model.Rows)
    {
        <tr>
            <td>@row.Header</td>
            @foreach(var value in row.Values)
            {
                <td>@value</td>
            }
        </tr>
    }
</table>