Question

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

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

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

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

欢迎意见。

由于

Answer 1

user1079925，

正如您所说，有多种方法可以做到这一点，这将取决于数据的“相关性”。如果它都来自同一个控制器，那么有一个viewmodel来封装数据是有意义的。这里有一个关于如何看起来的快速涂鸦：

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>

现在，这并不漂亮（我将为您留下这部分），但允许您从单个视图模型中填充“标签”。另一种选择，正如你所提到的，如果数据完全不相关，那么在tab div中有3个@RenderAction()块。

Answer 2

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

对我来说，将这些视图拆分为三个不同的视图是有意义的，这意味着您只渲染可见选项卡的动作。这样，如果用户只想更新他们的详细信息，那么服务器就不会执行数据库查询来检查订单

你会使用一些css来设置它的样式，使它看起来像三个标签，但每个标签确实是一个链接，它做了一个新的请求，只是让它看起来像有三个标签。

e.g。

<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的人来说，它仍然可以正常运行。

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

2 个答案: