MVC DIV引導摺疊按鈕，以動態數據

Question

工作的一個MVC Web應用程序項目，並希望能有一個按鈕是「經理人」，但也表現出對「員工」，他們通過使用引導程序崩潰數據 - 級聯效應管理動態數據切換。到目前爲止，我一直沒有成功。

看看我的圖here，看看有什麼我期待實現。

基本上如何使用一個按鈕，以顯示採用div代替表的動態數據。

這裏是什麼，我已經開始一個簡單的例子：

<div class="container"> 
    <div class="row"> 
    @foreach (var man in Model.Manager) 
    { //this loop displays all the Manager names 
     <div class="col-md-4"> 
      //@*@Html.ActionLink(man.ManagerName, "Index", new { id = man.ManagerID }, new { @class = "btn btn-sm", data_toggle = "collapse", data_target = "#employee" })*@ <!-- This is the cshtml that doesnt work. --> 
      <button type="button" class="btn btn-default" data-toggle="collapse" data-target="#employee">@man.ManagerName</button> 
      <div id="employee" class="collapse"> 
       <div class="row"> //This throws everything off 
        <div class="col-md-2"> 
        </div> 
        <div class="col-md-10"> 
          @foreach (var emp in man.Employee) 
          { 

           @Html.DisplayFor(modelItem => emp.EmployeeName) 

          } 
        </div> 
       </div> 
      </div> 
     </div> 

     <div class="col-md-1"> 
       @Html.ActionLink("Edit", "Edit", new { id = man.ManagerID }, new { @class = "btn btn-default" }) 
     </div> 

     <div class="col-md-7"> 
       @Html.ActionLink("Delete", "Delete", new { id = man.ManagerID }, new { @class = "btn btn-default" }) 
     </div> 
    } 
</div> 
</div> 

感謝一大堆！

Answer 1

這篇文章介紹瞭如何解決對齊問題，並與崩潰的問題。每一行都將是class = collapse，並且只會摺疊/展開第一行。一切正常。

<div class="container"> 
    @{int i = 0;} 
    @*<div class="row">*@ 
     @foreach (var man in Model.Manager) 
     { //this loop displays all the Manager names 

      //MOVING This in here fixes your problem with alignment 
      <div class="row"> 

      @{i++;} 

      <div class="col-md-4"> 
       //@*@Html.ActionLink(man.ManagerName, "Index", new { id = man.ManagerID }, new { @class = "btn btn-sm", data_toggle = "collapse", data_target = "#@i" })*@ <!-- This is the cshtml that doesnt work. --> 
       <button type="button" class="btn btn-default" data-toggle="collapse" data-target="#@i">@man.ManagerName</button> 
       <div id="@i" class="collapse"> 
        <div class="row"> 
         //This throws everything off 
         <div class="col-md-2"> 
         </div> 
         <div class="col-md-10"> 
          @foreach (var emp in man.Employee) 
          { 

           @Html.DisplayFor(modelItem => emp.EmployeeName) 

          } 
         </div> 
        </div> 
       </div> 
      </div> 

      <div class="col-md-1"> 
       @Html.ActionLink("Edit", "Edit", new { id = man.ManagerID }, new { @class = "btn btn-default" }) 
      </div> 

      <div class="col-md-7"> 
       @Html.ActionLink("Delete", "Delete", new { id = man.ManagerID }, new { @class = "btn btn-default" }) 
      </div> 

      @*//MOVING This in here fixes your problem with alignment*@ 
      </div>  

     } 
    @*</div>*@ 
</div>