65.9K
CodeProject 正在变化。 阅读更多。
Home

使用 AJAX 加载背景图片在回发期间禁用 ASP.NET 按钮控件

Bryian Tan
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.44/5 (14投票s)

2009年8月14日

CPOL

3分钟阅读

viewsIcon

136757

downloadIcon

1176

一篇关于如何在回发期间禁用按钮控件的文章。

引言

有时，我们的应用程序可能需要额外的几秒钟来响应点击事件。 某些用户可能会失去耐心，多次点击该按钮。 我们可以通过使用客户端脚本在页面回发期间禁用提交按钮来轻松避免这种情况。 在本文中，我将与大家分享如何

  1. 在回发期间禁用按钮，无论是否有验证控件。
  2. 在回发期间更改按钮文本值。
  3. 在回发期间包含 AJAX 加载背景图片。
  4. 如何避免 'Page_IsValid is undefined' JavaScript 错误。

Using the Code

在我们开始之前，请允许我向您展示我的项目结构。 欢迎下载此演示。

Project Structure

演示 1 – 无验证控件

以下是 Jscript.js 的内容

function disableBtn(btnID, newText) {

    var btn = document.getElementById(btnID);
        setTimeout("setImage('"+btnID+"')", 10);
        btn.disabled = true;
        btn.value = newText;
}

function setImage(btnID) {
    var btn = document.getElementById(btnID);
    btn.style.background = 'url(12501270608.gif)';
}

以下是 Default.aspx 页面内容的一部分

<table>        
         <tr>
            <td>
            <td>
                 <asp:button id="btnOne" tabIndex="0" 
                    Runat="server" Text="Submit"
                    onclick="btnOne_Click" 
                    OnClientClick="disableBtn(this.id, 'Submitting...')" 
                    UseSubmitBehavior="false" />               
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <asp:Label ID="Label3" 
                  runat="server" Text=""></td>
        </tr>
   </table>

<script type="text/javascript" src="JScript.js"></script>

在 Default.aspx 页面中，我有一个 Button 和一个 Label 控件。 让我们仔细看看按钮属性。

  • OnClientClick="disableBtn(this.id, '正在提交...')" - 通过传递按钮 ID 和我希望它在点击时显示的新文本值来调用 JavaScript 函数。
  • UseSubmitBehavior="false" - 指示按钮控件应使用 ASP.NET 回发机制而不是客户端浏览器的提交机制 (UseSubmitBehavior 属性)。

为了测试，我在 default.aspx.cs 中包含了这些行

protected void btnOne_Click(object sender, EventArgs e)
{
    Thread.Sleep(2000);
    Label3.Text = DateTime.Now.ToLongTimeString();
}

以下是当有人点击该按钮时的外观

Demo 1 click

Demo 1 Output

演示 2 – 带有验证控件

以下是 Default2.aspx 的输出

Demo 2 aspx Page

哎呀... 在它未能通过验证过程后，该按钮仍然被禁用。 让我们修改 JavaScript 来解决这个问题。

Demo 2 aspx Page Onclick

以下是带有注释的新 JavaScript 文件的内容 – Jscript2.js

function ResetToDefault(btn, oldValue) {
    btn.disabled = false;
    btn.value = oldValue;
}
//browser properties
var Browser = {
    Version: function() {
        var version = 999;
        if (navigator.appVersion.indexOf("MSIE") != -1) {
            version = parseFloat(navigator.appVersion.split("MSIE")[1]);
            return version;
        }
    },
    Name: navigator.appName,
    isIE: function() {
        if (navigator.appVersion.indexOf("MSIE") != -1) {
            return true;
        }
        return false;
    }
};

//Handle Page_Validators is not defined error
//http://www.velocityreviews.com/forums/t88987-pagevalidators-error.html
function HasPageValidators() {
    var hasValidators = false;
    try {
        if (Page_Validators.length > 0) {
            hasValidators = true;
        }
    }
    catch (error) { }

    return hasValidators;
}

function SetImage(btn) {

    if (btn.type == "image") {
        btn.src = null;
        btn.style.width = '100px';
        btn.style.height = '20px';
        btn.style.backgroundImage = 'url(http://images.ysatech.com/ajax-loader.gif)';
    }
    else {
        //somehow backgroundImage not working with IE 7
        if (Browser.isIE() && Browser.Version() === 7) {
            btn.style.background = 'url(http://images.ysatech.com/ajax-loader.gif)';
        }
        else {
            btn.style.backgroundImage = 'url(http://images.ysatech.com/ajax-loader.gif)';
        }
    }
}

//enable the button and restore the original text value for browsers other than IE
function EnableOnUnload(btn, btnText) {
    if (!Browser.isIE()) {
        window.onunload = function() {
            ResetToDefault(btn, btnText);
        };
    }
}

//check if the validator have any control to validate
function EnableValidator(validator) {
    var controlToValidate = document.getElementById(validator.controltovalidate);

    if (controlToValidate !== null) {
        // alert(controlToValidate.id);
        ValidatorEnable(validator);
        return true;
    }
    ValidatorEnable(validator, false);

    return false;
}

function disableBtn(btnID, newText) {
    var btn = document.getElementById(btnID);
    var oldValue = btn.value;
    btn.disabled = true;
    btn.value = newText;
    
    //if validator control present
    if (HasPageValidators()) {

        Page_IsValid = null;

        //http://sandblogaspnet.blogspot.com/2009/04/calling-validator-controls-from.html
        //double check, if validator not null
        if (Page_Validators !== 'undefined' && Page_Validators !== null) {
            //Looping through the whole validation collection.
            for (var i = 0; i < Page_Validators.length; i++) {

                var validator = Page_Validators[i];

                //check if control to validate is enable 
                if (EnableValidator(validator)) {

                    if (!Page_Validators[i].isvalid) { //if not valid
                        ResetToDefault(btn, oldValue); //break;
                    }
                }
            }

            //   else { //if valid
            var isValidationOk = Page_IsValid;

            alert('isValidationOk ' + isValidationOk);

            EnableOnUnload(btn, btn.value);
            if (isValidationOk !== null) {
                if (isValidationOk) {
                    SetImage(btn);
                    __doPostBack(btnID, '');
                    // break;
                }
                else { //page not valid
                    btn.disabled = false;
                }
            }
            //  }
            
        }
    }
    else { //regular, no validation control present
        // setTimeout("SetImage('" + btn + "')", 5);
        SetImage(btn);
        btn.disabled = true; btn.value = newText;
        EnableOnUnload(btn, btn.value);
    }
}

//disable those validators where controltovalidate = null
function DisableValidators() {
    //this will get rid of the Page_Validators is undefined error
    if (typeof (Page_Validators) === 'undefined')
        return;
        
    if (Page_Validators !== 'undefined' && Page_Validators !== null) {
        for (var i = 0; i < Page_Validators.length; i++) {
            var validator2 = Page_Validators[i];
            var controlToValidate2 = document.getElementById(validator2.controltovalidate);
            if (controlToValidate2 === null) {
                ValidatorEnable(validator2, false);
            }
        }
    }
    return false;
}

window.onload = DisableValidators;

使用新 JavaScript (JScript2.js) 的输出

Demo 2 OnClick fail Validation

Demo 2 OnClick Pass Validation

Demo 2 After PostBack

结论

此项目中的主要项目是 JavaScript (Jscript2) 和按钮属性 (OnClientClick, UseSubmitBehavior)。 我希望有人会觉得本教程有用。 如果您认为我可以改进此代码，请给我留下反馈并分享您的想法。

在 IE 6.0/7.0 和 Firefox 3.0.13 上测试。

历史

  • 2009 年 8 月 14 日 - 我发现，在 Firefox 中，如果我们点击该按钮并继续到下一页，然后点击“后退”按钮（或 javascript:history(-1);）... 按钮控件仍然被禁用。 我已经更新了 JavaScript (JScript2)。 我尚未完全测试新的实现。 请给我留下反馈并分享您的想法。
  • 2009 年 10 月 19 日 - 修改了 JavaScript (JScript2) 以修复双重验证问题。
  • 2009 年 11 月 14 日 - 修复了 CodeProject 用户 prodriguez13 提到的错误。 当要验证的控件不可见时，JavaScript 将抛出错误。 为了补救这种情况，在 onload 事件中，我添加了 DisableValidators 函数。 此函数负责禁用所有 controltovalidate === null 的验证器。

    • 我收到了一些关于让此脚本与 Image 按钮一起使用的请求。 我设法为它整理了一个解决方案。 如果您发现任何错误，请告诉我。 在 IE 7.0/8.0、FireFox 上测试，图像不会在 Google Chrome 上显示，也许有人可以对此进行说明。

© . All rights reserved.