MVC div Bootstrap Collapse Schaltfläche zu dynamischen Daten

Question

Arbeiten an einem MVC WebApp Projekt und möchte eine Schaltfläche ein "Manager" sein, sondern auch dynamische Daten über die "Mitarbeiter" zeigen, die sie durch einen Kaskadeneffekt mit Bootstraps kollabieren Daten verwalten- Umschalten. Bis jetzt war ich erfolglos.

Werfen Sie einen Blick auf mein Diagramm here, um zu sehen, was ich erreichen möchte.

Grundsätzlich, wie verwende ich eine Schaltfläche zum Anzeigen dynamischer Daten mit div anstelle von Tabelle.

Hier ist ein kleines Beispiel von dem, was ich begonnen habe:

<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> 

Dank einem Haufen!

Answer 1

In diesem Beitrag wird erläutert, wie das Ausrichtungsproblem und das Problem mit dem Zusammenbruch behoben werden können. Jede Zeile ist class = collapse und wird nur in der ersten Zeile minimiert. Funktioniert alles.

<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>