asp.net无刷新更新统一添加加载状态的方法

2017-3-5 14:28

asp.net程序中,页面局部更新大多采用update panel刷新。比如查询等。但是有时候请求耗时较多,这就需要提示给用户当前处于loading状态。如果页面数量不大,那在每个执行异步刷新的按钮添加客户端脚本,让执行异步请求之前先执行js让页面显示loading即可。但是如果页面量多,异步的触发按钮也较多,或者情况较复杂的时候,再配合业务逻辑写专门的代码来显示/隐藏loading就会很累还容易出bug。这样就需要统一加个自动显示loading的功能。如果系统框架中的异步操作都是自己写的统一调用的ajax的话就很简单,只要自己在ajax函数添加事件监控。

但是我们aps ui系统总共有几百个页面,为了减少代码复杂度和降低对开发人员的要求,基本所有的无刷新更新都采用的update panel(即除自己制作的异步加载的combobox控件)。所以必须找到微软预留的接口才行。我用google搜了半天,终于找到了asp.net 客户端生命周期的msdn。完美的解决了问题。代码如下

//loading status
$(function () {
    if (Sys)
    {
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_beginRequest(msAjaxBeginRequest);
        prm.add_pageLoaded(msAjaxPageLoaded);
    }
});
 
window._loadingOverlayCounter = 0;
function showLoadingOverlay()
{
    //console.log('showLoadingOverlay' + window._loadingOverlayCounter);
    if (window._loadingOverlayCounter++ == 0)
    {
        $.LoadingOverlay("show");
        //console.log('$.LoadingOverlay("show");');
    }
    //else
    //{
    //    $.LoadingOverlay("hide");
    //    console.log('$.LoadingOverlay("hide");');
    //    $.LoadingOverlay("show");
    //    console.log('$.LoadingOverlay("show");');
    //}
}
function hideLoadingOverlay()
{
    //console.log('hideLoadingOverlay' + window._loadingOverlayCounter);
    if (--window._loadingOverlayCounter == 0)
    {
        $.LoadingOverlay("hide");
        //console.log('$.LoadingOverlay("hide");');
    }
}
 
function msAjaxBeginRequest(sender, args) {
        showLoadingOverlay();
}
function msAjaxPageLoaded(sender, args) {
    if (args.get_panelsUpdated().length)
        hideLoadingOverlay();
}
msdn参考在这里 https://msdn.microsoft.com/zh-cn/cn-zh/library/bb386417.aspx

页面的loading采用的是LoadingOverlay,开源的。地址在这里 http://gasparesganga.com/labs/jquery-loading-overlay/ 。 修改里面的图片code,和透明度,背景颜色后,最终效果变成这样滴 

 

点击:loading..
收藏到:中国收客网
评论

  • 千秋万世风
    服务器崩溃了一次,图片丢失了,555
    2020/9/4 18:30:21