javascript - 单击后如何禁用按钮以避免多次发布请求？

Question

我想在点击几秒钟后禁用服务器端 asp.net 按钮控件，然后触发服务器端事件。我正在尝试使用 setTimeout，但如果我使用 setTimeout，则永远不会触发服务器端事件。有人可以帮忙吗？

   <script type="text/javascript">
    function disableBtn(btnId, dspTxt) {
        var btn = document.getElementById(btnId);
        btn.value = dspTxt;
        setTimeout(btn.disabled = true,1000);
    }
</script>

Answer 1

在表单上放置两个按钮:

<asp:Button ID="ButtonToDisable" runat="server" Text="Button" />
<asp:LinkButton ID="PostBackLinkButton" runat="server" onclick="PostBackLinkButton_Click"></asp:LinkButton>

第一个是将在 2 秒后禁用的按钮，第二个是将执行回发的按钮。

接下来将此代码放入 page.cs 中:

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            ClientScript.RegisterStartupScript(this.GetType(), "timer",
               "setTimeout(function(){" + Page.ClientScript.GetPostBackEventReference(PostBackLinkButton, String.Empty) + "},2000)", true);
        }
    }

    protected void PostBackLinkButton_Click(object sender, EventArgs e)
    {
        ButtonToDisable.Enabled = false;
        ButtonToDisable.Text = "Button is disabled!";
    }

现在只需运行该页面并等待 2 秒，回发将发生并禁用 PostBackLinkBut​​ton。

如果您不希望回发对用户可见，请在更新面板中放置按钮。