带有MVC4内容的jQuery选项卡

我正在尝试在jQuery选项卡中显示一些MVC4视图。 这是我的代码：

 
 
App One
 
App Two
 
 
 @{ Html.RenderPartial("~/Views/AppOne/Index.cshtml"); } 
 
 @{ Html.RenderPartial("~/Views/AppTwo/Index.cshtml"); } 
  

问题是第一个标签内容显示正常 – 但第二个是空的。 似乎部分视图没有呈现。

有没有办法强制jQuery选项卡在加载页面时更新所有选项卡的内容，或者强制部分视图在页面加载时呈现？

Answer 1

这是我正在积极研究的代码，工作得很好：

Login.cshtml

 @{ AjaxOptions optsLogin = new AjaxOptions { UpdateTargetId = "login-tab-login" }; AjaxOptions optsRegister = new AjaxOptions { UpdateTargetId = "login-tab-register" }; } 
 
 
Returning Customers
 
New Customers
 
 @using (Ajax.BeginForm("Login", "Account", optsLogin, new { id = "form-login" })) { 
 @Html.Partial("Account/_Login") 
 } @using (Ajax.BeginForm("Register", "Account", optsRegister, new { id = "form-register" })) { 
 @Html.Partial("Account/_Register") 
 } 
  

我的部分视图位于“帐户”子文件夹的“共享”文件夹中。 此外，每个局部视图都有自己的模型。 除此之外，实施并不特别……

UPDATE

我添加了代码来在两个选项卡上实现Ajax调用。 tabs部分上方的代码块包含两个

元素的AjaxOptions对象。 您的控制器需要看起来像这样：

AccountController.cs

 public class AccountController : Controller { ... [HttpGet] public ActionResult Login() { ... return View(); } [HttpPost] public ActionResult Login(LoginModel model) { ... if (ModelState.IsValid) return RedirectToAction("Index", "Home") else return PartialView("/Account/_Login", model); } [HttpPost] public ActionResult Register(RegisterModel model) { ... if (ModelState.IsValid) return RedirectToAction("Index", "Home") else return PartialView("/Account/_Register", model); } } 

Login GET操作方法呈现整个页面，包括_Layout.cshtml和_ViewStart.cshtml视图。 我的部分视图_Login.cshtml和_Register.cshtml包含输入表单的HTML元素。 每个局部视图都有自己的提交按钮：

因为每个部分视图调用都包含在它自己的using (Ajax.BeginForm(...))块中，并且我已经为每个

赋予了它自己的id属性，所以我可以添加JavaScript代码来劫持submit事件。 根据按下的submit ，它将执行与Ajax.BeginForm(...)调用中指定的操作和控制器关联的操作方法。 在我的情况下，如果表单数据通过validation，控制器将自动重定向到/Home/Index 。

但是，如果validation失败，则action方法将简单地将部分视图的呈现版本发送回浏览器，并将其放在与

关联的AjaxOptions对象的UpdateTargetId属性中指定的元素中。 由于默认的InsertionMode是Replace ，因此视图引擎将简单地用新版本替换旧版本的部分视图，并填写表单数据和validation消息（如果包含）。

我没有包含的唯一与代码相关的项目是我的部分视图，就jQuery选项卡function而言，这并不重要。 我的部分视图中没有任何其他JavaScript，并且我没有包含的AccountController的其他代码特定于调用我的外部Web API控制台应用程序和设置授权cookie。 我使用谷歌的CDN作为我的jQuery和jQuery UI声明，而不是在本地托管JavaScript。

你需要一段时间来围绕你必须做的事情。 但是，一旦你得到它，你就得到了它，知识可以转移。 这不是 WebForms，谢天谢地。