asp.net-mvc - Asp.Net MVC 使用 ajax 从 JQuery UI 选项卡加载部分 View

Question

我的 Controller 上有几个返回局部 View (ascx) 的操作方法，我希望在单击不同的 JQuery UI 选项卡时呈现这些局部 View 。

选项卡定义如下:

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

这使选项卡很好，第一个选项卡(带有静态内容)正确显示，但是当我单击其他选项卡时，没有任何 react 。

如果不是从操作方法返回部分 View ，而是返回纯内容，它会很好地呈现内容并且选项卡可以完美地工作。

知道我做错了什么吗？

谢谢

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