使用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); 
      } 
     }); 
    } 

沒有測試 - 但它應該讓你去...

希望幫助 史蒂夫