MVC从词典创建表<string,list <mymodel =“”>&gt;值

时间:2017-09-03 11:21:09

标签: c# asp.net-mvc dictionary razor asp.net-core

鉴于以下格式的字典,我想输出如下所示的欲望:

public IActionResult Index()
{
    var model = new Dictionary<string, List<MyModel>>
    {
        {
                "Heading1",
                new List<MyModel>()
                {
                    new MyModel() {MyKey = "Foo", MyValue = "Value1"},
                    new MyModel() {MyKey = "Bar", MyValue = "Value2"},
                    new MyModel() {MyKey = "Baz", MyValue = "Value3"}
                }
            },
            {
                "Heading2",
                new List<MyModel>()
                {
                    new MyModel() {MyKey = "Foo", MyValue = "Value4"},
                    new MyModel() {MyKey = "Bar", MyValue = "Value5"}
                }
            },
            {
                "Heading3",
                new List<MyModel>()
                {
                    new MyModel() {MyKey = "Foo", MyValue = "Value6"},
                    new MyModel() {MyKey = "Baz", MyValue = "Value7"}
                }
            }
        };

    return View(model);
}

MyModel只是一个简单的类:

public class MyModel
{
    public string MyKey { get; set; }

    public string MyValue { get; set; }
}

我想以下列格式输出信息:

然而,目前我在视图中尝试的内容无法正确显示:

@model Dictionary<string, List<MyModel>>

@{
    ViewData["Title"] = "Index";
}

<h2>Results</h2>

<table class="table table-striped">
    <thead>
    <tr>
        @foreach (var item in Model.Keys)
        {
            <th>@item</th>
        }
    </tr>
    </thead>
    <tbody>

    @foreach (var list in Model.Values)
    {
        <tr>
            @foreach (var item in list)
            {
                <td>@item.MyKey</td>

                <td>@item.MyValue</td>
            }
        </tr>
    }
    </tbody>
</table>

如何以所需格式显示数据?

1 个答案:

答案 0 :(得分:1)

您的模型与您需要在视图中显示的数据截然不同。第一个问题是您正在尝试对列进行建模(在html中为行集合),按列对值进行分组。

我强烈建议您更改模型,但如果您想保持原样,我会给您一个解决方案(即使效率低下):

var columns = new []{""}.Concat(model.Keys);
// columns names with the first empty column

var rows = model
    .SelectMany(c => c.Value.Select(v => new {c.Key, v.MyKey, v.MyValue}))
    // get single cells of table

    .GroupBy(v => v.MyKey, v => v)
    // group by row name

    .Select(row => new[] {row.Key}
                       .Concat(model.Keys.Select(c =>
                            row.FirstOrDefault(r => r.Key == c)?.MyValue)));
    // create row with row name as first value

var vm = new { Columns = columns, Rows = rows };
return View(vm);

然后,您就可以根据需要显示记录:

@model dynamic

@{
    ViewData["Title"] = "Index";
}

<h2>Results</h2>

<table class="table table-striped">
    <thead>
    <tr>
        @foreach (var item in Model.Columns)
        {
            <th>@item</th>
        }
    </tr>
    </thead>
    <tbody>

    @foreach (var row in Model.Rows)
    {
        <tr>
            @foreach (var cell in row)
            {    
                <td>@cell</td>
            }
        </tr>
    }
    </tbody>
</table>