如何在 ASP.NET CORE Razor 页面的 HTML 中折叠和展开表格答案

【问题标题】：How to collapse and expand tables in HTML for ASP.NET CORE Razor pages如何在 ASP.NET CORE Razor 页面的 HTML 中折叠和展开表格
【发布时间】：2022-01-19 21:50:40
【问题描述】：

我有一个由 ASP.NET 模型填充的表。在此表中，我需要显示 Bonus 和 Bonus 行项目（它们具有父子关系）。要求是仅针对 Bonus 加载表格，并且当用户单击特定奖励时，该部分会展开并显示行项目。我该怎么做？

  <div id="bonusTable">
    @if(Model.Bonus != null)      
    {
        <table>
        <thead>
            <tr id="bonusHeader">
                <th>
                    @Html.DisplayNameFor(model => model.Bonus[0].BonusId)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.EarningsCode[0].EarningsCodeName)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Bonus[0].StaffFirstName)
                </th>
                <th>
                        @Html.DisplayNameFor(model => model.BonusLineItem[0].CreatedOn)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.BonusLineItem[0].UpdatedOn)
                </th>
                <th>
                    <a asp-page="./Index">
                        @Html.DisplayNameFor(model => model.BonusLineItem[0].ApprovedByUsername)
                    </a>
                </th>          
                <th>
                    <button class="btn-primary" id="popCreate" onclick=openCreatePopUp()>+</button>
                </th>
            </tr>
        </thead>
        <tbody>
              @foreach (var item in Model.Bonus)
            {
                <tr id="bonusItem" class="header">
                    <td>
                        @Html.DisplayFor(modelItem => item.BonusId)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.StaffFirstName)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.StaffLastName)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.StaffCode)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.LocationCode)
                    </td>
                    <td>
                         <form method="post" asp-page-handler="Edit"
                         asp-route-StaffCode=@item.StaffCode>
                                <button type="submit">
                                    Edit
                                </button>
                                </form>
             
                    </td>
                   <td>
                         <form method="post" asp-page-handler="Delete"
                         asp-route-BonusId=@item.BonusId>
                                <button type="submit">
                                    DeleteEntireBonus
                                </button>
                                </form>
             
                    </td>
                    <td>
                    <button value="Expand" onclick=expandBonusLineItem() class="btn">Expand</button>
                    </td>
                </tr>

                if (item.BonusLineItem != null)
                {                       
                      foreach(var lineItem in item.BonusLineItem)
                {
                    <tr id="bonusLineItem" style="display:none">

                    <td>
                        @Html.DisplayFor(modelItem => lineItem.EarningsCodeName)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem=> lineItem.BonusAmt)
                    </td>
                    <td>
                                         <form method="post" asp-page-handler="DeleteBonusLineItem"
                         asp-route-BonusLineItemId=@lineItem.BonusLineItemId>
                                <button type="submit">
                                    Delete Line Item
                                </button>
                                </form>
                    </td>
                    
                    </tr>
                }
                }

              
                

               
            }
</tbody>
</table>  
    }

【问题讨论】：

标签： javascript asp.net asp.net-core razor-pages

【解决方案1】：

如果你想点击展开按钮，然后显示BonusLineItem。这是一个演示：

<div id="bonusTable">
    @if (Model.Bonus != null)
    {
        <table>
            <thead>
                <tr id="bonusHeader">
                    <th>
                        @Html.DisplayNameFor(model => model.Bonus[0].BonusId)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.EarningsCode[0].EarningsCodeName)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.Bonus[0].StaffFirstName)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.BonusLineItem[0].CreatedOn)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.BonusLineItem[0].UpdatedOn)
                    </th>
                    <th>
                        <a asp-page="./Index">
                            @Html.DisplayNameFor(model => model.BonusLineItem[0].ApprovedByUsername)
                        </a>
                    </th>
                    <th>
                        <button class="btn-primary" id="popCreate" onclick=openCreatePopUp()>+</button>
                    </th>
                </tr>
            </thead>
            <tbody>
                @{ var index = 0;}
                @foreach (var item in Model.Bonus)
                {
                    <tr id="bonusItem" class="header">
                        <td>
                            @Html.DisplayFor(modelItem => item.BonusId)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.StaffFirstName)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.StaffLastName)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.StaffCode)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.LocationCode)
                        </td>
                        <td>
                            <form method="post" asp-page-handler="Edit"
                                  asp-route-StaffCode=@item.StaffCode>
                                <button type="submit">
                                    Edit
                                </button>
                            </form>

                        </td>
                        <td>
                            <form method="post" asp-page-handler="Delete"
                                  asp-route-BonusId=@item.BonusId>
                                <button type="submit">
                                    DeleteEntireBonus
                                </button>
                            </form>

                        </td>
                        <td>
                            <button value="Expand" onclick="expandBonusLineItem(@index)" class="btn">Expand</button>
                        </td>
                    </tr>

                    if (item.BonusLineItem != null)
                    {
                        foreach (var lineItem in item.BonusLineItem)
                        {
                            <tr id="bonusLineItem" class="@index" style="display:none">

                                <td>
                                    @Html.DisplayFor(modelItem => lineItem.EarningsCodeName)
                                </td>
                                <td>
                                    @Html.DisplayFor(modelItem => lineItem.BonusAmt)
                                </td>
                                <td>
                                    <form method="post" asp-page-handler="DeleteBonusLineItem"
                                          asp-route-BonusLineItemId=@lineItem.BonusLineItemId>
                                        <button type="submit">
                                            Delete Line Item
                                        </button>
                                    </form>
                                </td>

                            </tr>
                        }
                    }


                    index++;


                }
            </tbody>
        </table>
    }
</div>

js:

function expandBonusLineItem(index) {
                $("." + index).show();
            }

结果：

【讨论】：