Question

我在页面上有一个“提交”按钮，单击该按钮后会显示一个模态弹出窗口。此模态弹出窗口包含一个复选框，必须在单击模式的“确定”按钮之前进行检查：

<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script language="javascript" type="text/javascript">
function cvcbCertify_ClientValidate(sender, e) {
    var elem = document.getElementById('<%= cbCertify.ClientID %>');
    if (elem.checked)
        e.IsValid = true;
    else {
        $('.pnlConfirm').show();  //not working?
        e.IsValid = false;

    }
}

<ajaxToolkit:ConfirmButtonExtender ID="cbeResponseReferralSignOff" runat="server"
            TargetControlID="ResponseLocalSignOff" DisplayModalPopupID="popConfirm">
    </ajaxToolkit:ConfirmButtonExtender>
    <ajaxToolkit:ModalPopupExtender runat="server" ID="popConfirm" TargetControlID="ResponseLocalSignOff"
        BackgroundCssClass="modalBackground" DropShadow="true" OkControlID="btnConfirmCertify"
        CancelControlID="btnCancel" PopupControlID="pnlConfirm">
    </ajaxToolkit:ModalPopupExtender>
    <asp:Panel runat="server" ID="pnlConfirm" Style="display: none; background-color: White;
        border: solid 1px Gray; width: 90%; height: 100%; padding: 10px" CssClass="pnlConfirm">


    <asp:Panel runat="server" ID="pnlConfirm" Style="display: none; background-color: White;
        border: solid 1px Gray; width: 90%; height: 100%; padding: 10px" CssClass="pnlConfirm">
   popup text here
        <asp:CheckBox runat="server" ID="cbCertify" Text="I Certify" CssClass="cbCertify">
        </asp:CheckBox>
        <br />
        <asp:CustomValidator runat="server" ID="cvcbCertify" ClientValidationFunction="cvcbCertify_ClientValidate">Required.</asp:CustomValidator>
        <br />
        <div style="text-align: center">
            <asp:Button runat="server" ID="btnConfirmCertify" Text="OK" />
            <asp:Button runat="server" ID="btnCancel" Text="Cancel" />
        </div>
    </asp:Panel>

问题是验证失败时模态窗口关闭。如何阻止此窗口关闭或重新打开此窗口？

Answer 1

执行此操作的唯一方法是使用UpdatePanel。此外，您还可以将AsyncPostBackTrigger与条件 UpdateMode一起用于控制事件。

例如

<asp:Panel runat="server" ID="pnlConfirm" Style="display: none; background-color: White;
        border: solid 1px Gray; width: 90%; height: 100%; padding: 10px" CssClass="pnlConfirm">
    <asp:UpdatePanel ID="upItem" runat="server">
        <ContentTemplate>
                popup text here
            <asp:CheckBox runat="server" ID="cbCertify" Text="I Certify" CssClass="cbCertify">
            </asp:CheckBox>
            <br />
            <asp:CustomValidator runat="server" ID="cvcbCertify" ClientValidationFunction="cvcbCertify_ClientValidate">Required.</asp:CustomValidator>
            <br />
            <div style="text-align: center">
                <asp:Button runat="server" ID="btnConfirmCertify" Text="OK" />
                <asp:Button runat="server" ID="btnCancel" Text="Cancel" />
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Panel>

Answer 2

解决方法是摆脱ConfirmButtonExtender并进行自己的验证：

  function Validate_Click() {

    //using asp.net checkbox so have to go this route to get bool
    var checked = $('#<%= cbCertify.ClientID %>').is(':checked');

    if (checked) {
        $('.lblConfirmCertifyError').hide();
        return true;
    }
    else {
        $('.lblConfirmCertifyError').show();
        return false;
    }
}

<asp:Panel runat="server" ID="pnlConfirm" Style="display: none; background-color: White;
        border: solid 1px Gray; width: 90%; height: 100%; padding: 10px">
        popup text here
        <asp:CheckBox runat="server" ID="cbCertify" Text="I Certify" CssClass="cbCertify">
        </asp:CheckBox>
        <br />
        <asp:Label runat="server" ID="lblConfirmCertifyError" Text="Required." ForeColor="Red"
            Style="display: none" CssClass="lblConfirmCertifyError"></asp:Label>
        <br />
        <div style="text-align: center">
            <asp:Button runat="server" ID="btnConfirmCertify" Text="OK" CssClass="btnConfirmCertify" OnClientClick="return Validate_Click()" />
            <asp:Button runat="server" ID="btnCancel" Text="Cancel" />
            <asp:Button runat="server" ID="btnDummy" Text="" Style="display: none" />
        </div>
    </asp:Panel>

当客户端验证失败时，阻止模式对话框关闭提交

2 个答案: