使用Ajax ModalPopupExtender解决假死问题
来源:互联网 发布:网络速度测试工具 编辑:程序博客网 时间:2024/05/28 06:04
我们知道,在web application中做大型数据处理的时候,通常页面会进入到一个刷新的状态,这个状态将会持续到数据处理或计算结束之后,才能正常显示网站的图片信息,通常这样做对于用户体验来说是不友好的,有很多方式来解决这一问题,例如使用异步数据处理或者在后台建立一个后台线程进行处理,这样用户将会在不失去与application的交互,这里我们介绍的是使用Ajax control tookit来解决这一问题,不同于你使用异步的Callback和background 线程,这个方式非常简单且有效,对于开发者来说,你不需要额外的工作去建立异步方法和线程。
这里用到的Ajax控件包括ModalPopupExtender和ToolkitScriptManager。 ToolkitScriptManager和ScriptManager的作用很类似,它用于处理页面上的组件和页面局部刷新,生成相关的页面客户端代理脚本,但是相比较于ScriptManager,它可以提升下载效率和减少request的次数,所以这里推荐使用ToolkitScriptManager控件取代ScriptManager。
ToolkitScriptManager vs ScriptManager http://www.cnblogs.com/liminzhang/archive/2007/07/31/837329.html
ModalPopupManager控件可以在用户点击按钮的时候显示一个相应的control,这个control通过设置它的TargetControlID启用,我们可以利用它显示一个Panel控件,而在Panel中存在我们需要显示的Spinner image。Spinner image 由JavaScript代码做出。
为了方便在项目中复用这段代码,我们将ModalPopupManger控件建立在User control中:
[本示例完整源码下载(0分)] http://download.csdn.net/source/3535567
现在介绍我们需要的实现方法:
首先建立一个Web Application程序,开始之前,请下载需要AjaxControlToolkit DLL文件到项目中并引用(下载地址 http://ajaxcontroltoolkit.codeplex.com/),在根目录创建一个web页面和一个User Control控件,因为项目需要显示图片功能,需要引入一个Image文件夹,文件夹中包含一些必要的图片文件,为了显示结果,我们使用一个XML文件作为数据源,在数据处理完之后显示XML文件上面的数据。
XML文件格式(XMLData.xml),仅仅为了显示结果:
<Root> <Person> <Name>Angle</Name> <Age>23</Age> <Country>United State</Country> <Comment>None</Comment> </Person> <Person> <Name>Bill</Name> <Age>41</Age> <Country>United State</Country> <Comment>None</Comment> </Person></Root>
UserControl中包含一个Panel控件(用于承载image和取消按钮,在页面进行大数据处理时候出现),一个LinkButton(用于触发点击事件),一个ModalPopupExtender控件(用于显示Panel),并且包含一些JavaScript代码,这些代码用于加载image文件,并且每隔1秒钟进行图片之间的切换操作:
PopupProgress.ascx:
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="PopupProgress.ascx.cs" Inherits="CSASPNETShowSpinnerImage.PopupProgress" %><%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %> <script language="javascript" type="text/javascript"> <% =LoadImage() %> // The JavaScript function can shows loaded image in Image control. var imgStep = 0; function slide() { var img = document.getElementById("PopupProgressUserControl_imgProgress"); if (document.all) { img.filters.blendTrans.apply(); } img.title=imgMessage[imgStep]; img.src=imgUrl[imgStep]; if (document.all) { img.filters.blendTrans.play(); } imgStep = (imgStep < (imgUrl.length-1)) ? (imgStep + 1) : 0; (new Image()).src = imgUrl[imgStep]; } setInterval("slide()",1000);</script><asp:Panel ID="pnlProgress" runat="server" CssClass="modalpopup"> <div class="popupcontainerLoading"> <div class="popupbody"> <table width="100%"> <tr> <td align="center"> <asp:Image ID="imgProgress" runat="server" style="filter: blendTrans(duration=0.618)" ImageUrl="~/Image/0.jpg"/> </td> </tr> <tr> <td> <asp:Button ID="btnCancel" runat="server" Text="Cancel" /></td> </tr> </table> </div> </div> </asp:Panel> <asp:LinkButton ID="btnLink" runat="server" Text=""></asp:LinkButton> <asp:ModalPopupExtender ID="mpeProgress" runat="server" TargetControlID="btnLink" X="500" Y="0" PopupControlID="pnlProgress" BackgroundCssClass="modalBackground" DropShadow="true" CancelControlID="btnCancel" > </asp:ModalPopupExtender>
在这个PopupProgress用户控件的后台代码页面中,我们可以有一个LoadImage方法,用于加载页面到一个Array中,并通过把这些JavaScript代码注册到前台页面中,通过<% =LoadImage()%>的方式, 你同样可以直接写在前台页面中去加载Image文件。
PopupProgress.ascx.cs
namespace CSASPNETShowSpinnerImage{ public partial class PopupProgress : System.Web.UI.UserControl { protected void Page_Load(object sender, EventArgs e) { } /// <summary> /// This method is use to load images of customize files and /// register JavaScript code on User Control page. /// </summary> /// <returns></returns> public string LoadImage() { StringBuilder strbScript = new StringBuilder(); string imageUrl = ""; strbScript.Append("var imgMessage = new Array();"); strbScript.Append("var imgUrl = new Array();"); string[] strs = new string[7]; strs[0] = "Image/0.jpg"; strs[1] = "Image/1.jpg"; strs[2] = "Image/2.jpg"; strs[3] = "Image/3.jpg"; strs[4] = "Image/4.jpg"; strs[5] = "Image/5.jpg"; strs[6] = "Image/6.jpg"; for (int i = 0; i < strs.Length; i++) { imageUrl = strs[i]; strbScript.Append(String.Format("imgUrl[{0}] = '{1}';", i, imageUrl)); strbScript.Append(String.Format("imgMessage[{0}] = '{1}';", i, imageUrl.Substring(imageUrl.LastIndexOf('.') - 1))); } strbScript.Append("for (var i=0; i<imgUrl.length; i++)"); strbScript.Append("{ (new Image()).src = imgUrl[i]; }"); return strbScript.ToString(); } }}
我们的这个UserControl, 算是完成了,接着我们需要在特定的地方调用它,例如建立一个Web form页面,命名为Default.aspx.
这个页面需要包含ToolkitScriptManager和UpdatePanel,UpdateProgress控件,通过在局部刷新的情况调用这个UserControl:
Default.aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="CSASPNETShowSpinnerImage.Default" %><%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %> <%@ Register src="UserControl/PopupProgress.ascx" tagname="PopupProgress" tagprefix="uc1" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" runat="server"> <title></title> <style type="text/css"> .modalBackground { background-color: Gray; filter:alpha(opacity=70); opacity: 0.5; } </style> </head> <body id="body1" runat="server" > <form id="form1" runat="server"> <div> <asp:ToolkitScriptManager ID="ToolkitScriptManagerPopup" runat="server" /> <asp:UpdatePanel ID="updatePanel" UpdateMode="Conditional" runat="server"> <ContentTemplate> <%=DateTime.Now.ToString() %> <br /> <asp:Button ID="btnRefresh" runat="server" Text="Refresh Panel" OnClick="btnRefresh_Click" OnClientClick="document.getElementById('PopupProgressUserControl_btnLink').click();" /> <br /> <asp:GridView ID="gvwXMLData" runat="server"> </asp:GridView> </ContentTemplate> </asp:UpdatePanel> <asp:UpdateProgress ID="updateProgress" runat="server" AssociatedUpdatePanelID="updatePanel"> <ProgressTemplate> <uc1:PopupProgress ID="PopupProgressUserControl" runat="server" /> </ProgressTemplate> </asp:UpdateProgress> </div> </form> </body></html>
那么在后台页面我们需要使用UpdatePanel中的这个button来模拟我们的大数据计算,这里我们为了模拟他,使用Threading.sleep()方法,停止主线程,并且在停止后将Xml数据绑定到GridView中,表示处理成功:
Default.aspx.cs
namespace CSASPNETShowSpinnerImage{ public partial class Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } protected void btnRefresh_Click(object sender, EventArgs e) { // Here we use Thread.Sleep() to suspends the thread for 10 seconds for imitating // an expensive, time-consuming operate of retrieve data. (Such as connect network // database to retrieve mass data.) // So in practice application, you can remove this line. System.Threading.Thread.Sleep(10000); // Retrieve data from XML file as sample data. XmlDocument xmlDocument = new XmlDocument(); xmlDocument.Load(AppDomain.CurrentDomain.BaseDirectory + "XMLFile/XMLData.xml"); DataTable tabXML = new DataTable(); DataColumn columnName = new DataColumn("Name", Type.GetType("System.String")); DataColumn columnAge = new DataColumn("Age", Type.GetType("System.Int32")); DataColumn columnCountry = new DataColumn("Country", Type.GetType("System.String")); DataColumn columnComment = new DataColumn("Comment", Type.GetType("System.String")); tabXML.Columns.Add(columnName); tabXML.Columns.Add(columnAge); tabXML.Columns.Add(columnCountry); tabXML.Columns.Add(columnComment); XmlNodeList nodeList = xmlDocument.SelectNodes("Root/Person"); foreach (XmlNode node in nodeList) { DataRow row = tabXML.NewRow(); row["Name"] = node.SelectSingleNode("Name").InnerText; row["Age"] = node.SelectSingleNode("Age").InnerText; row["Country"] = node.SelectSingleNode("Country").InnerText; row["Comment"] = node.SelectSingleNode("Comment").InnerText; tabXML.Rows.Add(row); } gvwXMLData.DataSource = tabXML; gvwXMLData.DataBind(); } }
这样我们的项目就算制作成功了,运行你的程序并点击按钮,就可以看到Spinner image的效果了,在10秒之后,你可以看到成功显示的GridView。
- 使用Ajax ModalPopupExtender解决假死问题
- ASP.NET Ajax Toolkit使用ModalPopupExtender控件
- 关于Ajax控件ModalPopupExtender的使用
- android 解决假死问题
- 解决同步Ajax页面假死
- 完美解决在ModalPopupExtender中使用CalendarExtender时被层遮挡的问题
- 解决C#界面假死问题
- 轻松掌握Ajax.net系列教程七:使用ModalPopupExtender
- 轻松掌握Ajax.net系列教程七:使用ModalPopupExtender
- Ajax的 ModalPopupExtender控件
- ModalPopupExtender使用技巧( operate ModalPopupExtender by JavaScript)
- 怎样解决vc6.0的假死问题
- 小技巧解决Windows 7假死问题
- 解决FlashBuilder 调试有时IE假死问题
- 解决xcode打开时假死的问题
- curl_multi_select解决curl_multi网页假死问题
- Ajax 中ModalPopupExtender 的应用
- Ajax的 ModalPopupExtender控件使用方法
- 图解如何在VC6,VS2008中设置程序条件断点
- 使用xml.dom.minidom创建并写入xml文件
- 线程----BlockingQueue (转)
- try{} catch(){}finally{}执行
- S3C2440驱动篇—触摸屏驱动分析
- 使用Ajax ModalPopupExtender解决假死问题
- 【ASP.net文档】用C#实现HTTP协议下的多线程文件传输
- [Android开发]有关Android线程的学习
- Linux内核I2C子系统驱动(一)
- 二级联动
- poj 1050 To the Max
- 将ListView控件中的数据导出到Excel文
- Linux内核I2C子系统驱动(二)
- Linux内核I2C子系统驱动(三)