在提交时在 asp.net 页面中显示加载图像

Question

我需要在提交事件时在 asp.net 页面中显示加载图像。我在这里和那里搜索了很多想法，但没有找到适合我的完美解决方案。尽管如此，我还是可以自己写一个。虽然，这里是 show loading image while the page is loading 但我不认为它会寻找页面验证。

我在页面提交时调用的 JS。

$(document).ready(function () {
    $(this).submit(function () {
        $("#overlay").fadeIn(30);// Call (Show) loading box by default.
        if (Page_ClientValidate() != null) //Check if there is a validation on page.
            {
            if (!Page_ClientValidate()) {//If Validation returns false then hide the loading box
                $("#overlay").hide();
            } 
        }
    });
});

这是我的加载 div：

<div style="display: none" id="overlay">
        <div id="modalprogress">
            <div id="theprogress">
                <img alt="Loading... Please wait" src="../App_Themes/Theme1/images/processing.gif">
            </div>
        </div>
    </div>

默认情况下，此 div 保持隐藏状态。一旦单击提交按钮，它就会调用用于验证页面的 Page_ClientValidate() 方法。对我来说效果很好，但问题很少。

带有不同ValidationGroup 或没有ValidationGroup 的按钮将触发页面上存在的其他ValidationGroup 的Page_ClientValidate()，然后在验证摘要中显示错误消息，尽管它提交了页面，但是：

1. 它显示不相关的验证摘要/片刻（直到返回请求的页面）。
2. 如果按下带有ValidationGroup 的按钮并发生验证错误，则会抑制随后的所有提交/javascript 方法。
3. 有什么方法可以在 DropDown 或 CheckBox 方法AutoPostBackEvents 中调用相同的方法？

注意#：到目前为止，我正试图避免更新面板的事情，以及其他 ajax 调用想法。只需要在上面的代码中进行一些优化。

Answer 1

您必须确定选择器。 例如，为需要显示加载图像的按钮使用特定类 (showLoadingImg)，这样做可以避免其他按钮单击。

$('.showLoadingImg').submit(function () {
    $("#overlay").fadeIn(30);// Call (Show) loading box by default.
    if (Page_ClientValidate() != null) //Check if there is a validation on page.
        {
        if (!Page_ClientValidate()) {//If Validation returns false then hide the loading box
            $("#overlay").hide();
        } 
    }
});