MVC 3 在 jquery UI 选项卡中显示隐藏部分视图答案

【问题标题】：MVC 3 show hide Partial Views in jquery UI tabsMVC 3 在 jquery UI 选项卡中显示隐藏部分视图
【发布时间】：2011-10-27 00:27:16
【问题描述】：

在我们的应用程序中，我们使用选项卡来显示例如联系人的信息，在此选项卡中，用户可以在查看联系人和创建的联系人之间切换。当用户单击“创建”时，我希望在同一选项卡中将部分视图更改为 CreateContact。在 jquery UI 选项卡中显示隐藏部分视图的最佳方法是什么？我应该使用 Ajax 代码来执行此操作吗？

查看

<div id="tabs">
<ul>
   <li><a href="/Home/GetClaim">Claim</a></li>
   <li><a href="/Home/GetProduct">Products</a></li>
   <li><a href="/Home/GetContact">Contact Us</a></li>
</ul>
</div>

控制器

public ActionResult GetContact()
{
    return PartialView();
}

public ActionResult CreateContact()
{
    return PartialView();
}

局部视图

<li>@Html.ActionLink("Create", "Test", "Home")</li>

谢谢

【问题讨论】：

澄清一下：你有两个标签。一种是查看已创建的联系人，另一种是新建联系人。当有人创建新联系人时，您希望它切换到查看创建的联系人“查看”，而不是切换回选项卡.. 对吗？

标签： asp.net-mvc asp.net-mvc-3 model-view-controller

【解决方案1】：

是的，您可以使用 AJAX。以防您不想一次加载所有部分视图。

如果没关系，你可以一次渲染它们：

<div id="tabs-1">
     @Html.Partial("GetClaim")
</div>
<div id="tabs-2">
     @Html.Partial("GetProduct")
</div>
<div id="tabs-3">
     @Html.Partial("GetClaim")
</div>

jQuery 隐藏当前不可见的元素并自动管理切换。

【讨论】：

+1。同意。甚至不需要使用 ajax，因为这些操作除了渲染部分（无数据）之外什么都不做。因此可以完全删除操作方法。

【解决方案2】：

您可以使用 Ajax.ActionLink() - http://msdn.microsoft.com/en-us/library/dd493106.aspx

这会将您的表单异步提交给您的控制器方法。如果您将 AjaxOptions.InsertionMode 设置为 AjaxOptions.InsertionMode.Replace 那么它将用您从控制器返回的任何内容替换部分视图内容。然后，您只需在 creatcontacts 控制器操作中返回 GetContacts 视图，如下所示：

[HttpGet]
public ActionResult GetContact()
{
    return PartialView(RetrieveListOfContacts());
}

[HttpPost]
public ActionResult CreateContact(StronglyTypedContactModel contact)
{
    if (ModelState.IsValid)
    {
        // .. write your contact here
        return PartialView("GetContact", RetrieveListOfContacts());
    }
    else
    {
        return PartialView(contact);
    }
}

编辑

另外，您可以在 AjaxOptions 的 HttpMethod 中指定它是一个 GET 请求，这样就不需要表单（就像我最初假设的那样）。

【讨论】：