Question

您好我在查找如何在ASP.NET MVC项目中远程将内容加载到引导选项卡中时遇到了困难。我做了一些研究并找到了这个link。

我尝试将此实现到我的项目中，但是我在正确加载页面时遇到了问题。我得到两个布局重叠在另一个之下，甚至在我点击链接之前，同时显示两个页面的内容。

这是我的代码：

<div class="container-fluid">
<ul class="nav nav-tabs" id="myTabs">
<li class="active"><a href="#controller1" data-url="http://localhost:1234/controller1/viewname1">Tab1</a></li>
 <li><a href="#Controller2" data-url="http://localhost:1234/controller2/viewname2">Tab2</a></li>

</ul>

 <div class="tab-content">
<div class="tab-pane active" id="controller1"></div>
<div class="tab-pane" id="Controller2"></div>
  </div>
</div>

脚本是：

    $(document).ready(function ()
   {


     $('#myTabs a').click(function (e) {
         e.preventDefault();

         var url = $(this).attr("data-url");
         var href = this.hash;
         var pane = $(this);

         // ajax load from data-url
         $(href).load(url, function (result) {
             pane.tab('show');
         });
     });

       // load first tab content
     $('#controller1').load($('.active a').attr("data-url"), function (result) {
         $('.active a').tab('show');
     });

这里发生了什么，我的默认控制器是controller1。所以当我加载页面时，我从controller1和controller2获取的内容是view1和view2。此外，我还要提到的另一件事是，我在视图中使用相同的布局页面，例如view1和view2的Layout = Layoutname。

任何人都可以帮我解决这个问题。

Answer 1

将您的点击处理程序修改为：

$('#myTabs a').click(function (e) {
     e.preventDefault();

     var url = $(this).attr("data-url");
     var href = $(this).attr("href");
     var that = this;

     // ajax load from data-url
     $(href).load(url, function (result) {
         $(that).tab('show');
     });
 });

无法远程加载Bootstrap选项卡

1 个答案: