表 - 垂直标题和动态列数

时间:2016-10-07 11:07:54

标签: asp.net-mvc twitter-bootstrap razor grid

我正在尝试创建一个包含垂直标题和动态列数的表。我想使用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 个答案:

答案 0 :(得分:3)

您需要修改视图模型以表示要在视图中显示的内容。

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>