MVC3 .net 多模型或单视图模型

Question

我想构建一个有 3 个选项卡（因此有 3 个 div）的网页： 选项卡 1 - 更新个人详细信息 选项卡 2 - 检查订单 选项卡 3 - 更改登录详细信息

据我所知，有两种方法可以实现此目的，但我想知道最佳实践。

首先是有 3 个部分视图，每个视图实现一个单独的模型 第二种是拥有 3 个部分视图来实现单个 ViewModel

第一个选项如果使用部分视图将导致“期望模型 A 但得到模型 B”的错误 我相信您可以使用 RenderAction 来解决这个问题，但这是最佳实践吗？

欢迎提出意见。

谢谢

Answer 1

查看选项卡的名称，“更新个人详细信息”、“检查订单”和“更改登录详细信息” - 似乎这些选项相当不同，但用户可以执行的相关选项。

对我来说，将它们分成具有三个不同视图的三个不同操作是有意义的，这意味着您只渲染可见选项卡的操作。这样，如果用户只想更新他们的详细信息，服务器不会执行数据库查询来检查顺序

您将使用一些 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 的人来说它仍然可以正常工作。

Answer 2

user1079925，

正如您所说，有多种方法可以做到这一点，这完全取决于数据的“相关性”程度。如果它们全部源自同一个控制器，那么使用单个视图模型来封装数据是有意义的。这是一个关于它的外观的快速潦草的说明：

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() 块。