将 onCheckedChanged 与 PopupControlExtender 一起使用，并希望在取消选中时防止弹出

Question

我对此仍然相当陌生，并试图找到答案，所以希望我不会重复这个。

我正在使用 ASP.NET 并且有一个复选框控件，当它被更改时会弹出一个弹出框，使用 onCheckedChanged 方法。这个弹出框里面有一些信息和一个“关闭”按钮，可以成功关闭弹出框。

我想要的是防止在未选中复选框时出现弹出窗口。我目前有 onCheckedChanged 调用一个代码隐藏方法，如果未检查控件，该方法将取消扩展程序调用，但弹出窗口在关闭之前很快出现。我怎样才能防止这种情况发生？

这是相应的页面代码：

        <div class="row" id="divDDMandate" runat="server">

        <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Always">
            <ContentTemplate>
                <asp:CheckBox ID="chkDDMandate" Width="20px" Visible="true" runat="server" AutoPostBack="true"
                 OnCheckedChanged="clientchkDDMandateChanged(this);" on  />        
                <asp:Literal ID="ltlDDMandate" runat="server">Direct Debit Mandate (by post)</asp:Literal>

            <asp:PopupControlExtender ID="chkDDMandate_PopupControlExtender" runat="server" 
                DynamicServicePath="" Enabled="true" PopupControlID="PanelDDMandateDownload"
                TargetControlID="chkDDMandate"
                Position="Bottom" OffsetX="-20" OffsetY="10" />
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>

...这是我的方法背后的代码：

        protected void chkDDMandateChanged(object sender, EventArgs e)
    {
        //Cancel the panel if unchecking
        if ((!chkDDMandate.Checked) && chkDDMandate_PopupControlExtender.Enabled)
        {
            chkDDMandate_PopupControlExtender.Cancel();
        }
    }

如果有任何帮助，我将不胜感激。

干杯

Answer 1

从 chkDDMandate 复选框中删除 AutoPostBack="true" 并在 ScriptManager 控件之后添加以下脚本：

<script type="text/javascript">
    function pageLoad() {
        var extender = $find("<%= chkDDMandate_PopupControlExtender.ClientID %>");
        extender.remove_showing(onPopupShowing);
        extender.add_showing(onPopupShowing);
    }

    function onPopupShowing(sender, args) {
        var checkBoxChecked = $get("<%= chkDDMandate.ClientID %>").checked;
        args.set_cancel(!checkBoxChecked);
    }
</script>

Answer 2

在 Yuriy 为我提供事件处理程序后，我不得不求助于使用隐藏字段来跟踪弹出窗口和复选框的可见性。

这是因为我不希望在删除勾号时出现弹出窗口，并且 onClick 方法使用复选框控件的设置，而 onShowing 方法使用当前可见设置控制。我必须使用隐藏字段来保留可见性设置并在我想要的时候更新它们。

我很惊讶弹出扩展器的 _visible 属性总是设置为“false”，所以我也不能使用它。

这可能有点小技巧，但这是我目前的 javascript 代码，供任何感兴趣的人使用：

    <script type="text/javascript">

     function pageLoad() {
     // Attach an event handler for over-riding the showing Popup.
         var extender = $find("PopupControlExtenderBehaviorID");
         extender.remove_showing(onPopupShowing);
         extender.add_showing(onPopupShowing);

     // Initialise the hidden fields based on the page status after refresh.
         var hfPopup = $get("ctl00_body_PopupVisibleID");
         var hfCheckbox = $get("ctl00_body_CheckboxChecked");

     // Popup will always be hidden on page refresh
         hfPopup.value = "Hidden";
         hfCheckbox.value = $get("ctl00_body_chkDDMandate").checked;
     }  

     function onPopupShowing(sender, args) {
        // This function will over-ride the Popup showing if applicable.
         var popupVisible = $get("ctl00_body_PopupVisibleID");
         var checkboxChecked = $get("ctl00_body_CheckboxChecked");

        // If Popup hidden and 'tick' being taken out of the Checkbox, don't show the Popup.
         if (popupVisible.value == "Hidden" && checkboxChecked.value == "true") {
             args.set_cancel(true);
         }
         else if (popupVisible.value == "Hidden") {
            popupVisible.value = "Visible";
            }
            else {popupVisible.value = "Hidden";}

     }

    function OnClientClickCheck(o) {
        // This function will set the Hidden field value of Checkbox.
        // This is because when the OnClick method reads the control checkbox value it uses the value it's 
        // being set to; whereas, the onPopupShowing method uses the value it is currently displaying!
        var pce = $find('PopupControlExtenderBehaviorID');
        var checkboxChecked = $get("ctl00_body_CheckboxChecked");
        var isChecked = o.checked;

        if (isChecked) {
        // isChecked is what it is being changed to...
            checkboxChecked.value = "false";
        }
        else {
            checkboxChecked.value = "true";
        }
        pce.showPopup();
    }
</script>

感谢您的帮助。