[英]dynamically load content when tab is active in mvc bootstrap tab-content
I am using bootstrap and ASP.NET mvc to create a web app. 我正在使用引导程序和ASP.NET mvc创建一个Web应用程序。 I am using partial views on each tab however right now all the data is coming in at the same time. 我在每个选项卡上使用局部视图,但是现在所有数据都同时输入。 I would like to call my partial to query and return data only when the tab is active. 我想仅在选项卡处于活动状态时才调用我的局部查询并返回数据。 How can I do that? 我怎样才能做到这一点?
<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>
You would need to put a onClick event on your tabs, somthing like below should work for you 您需要在标签上放置一个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....
}
});
});
Try this Code 试试这个代码
<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>
ASP.net doesn't inherently come with that feature available. ASP.net并非固有地具有该功能。 The method I would use would be to setup a url in your controller
returning a partial view
and then have make an ajax request to that url to load it's content in to your web page. 我将使用的方法是在controller
设置一个返回partial view
的URL,然后向该URL发出ajax请求,以将其内容加载到您的网页中。 The method I described can be seen as an example Here 我所描述的方法可以被看作是一个例子在这里
Make a partial view in your controller, and load it using ajax. 在控制器中进行部分查看,然后使用ajax加载它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.