ASP.NET-按钮的客户端OnClick事件中断页面验证

Question

I have a button on a form that saves a unique value to my database and to prevent the user from submitting twice and getting an error I added some JavaScript logic to do a client-side disable of the button after it is clicked. 我在表单上有一个按钮，该按钮可以将唯一值保存到数据库中，并且为了防止用户两次提交并收到错误，我添加了一些JavaScript逻辑，以在单击按钮后在客户端禁用该按钮。 Functionally this all works, but it created an unexpected side effect that field Validation is being fired on a control with a completely different validation group that the one I submitted. 从功能上讲，所有这些都有效，但是它产生了意外的副作用，即在具有与我提交的验证组完全不同的验证组的控件上触发了“字段验证”。 If I remove my custom OnClick attribute the page behaves as it should once again. 如果我删除自定义的OnClick属性，则页面的行为将再次恢复。 If you take a look at item 3 in this article you'll see that issue has been noticed by others as well. 如果您看一下本文中的第 3项，您还会发现其他人也注意到了该问题。

After testing the issue carefully I noted that the exact problem is a result of changing the button to disabled = true in the client. 在仔细测试了问题之后，我注意到确切的问题是在客户端中将按钮更改为disabled = true的结果。 Given this dilemma I'm forced to resort to a server-side solution to the problem I am facing, but I cannot help but wonder why this is happening in the first place. 考虑到这一难题，我不得不采用服务器端解决方案来解决我所面临的问题，但我不禁要问为什么这首先会发生。 Is this a bug in ASP.NET? 这是ASP.NET中的错误吗？

If you'd like to see exactly what's going on, here's an example , and here's the code: 如果您想确切地了解发生了什么，请看下面的示例，下面是代码：

<%@ Page Language="C#" %>

<script runat="server" language="C#">
    void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            this.Button1.Attributes["onclick"] = string.Format("DisableOnSubmit('{0}','{1}');", this.Button1.ClientID, this.Button1.ValidationGroup);
        }
    }

</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <script type="text/javascript">
        function DisableOnSubmit(btn, group) {
            if (btn && group) {
                if (Page_ClientValidate(group)) {
                    var btnElement = document.getElementById(btn);
                    if (btnElement) {
                        btnElement.disabled = true;
                        btnElement.value = 'Saving...';
                    }
                }
            }
        }
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="TextBox1" runat="server" ValidationGroup="group1">Initial Value</asp:TextBox>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="This should come up if the first field is empty."
            ValidationGroup="group1" ControlToValidate="TextBox1"></asp:RequiredFieldValidator>
        <asp:Button ID="Button1" runat="server" Text="Click Me!" ValidationGroup="group1" />
        <br />
        <br />
        <asp:TextBox ID="TextBox2" runat="server" ValidationGroup="group2"></asp:TextBox>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="You shouldn't ever see me."
            ValidationGroup="group2" ControlToValidate="TextBox2"></asp:RequiredFieldValidator>
    </div>
    </form>
</body>
</html>

Answer 1

I always found somethings in ASP.Net flimsy and buggy, it's great most of the times though. 我总是在ASP.Net中发现一些脆弱和错误的内容，但这在大多数情况下都是很好的。 Maybe this is just one of those things... or I am just not seeing what's wrong. 也许这只是其中的一件事情...或者我只是看不到有什么问题。

Either way, I have usually used the server-side code to control things like you are trying to. 无论哪种方式，我通常都使用服务器端代码来控制您要尝试的操作。 Since it works it's all good. 既然可以了，那就太好了。

Answer 2

Just guess here, but your function DisableOnSubmit doesn't return any value. 只需在这里猜测，但您的函数DisableOnSubmit不会返回任何值。 The onclick event handler usually expect either true or false. onclick事件处理程序通常期望true或false。 I've also experienced problems with buttons that generated a page reload because the javascript in the onclick event didn't work properly. 由于onclick事件中的javascript不能正常运行，我还遇到了按钮的问题，这些按钮生成了页面重新加载。 Considering these together, is it possible that clicking the button results simply in a reload instead of a postback? 综合考虑这些因素，单击按钮是否可能仅导致重新加载而不是回发？ Try returning true from the javascript to test it out. 尝试从javascript返回true进行测试。

Also, does Page_ClientValidate have any side effects? 另外，Page_ClientValidate是否有副作用？

ASP.NET-按钮的客户端OnClick事件中断页面验证

问题描述

2 个解决方案

解决方案1
1 2009-08-17 20:48:39

解决方案2
1 2009-08-17 20:50:18

ASP.NET-按钮的客户端OnClick事件中断页面验证

问题描述

2 个解决方案

解决方案1 1 2009-08-17 20:48:39

解决方案2 1 2009-08-17 20:50:18

解决方案1
1 2009-08-17 20:48:39

解决方案2
1 2009-08-17 20:50:18