我正在使用bootstrap和asp.net MVC创建Web应用程序。我在每个选项卡上使用部分视图,但是现在所有数据都同时出现。我想只有在选项卡处于活动状态时,我想调用我的部分查询并返回数据。我该怎么做?
<div>
<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="#tab1" data-toggle="tab">Service</a></li>
<li><a href="#tab2" data-toggle="tab">Instrument</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1">
@Html.Action("Index", "Controller1")
</div>
<div class="tab-pane fade" id="tab2">
@Html.Action("Index", "Controller2")
</div>
</div>
</div>
您需要在标签上放置一个onclick事件,如下所示,应该适合您
<ul class="nav nav-tabs nav-justified">
<li class="active" data-ref="1"><a href="#tab1" data-toggle="tab">Service</a></li>
<li data-ref="2"><a href="#tab2" data-toggle="tab">Instrument</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1">
<div id="tabone"></div>
</div>
$(".nav-tabs li").click(function(){
var pageId = $(this).data('ref');
$.ajax({
url: url,
data: {pageId:pageId },
success: function(response){
if(pageId == 1)
{
$('#tab1').replaceWith(response);
}
else....
}
});
});
尝试此代码
<div>
<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="#tab1" id="openTab1" data-toggle="tab">Service</a></li>
<li><a href="#tab2" id="openTab2" data-toggle="tab">Instrument</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1">
@Html.Action("Index", "Controller1")
</div>
<div class="tab-pane fade" id="tab2">
@Html.Action("Index", "Controller2")
</div>
</div>
</div>
<script>
$("#openTab1").on("click", function() {
$("#tab1").load('/Controller1/Index');
});
$("#openTab2").on("click", function() {
$("#tab2").load('/Controller2/Index');
});
</script>
javaScript魔术
ASP.NET本质上没有可用的功能。我要使用的方法是在您的controller
中设置URL,返回partial view
,然后向该URL提出AJAX请求,以将其内容加载到您的网页中。我描述的方法可以在这里看作是一个示例
tdlr;
在您的控制器中进行部分视图,然后使用AJAX加载。