Asp.net+Jquery+UpdatePanelAnimationExtender达成loading效果

最新推荐文章于 2017-11-08 18:37:00 发布
最新推荐文章于 2017-11-08 18:37:00 发布
阅读量2.2k 收藏 1
点赞数
分类专栏： JQuery Asp.Net 文章标签： asp.net jquery javascript function ajax server
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lee576/article/details/3215978
版权
Asp.Net 同时被 2 个专栏收录
339 篇文章 0 订阅
订阅专栏
JQuery
53 篇文章 0 订阅
订阅专栏
在AJAX有個很讚的控制項(應該是說 在 AJAX Control ToolKit裡面)

他就叫做 UpdatePanelAnimationExtender

為什麼會使用它呢 ...!? jQuary的構成 ... 不外乎就是JavaScript

使用 UpdatePanelAnimationExtender 的動畫效果(恩 可以用來呼叫javascript) 可以輕鬆的達到我們的目標呢

現在 讓我們開始吧 ...

對了 附帶一提 ... 其實我沒有在<head> 裡面引入jquery.js,jquery.blockUI.js 我用了另一種方法 ...

在AJAX的ScriptManager 加入Scripts 如下(恩 這個其實是Control ToolKit裡面的控制項，跟ScriptManager有同樣效果) 

         < ajaxToolkit:ToolkitScriptManager ID ="ToolkitScriptManager" runat ="server" EnableScriptGlobalization ="True"  EnablePageMethods ="True" > 
             < Scripts >
                 < asp:ScriptReference Path ="js/jquery.js" >
                 </asp:ScriptReference>
                 < asp:ScriptReference Path ="js/jquery.blockUI.js" >
                 </asp:ScriptReference>
             </Scripts>
         </ajaxToolkit:ToolkitScriptManager>

  首先 在<heade> </head>之間 加入以下JavaScript 

1     <script type= "text/javascript">
2          function ajaxStart() { $.blockUI({message: '<h3></br><img src="img/loading/Loading2.gif" /> 資料載入中...</h3>'}); }
3          function ajaxStop() { $.unblockUI(); }
4     </script>

當然囉 ... 可以自己寫 ... 我這邊的範例 是做一個 有Loading圖片 和 資料載入中... 字樣的message，麻煩自由發揮 ...

以下 是重點囉~~~

在你有UpdatePanel的地方 都給他放上一個UpdatePanelAnimationExtender

TargetControlID 記得要設定你的UpdataPanel ... 不然沒有用的唷~

然後 請看以下程式

0 1         < ajaxToolkit:UpdatePanelAnimationExtender ID ="UpdatePanelAnimationExtender" runat ="server" TargetControlID ="UpdatePanel1" >
0 2                             < Animations >
0 3                     < OnUpdating >
0 4                         < Sequence >
0 5                             < ScriptAction script ="ajaxStart();" />
0 6                         </Sequence>
0 7                     </OnUpdating>
0 8                     < OnUpdated >
0 9                         < sequence >
10                             < ScriptAction script ="ajaxStop();" />
11                         </sequence>
12                     </OnUpdated>
13                 </Animations>
14         </ajaxToolkit:UpdatePanelAnimationExtender>

 

大略說明一下好了 ... 在<Animations>標籤 可以設定 你再非同步執行開始的時候 要做什麼事情<OnUpdating>，在非同步執行結束的時候要做什麼事情<OnUpdated>

所以呢 ~ 我們就在這邊 呼叫剛剛寫在<head> 裡面的javascript

這樣就大功告成了~~

其實 這個方法蠻簡單的 ...當然 可以做的更花俏~畢竟UpdatePanelAnimationExtender不是吃素的

假如 我希望在完成後 順便提示使用者 完成了 ... 我該怎麼做呢!?

首先 在剛剛加入的javascript裡面 新增一個function

1 function ajaxComplete(){  
2   $.blockUI( {message: '<h3></br><img src="img/complete.gif" /> 資料載入完成</h3>'});  
3   }

然後 在<OnUpdated>的地方 稍微增加一些東西 ...

1                     < OnUpdated >  
2                         < sequence >  
3                             < ScriptAction script ="ajaxStop();" />  
4                             < ScriptAction script ="ajaxComplete();" />  
5                             < ScriptAction Duration ="1" script ="ajaxStop();" />  
6                         </sequence>  
7                 </OnUpdated>

好了好了 完成了 ... 這邊意思是

第三行 -在非同步執行完成後 先呼叫ajaxStop();

第四行 -呼叫 剛剛加入的ajaxComplete(); 讓它顯示出 資料載入完成的字樣

第五行 -1秒過後 (Duration) 呼叫ajaxStop(); 解除頁面Block ...

至於其他變化型，請自由發揮囉 ~

以上

 
lee576
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
asp.net中使用Jquery实现按钮点击遮罩加载，处理完后恢复（源代码）
09-07
asp.net中使用Jquery实现按钮点击遮罩加载，处理完后恢复，这是我写的一个例子，里面是源代码，直接运行就可以。
asp.net+jquery Jsonp使用方法
01-20
服务器端 代码如下: string callback = Request[“callback”]; string response = string.Format(“\”value1\”:\”{0}\”,\”value2\”:\”{1}\”, v1, v2); string call = callback + “({” + ... jQuery.getJS
21.5 UpdatePanelAnimation局部刷新动画控件(征服ASP.NET 2.0 Ajax——Web开发技术详解)
szhourj的专栏
08-01 875
 ------------http://book.csdn.net/bookfiles/305/10030512734.shtml21.5  UpdatePanelAnimation局部刷新动画控件UpdatePanelAnimation是应用于UpdatePanel的控件，提供一些动画效果，本节介绍其主要属性，并演示如何在项目中应用此控件。21.5.1  简介UpdatePane
Ajax Toolkit --- UpdatePanelAnimationExtender应用及问题
weixin_33938733的博客
03-09 82
UpdatePanelAnimationExtender,应用表现不错，既有Animation效果，又可以使开发带来一点乐趣（起码页面不是一成不变的效果）。      在实际应用的时候，不知道你有没有发现，一般可动画的部分，都是希望是显示结果的部分。      那，要有这样的效果。一般的界面布局，基本上是两个updatePanel and UpdatePanelAnimation...
UpdatePanelAnimation
angnong3282的博客
11-16 75
UpdatePanelAnimation控件主要应用于UpdatePanel的局部刷新效果，它提供一个动画效果。 属性列表： TargetControlID:要应用特效的UpdatePanel控件ID OnUpdeting:更新时应用的特效（何任控件的回调都会导致此事件的触发） OnUpdated:更新后的特效（如果要使用任何控件回调完成后都触发此事件则需要对UpdatePane...
使用UpdatePanel后再用Response.Write();
luyesql的专栏
12-19 1541
在AJAX支持的网站中使用想使用Response.Wrie(“”); 或 Page. RegisterStartupScript (); 弹出一些提示对话框，没有效果。有如下两种解决方法：（1）       System.Web.UI.ScriptManager.RegisterStartupScript来替代Page.ClientScript.RegisterStartupScript==>函数
ASP.net+Jquery+GridView实现无刷新TreeGrid
03-16
内容索引:.NET源码,Ajax相关,jQuery,AJAX,TreeGrid　+Jquery+GridView实现无刷新TreeGrid，3.5支持，2.0版本在VS2005下调试会报错，IIS则没事，本程序没有使用数据库，数据由程序自动生成，下的运用。
Asp.Net+flash+jquery实现的在线涂鸦插件.rar
04-12
《Asp.Net+Flash+jQuery实现的在线涂鸦插件详解》 在互联网技术日新月异的今天，用户交互体验成为了网站设计的关键因素之一。本文将深入探讨一个基于Asp.Net、Flash和jQuery技术实现的在线涂鸦插件，通过分析其中的...
ASP.net+jQuery 基于数据库的动态AJAX树控TreeView
03-16
内容索引:.NET源码,Ajax相关,TreeView,树形菜单　treeViewClientControl，的配合，采用Access数据库，实现了即时加载的动态TreeView控件，完美展现了ajax操作之美。同时，通过控制程序，你将能实现全部收缩、全部...
AJAX ControlToolkit学习日志-UpdatePanelAnimationExtender(30)
weixin_30642305的博客
03-23 65
UpdatePanelAnimationExtender控件用于在UpdatePanel发生更新时，产生动画效果。下面来看一个示例：1)在VS2005中新建一个ASP.NET AJAX-Enabled Web Project项目工程，命名为UpdatePanelAnimationExtender1。2)在页面上拖放一个UpdatePanel,在其里拖放一个Label用于显示时间。...
ASP.NET loading，动画进度条
03-22
ASP.NET loading，动画，页面进度条
UpdatePanel 无刷新时如何显示js效果
10-30
UpdatePanel 无刷新时如何显示js效果
十五、UpdatePanelAnimation——带有动画效果的Updatepanel、DragPanel——拖放功能
soldierluo的专栏
11-23 1412
 UpdatePanelAnimation带有动画效果的Updatepanel 举例如下：1.       添加一个ScriptManage2.       添加一个UpdatePanel，并向其中添加一个button3.       编写响应的button方法    protected void Button1_Click(object sender, EventAr
Asp.net + jQuery + UpdatePanelAnimationExtender达成载入效果与AJAX的控制项
weixin_30781107的博客
06-01 58
Asp.net + jQuery + UpdatePanelAnimationExtender达成效果载入中的AJAX在有个很赞的控制项（应该是说在里面的AJAX控制工具箱） 他就叫做UpdatePanelAnimationExtender 为什么会使用它呢...!? jQuary的构成...不外乎就是JavaScript的 UpdatePanelAnimationExtende...
为UpdatePanel 更新增加提示
weixin_30426957的博客
12-22 89
场景：有时候我们更新updatepanel的时候由于数据量小，用户很难注意到更新的内容，导致错过信息 解决方案：通过PageRequestManager的pageLoading事件将PageLoadingEventArgs事件参数的get_panelsUpdating()方法获得一个或多个需要更新的updatepanel,将它（它们）变色。 示例：http://www.xpp.com.cn/A...
使用UpdatePanelAnimationExtender扩展器控件开发Gmail风格的加载提示
weixin_34419326的博客
11-08 140
又一篇Matt Berseth的短文，URL为[url]http://mattberseth.com/blog/2007/06/aspnet_ajax_rendering_a_gmaill.html[/url]。介绍如何使用AjaxControlToolkit中的UpdatePanelAnimationExtender扩展器控件开发Gmail风格的加载...
[转]拥抱变化——从Atlas到ASP.NET AJAX（3）：“仁慈”的UpdatePanel
sunxy的收藏夹
10-30 1144
拥抱变化——从Atlas到ASP.NET AJAX（3）：“仁慈”的UpdatePanel 阅读本文之前，您需要安装完成Microsoft ASP.NET AJAX v1.0 Beta（详见拥抱变化——从Atlas到ASP.NET AJAX（1）：下载安装总览）。安装完成之后，Visual Studio中新建Web Site的时候会多出一个模版：ASP.NET AJAX Enabled Web
asp.net ajax updatepanel updateprogress不是每次执行都显示进度提示
hmy123cq3的专栏
09-12 573
AllowPaging="True" OnPageIndexChanging="GridView1_PageIndexChanging">                                                                                                                        
ASP.NET+JQuery模拟股票信息涨跌(Ajax技术)
最新发布
05-24
首先，需要在ASP.NET中创建一个Web应用程序，并添加一个Web Form。在Web Form中，可以使用JQuery来实现页面的交互效果。以下是实现模拟股票信息涨跌的步骤： 1. 创建一个ASP.NET Web应用程序，并添加一个Web Form。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值