asp.net-core - 在单个 _Layout 中交换多个视图模型

Question

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

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

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

提前致谢。查克

标签： asp.net-coremodel-view-controller.net-corerazor-pages

Answer 1

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

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

在这里，我给出一个关于如何满足客户端要求的演示：

模型：

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>

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

@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>

结果：