ASP. NET Использование JQuery с вложенными редактируемыми GridView с функциями расширения / свертывания

Question

Одна часть моего приложения использует вложенные GridViews для отображения данных. У меня есть заказы клиентов, и каждый заказ состоит из 1 или более продуктов. Теперь, чтобы представить данные пользователю, я использовал данные заказа GridView с кнопкой в ​​каждой строке, которая позволяет развернуть / свернуть дочерний элемент Gridview.

. учебник, представленный на этой странице:

https://www.aspsnippets.com/Articles/ASPNet-Nested-GridViews-GridView-inside-GridView-with-Expand-and-Collapse-feature.aspx

с некоторыми изменениями, поскольку моя ситуация немного отличается (например, я не использую базу данных, так как данные импортируются из внешнего API).

Однако проблема в том, что в исходном коде отображаются только дочерние данные GridView, в то время как в моем решении они содержат DropDownLists, который позволяет пользователю редактировать данные:

<asp:GridView ID="MainTable" runat="server" OnDataBound="MainTable_DataBound" AutoGenerateColumns="false" OnRowCommand="MainTable_RowCommand" class="w3-table w3-centered">
        <HeaderStyle CssClass="w3-blue" />
        <Columns>
            <asp:TemplateField>
                <ItemTemplate>
                    <a class="w3-btn w3-blue button" id="plus">+</a>
                    <asp:Panel ID="pnlOrders" runat="server" Style="display: none">
                        <asp:GridView ID="ProductsTable" runat="server" OnRowDataBound="ProductsTable_RowDataBound" AutoGenerateColumns="false" class="w3-table w3-striped">
                            <Columns>
                                <asp:BoundField DataField="Name" HeaderText="Nazwa" />
                                <asp:BoundField DataField="Indexer" Visible="false" />
                                <asp:TemplateField HeaderText="Parametr 1">
                                    <ItemTemplate>
                                        <asp:DropDownList ID="DropDownList1" runat="server" class="w3-select w3-border"></asp:DropDownList>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="Parametr 2">
                                    <ItemTemplate>
                                        <asp:DropDownList ID="DropDownList2" runat="server" class="w3-select w3-border"></asp:DropDownList>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="Parametr 3">
                                    <ItemTemplate>
                                        <asp:DropDownList ID="DropDownList3" runat="server" class="w3-select w3-border"></asp:DropDownList>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="Usuń">
                                    <ItemTemplate>
                                        <a class="w3-btn w3-blue verify">V</a>
                                    </ItemTemplate>
                                </asp:TemplateField>
                            </Columns>
                        </asp:GridView>
                    </asp:Panel>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:BoundField DataField="ID" HeaderText="ID" />
            <asp:BoundField DataField="Client" HeaderText="Klient" />
            <asp:BoundField DataField="Phone" HeaderText="Telefon" />
            <asp:BoundField DataField="Comment" HeaderText="Komentarz" />
            <asp:TemplateField HeaderText="Zatwierdź">
                <ItemTemplate>
                    <asp:Button class="w3-btn w3-blue" Text="Zatwierdź" runat="server" CommandName="Verify" CommandArgument="<%# Container.DataItemIndex %>" />
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

Теперь JQuery, используемый в исходном коде, создает дочернюю копию GridView, которая удаляется, когда пользователь нажимает кнопку «-». Из-за этого я не могу получить доступ к DropDownLists в коде, а сделанные пользователем изменения не сохраняются. Я также обнаружил, что кнопки в дочернем элементе GridView (класс .verify) не работают должным образом (однако, это может быть моей ошибкой, поскольку я не очень хорошо знаю JQuery).

$(document).ready(function () {
            $(".button").on("click", function () {
                if ($(this).attr('id') == "plus") {
                    $(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>");
                    $(this).html("-");
                    $(this).attr('id', 'minus');
                }
                else {
                    $(this).html("+");
                    $(this).closest("tr").next().remove();
                    $(this).attr('id', 'plus');
                }
            });
            $(".verify").on("click", function () {
                $(this).closest("tr").css("background-color", "#ffffff");
            });
        });

Итак, мой вопрос - как сохранить текущий внешний вид и дизайн страницы приложения (открыв дочерний GridView вне ячейки), сохраняя при этом возможность доступа к DropDownLists в коде? Можно ли сделать это с JQuery? Если нет, есть ли у вас какие-либо другие идеи о том, как решить эту проблему?

[ EDIT ] Вот некоторые фотографии того, как это выглядит:

Answer 1

Вы также можете использовать hide () вместо remove (). Вот так:

 $(this).html("+");
 $(this).closest("tr").next().hide();
 $(this).attr('id', 'plus');