带有更新面板的 ASp.net 网络表单不会触发保存按钮事件

Question

我的客户端验证与验证摘要一起正常工作，直到我不添加 onclientclick="ClientSideClick(this)"to 按钮。

我也尝试添加他们的触发器，但它仍然不起作用，既没有触发验证也没有提交表单。

不确定为什么或需要进行哪些更改才能使其发挥作用。

如果我从按钮 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>