在单个 _Layout 中交换多个视图模型答案

【问题标题】：Exchange multiple viewmodels in a single _Layout在单个 _Layout 中交换多个视图模型
【发布时间】：2021-01-29 07:03:45
【问题描述】：

我想看看是否可以在单个布局中交换多个视图模型。例如：假设我有三个模型：人、猫和狗。假设我将人员模型绑定到 _Layout 视图以显示他们的姓名以及狗和猫按钮。要查看他们的狗的列表，我选择了一个狗按钮，并且狗模型视图显示在部分视图中。我选择一个猫按钮并显示一个猫模型视图。由于使用 EF Core 和存储库模式的表之间存在关系，我可以将模型放入 _Layout，但我不知道如何将不同的模型放入嵌套在 _Layout 内的局部视图中。

请记住，狗和猫的例子是一个过于简单的例子。现实情况是，每个表都完全不同，并且仅通过父表相关。

我一直在尝试使用带有 MVC 模式的 ASP.NET Core 3.1 来解决这个问题。我最好使用 Razor 页面吗？欢迎任何建议。

提前致谢。查克

【问题讨论】：

作为一个视图模型可以用于单个视图（或部分视图），你不能使用PartialViewNameViewModel 来拥有你的people，@987654325 @ 和 dog 模型？
一个 _layout 应该是模型独立的。布局应该代表页面之间的通用 html/scripts/css。 docs.microsoft.com/en-us/aspnet/core/mvc/views/…
您有问题吗？如果有，请跟进。如果我的回答对您有帮助，您能接受吗？参考：How to accept as answer。

标签： asp.net-core model-view-controller .net-core razor-pages

【解决方案1】：

多个模型不能在同一个视图中注册，但如果模型有关系，您可以使用父相关模型。或者您可以在 ViewModels 中制作这些模型。这可能取决于您的模型设计。

关于如何显示猫或狗。在客户端做的一种方法是，您可以将它们放在一个局部视图中，并使用js添加或删除样式display:none，可以显示或不显示数据。在服务器端的另一种方式是，您可以将数据放在两个局部视图中。每个按钮单击都可以呈现特定的局部视图。

这里我做一个demo，说明如何让客户端满足你的要求：

型号：

public class People
{
    public int id { get; set; }
    public string peepleName { get; set; }
    public List<Cats> Cats { get; set; }
    public List<Dogs> Dogs { get; set; }
}

public class Cats
{
    public int id { get; set; }
    public string catName { get; set; }
}

public class Dogs
{
    public int id { get; set; }
    public string dogName { get; set; }
}

_Layout.cshtml：

@using Microsoft.EntityFrameworkCore;
@inject MvcCore3_1.Data.MvcCore3_1Context _context
@{
    var model = _context.People.Include(p => p.Cats).Include(p => p.Dogs).FirstOrDefault();
}
<div class="container">
    <main role="main" class="pb-3">
        @Html.Partial("part", model)
        @RenderBody()
    </main>
</div>
<script>
    function ShowCat() {
        if (document.getElementById('cats').style.display == 'none') {
            document.getElementById('cats').style.display = 'block';
            document.getElementById('dogs').style.display = 'none'
        } else {
            document.getElementById('cats').style.display = 'none'
        }
    }
    function ShowDog() {
        if (document.getElementById('dogs').style.display == 'none') {
            document.getElementById('dogs').style.display = 'block';
            document.getElementById('cats').style.display = 'none'
        } else {
            document.getElementById('dogs').style.display = 'none'
        }
    }
</script>

Views/Shared 文件夹中名为 part.cshtml 的 PartialView：

@model People
@Model.peepleName
<br />
<button class="btn btn-info" onclick="ShowCat()">cat</button>
<button class="btn btn-primary" onclick="ShowDog()">dog</button>
<table id="dogs" style="display:none">
    @foreach (var dog in Model.Dogs)
    {
        <tr>
            <td>@dog.id</td>
            <td>@dog.dogName</td>
        </tr>

    }
</table>
<table id="cats" style="display:none">
    @foreach (var cat in Model.Cats)
    {
        <tr>
            <td>@cat.id</td>
            <td>@cat.catName</td>
        </tr>
    }
</table>

结果：

【讨论】：