jQuery-Registerkarten mit MVC4-Inhalt

Question

Ich versuche, einige MVC4-Ansichten in jQuery-Registerkarten anzuzeigen. Hier ist mein Code:

Das Problem ist, dass der Inhalt der ersten Registerkarte nur gut angezeigt wird - aber die zweite ist leer. Es scheint, dass die Teilansicht nicht gerendert wird.

Gibt es eine Möglichkeit, entweder jQuery-Registerkarten zu zwingen, Inhalt für ALLE Registerkarten zu aktualisieren, wenn die Seite geladen wird, oder eine Möglichkeit, meine partielle Ansicht beim Laden der Seite zu rendern?

Answer 1

Hier ist Code, den ich aktiv bin daran arbeiten arbeitet gerade fein:

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> 

Meine Teilansichten sind im freigegebenen Ordner in einem Unterordner Konto. Zusätzlich hat jede Teilansicht ein eigenes Modell. Other than that, ist die Umsetzung nichts Besonderes ...

UPDATE

I-Code hinzugefügt haben Ajax fordert die beiden Laschen zu implementieren. Der Codeblock über dem Registerkartenabschnitt enthält die AjaxOptions Objekte für die zwei <form> Elemente. Ihr Controller muss so etwas wie folgt aussehen:

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); 
    } 
} 

Die Login GET Aktionsmethode macht die gesamte Seite einschließlich der _Layout.cshtml und _ViewStart.cshtml Ansichten. Meine Teilansichten, _Login.cshtml und _Register.cshtml, enthalten die HTML-Elemente für die Eingabeformulare. Jede Teilansicht hat seine eigene Taste einreichen:

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

Da jede Teilansicht Anruf in seinem eigenen using (Ajax.BeginForm(...)) Block eingeschlossen ist, und ich habe jedes <form> sein eigenes id Attribut gegeben, kann ich JavaScript-Code kapern das submit Ereignis hinzuzufügen. Abhängig davon, welche Taste submit gedrückt wird, führt es die Aktionsmethode aus, die der angegebenen Aktion und dem Controller im Ajax.BeginForm(...)-Aufruf zugeordnet ist. In meinem Fall, wenn die Formulardaten die Validierung bestehen, wird der Controller automatisch zu /Home/Index umleiten.

Wenn jedoch die Validierung fehlschlägt, wird die Aktion-Methode einfach die gerenderte Version meiner Teilansicht an den Browser zurückzuschicken und es in dem Elemente in der UpdateTargetId Eigenschaft in dem mit den <form> zugeordnet AjaxOptions Objekt angegeben platzieren. Da die Standardeinstellung InsertionModeReplace ist, wird die View-Engine einfach die alte Version der Teilansicht durch die neue Version ersetzen, komplett mit Formulardaten und Validierungsnachrichten, falls vorhanden.

Die einzigen Code-bezogenen Elemente, die ich nicht enthalten habe, sind meine Teilansichten, die wirklich keine Rolle spielen, soweit die jQuery Tabs Funktionalität geht. Ich habe kein zusätzliches JavaScript in meinen Teilansichten, und der zusätzliche Code in AccountController, den ich nicht einbezogen habe, ist spezifisch für den Aufruf meiner externen Web-API-Konsolenanwendung und das Festlegen des Berechtigungscookies. Ich verwende Google CDN für meine jQuery- und jQuery UI-Deklarationen, anstatt das JavaScript lokal zu hosten.

Es dauert eine Weile, um den Kopf herumzulegen, was Sie tun müssen. Sobald Sie es aber haben, haben Sie es und das Wissen ist übertragbar. Dies ist nicht WebForms, Gott sei Dank.