在单个 _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 中交换多个视图模型的主要内容,如果未能解决你的问题,请参考以下文章