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.
我的控制器上有几个操作方法,它们返回部分视图(ascx),我希望在单击不同的JQuery UI选项卡时呈现这些部分视图。
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.
这样可以很好地呈现选项卡,第一个选项卡(带有静态内容)将被正确显示,但是当我单击其他选项卡时,什么也不会发生。
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?
你知道我做错了什么吗?
Thanks
谢谢
1 个解决方案
#1
9
Hey, I've done the same thing recently. I simplified in order to be more clear:
嘿,我最近也做过同样的事。我简化了,以便更清楚:
The html:
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>
and the JQuery code:
与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);
}
});
}
#1
9
Hey, I've done the same thing recently. I simplified in order to be more clear:
嘿,我最近也做过同样的事。我简化了,以便更清楚:
The html:
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>
and the JQuery code:
与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);
}
});
}