Question

在我们的应用程序中，我们使用选项卡显示示例联系人的信息，在此选项卡中，用户可以在视图联系人和已创建的联系人之间切换。当用户单击“创建”时，我希望在同一选项卡中将局部视图更改为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>

由于

Answer 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隐藏了当前不可见的元素，并将自动管理切换。

Answer 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请求，以便不要求表单（正如我原先假设的那样）。

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

2 个答案: