Asp.Net MVC加载用ajax从一个jQuery UI选项卡的局部视图 [英] Asp.Net MVC load a partial view using ajax from a JQuery UI tab

问题描述

我有一个返回一个局部视图（ASCX）在我的控制器几种行为方法，我在不同的JQuery UI选项卡上单击时希望这些局部视图中呈现。

I have several action methods on my controller that return a partial view (ascx), and I want these partial views to be rendered when clicking on the different JQuery UI tabs.

该标签的定义是这样的：

The tabs are defined like this:

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

这使得标签精美，第一个选项卡（静态内容）显示正常，但是当我点击其他选项卡，没有任何反应。

This renders the tabs fine, the first tab (with static content) is displayed correctly, but when I click the other tabs, nothing happens.

而不是从action方法返回一个局部视图如果我只是返回平原的内容，它呈现的内容只是罚款和标签正常工作。

If instead of returning a partial view from the action methods I just return plain content, it renders the content just fine and the tabs work perfectly.

的我在做什么任何想法错了？

Any idea of what am I doing wrong?

感谢

推荐答案

嘿，我已经做了同样的事情最近。我简化，以便更清楚：

Hey, I've done the same thing recently. I simplified in order to be more clear:

的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的code：

and the JQuery code:

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

这篇关于Asp.Net MVC加载用ajax从一个jQuery UI选项卡的局部视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！