防止模式對話框在客戶端驗證失敗時提交時關閉

Question

我在頁面上有一個Submit按鈕，單擊它時會顯示一個模式彈出窗口。這種模式彈出窗口包含可點擊的模式的確定按鈕之前必須檢查複選框：

<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

的解決辦法是擺脫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> 

Answer 2

要做到這一點的唯一方法是使用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>