1

使用 WebForms，我怎样才能拥有一个禁用的按钮，仅在单击 IT 之后，并且在通过验证之后？

我知道有：单击后禁用asp.net按钮以防止双击

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

这只是我需要确保通过验证的最后一次按下按钮，但在被禁用之前只允许按下一次。

代码如下：

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

谢谢，

标记

4

3 回答 3

2

您可以在呈现的 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 只会禁用您的按钮而不是回发。

于 2013-01-24T14:21:25.890 回答
2

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

<script>
    $("#<%= FinalButton.ClientID %>").click(function ()
    {
        var self = this;
        setTimeout(function ()
        {
            self.disabled = true;
        }, 0);
    });
</script>
于 2015-01-07T08:04:10.537 回答
0

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

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

<asp:Button ID="btnSave" runat="server" 
    Text="Save"
    OnClientClick="this.disabled=true" OnClick="btnSave_Click" 
    UseSubmitBehavior="false"/>
于 2019-10-10T15:02:29.643 回答