使用Ajax从JQuery UI选项卡中加载部分视图的Asp.Net MVC

Question

我在我的控制器上有几个返回部分视图（ascx）的操作方法，我希望这些部分视图在单击不同的JQuery UI选项卡时呈现。

选项卡定义如下：

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

这段代码可以正确渲染选项卡，第一个选项卡（静态内容）显示正常，但是当我点击其他选项卡时，没有任何反应。

如果我在动作方法中不返回部分视图，而是返回纯文本内容，则可以正确呈现内容，并且选项卡可以完美工作。

你有什么想法吗？

谢谢

- willvv

---

到目前为止一切看起来都很好。你能检查一下ajax调用是否真的发生了吗？如果它确实发生了，那么从操作中返回了什么？你可以使用像FireBug这样的工具轻松地进行检查。 - Johnny Oshika

嗨Johnny，是的，调用正在发生（我在操作中设置了断点并被触发）。我使用aspx页面而不是ascx来解决了问题（aspx页面没有html、head或body标签，只有我想呈现的控件）。虽然这似乎很奇怪，但可能是因为我没有清楚地了解View和PartialView之间的区别。 - willvv

我很高兴你能找到一个可行的解决方案。 - Johnny Oshika

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

- Misha N.

---

谢谢，我知道这个方法可行，但我想尝试使用JQuery UI选项卡的默认功能来实现它... - willvv