C# 带有更新面板的ASp.net webform不会触发保存按钮事件

我的客户端验证与验证摘要配合得很好，直到我没有将

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>

成功提交
$（窗口）。加载（函数（）{
$（“#dp trans comment”）。单击（函数（）{
$（'#commentModel'）.modal（'show'）；
});
//避免多次提交
功能ClientSideClick（myButton）{
//客户端验证
if（typeof（Page_ClientValidate）==“函数”）{
如果（第_页客户端验证（“vgCommentForm”）==false）{
返回false；
}
}
//确保按钮不是“提交”类型，而是“按钮”
if（myButton.getAttribute（'type'）='button'）{
//按下按钮
myButton.disabled=true；
myButton.className=“btn btn非活动”；
myButton.value=“请稍候…”；
}
返回true；
}
});

我测试了你的代码。未在浏览器控制台中定义客户端侧点击。这是因为函数嵌套在另一个函数中。将其移到

$（窗口）之外。加载（函数（）{

。之后验证工作完成，并在更新面板中触发该方法

<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>

$（窗口）。加载（函数（）{
$（“#dp trans comment”）。单击（函数（）{
$（'#commentModel'）.modal（'show'）；
});
});
//避免多次提交
功能ClientSideClick（myButton）{
//客户端验证
if（typeof（Page_ClientValidate）==“函数”）{
如果（第_页客户端验证（“vgCommentForm”）==false）{
返回false；
}
}
//确保按钮不是“提交”类型，而是“按钮”
if（myButton.getAttribute（'type'）='button'）{
//按下按钮
myButton.disabled=true；
myButton.className=“btn btn非活动”；
myButton.value=“请稍候…”；
}
返回true；
}

更新

<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>

$（文档）.ready（函数（）{
bindModel（）；
});
var prm=Sys.WebForms.PageRequestManager.getInstance（）；
//这是在updatepanel更新时触发的，因此再次绑定该按钮
prm.add_endRequest（函数（）{
bindModel（）；
});
函数bindcommentModel（）{
$（“#dp trans comment”）。单击（函数（）{
$（'#commentModel'）.modal（'show'）；
});
}

我测试了你的代码。它给出了

客户端点击在浏览器控制台中没有定义

。这是因为该函数嵌套在另一个函数中。将其移到

$（窗口）之外。加载（函数（）{

。验证工作完成后，该方法在更新面板中触发

<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>

$（窗口）。加载（函数（）{
$（“#dp trans comment”）。单击（函数（）{
$（'#commentModel'）.modal（'show'）；
});
});
//避免多次提交
功能ClientSideClick（myButton）{
//客户端验证
if（typeof（Page_ClientValidate）==“函数”）{
如果（第_页客户端验证（“vgCommentForm”）==false）{
返回false；
}
}
//确保按钮不是“提交”类型，而是“按钮”
if（myButton.getAttribute（'type'）='button'）{
//按下按钮
myButton.disabled=true；
myButton.className=“btn btn非活动”；
myButton.value=“请稍候…”；
}
返回true；
}

更新

<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>

$（文档）.ready（函数（）{
bindModel（）；
});
var prm=Sys.WebForms.PageRequestManager.getInstance（）；
//这是在updatepanel更新时触发的，因此再次绑定该按钮
prm.add_endRequest（函数（）{
bindModel（）；
});
函数bindcommentModel（）{
$（“#dp trans comment”）。单击（函数（）{
$（'#commentModel'）.modal（'show'）；
});
}

Perfect，谢谢。你的意思是函数由于这个原因无法绑定是的，函数中的函数找不到。另外，如果

commentModel

在UpdatePanel中，你也需要在UpdatePanel被触发时重新绑定它。我会将此添加到我的回答中。这真的很有帮助，谢谢。你的意思是要实现一些功能吗如何绑定是的，函数中的函数无法找到。此外，如果UpdatePanel中有

commentModel

，则在触发UpdatePanel时也需要重新绑定该函数。我会将其添加到我的回答中。这非常有帮助