Asp.Net MVC carica una vista parziale utilizzando ajax da una scheda dell'interfaccia utente JQuery

Question

Ho vari metodi di azione sul mio controller che restituiscono una vista parziale (ascx) e voglio che queste viste parziali vengano visualizzate quando si fa clic sul diverso JQuery Schede dell'interfaccia utente.

Le linguette sono definite in questo modo:

<div id="tabs"> 
    <li><a href="#FirstTab" title="First tab">First tab</a></li> 
    <li><%= Html.ActionLink("General", "General", new {id=Model.Id}) %></li> 
    <li><%= Html.ActionLink("Details", "Details", new {id=Model.Id}) %></li> 
    <div id="FirstTab"> 
    ... 
    </div> 
</div> 

Ciò rende le linguette fine, la prima scheda (con contenuto statico) viene visualizzato correttamente, ma quando scatto le altre schede, non succede nulla.

Se invece di restituire una vista parziale dai metodi di azione restituisco semplicemente il contenuto normale, rende il contenuto corretto e le schede funzionano perfettamente.

Qualche idea di cosa sto sbagliando?

Grazie

Answer 1

Ehi, ho fatto la stessa cosa di recente. Ho semplificato al fine di essere più chiaro:

il codice HTML:

<div class="tabs"> 
       <ul> 
        <li> 
         <a onclick="TabItemClicked(this,<%=Url.Action("General", new {id=Model.Id}) %>))" href="#fragment1"> 
         <span>General</span> 
         </a> 
        </li> 
        <li> 
         <a onclick="TabItemClicked(this,<%= Html.ActionLink("Details", new {id=Model.Id}) %>))" href="#fragment2"> 
         <span>Details</span> 
         </a> 
        </li> 
       </ul> 
       <div id="fragment1"></div> 
       <div id="fragment2"></div> 
    </div> 

e il codice JQuery:

function TabItemClicked(a, action) { 

    var container = $(a).parents('div.tabs'); 
    var resultDiv = $($(a).attr('href'), container); 

    $.ajax({ 
     type: "POST", 
     url: action, 
     data: {}, 
     success: function(response) { 
      resultDiv.html(''); 
      resultDiv.html(response); 
     } 
    }); 
}