Schede jQuery con contenuto MVC

Question

Sto cercando di ottenere alcune visualizzazioni MVC4 da visualizzare nelle schede jQuery. Ecco il mio codice:

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

Il problema è che il contenuto della prima scheda viene visualizzato correttamente ma il secondo è vuoto. Sembra che la vista parziale non sia resa.

C'è un modo per forzare le schede jQuery per aggiornare il contenuto di TUTTE le schede quando la pagina viene caricata, o un modo per forzare la mia vista parziale a eseguire il rendering al caricamento della pagina?

Answer 1

Ecco il codice che sto lavorando attivamente su questo sta lavorando bene:

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> 

mie viste parziali sono nella cartella condivisa in una sottocartella account. Inoltre, ciascuna vista parziale ha il proprio modello. Oltre a questo, l'implementazione è niente di speciale ...

UPDATE

ho aggiunto il codice per implementare Ajax invita le due schede. Il blocco di codice sopra la sezione delle schede contiene gli oggetti AjaxOptions per i due elementi <form>. Il controller ha bisogno di guardare qualcosa di simile:

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

Il metodo di azione Login GET rende l'intera pagina, comprese le _Layout.cshtml e _ViewStart.cshtml vista. Le mie viste parziali, _Login.cshtml e _Register.cshtml, contengono gli elementi HTML per i moduli di immissione. Ogni visione parziale ha un proprio pulsante di invio:

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

Poiché ogni chiamata vista parziale è racchiuso in un proprio using (Ajax.BeginForm(...)) blocco e ho dato a ciascuno <form> suo stesso attributo id, posso aggiungere codice JavaScript per dirottare l'evento submit. A seconda di quale tasto submit viene premuto, eseguirà il metodo di azione associato all'azione e al controller specificati nella chiamata Ajax.BeginForm(...). Nel mio caso, se i dati del modulo superano la convalida, il controller reindirizzerà automaticamente a /Home/Index.

Tuttavia, se la convalida non riesce, il metodo di azione sarà sufficiente inviare di nuovo la versione resa della mia vista parziale al browser e metterlo in l'elemento specificato nella proprietà UpdateTargetId nell'oggetto AjaxOptions associato alla <form>. Poiché il valore predefinito InsertionMode è Replace, il motore di visualizzazione sostituirà semplicemente la versione precedente della vista parziale con la nuova versione, completa dei dati del modulo e dei messaggi di convalida, se inclusi.

Gli unici elementi relativi al codice che non ho incluso sono le mie viste parziali, che in realtà non hanno importanza per quanto riguarda la funzionalità delle schede jQuery. Non ho alcun JavaScript aggiuntivo nelle mie viste parziali e il codice aggiuntivo nel AccountController non incluso è specifico per chiamare la mia applicazione console API Web esterna e impostare il cookie di autorizzazione. Sto usando il CDN di Google per le mie dichiarazioni di jQuery e jQuery UI, piuttosto che ospitare localmente JavaScript.

Ci vuole un po 'per avvolgere la testa su quello che devi fare. Una volta ottenuto, però, ce l'hai e la conoscenza è trasferibile. Questo è non WebForms, grazie al cielo.