一键式按钮控件

• 下载演示项目 - 2.41 KB

引言

有些用户喜欢多次点击“提交”按钮，尤其是在回发响应不及时的情况下。 这种情况下，如果“第一次点击”已经释放了会话状态或视图状态中的一些资源，可能会给服务器带来问题。 因此，下一次点击将导致异常。 如果提交按钮运行一些财务交易，可能会导致更多问题。 在这种情况下，系统将执行超出用户预期的操作。

其中一种解决方案是在第一次点击后隐藏按钮，并给系统时间完成回发。 这里有一个简单的 JavaScript 示例

<INPUT onclick="this.disabled = true" type=submit value=Submit />

它对于没有 ASP.NET 的简单 HTML 表单来说效果很好，但是，在 ASP.NET 页面上实现这种方法将要求我们考虑分配“隐藏代码”的能力，即 onclick JavaScript 事件，并在 ASP.NET 客户端验证过程成功完成后运行此代码。 因为如果客户端验证失败，表单将不会回发到服务器，我们现在不需要隐藏按钮。

您可能会说 ASP.NET 已经执行了客户端验证，我们不需要手动检查它，但是我们需要在决定是否进行回发之前执行此操作。

if (typeof(Page_ClientValidate) == 'function') {
    if (Page_ClientValidate() == false){
        return false;
    }
}

之后，我们可以隐藏按钮，甚至将按钮值更改为“请稍候...”之类的文本，以告知用户页面正在回发到服务器。

this.value = 'Please wait...';
this.disabled = true;

为了将所有这些功能组合到一个控件中，我们将使用 Button 控件作为基础。

public class OneClickButton : Button
{
    private string replaceTitleTo;
    public string ReplaceTitleTo
    {
        get { return this.replaceTitleTo; }
        set { this.replaceTitleTo = value; }
    }
    protected override void OnInit(EventArgs e)
    {
        base.OnInit(e);
        StringBuilder script = new StringBuilder();
        script.Append("if (typeof(Page_ClientValidate) == 'function') { ");
        script.Append("if (Page_ClientValidate() == false) { return false; }} ");
        if (!String.IsNullOrEmpty(this.replaceTitleTo))
        {
            script.Append("this.value = '");
            script.Append(this.replaceTitleTo);
            script.Append("';");
        }
        script.Append("this.disabled = true;");
        script.Append(this.Page.GetPostBackEventReference(this));
        script.Append(";");
        this.Attributes.Add("onclick", script.ToString());
    }
}

我添加了属性 ReplaceTitleTo 并检查它是否为空。 如果是，我将替换按钮的值以更改按钮标题。 例如，我可以将 Button 控件替换为以下控件

<uc:OneClickButton id="butSubmit" 
   ReplaceTitleTo="Please wait..." runat="server" />