在验证之后和回发之前禁用 Webform 按钮答案

【问题标题】：Disable Webform button after validation and before postback在验证之后和回发之前禁用 Webform 按钮
【发布时间】：2013-01-07 13:44:03
【问题描述】：

使用 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; }" />

谢谢，

标记

【问题讨论】：

嗨 - 我已经尝试过链接到这个的 SO：aspsnippets.com/Articles/… - 但是我的页面上有回发，在最后一个之前 - 所以这个解决方案禁用了回发上的按钮做最后的提交动作。我也试过：stackoverflow.com/questions/13959256/… 和 SO/Google 上的其他链接。
请发布您尝试的一些代码以及错误是什么。 “我页面上的其他回发”是什么意思？那些与最终按钮有什么关系？是否所有按钮都同时处于活动状态，而您只想在其点击事件中禁用其中一个？
您需要其他按钮来使用 ajax 或 javascript 进行回调..您不能用一个按钮回发整个页面并期望一切都相同..
嗨@MikeSmithDev - 我添加了代码来显示正在发生的事情。此 Web 表单的其他部分有回发（它只是一页，但在最终回发提交所有信息之前从用户那里收集信息，这需要回发） - 再次感谢。

标签： javascript asp.net webforms

【解决方案1】：

您可以在呈现的 HTML 按钮中看到您的单引号已更改为 &#39;，这是一项 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 添加点击事件：

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

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

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

【讨论】：

非常感谢 - 刚刚确认在这种情况下似乎没有跨浏览器解决方案。干杯，马克

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：