Asp.Net MVC ładuje częściowy widok przy użyciu ajax z zakładki JQuery UI

Question

Mam kilka metod działania na moim kontrolerze, które zwracają częściowy widok (ascx) i chcę, aby te częściowe widoki były renderowane po kliknięciu na różne JQuery Karty interfejsu użytkownika.

Zakładki są zdefiniowane następująco:

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

Czyni wypustki porządku, pierwsza zakładka (o zawartości statycznej) jest wyświetlany poprawnie, ale po kliknięciu na inne karty, nic się nie dzieje.

Jeśli zamiast zwracania częściowego widoku z metod akcji po prostu zwrócę zwykłą zawartość, renderuje ona zawartość dobrze, a karty działają idealnie.

Jakieś pojęcie, co robię źle?

Dzięki

Answer 1

Hej, ostatnio zrobiłem to samo. I uproszczone, aby być bardziej oczywiste:

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> 

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