ASP.NET中勾选复选框时弹出表单的问题求助

问题描述 #

勾选id为additem的ASP.NET服务器端复选框时，无法正常触发预设的ModalPopupExtender弹窗表单，自行编写的脚本未生效。

相关ASP.NET代码 #

<asp:checkbox id="additem" class="additem" runat="server"/>
                                           
<asp:Content ID="Content3" ContentPlaceHolderID="chpPopUp" runat="server">
    <asp:Panel ID="pnlPopup" runat="server" Style="display: none;Width:80%;max-width:100%; ">
        <asp:Button Style="display: none" ID="btnShowPopup" runat="server"></asp:Button>
        <cc2:ModalPopupExtender ID="mdlPopup" runat="server" BehaviorID="mdlPopup" PopupControlID="pnlPopup"
            TargetControlID="btnShowPopup" BackgroundCssClass="modalBackground">
        </cc2:ModalPopupExtender>
        <cc2:DragPanelExtender ID="dpePopup" runat="server" TargetControlID="pnlPopup" DragHandleID="pnlPopupHeader" />
        <div class="modal-content" style="Width:80%;max-width:100%;">
            <asp:Panel ID="pnlPopupHeader" runat="server" BorderColor="Black">
                <div>
                    <!-- Modal content-->
                    <div class="modal-header">
                       ........
                    </div>
                </div>
            </asp:Panel>
            <asp:UpdatePanel ID="upnDetail" runat="server" UpdateMode="Conditional">
                <ContentTemplate>
                    <!-- class="modal-dialog"-->
                    <div>
                        <!-- Modal content-->
                        <div class="modal-body">

                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </asp:Panel>
</asp:Content>

原脚本问题分析 #

原脚本仅处理了复选框值和confirm确认框，没有调用ModalPopupExtender的弹窗显示方法；同时存在两处常见错误：

• ASP.NET服务器控件渲染后客户端ID会改变，直接用document.getElementById("additem")可能无法找到元素
• 使用removeAttr('checked')修改复选框状态不符合jQuery规范，应该用prop('checked', false)

修正后的解决方案脚本 #

// 用类选择器定位复选框，避免服务器ID渲染变化的问题
$('.additem').click(function () {
    var $checkbox = $(this);
    var isChecked = $checkbox.prop('checked');

    if (isChecked) {
        $checkbox.val("Yes");
        // 通过BehaviorID获取弹窗实例并显示
        var modalPopup = $find('mdlPopup');
        if (modalPopup) {
            modalPopup.show();
        }
    } else {
        $checkbox.val("No");
        // 取消勾选时可选择隐藏弹窗
        var modalPopup = $find('mdlPopup');
        if (modalPopup) {
            modalPopup.hide();
        }
    }
});

// 如果页面包含UpdatePanel，异步回发后需重新绑定事件
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function () {
    $('.additem').off('click').on('click', function () {
        var $checkbox = $(this);
        var isChecked = $checkbox.prop('checked');

        if (isChecked) {
            $checkbox.val("Yes");
            var modalPopup = $find('mdlPopup');
            if (modalPopup) {
                modalPopup.show();
            }
        } else {
            $checkbox.val("No");
            var modalPopup = $find('mdlPopup');
            if (modalPopup) {
                modalPopup.hide();
            }
        }
    });
});

关键注意事项 #

1. 确保页面已正确引入jQuery和AJAX Control Toolkit的相关脚本文件
2. $find('mdlPopup')中的参数要与ModalPopupExtender的BehaviorID属性值完全一致
3. 若使用UpdatePanel，必须通过PageRequestManager重新绑定事件，否则异步回发后脚本会失效

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