MVC 从 Dictionary<string, List<MyModel>> 值创建表答案

【问题标题】：MVC Create Table from Dictionary<string, List<MyModel>> ValuesMVC 从 Dictionary<string, List<MyModel>> 值创建表
【发布时间】：2017-09-03 11:21:09
【问题描述】：

给定以下格式的字典，我想以如下所示的格式输出：

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>

如何以所需的格式显示数据？

【问题讨论】：

您的Dictionary<string, List<MyModel>> 属性与您要在视图中显示的内容完全没有关系。您需要一个类似于this answer 的视图模型
你一定要用字典吗？
我也可以用这种方式给你一个解决方案，但字典并不是要以这种方式使用的，我建议一个类列表并在上面使用 LINQ

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

【解决方案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>

【讨论】：