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

Posted

技术标签:

【中文标题】在单个 _Layout 中交换多个视图模型【英文标题】:Exchange multiple viewmodels in a single _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。 【参考方案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>

结果:

【讨论】:

以上是关于在单个 _Layout 中交换多个视图模型的主要内容,如果未能解决你的问题,请参考以下文章

在 MVC4 中的单个视图中访问多个模型中的项目

WPF - 使用具有多个 ViewModel 的单个模型

asp.net _Layout.cshtml 仅在模型类型为 ______ 时加载脚本

单个视图中的多个表单

我们可以在一个视图中使用不同模型的多个局部视图吗?

TensorFlow 同时调用多个预训练好的模型