我想构建一个有 3 个选项卡（因此有 3 个 div）的网页： 选项卡 1 - 更新个人详细信息 选项卡 2 - 检查订单 选项卡 3 - 更改登录详细信息
据我所知，有两种方法可以实现，但想知道最佳实践。
首先是有 3 个局部视图，每个视图实现一个单独的模型 其次是拥有 3 个实现单个 ViewModel 的局部视图
如果使用局部视图，第一个选项会导致“期望模型 A，但得到模型 B”的错误 我相信您可以使用 RenderAction 来解决这个问题，但这是最佳做法吗？
欢迎提出意见。
谢谢
【问题讨论】：
标签： .net asp.net-mvc-3 model viewmodel partialviews
查看选项卡的名称，“更新个人详细信息”、“检查订单”和“更改登录详细信息” - 似乎这些是完全不同的，但用户可以执行的相关选项。
对我来说，将它们拆分为具有三个不同视图的三个不同操作是有意义的，这意味着您只为可见选项卡呈现操作。这样，如果用户只想更新他们的详细信息，服务器就不会执行数据库查询来检查订单
您可以使用一些 css 对其进行样式设置，使其看起来像三个选项卡，但每个选项卡实际上都是一个执行新请求的链接，只是让它看起来像是有三个选项卡。
例如
<div id="content">
<ul>
<li class="active">Update Personal Details</li>
<li>@Html.ActionLink("Check Order","CheckOrder")</li>
<li>@Html.ActionLink("Update Logon Details","UpdateLogonDetails")</li>
</ul>
<div id="tab1" />
... Update Personal Details Tab... etc
</div>
... tab2 and tab 3 not included...
</div>
CheckOrder 和 UpdateLogonDetails 的操作将呈现基本相同的视图，但会显示不同的选项卡。
这会让人产生一种错觉，认为它都是使用标签运行的，即使它不是。
然后，当所有这些都运行时，您可以使用 JQuery 更新这些链接以通过 AJAX 触发请求，将结果作为部分视图返回并使用结果更新内容 div。这意味着启用 Javascript 的人可以获得适当的“ajax”体验，但对于禁用 javascript 的人来说，它仍然可以正常工作。
【讨论】：
用户1079925，
正如您所说，有多种方法可以做到这一点，这完全取决于数据的“相关性”程度。如果它们都来自同一个控制器，那么使用单个视图模型来封装数据是有意义的。以下是关于它的外观的快速涂鸦：
public class SubViewModelA
{
public string SpecialProperty { get; set; }
}
public class SubViewModelB
{
public string SpecialProperty { get; set; }
}
public class SubViewModelC
{
public string SpecialProperty { get; set; }
}
public class TabbedViewModel
{
public SubViewModelA TabA {get; set; }
public SubViewModelB TabB {get; set; }
public SubViewModelC TabC {get; set; }
}
这将在您的视图中被引用为：
@model TabbedViewModel
<div id="taba">@Html.EditorFor(model => model.TabA.SpecialProperty )</div>
<div id="tabb">@Html.EditorFor(model => model.TabB.SpecialProperty )</div>
<div id="tabc">@Html.EditorFor(model => model.TabC.SpecialProperty )</div>
现在，这并不漂亮（我将把那部分留给您），但可以让您从单个视图模型中填充您的“选项卡”。正如您所提到的，另一种选择是如果数据在任何方面完全不相关，则在选项卡 div 中包含 3 个 @RenderAction() 块。
【讨论】：