如何使用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