禁用（灰化） Button 后提交的问题

最新推荐文章于 2023-02-20 23:54:10 发布

weixin_33739646

最新推荐文章于 2023-02-20 23:54:10 发布

阅读量271

点赞数

文章标签： xhtml c# javascript ViewUI

本文介绍如何在ASP.NET2.0中解决SubmitButton提交时的重复点击问题，通过禁用提交按钮防止多次提交，并提供了一个完整的测试代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

某些处理响应时间较长，为了防止用户重复连续点击提交按钮，我们通常会在点击之后 disable 此按钮。

在 ASP.NET 2.0 中 asp:button 默认使用客户端浏览器的提交机制即呈现为 input type=submit，
如果直接设置 onclientclick="this.disabled=true" ，将无法执行提交。

解决方法：
只有设置 UseSubmitBehavior=false，按钮呈现为 input type=button，然后添加脚本

< asp:Button ID ="Button1" UseSubmitBehavior ="false" runat ="server" OnClientClick ="this.value='submitting

';this.disabled=true;" OnClick ="Button1_Click" Text ="Test1" />

曾想当然的认为可以在 form 的 onsumit 中 disable input type=submit
注：ASP时代更常用此方案，可以同时对一个form具有多个提交按钮作出统一的“响应”

经测试，发现虽然可以回发页面，但是却无法触发服务器端的 Click 事件。

原来，当点击 input type=submit 按钮时，如果其 disabled=false（正常状态），那么浏览器会同时提交此按钮
（Request.Form 集合中可以查询到此按钮的value），而 disabled=true（禁用），浏览不会提交此按钮的value。
而 ASP.NET 内部则检索是否有Request.Form中有对应的name匹配当然页面WebControl.UnquieID 来确定谁提交了改页面，由此引发注册的服务器事件。

Updated 已经实现 2007年7月11日
让 ASP.NET 2.0 的 Sumbit Button 支持禁用（灰化）提交

对于，input type=button ，浏览器永远都不提交此按钮给服务器，对于此类型提交，需要有一个隐藏域
input type=hidden name=__EVENTTARGET 来存储谁提交了此页面。

完整测试代码：

@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

protected void Button1_Click(object sender, EventArgs e)

{

System.Threading.Thread.Sleep(1000 * 2);

}

protected void Page_Load(object sender, EventArgs e)

{

}

</script>

<title>Untitled Page</title>

function chk(frm)

{

frm.Button2.disabled =true;

frm.Button2.value='submitting

}

</script>

</head>

<body>

<div>

<asp:Button ID="Button1" UseSubmitBehavior="false" runat="server" OnClientClick="this.value='submitting

';this.disabled=true;" OnClick="Button1_Click" Text="Test1" />

<asp:Button ID="Button2" runat="server" OnClick="Button1_Click" Text="Test2" />

<asp:Button ID="Button3" runat="server" OnClientClick="this.value='sorry, the form cant be submitted.';this.disabled=true;" OnClick="Button1_Click" Text="Test3" />

</div>

</form>

</body>

</html>

下载