與MVC4內容的jQuery選項卡

Question

我試圖讓一些MVC4視圖顯示在jQuery選項卡中。這是我的代碼：

<div id="tabs"> 
    <ul> 
     <li><a href="#appone">App One</a></li> 
     <li><a href="#apptwo">App Two</a></li> 
    </ul> 
    <div id="appone"> 
     @{ Html.RenderPartial("~/Views/AppOne/Index.cshtml"); } 
    </div> 
    <div id="apptwo"> 
     @{ Html.RenderPartial("~/Views/AppTwo/Index.cshtml"); } 
    </div> 
</div> 

問題是第一個標籤內容顯示得很好 - 但第二個是空的。看起來局部視圖沒有被渲染。

有沒有辦法強制jQuery選項卡更新頁面加載時所有選項卡的內容，或者強制我的部分視圖在頁面加載時呈現的方式？

Answer 1

這裏的代碼，我積極工作是工作得很好：

Login.cshtml

@{ 
    AjaxOptions optsLogin = new AjaxOptions { UpdateTargetId = "login-tab-login" }; 
    AjaxOptions optsRegister = new AjaxOptions { UpdateTargetId = "login-tab-register" }; 
} 
<section id="login-tabs"> 
    <ul> 
     <li><a href="#login-tab-login">Returning Customers</a></li> 
     <li><a href="#login-tab-register">New Customers</a></li> 
    </ul> 
    @using (Ajax.BeginForm("Login", "Account", optsLogin, new { id = "form-login" })) 
    { 
     <div id="login-tab-login"> 
      @Html.Partial("Account/_Login") 
     </div> 
    } 
    @using (Ajax.BeginForm("Register", "Account", optsRegister, new { id = "form-register" })) 
    { 
     <div id="login-tab-register"> 
      @Html.Partial("Account/_Register") 
     </div> 
    } 
</section> 
<script type="text/javascript"> 
    $(function() { 
     $('#login-tabs').tabs(); 
    }); 
</script> 

我的部分觀點是在一個帳戶子文件夾的共享文件夾。另外，每個局部視圖都有自己的模型。除此之外，實施是沒有什麼特別的...

UPDATE

我已經添加代碼來實現Ajax的兩個標籤調用。標籤部分上方的代碼塊包含兩個<form>元素的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元素。每個局部視圖都有自己的提交按鈕：

<input type="submit" value="<Whatever you want to display>" /> 

因爲每個局部視圖調用是在它自己的using (Ajax.BeginForm(...))塊包裹，我已經給每個<form>自己的id屬性，我可以添加JavaScript代碼劫持submit事件。根據按下哪個submit，它將執行與Ajax.BeginForm(...)調用中的指定操作和控制器關聯的操作方法。就我而言，如果表單數據通過驗證，控制器將自動重定向到/Home/Index。

然而，如果驗證失敗，操作方法簡單地將我的部分觀點的渲染過的版本發送回瀏覽器，並將其放置在與<form>相關的AjaxOptions對象在UpdateTargetId屬性指定的元素。由於默認InsertionMode爲Replace，所以視圖引擎將簡單地用新版本替換舊版本的部分視圖，如果包含表單數據和驗證消息（如果包括的話）。

我沒有包含的唯一與代碼相關的項目是我的部分視圖，對於jQuery選項卡功能而言，這並不重要。我在部分視圖中沒有任何其他JavaScript，並且我沒有包含的AccountController中的其他代碼特定於調用我的外部Web API控制檯應用程序並設置授權cookie。我將Google的CDN用於我的jQuery和jQuery UI聲明，而不是在本地託管JavaScript。

需要一段時間才能將自己的頭圍繞在你必須做的事情上。一旦你掌握了它，但你已經掌握了它，知識是可以轉讓的。這是不是 WebForms，謝天謝地。