Javascript 当mvc引导选项卡内容中的选项卡处于活动状态时动态加载内容

我正在使用bootstrap和ASP.NET mvc创建一个web应用程序。我在每个选项卡上使用部分视图，但是现在所有数据都同时进入。我想只在选项卡处于活动状态时调用我的partial查询并返回数据。我该怎么做

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

@动作（“索引”、“控制器1”）
@动作（“索引”、“控制器2”）

试试这段代码

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

@动作（“索引”、“控制器1”）
@动作（“索引”、“控制器2”）
$（#openTab1”）。在（“单击”，函数（）上{
$（“#tab1”）.load（'/Controller1/Index'）；
});
$（#openTab2”）。在（“单击”，函数（）上{
$（“#tab2”）.load（'/Controller2/Index'）；
});

Javascript魔术 ASP.net本身并不具备该功能。我将使用的方法是在

控制器中设置一个url，返回
部分视图
，然后向该url发出ajax请求，将其内容加载到您的网页中。我描述的方法可以看作是一个例子

tdlr；
在您的控制器中创建一个局部视图，并使用ajax加载它。
您需要在选项卡上放置一个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.... 
      }
    });
});





$（“.nav选项卡li”）。单击（函数（）{
var pageId=$（this.data（'ref'）；
$.ajax({
url:url，
数据：{pageId:pageId}，
成功：功能（响应）{
如果（pageId==1）
{
$（'tab1'）。替换为（响应）；
}
其他的
}
});
});