上篇文章 禁用(灰化) Button 后提交的问题 讨论了 ASP.NET 2.0 中 UseSubmitBehavior=true 即使通过 form onsumit 处理也无法有效实现完成提交前的灰化功能
曾想当然的认为可以在 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 来确定谁提交了改页面,由此引发注册的服务器事件。
对于,input type=button ,浏览器永远都不提交此按钮给服务器,对于此类型提交,需要有一个隐藏域
input type=hidden name=__EVENTTARGET 来存储谁提交了此页面。
硬是将其实现了,主要技巧是通过手动的添加了一个隐藏域其 name=__EVENTTARGET,并设置其 value=提交按钮.name,这样 ASP.NET 就可以识别哪个按钮执行的提交,进而引发注册的服务器端事件。
与直接设置 UseSubmitBehavior=false 相比,此方法反而显得有点繁琐。
测试代码:
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void Button1_Click(object sender, EventArgs e)
{
Response.Write("Fired by : " + ((Button)sender).ID);
System.Threading.Thread.Sleep(1000 * 2);
}
protected void Page_Load(object sender, EventArgs e)
{
Response.Write("<pre>");
foreach (string key in Context.Request.Form.AllKeys) {
Context.Response.Write(String.Format("{0}/t/t:{1}/n", key, Request.Form[key]));
}
Response.Write("</pre>");
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>DisableButtonBeforePostByDeceiveSubmitButton</title>
<script type="text/javascript">
function chk(frm) {
//debugger;
var et = document.getElementById("__EVENTTARGET");
var btn, btns;
if(et) btns = document.getElementsByName(et.value);
btn = (btns && btns.length > 0) ? btns[0] : btns;
if(btn) {
btn.value = 'submitting';
btn.disabled =true;
}
return true;
}
function markWhoSumbit(whoiseName)
{
var btn = document.getElementById("__EVENTTARGET");
if(!btn) {
btn = document.createElement("input");
btn.type="hidden";
btn.name="__EVENTTARGET";
btn.id="__EVENTTARGET";
document.forms[0].appendChild(btn);
}
btn.value=whoiseName;
}
</script>
</head>
<body>
<form id="form1" οnsubmit="return chk(this);" runat="server">
<div>
<asp:Button ID="Button2" runat="server" OnClick="Button1_Click" OnClientClick="markWhoSumbit(this.name)" 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" />
<asp:Button ID="Button4" runat="server" OnClick="Button1_Click" Text="Test4" />
<asp:Button ID="Button5" runat="server" OnClick="Button1_Click" OnClientClick="markWhoSumbit(this.name)" Text="Test5" />
</div>
</form>
</body>
</html>