使用Ajax ModalPopupExtender解决假死问题_modalpopupextender 页面加载不了-CSDN博客

本文链接：https://blog.csdn.net/arwindgao/article/details/6704802

我们知道，在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。