确认后回传之前禁用网络表单按钮 [英] Disable Webform button after validation and before postback

问题描述

使用的WebForms，我怎么可以有一个按钮，这是禁用的，只有它被点击之后，也验证后已经过去了？

Using WebForms, how can I have a button, which is disabled, after only IT has been clicked, and also AFTER validation has been passed?

我知道有：<一href=\"http://stackoverflow.com/questions/5189593/disable-asp-net-button-after-click-to-$p$pvent-double-clicking\">Disable asp.net按钮点击prevent双击后

不过，也有我的页面上的其他回传，最后按钮preSS这印证了在预订前，我需要这些就可以了。

However, there are other postbacks on my page, before the final button press which confirms the booking, and I need these to be allowed.

这只是最后的按钮preSS，我需要确保通过验证，但只允许一个preSS，被禁用了。

It's only the final button press that I need to ensure passes validation, but only allows one press, before being disabled.

code是如下：

   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页面：

ASPX page:

 <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不应该提交（这部分作品）。但是，如果填充文本框，那么它应该被禁用，以prevent双击，回发之前 - 但它并没有禁止，所以我presume我的code在这里，是不正确的：

So, the unless the textbox is populated, the "FinalButton" should not submit (this part works). However, if the textbox is populated, then it should be disabled to prevent double clicks, before posting back - but it doesn't disable, so I presume my code here, is not correct:

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

当它呈现在网页上的源代码，展示该按钮：

The source on the page when it is rendered, shows the button as:

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

感谢您，

标记

推荐答案

您可以在呈现按钮的HTML的单引号得到改变，看看＆放大器;＃39; ，这是一个ASP.NET安全功能。上所以有些职位（如<一个href=\"http://stackoverflow.com/questions/3924861/stop-the-tag-builder-escaping-single-quotes-asp-net-mvc-2\">Stop标签制造商逃逸单引号ASP.NET MVC 2 ）已经发布了远来解决这个问题，但我个人不会采取这条路线。

You can see in the rendered button HTML your single quotes are getting changed to ', which is an ASP.NET security feature. Some posts on SO (like Stop the tag builder escaping single quotes ASP.NET MVC 2) have posted away to get around this, but I personally would NOT take that route.

请注意，对于这两个例子中我加了一个返回false 停止表单提交，所以你可以看到按钮实际上禁用。删除此，当你准备好继续测试你的code。

Note, for both of these examples I added a return false to stop the form submission so you can see the button actually disable. Remove this when you are ready to continue testing your code.

您可以只把你的code。在按钮本身：

You can either just put your code in the button itself:

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

这工作，但看起来很讨厌。它的清洁剂没有那个的OnClientClick 只需使用JavaScript添加单击事件：

This works, but looks nasty. It's cleaner to not have that OnClientClick just add the click event with Javascript:

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

好了，所以，一旦你看到的工作，并删除返回false; ，你仍然会有问题。即禁用按钮不执行在某些浏览器回传。因此，一些浏览器会回传，其他人将采取行动，就像它与确实返回false; 。这是不好的。

Ok so once you see that working, and you remove the return false;, you are still going to have issues. Namely that a disabled button doesn't perform a postback in certain browsers. So some browsers will postback, others will act just like it did with the return false;. That's not good.

更糟的是，无论哪种浏览器，ASP.NET是的不的要运行中被禁用按钮的click事件（如果你加入类似的OnClick =FinalButton_Click 来的按钮）。您可以在IE9测试了这一点，因为被禁用按钮仍然会后回来，但你可以看到你的的OnClick 事件不会触发。 Chrome浏览器，另一方面将只是禁用按钮，而不是回发。

What is worse is regardless of the browser, ASP.NET is not going to run the click event of a disabled button (if you add something like OnClick="FinalButton_Click" to the button). You can test this out in IE9, since a disabled button will still post back, but you can see your OnClick event won't fire. Chrome on the other hand will just disable your button and not postback.

这篇关于确认后回传之前禁用网络表单按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！