让Sumbit Button 支持禁用（灰化）提交

来源：互联网发布：我的世界mac怎么下mod 编辑：程序博客网时间：2024/06/06 03:16

上篇文章禁用（灰化） 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">

    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" onsubmit="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>

让Sumbit Button 支持 禁用（灰化）提交

让Sumbit Button 支持禁用（灰化）提交