업데이트 패널이있는 ASp.net webform 저장 버튼 이벤트가 발생하지 않습니다.

Question

onclientclick="ClientSideClick(this)"을 버튼에 추가하지 않으면 클라이언트 측 유효성 검사가 유효성 검사 요약과 함께 잘 작동합니다.

트리거를 추가하려고했지만 여전히 작동하지 않습니다. 유효성 검사가 실행되지 않아 양식이 제출되지 않습니다.

작동하기 위해 필요한 변경 이유 또는 변경 이유를 잘 모릅니다.

onclientclick="ClientSideClick(this)"에서이 코드를 제거한 경우 제대로 작동하지만 사용자가 동일한 양식을 여러 번 제출하지 않도록 JS를 사용하여 유효성 검사를 트리거해야합니다.

페이지에서 다른 양식 요소를 제거하여 이해하기 쉽습니다.

<%@ Page Title="" Language="C#" MasterPageFile="SiteMain.Master" AutoEventWireup="true" CodeFile="ArticleDetails.aspx.cs" Inherits="ArticleDetails" %> 

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server"> 

    <asp:UpdatePanel ID="UpdatePanel2" runat="server"> 
     <ContentTemplate> 
      <!--- Code -HERE --> 
      <asp:Panel ID="Panel1" runat="server"> 

        <asp:ValidationSummary ID="ValidationSummary1" runat="server" CssClass="validation-sum" ValidationGroup="vgCommentForm" /> 

       <div class="cmt-fullname-w"> 
        <asp:TextBox ID="txtcmtFullName" placeholder="Full Name" runat="server" CssClass="txt-cmt-fn" TabIndex="1"></asp:TextBox> 
        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Name can't be blank" CssClass="dp-cmt-validation" ControlToValidate="txtcmtFullName" ValidationGroup="vgCommentForm"></asp:RequiredFieldValidator> 
       </div> 

       <div class="cmt-email-w"> 
        <asp:TextBox ID="txtcmtEmail" placeholder="Email" runat="server" CssClass="txt-cmt-fn" TabIndex="1"></asp:TextBox> 
        <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="Email can't be blank" ControlToValidate="txtcmtEmail" CssClass="dp-cmt-validation" ValidationGroup="vgCommentForm"></asp:RequiredFieldValidator> 
        <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ErrorMessage="Enter correct email" ControlToValidate="txtcmtEmail" CssClass="dp-cmt-validation" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" ValidationGroup="vgCommentForm"></asp:RegularExpressionValidator> 
       </div> 

       <div class="cmt-btnsave-w"> 
        <asp:Button ID="Button1" runat="server" CssClass="buttonPopups" OnClick="btnSaveComments_Click" OnClientClick="ClientSideClick(this)" Text="Post Comment" ValidationGroup="vgCommentForm" CausesValidation="true" UseSubmitBehavior="False" /> 
       </div> 
      </asp:Panel> 
      <asp:Panel ID="Panel2" runat="server" Visible="false" CssClass="comment-pnl-success-w"> 
       <div class="comment-success">Successfully submitted</div> 
      </asp:Panel> 
      <!--- Code -HERE --> 
     </ContentTemplate> 
     <%--       <Triggers> 
           <asp:PostBackTrigger ControlID="btnSaveComments" /> 
          </Triggers>--%> 
    </asp:UpdatePanel> 
    <!--- UpdatePanel --> 




    <script type="text/javascript"> 
     $(window).load(function() { 

      $("#dp-trans-comment").click(function() { 
       $('#commentModel').modal('show'); 
      }); 


      //Avoid Multiple Submission 
      function ClientSideClick(myButton) { 
       // Client side validation 
       if (typeof (Page_ClientValidate) == 'function') { 
        if (Page_ClientValidate("vgCommentForm") == false) { 
         return false; 
        } 
       } 

       //make sure the button is not of type "submit" but "button" 
       if (myButton.getAttribute('type') == 'button') { 
        // diable the button 
        myButton.disabled = true; 
        myButton.className = "btn btn-inactive"; 
        myButton.value = "Please Wait.."; 
       } 
       return true; 
      } 


     }); 

    </script> 

</asp:Content> 

Answer 1

나는 코드를 테스트했습니다. 그것은 브라우저 콘솔에 ClientSideClick is not defined을주었습니다. 함수가 다른 함수에 중첩되어 있기 때문입니다. $(window).load(function() { 외부로 이동하십시오. 그런 다음 유효성 검사가 작동하고 메서드가 업데이트 패널에서 트리거됩니다.

<script type="text/javascript"> 
    $(window).load(function() { 
     $("#dp-trans-comment").click(function() { 
      $('#commentModel').modal('show'); 
     }); 
    }); 

    //Avoid Multiple Submission 
    function ClientSideClick(myButton) { 
     // Client side validation 
     if (typeof (Page_ClientValidate) == 'function') { 
      if (Page_ClientValidate("vgCommentForm") == false) { 
       return false; 
      } 
     } 

     //make sure the button is not of type "submit" but "button" 
     if (myButton.getAttribute('type') == 'button') { 
      // diable the button 
      myButton.disabled = true; 
      myButton.className = "btn btn-inactive"; 
      myButton.value = "Please Wait.."; 
     } 
     return true; 
    } 
</script> 

업데이트

<script type="text/javascript"> 
    $(document).ready(function() { 
     bindcommentModel(); 
    }); 

    var prm = Sys.WebForms.PageRequestManager.getInstance(); 

    //this is triggered at updatepanel update, so rebind the button again 
    prm.add_endRequest(function() { 
     bindcommentModel(); 
    }); 

    function bindcommentModel() { 
     $("#dp-trans-comment").click(function() { 
      $('#commentModel').modal('show'); 
     }); 
    } 
</script>