Хобрук: Ваш путь к мастерству в программировании

MVC Создать таблицу из Dictionary‹string, List‹MyModel›› Values

Учитывая словарь в следующем формате, я хочу вывести его в желаемом формате, как показано ниже:

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>> не имеет никакого отношения к тому, что вы хотите отобразить в представлении. Вам нужна модель представления, аналогичная этой ответ 03.09.2017
  • Обязательно ли пользоваться словарем? 03.09.2017
  • Я также могу дать вам решение таким образом, но словари не предназначены для использования таким образом, я предлагаю список классов и использование LINQ для него. 03.09.2017

Ответы:


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>
03.09.2017
Новые материалы

Пять вещей, о которых вы должны ДЕЙСТВИТЕЛЬНО побеспокоиться в связи с ИИ
Несмотря на то, что циркулирует много неточной информации об ИИ, важно исправить частые заблуждения. Многие могут быть обеспокоены тем, что их в конечном итоге заменят роботом, или..

Тестирование ответов на вопросы на основе BERT по статьям о коронавирусе
Введение В настоящее время большая часть мира затронута пандемией COVID-19 . Для многих из нас это означало домашний карантин, социальное дистанцирование, перебои в рабочей среде. Я..

Библиотеки PyTorch и Python для машинного обучения: приложения в здравоохранении с обнимающим лицом…
В сфере машинного обучения Python выделяется благодаря своей универсальности и набору предлагаемых библиотек. Развитие машинного обучения в здравоохранении можно частично объяснить простотой и..

«Что за…» очень хорошо представляет мое выражение лица после того, как я увидел это!
«Что за…» очень хорошо представляет мое выражение лица после того, как я увидел это!

5 вещей, которые я сделал, чтобы стать профессиональным разработчиком JavaScript
Чтобы стать профессиональным JS-разработчиком: 1. Практикуйтесь в рутине, 2. Работайте над проектами, 3. Придерживайтесь одного языка, 4. Наблюдайте за чужим кодом, 5. Будьте последовательны..

От теории к практике: пошаговое руководство по реализации наивного Байеса
Вы когда-нибудь застревали в проекте классификации, не зная, как точно предсказать результаты для ваших данных? Вы искали более простой и интуитивно понятный алгоритм, который поможет вам достичь..

#093 | Моделирование вспышки эпидемии с помощью JavaScript — Часть 3
TLDR: Я сделал симуляцию вспышки эпидемии, в которую можно поиграть здесь . Мой холст, моя сцена Мой HTML — это всего лишь один div с классом stage, и вот как я настроил на нем свой объект..