asp.net-mvc – Asp.Net MVC使用来自JQuery UI选项卡的ajax加载

发布时间：2020-12-15 21:00:32 所属栏目：asp.Net 来源：网络整理

导读：我的控制器上有几个动作方法返回部分视图(ascx),我希望在单击不同的 JQuery UI选项卡时呈现这些部分视图. 选项卡的定义如下： div id="tabs" lia href="#FirstTab" title="First tab"First tab/a/li li%= Html.ActionLink("General","General",new {id=Model

我的控制器上有几个动作方法返回部分视图(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>

这样可以很好地显示选项卡,第一个选项卡(带有静态内容)可以正确显示,但是当我单击其他选项卡时,没有任何反应.

如果不是从动作方法返回局部视图而是返回普通内容,它会使内容呈现正常,并且标签可以完美地运行.

我知道我做错了什么吗？

谢谢

解决方法

嘿,我最近做了同样的事情.我简化了以便更清楚：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!