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

Question

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

据我所知，有两种方法可以实现这一点，但我想知道最佳实践。

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

如果使用Partial Views，则第一个选项将导致错误"Expect Model A but got Model B"我相信你可以使用RenderAction来解决这个问题，但这是最好的做法吗？

欢迎发表意见。

感谢

Answer 1

查看选项卡的名称，"更新个人详细信息"、"检查订单"one_answers"更改登录详细信息"-这似乎是非常不同的，但用户可以做的相关选项。

对我来说，将这些操作分为三个不同的操作和三种不同的视图是有意义的，这意味着你只为可见选项卡呈现操作。这样，如果用户只想更新他们的详细信息，服务器就不会进行DB查询来检查订单

你可以使用一些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激发请求，将结果作为Partial Views返回，并用结果更新内容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>

现在，这并不好看（我将把这部分留给您），但它允许您从一个视图模型填充您的"选项卡"。正如您提到的，另一种选择是，如果数据在任何方面都完全不相关，那么在tabdiv中有3个@RenderAction()块。