当页面使用ASP.Net加载或回发时显示加载进度图像

Display loading progress image when Page Loads or does PostBack using ASP.Net

本文关键字：加载 显示 图像 ASP Net      更新时间：2023-09-26

我的项目有时加载一个页面需要大约1分钟或更多的时间，所以我想向用户显示一个等待消息或等待状态。

我的项目我有一个login.aspx页与两个按钮和welcome.aspx页和clientsDatas.aspx页和Master页。

我没有找到一些使用JQuery的方法，比如:

<script type="text/javascript">
function ShowProgress() {
    setTimeout(function () {
        var modal = $('<div />');
        modal.addClass("modal");
        $('body').append(modal);
        var loading = $(".loading");
        loading.show();
        var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
        var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
        loading.css({ top: top, left: left });
    }, 200);
}
$('form').live("submit", function () {
    ShowProgress();
});

我把它放入母版页，在其他子页的加载方法中，我放入:

if (!IsPostBack)
        {
            string script = "$(document).ready(function () { $('[id*=bt_submit]').click(); });";
            ClientScript.RegisterStartupScript(this.GetType(), "load", script, true);
        }

但是它不工作。

这是我的CSS:

.modal {
position: fixed;
top: 0;
left: 0;
background-color: black;
z-index: 99;
opacity: 0.8;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
min-height: 100%;
width: 100%;
}
.loading {
font-family: Arial;
font-size: 10pt;
border: 5px solid #67CFF5;
width: 200px;
height: 100px;
display: none;
position: fixed;
background-color: White;
z-index: 999;
}

我可以只把一个代码到我的masterPage，它可以执行每次当子页面的提交按钮被点击?

有谁能帮我吗?

因为我有一个母版页和许多子页，我添加了一部分Jquery代码到我的母版的母版表单，当masterForm被提交(当提交是如此之长，它显示等待图像)

添加到masterPage的JQuery代码:

<%-- Start of wating message  --%>
    <script type="text/javascript">
        $("#MasterFormID").submit(function () {
            $("body").addClass("loading disp");
            $("#modal").addClass("disp");                
        });
    </script>
    <div id="modal" class="modal" style="text-align: center">
    </div>
    <%-- End of wating message  --%>
样式:

.modal {
display:    none;
position:   fixed;
z-index:    1000;
top:        0;
left:       0;
height:     100%;
width:      100%;
background: rgba( 255, 255, 255, .8 ) 
            url('../images/ajax-loader-image.gif') 
            50% 50% 
            no-repeat;
}
.loading {
overflow: hidden;   
}
.disp {
display: block;
}

注意:我必须导入JQuery到我的主页。

我这样做了，效果很好

相关文章：