Asp.Net MVC загружает частичное представление, используя ajax из вкладки пользовательского интерфейса JQuery

Question

У меня есть несколько методов действия на контроллере, которые возвращают частичное представление (ascx), и я хочу, чтобы эти частичные представления отображались при нажатии на разные вкладки пользовательского интерфейса JQuery.

Вкладки определяются следующим образом:

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

Это хорошо отображает вкладки, первая вкладка (со статическим содержимым) отображается правильно, но когда я нажимаю на другие вкладки, ничего не происходит.

Если вместо того, чтобы возвращать частичное представление из методов действия, я просто возвращаю простое содержимое, оно прекрасно отображает содержимое, а вкладки работают отлично.

Есть идеи, что я делаю не так?

Спасибо

Answer 1

Эй, я недавно сделал то же самое. Я упростил, чтобы быть более понятным:

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>

и код 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);
        }
    });
}