ASP.NET嵌套GridView打开模态框后展开项折叠问题求助

我实现了ASP.NET嵌套GridView的展开/折叠功能，点击嵌套GridView里的LinkButton打开模态框后，所有已展开的项都会折叠。已知是AutoPostBack导致的，但因其他需求无法关闭AutoPostBack。试过给嵌套GridView添加UpdatePanel，但模态框无法正常调用；也尝试过在后台代码中保持面板展开，均未奏效。现寻求基于UpdatePanel或jQuery的解决方案。

现有代码 #

后端VB代码 #

Me.ClientScript.RegisterStartupScript(Form.GetType(), "Show", "ShowModalForm('" & "myModal" & "', '" & "Title" & "', '" & "Message" & "');", True)

前端HTML代码 #

<script type="text/javascript">
    function ShowModalForm(NamePopup, title, message) {
        $("#myModal .data-toggle").html("modal");
        $("#myModal .data-target").html("#myModal");
        $("#" + NamePopup).modal("show");
    }
</script>

<script type="text/javascript">
    $("body").on("click", "[src*=plus-square]", function () {
        $("[src*=dash-square]").each(function () {
            $(this).trigger('click');
        });
        $(this).closest("tr").after("<tr><td></td><td colspan ='999'>" + $(this).next().html() + "</td></tr>")
        $(this).attr("src", "src/dash-square.svg");
    });
    $("body").on("click", "[src*=dash-square]", function () {
        $(this).attr("src", "src/plus-square.svg");
        $(this).closest("tr").next().remove();
    });
</script>


<asp:GridView
                ID="myDataTable"
                DataKeyNames="DOWO_ID"
                runat="server"
                OnRowDataBound="myDataTable_RowDataBound">
                <Columns>
                    <asp:TemplateField>
                        <ItemTemplate>
                            <img alt="" style="cursor: pointer" src="src/plus-square.svg" />
                            <asp:Panel ID="pnlOrders" runat="server" Style="display: none;">

                                        <asp:GridView
                                            ID="myOrders"
                                            DataKeyNames="DOWOI_ID"
                                            runat="server">
                                            <Columns>
                                                <asp:BoundField DataField="DOWOI_ID" HeaderText="ID" />
                                                <asp:BoundField DataField="DOWO_ID" HeaderText="ID Items" />
                                                <asp:TemplateField ItemStyle-VerticalAlign="Middle">
                                                    <ItemTemplate>
                                                        <asp:LinkButton ID="lnkEdit" runat="server" OnClick="Display">Otvori</asp:LinkButton>
                                                    </ItemTemplate>
                                                </asp:TemplateField>
                                            </Columns>
                                        </asp:GridView>
                            </asp:Panel>
                        </ItemTemplate>
                    </asp:TemplateField>


                    <asp:BoundField DataField="DOWO_ID" HeaderText="ID" SortExpression="DOWO_ID" />
                    <asp:BoundField DataField="DOWO_BarCode" HeaderText="Barcode" SortExpression="DOWO_BarCode" />
                    <asp:BoundField DataField="DOWO_Order" HeaderText="BN" SortExpression="DOWO_Order" />
                </Columns>
            </asp:GridView>

<div id="myModal" class="modal fade" data-backdrop="static">
       <div class="modal-dialog">
             <div class="modal-content">

....

            </div>
       </div>
</div>

尝试过的UpdatePanel代码 #

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>

        <asp:GridView> 

            ...

        </asp:GridView>
        
    </ContentTemplate>
    <Triggers>
        <asp:PostBackTrigger ControlID="myOrders" />
    </Triggers>

</asp:UpdatePanel>

解决方案 #

方案一：正确配置UpdatePanel #

之前的UpdatePanel配置错误，需调整为异步触发，并确保模态框不受UpdatePanel影响：

1. 修改后端VB代码：用ScriptManager注册模态框脚本（UpdatePanel依赖ScriptManager）

ScriptManager.RegisterStartupScript(Me.Page, Me.Page.GetType(), "Show", "ShowModalForm('myModal', 'Title', 'Message');", True)

2. 调整UpdatePanel结构：将父GridView放入UpdatePanel，模态框放在外面，并为嵌套的LinkButton添加异步触发器

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:GridView
            ID="myDataTable"
            DataKeyNames="DOWO_ID"
            runat="server"
            OnRowDataBound="myDataTable_RowDataBound">
            <!-- 原GridView内容保持不变 -->
        </asp:GridView>
    </ContentTemplate>
</asp:UpdatePanel>

<!-- 模态框必须放在UpdatePanel外部 -->
<div id="myModal" class="modal fade" data-backdrop="static">
    <!-- 原模态框内容保持不变 -->
</div>

3. 后台动态注册触发器：在myDataTable_RowDataBound事件中，为每个嵌套GridView的LinkButton添加异步触发器

If e.Row.RowType = DataControlRowType.DataRow Then
    Dim myOrders As GridView = e.Row.FindControl("myOrders")
    For Each row As GridViewRow In myOrders.Rows
        Dim lnkEdit As LinkButton = row.FindControl("lnkEdit")
        Dim trigger As New AsyncPostBackTrigger()
        trigger.ControlID = lnkEdit.UniqueID
        trigger.EventName = "Click"
        UpdatePanel1.Triggers.Add(trigger)
    Next
End If

方案二：用jQuery保存并恢复展开状态 #

通过前端脚本记录展开行的ID，回发后重新展开对应行：

1. 添加隐藏域保存状态

<asp:HiddenField ID="hdnExpandedRows" runat="server" />

2. 修改前端脚本

var expandedRows = [];

// 页面加载时恢复展开状态
$(document).ready(function() {
    var savedState = $('#<%= hdnExpandedRows.ClientID %>').val();
    if(savedState) {
        expandedRows = JSON.parse(savedState);
        expandedRows.forEach(function(id) {
            var $img = $('img[data-row-id="' + id + '"]');
            if($img.length > 0) {
                $img.trigger('click');
            }
        });
    }
});

// 展开事件
$("body").on("click", "[src*=plus-square]", function () {
    var rowId = $(this).closest('tr').find('td:eq(1)').text(); // 根据实际列位置调整
    expandedRows.push(rowId);
    $('#<%= hdnExpandedRows.ClientID %>').val(JSON.stringify(expandedRows));
    
    $("[src*=dash-square]").each(function () {
        $(this).trigger('click');
    });
    $(this).closest("tr").after("<tr><td></td><td colspan='999'>" + $(this).next().html() + "</td></tr>")
    $(this).attr("src", "src/dash-square.svg");
    $(this).attr('data-row-id', rowId);
});

// 折叠事件
$("body").on("click", "[src*=dash-square]", function () {
    var rowId = $(this).closest('tr').find('td:eq(1)').text();
    expandedRows = expandedRows.filter(function(id) { return id !== rowId; });
    $('#<%= hdnExpandedRows.ClientID %>').val(JSON.stringify(expandedRows));
    
    $(this).attr("src", "src/plus-square.svg");
    $(this).closest("tr").next().remove();
    $(this).removeAttr('data-row-id');
});

// 回发前保存状态
$("body").on("click", "#lnkEdit", function() {
    $('#<%= hdnExpandedRows.ClientID %>').val(JSON.stringify(expandedRows));
});

内容的提问来源于stack exchange，提问作者nidzolino