Asp.Net MVC charger une vue partielle en utilisant ajax à partir d'un onglet JQuery UI

Question

J'ai plusieurs méthodes d'action sur mon contrôleur qui renvoient une vue partielle (ascx), et je veux que ces vues partielles soient rendues en cliquant sur les différents JQuery Onglets de l'interface utilisateur

Les onglets sont définis comme suit:

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

Cela rend les onglets très bien, le premier onglet (avec un contenu statique) est affiché correctement, mais lorsque je clique sur les autres onglets, rien ne se passe.

Si au lieu de renvoyer une vue partielle des méthodes d'action, je retourne simplement du contenu brut, cela restitue le contenu et les onglets fonctionnent parfaitement.

Une idée de ce que je fais mal?

Merci

Answer 1

Hey, j'ai fait la même chose récemment. J'ai simplifié pour être plus clair:

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

et le code 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); 
     } 
    }); 
}