MVC 3 show hide jQuery UI选项卡中的部分视图

在我们的应用程序中，我们使用Tabs来显示示例联系人信息，在此选项卡中用户可以在查看联系人和创建联系人之间切换。当用户点击“创建”时，我希望部分视图在同一个选项卡中更改为CreateContact。在jQuery UI标签中显示隐藏部分视图的最佳方式是什么？我应该使用Ajax代码来做到这一点吗？MVC 3 show hide jQuery UI选项卡中的部分视图

查看

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

感谢

来源

2011-10-27 mark s

只是澄清：你有两个选项卡。一个是查看创建的联系人，另一个是创建一个新的联系人。当有人创建一个新的联系人时，你希望它切换到视图创建联系人“视图”，而不是切回标签..是否正确？ – chemicalNova

是的，你可以使用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隐藏当前不可见的，并会自动管理交换的元素。

来源

2011-10-27 00:53:55

+1。同意。不需要甚至使用ajax，因为这些操作不会执行任何操作，而只会呈现部分（无数据）。所以这些操作方法可以完全删除。 – RPM1984

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

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

[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请求，以免要求形式（正如我原先以为你所做的那样）。

来源

2011-10-27 01:07:43 chemicalNova

MVC 3 show hide jQuery UI选项卡中的部分视图

回答

相关问题