如何使用asp.net剃鬚刀加載ajax調用UI標籤內容

Question

我有一個頁面有很多（必要的）選項卡，所以它做了很多調用來獲取信息，但我只想獲得該信息只有當該標籤被點擊。

我有這樣的事情：

<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all"> 
    <li class="ui-state-default ui-corner-top"><a class="ui-tabs-anchor" href="#listing-global-view">@Resources.GetResourceString("Strings", "GlobalView")</a></li> 
    ... 
</ul> 

<div id="listing-global-view" class="startup-active ui-tabs-panel ui-widget-content ui-corner-bottom"> 
    @{Html.RenderPartial("ListingGlobalView", Model);} 
</div> 

然後我的腳本初始化標籤，但我只希望它被點擊時的內容關聯到每個選項卡。

$('.tabbedwidget').tabs({ 
     active: 0, 
     activate: function (event, ui) { 
      var selectedSelector = ui.newPanel.selector; //ui.newTab[0].innerText; 
      switch (selectedSelector) 
      { 
       case "#listing-global-view": { 
        //make ajax equivalent to @{Html.RenderPartial("ListingGlobalView", Model);} 

       } 
      } 

     } 
    }); 

UPDATE

現在我有一個問題：因爲我只想關聯到該選項卡中的信息可以點擊上呈現，我改變了href標記來呈現局部的動作。

<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all"> 
    <li class="ui-state-default ui-corner-top"><a class="ui-tabs-anchor" href="@Url.Action("ListingGlobalView", new { id = Model.ID })">@Resources.GetResourceString("Strings", "GlobalView")</a></li> 
    ... 
</ul> 

當單擊該標籤中，正確地顯示了我的部分觀點，但是這裏面的部分，我打電話另一部分本來應該調用另一個動作（以填補組合信息 - JSON），但他們沒有正在做。只有當我在我的控制器中說第一個局部渲染是一個視圖時，信息才能正確顯示，但這樣它會使我的佈局...

謝謝。

Answer 1

你可以嘗試添加一個數據屬性，該屬性可以爲您的標籤Ajax調用的URL，例如：

$(document).on("ready",function(){ 
 
    $("#myTabs a").on("click",function(){ 
 
    var div = $(this).attr("href"); 
 
    $.ajax({ 
 
     url:$(this).data("url"), 
 
     success:function(html){ 
 
     $(div).append(html); 
 
     } 
 
    }); 
 
    }); 
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 

 
<div class="bs-example bs-example-tabs" data-example-id="togglable-tabs"> 
 
    <ul id="myTabs" class="nav nav-tabs" role="tablist"> 
 
     <li role="presentation" class="active"><a href="#home" data-url="https://www.google.com.mx" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">Home</a></li> 
 
     <li role="presentation" class=""><a href="#profile" role="tab" id="profile-tab" data-toggle="tab" aria-controls="profile" aria-expanded="false">Profile</a></li> 
 
     <li role="presentation" class="dropdown"> 
 
     <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown" aria-controls="myTabDrop1-contents" aria-expanded="false">Dropdown <span class="caret"></span></a> 
 
     <ul class="dropdown-menu" aria-labelledby="myTabDrop1" id="myTabDrop1-contents"> 
 
      <li><a href="#dropdown1" role="tab" id="dropdown1-tab" data-toggle="tab" aria-controls="dropdown1">@fat</a></li> 
 
      <li><a href="#dropdown2" role="tab" id="dropdown2-tab" data-toggle="tab" aria-controls="dropdown2">@mdo</a></li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    <div id="myTabContent" class="tab-content"> 
 
     <div role="tabpanel" class="tab-pane fade active in" id="home" aria-labelledby="home-tab"> 
 
     
 
     </div> 
 
     <div role="tabpanel" class="tab-pane fade" id="profile" aria-labelledby="profile-tab"> 
 
     
 
     </div> 
 
     <div role="tabpanel" class="tab-pane fade" id="dropdown1" aria-labelledby="dropdown1-tab"> 
 
     
 
     </div> 
 
     <div role="tabpanel" class="tab-pane fade" id="dropdown2" aria-labelledby="dropdown2-tab"> 
 
     
 
     </div> 
 
    </div> 
 
    </div>

我把標籤snipet從這裏： http://getbootstrap.com/javascript/#tabs