Asp.Net MVC carga una vista parcial usando ajax desde la pestaña UQ de JQuery

Question

Tengo varios métodos de acción en mi controlador que devuelven una vista parcial (ascx), y quiero que estas vistas parciales se representen al hacer clic en las diferentes JQuery Pestañas de la IU.

Las fichas se definen así:

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

Esto hace que las pestañas bien, la primera pestaña (con contenido estático) se muestra correctamente, pero cuando hago clic en las otras fichas, no pasa nada.

Si en lugar de devolver una vista parcial desde los métodos de acción simplemente devuelvo contenido simple, el contenido está muy bien y las pestañas funcionan perfectamente.

¿Alguna idea de qué estoy haciendo mal?

Gracias

Answer 1

Hola, he hecho lo mismo recientemente. He simplificado con el fin de ser más claro:

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

y el código de 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); 
     } 
    }); 
}