Asp.Net MVC tải một phần xem bằng cách sử dụng ajax từ tab Giao diện người dùng JQuery

Question

Tôi có một số phương thức hành động trên bộ điều khiển của mình. Các tab giao diện người dùng.

Các tab được định nghĩa như thế này:

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

này làm cho các tab tốt, tab đầu tiên (với nội dung tĩnh) được hiển thị một cách chính xác, nhưng khi tôi nhấp vào tab khác, không có gì xảy ra.

Nếu thay vì trả lại một phần lượt xem từ các phương thức hành động, tôi chỉ trả lại nội dung đơn giản, nội dung sẽ hiển thị nội dung tốt và các tab hoạt động hoàn hảo.

Bất kỳ ý tưởng nào về việc tôi đang làm gì sai?

Cảm ơn

Answer 1

Xin chào, tôi đã làm điều tương tự gần đây. Tôi đơn giản để được rõ ràng hơn:

Các 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> 

và mã 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); 
     } 
    }); 
}