ASp.net webformとUpdate Panel not triggトリガー保存ボタンイベント

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>