使用mvc和JS在选项卡上加载多个视图

Question

我正在使用引导程序和ASP.NET mvc创建Web应用程序。我在每个选项卡上使用视图，但是现在所有数据都是一样的。我想打电话给我的意见，并在标签处于活动状态时返回数据。我怎样才能做到这一点？ 所以我需要使用相同的参数加载diferents视图。我怎么能用js做到这一点！？这是标签：

<div class="board isactive"> 
<div class="board-inner"> 
    <ul class="nav nav-tabs2" id="myTab"> 
     <div class="liner"></div> 
     <li class="active"> 
      <a href="#six" data-toggle="tab" title="Project Details"> 
       <span class="round-tabs six"> 
        <i class="glyphicon glyphicon-globe"></i> 
       </span> 
      </a> 
     </li> 
     <li> 
      <a href="#one" data-toggle="tab" title="Contract Details"> 
       <span class="round-tabs one"> 
        <i class="glyphicon glyphicon-list"></i> 
       </span> 
      </a> 
     </li> 
     <li> 
      <a href="#two" data-toggle="tab" title="Assignments"> 
       <span class="round-tabs two"> 
        <i class="glyphicon glyphicon-user"></i> 
       </span> 
      </a> 
     </li> 
     <li> 
      <a href="#three" data-toggle="tab" title="Purchase Orders"> 
       <span class="round-tabs three"> 
        <i class="fa fa-file-powerpoint-o"></i> 
       </span> 
      </a> 
     </li> 
     <li> 
      <a href="#four" data-toggle="tab" title="Invoices"> 
       <span class="round-tabs four"> 
        <i class="fa fa-file-text-o"></i> 
       </span> 
      </a> 
     </li> 
    </ul> 
</div> 

标签，我需要点击选项卡时加载页面

</div> 
    <div class="tab-pane fade" id="one"> 
     <h4>Contracts for @Model.Item1.Name</h4> 
     <p class="narrow text-center"> 
      @Html.Action("index", "contracts", new { Model.Item1.ProjectID }) 
     </p> 
    </div> 
    <div class="tab-pane fade" id="two"> 
     <h4>Assignments for @Model.Item1.Name</h4> 
     <p class="narrow text-center" > 
      @Html.Action("index", "assignments", new { Model.Item2.ContractID }) 
     </p> 
    </div> 

    <div class="tab-pane fade" id="three"> 
     <h4>Purchase Orders for @Model.Item1.Name</h4> 
     <p class="narrow text-center"> 
      @Html.Action("index", "purchaseorders", new { Model.Item2.ContractID }) 
     </p> 
    </div> 
    <div class="tab-pane fade" id="four"> 
     <h4>Invoices for @Model.Item1.Name</h4> 
     <p class="narrow text-center"> 
      @Html.Action("index", "invoices", new { Model.Item2.ContractID }) 
     </p> 
    </div> 

---

Answer 1

您可以在标签的ID标签添加到每个p标签的并通过ajax调用动态加载视图。像这样的东西;

分别改变这些（命名约定可能很好）。

<div class="tab-pane fade" id="one"> 
    <h4>Contracts for @Model.Item1.Name</h4> 
    <p class="narrow text-center" id="oneContent"> 

    </p> 
</div> 

然后添加一个类似这样的JavaScript块;

$(document).ready(function() { 

     // get yourid parameter 
     var contractId = '@Model.Item2.ContractID'; 
     var params = { id: contractId }; 

     // just change these based on the tab.... 
     var url = ''; 
     var target = ''; 

     // capture the on tab click and see which tab you are showing 
     $('a[data-toggle="tab"]').on('shown.bs.tab', 
      function (e) { 
       var tabId = $(e.target).attr("href"); 
       switch(tabId) { 
       case "#one": 
        var url = '/contracts/index/'; 
        var target = 'oneContent'; 
        break; 
       case "#two": 
        var url = '/assignments/index/'; 
        var target = 'twoContent'; 
        break; 
       case "#three": 
        var url = '/purchaseorders/index/'; 
        var target = 'threeContent'; 
        break; 
       case "#four": 
        var url = '/invoices/index/'; 
        var target = 'fourContent'; 
        break; 
       } 
       // e.target; // newly activated tab 
       // e.relatedTarget // previous active tab 
      }); 

      //now get the view and load it to the tab content id that you named above 
      getView(url, params, target); 
    }); 

打电话给你的局部视图（确保它们返回PartialView）

function getView(url, params, target) { 
     $.ajax({ 
      type: "GET", 
      url: url, 
      error: function (a, b, c) { 
       debugger; 
      }, 
      data: params, 
      cache: false, 
      success: function (returnValue) { 
       $(target).html(returnValue); 
      } 
     }); 
    } 

没有测试 - 但它应该让你去...

希望帮助 史蒂夫