asp.net无刷新更新统一添加加载状态的方法
2017-3-5 14:28asp.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,和透明度,背景颜色后,最终效果变成这样滴