Question

在MVC WebApp项目上工作，希望有一个按钮成为“经理”，但也会显示有关他们通过使用bootstraps折叠数据切换的级联效果管理的“员工”的动态数据。到目前为止，我一直没有成功。

看看我的图表here，看看我想要实现的目标。

基本上我如何使用按钮来显示使用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>

非常感谢！

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>

MVC div Bootstrap折叠按钮到动态数据

1 个答案: