C# MVC div引导折叠按钮到动态数据

在MVC WebApp项目中工作，希望有一个按钮可以成为经理，但也可以通过使用引导折叠数据切换的级联效应显示他们管理的员工的动态数据。到目前为止，我一直没有成功

看看我的图表，看看我想要实现什么

基本上，我如何使用按钮来使用div而不是table显示动态数据

下面是一个我已经开始的快速示例：

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

---

非常感谢

这篇文章解释了如何解决对齐问题和折叠问题。每一行都是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>