Question

使用WebForms，如何在仅单击IT之后，以及在验证通过后，还有一个禁用的按钮？

我知道有：Disable asp.net button after click to prevent double clicking

但是，在最后按下按钮确认预订之前，我的页面还有其他回发，我需要允许这些回发。

这只是最后一次按下按钮，我需要确保通过验证，但只允许按下一次，然后再禁用。

代码如下：

   protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
    {
        FinalButton.Attributes.Add("onclientclick", "if(Page_ClientValidate('vg')){this.disabled = true; }");
    }

}
protected void Button1_Click(object sender, EventArgs e)
{
    TextBox1.Text = "Hi";
}
protected void Button3_Click(object sender, EventArgs e)
{
    TextBox1.Text = "";
}

ASPX页面：

 <p>
    <asp:TextBox ID="TextBox1" runat="server" ValidationGroup="vg"></asp:TextBox>
</p>
<p>
    <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Set TextBox1 to Hi" />
    <asp:Button ID="Button3" runat="server" OnClick="Button3_Click" Text="Set TextBox1 to Empty" />
</p>
<p>
    <asp:Button ID="FinalButton" runat="server" Text="Final Submit" ValidationGroup="vg" />
    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TextBox1" ErrorMessage="RequiredFieldValidator" ValidationGroup="vg"></asp:RequiredFieldValidator>
</p>

因此，除非填充文本框，否则“FinalButton”不应提交（此部分有效）。但是，如果填充了文本框，那么应该禁用它以防止双击，然后回发 - 但它不会禁用，所以我在这里假设我的代码，是不正确的：

FinalButton.Attributes.Add("onclientclick", "if(Page_ClientValidate('vg')){this.disabled = true; }");

呈现时页面上的源代码将按钮显示为：

<input type="submit" name="ctl00$MainContent$FinalButton" value="Final Submit" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$MainContent$FinalButton&quot;, &quot;&quot;, true, &quot;vg&quot;, &quot;&quot;, false, false))" id="MainContent_FinalButton" onclientclick="if(Page_ClientValidate(&#39;vg&#39;)){this.disabled = true; }" />

谢谢，

标记

Answer 1

您可以在呈现的按钮HTML中看到您的单引号已更改为'，这是一项ASP.NET安全功能。关于SO的一些帖子（比如Stop the tag builder escaping single quotes ASP.NET MVC 2）已经发布消息来解决这个问题，但我个人不会采取这种方式。

请注意，对于这两个示例，我添加了return false来停止表单提交，以便您可以看到按钮实际上已禁用。准备好继续测试代码时删除它。

您可以将代码放在按钮本身中：

<asp:Button ID="FinalButton" runat="server" OnClientClick="if(Page_ClientValidate('vg')){this.disabled = true; return false; }" Text="Final Submit" ValidationGroup="vg" />

这很有效，但看起来很讨厌。没有OnClientClick只是使用Javascript添加click事件更简洁：

<script>
    $("#<%= FinalButton.ClientID %>").click(function () {
        if (Page_ClientValidate('vg')) {
            this.disabled = true; return false;
        }
    });
</script>

好的，一旦你看到它正常工作，而你删除了return false;，你仍然会遇到问题。即，禁用按钮不会在某些浏览器中执行回发。所以有些浏览器会回发，其他浏览器会像return false;一样运行。那不好。

更糟糕的是，无论浏览器如何，ASP.NET都不将运行禁用按钮的click事件（如果向按钮添加OnClick="FinalButton_Click"之类的内容）。您可以在IE9中对此进行测试，因为禁用的按钮仍然会回发，但您可以看到OnClick事件不会触发。另一方面，Chrome只会禁用您的按钮而不会回发。

Answer 2

您可以使用setTimeout技巧在触发回发后立即禁用该按钮：

<script>
    $("#<%= FinalButton.ClientID %>").click(function ()
    {
        var self = this;
        setTimeout(function ()
        {
            self.disabled = true;
        }, 0);
    });
</script>

Answer 3

搜索了几个小时后，我发现您可以使用UseSubmitBehavior="false"来允许asp回发处理按钮，而不是正常的浏览器提交。您可以阅读文档here

这也意味着您的OnClientClick脚本不必返回true

<asp:Button ID="btnSave" runat="server" 
    Text="Save"
    OnClientClick="this.disabled=true" OnClick="btnSave_Click" 
    UseSubmitBehavior="false"/>

验证后和回发前禁用Webform按钮

3 个答案: