0

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

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

首先是有 3 个局部视图，每个视图都实现一个单独的模型，其次是有 3 个局部视图，它们实现一个单独的 ViewModel

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

欢迎发表意见。

谢谢

4

2 回答 2

0

用户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>

现在，这并不漂亮（我将把那部分留给你），但可以让你从单个视图模型中填充你的“选项卡”。正如您所提到的，另一种选择是@RenderAction()如果数据以任何方式完全不相关，则在选项卡 div 内有 3 个块。

于 2012-02-16T19:46:41.530 回答
0

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

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

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

于 2012-02-17T04:01:06.980 回答