Asp.net core 在单个布局中交换多个视图模型

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

请记住，狗和猫的例子是一个过于简单的例子。事实是，每个表都完全不同于其他表，并且仅由父表关联

我一直在尝试使用ASP.NETCore3.1和MVC模式来实现这一点。我使用剃须刀页面更好吗？欢迎任何建议

提前谢谢。

---

Chuck

无法在同一视图中注册多个模型，但如果模型之间存在关系，则可以使用与父级相关的模型。也可以在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; }
}

结果:

---

由于视图模型可以用于单个视图（或部分视图），您不能使用

PartialViewNameViewModel

作为您的

人

、

cat

和

狗

模型吗？U布局应该独立于模型。布局应该表示页面之间的通用html/scripts/css。你仍然有问题吗？如果有，请跟进。如果我的回答对你有帮助，请接受我的回答。参考：。

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

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