显示ASP.NET页面装载进度

ASP.NET的web应用越做越大，即便用了AJAX也是要装载很多JS或者外部框架，导致大型应用启动装载很慢。这儿演示了一个类似Splasher的显示ASP.NET页面装载进度的方法。只要继承LoadingNotifier，调用几个JS方法即可。

LoadingNotifier.cs

   1: using System;

   2: using System.Data;

   3: using System.Configuration;

   4: using System.Web;

   5: using System.Web.Security;

   6: using System.Web.UI;

   7: using System.Web.UI.WebControls;

   8: using System.Web.UI.WebControls.WebParts;

   9: using System.Web.UI.HtmlControls;

  10:  

  11: namespace WebApplication1

  12: {

  13:     public class LoadingNotifier : System.Web.UI.Page

  14:     {

  15:         public void initNotify(string StrSplash)

  16:         {

  17:             // Only do this on the first call to the page

  18:             if ((!IsCallback) && (!IsPostBack))

  19:             {

  20:                 //Register loadingNotifier.js for showing the Progress Bar

  21:                 Response.Write(string.Format(@"<script type='text/javascript' src='scripts/loadingNotifier.js'></script>

  22:               <script language='javascript' type='text/javascript'>

  23:               initLoader('{0}');

  24:               </script>", StrSplash));

  25:                 // Send it to the client

  26:                 Response.Flush();

  27:             }

  28:         }

  29:         public void Notify(string strPercent, string strMessage)

  30:         {

  31:             // Only do this on the first call to the page

  32:             if ((!IsCallback) && (!IsPostBack))

  33:             {

  34:                 //Update the Progress bar

  35:                 Response.Write(string.Format("<script language='javascript' type='text/javascript'>setProgress({0},'{1}'); </script>", strPercent, strMessage));

  36:                 Response.Flush();

  37:             }

  38:         }

  39:     }

  40:  

  41: }

  42:  

loadingNotifier.js

   1: var initProgressPanel=false;

   2: var prgCounter=0;

   3: var strLoadingMessage ='Loading...';

   4:  

   5:  function initLoader(strSplash)

   6:  {

   7:     if (strSplash) strLoadingMessage =strSplash;

   8:  

   9:     var myNewObj= document.getElementById('divContainer');

  10:     if (!myNewObj )

  11:     {

  12:  

  13:     strID='divContainer';

  14:  

  15:     strClass='divContainer';

  16:  

  17:            myNewObj =  createNewDiv( strID,strClass);

  18:  

  19:            document.body.appendChild(myNewObj);

  20:  

  21:      }

  22:    

  23:      var myNewObj= document.getElementById('divLoadingStat');

  24:  

  25:      if (!myNewObj )

  26:      {

  27:             strID='divLoadingStat';  

  28:  

  29:             strClass='divLoadingStat';

  30:  

  31:             myNewObj =  createNewDiv( strID,strClass);        

  32:  

  33:             var mytext=document.createTextNode(strLoadingMessage);

  34:  

  35:             myNewObj.appendChild(mytext);

  36:  

  37:             document.getElementById('divContainer').appendChild(myNewObj);

  38:         }

  39:     var myNewObj= document.getElementById('divLoaderBack');

  40:  

  41:     if (!myNewObj )

  42:     {

  43:             strID='divLoaderBack';

  44:  

  45:             strClass='divLoaderBack';

  46:  

  47:              myNewObj =  createNewDiv( strID,strClass);

  48:  

  49:             document.getElementById('divContainer').appendChild(myNewObj);

  50:  

  51:      }

  52:  

  53:      var myNewObj= document.getElementById('divLoaderProgress');

  54:  

  55:      if (!myNewObj )

  56:  

  57:         {

  58:  

  59:             strID='divLoaderProgress';

  60:  

  61:             strClass='divLoaderProgress'

  62:  

  63:             myNewObj =  createNewDiv( strID,strClass);

  64:  

  65:             document.getElementById('divLoaderBack').appendChild(myNewObj);

  66:  

  67:         }

  68:  

  69:         initProgressPanel=true;

  70:  

  71:      }

  72:  

  73:  

  74:        function setProgress(intPrc,strMessage)

  75:   {

  76:        if (!initProgressPanel) initLoader('Loading...');

  77:  

  78:       if (strMessage)  strLoadingMessage=strMessage;

  79:  

  80:       if(!intPrc) return

  81:  

  82:       var mytext=document.createTextNode( strLoadingMessage+' ' + prgCounter +'%');

  83:  

  84:       var lodStat= document.getElementById('divLoadingStat');

  85:  

  86:           lodStat.removeChild(lodStat.lastChild );

  87:  

  88:           lodStat.appendChild(mytext);

  89:  

  90:           prgCounter++;

  91:  

  92:           prgDiv= document.getElementById('divLoaderProgress');

  93:  

  94:            prgDiv.style.width=prgCounter*5+'px';

  95:  

  96:        if (prgCounter<=intPrc) 

  97:  

  98:            {

  99:  

 100:                 setTimeout( 'setProgress('+intPrc+')',0.1);

 101:  

 102:             }

 103:  

 104:             else if(prgCounter>100)

 105:  

 106:             {

 107:  

 108:                  completed();

 109:  

 110:             }

 111:    }

 112:  

 113: function completed()

 114:  

 115: {

 116:  

 117:   document.body.removeChild(document.getElementById('divContainer'));

 118:  

 119: }

 120:  

 121:         function createNewDiv()

 122:  

 123:         {

 124:  

 125:             newDiv = document.createElement('div');

 126:  

 127:             newDiv.id=strID;

 128:  

 129:             var styleCollection = newDiv.style;

 130:  

 131:             newDiv.className=strClass;

 132:  

 133:             return newDiv;

 134:  

 135:  

 136:  

 137:         }

 138:  

 139:    function resetProgress()

 140:  

 141:      {

 142:  

 143:             prgCounter=0;

 144:  

 145:              strLoadingMessage ='Loading...';

 146:  

 147:      }

 148:  

Default.aspx

   1: <%@ Page Language="C#" Inherits="WebApplication1._Default" %>

   2: <%
   1:  
   2:     //Page Inhertits the LoadNotifier Class 
%>

   3: <!DOCTYPE html >

   4: <html>

   5: <head id="Head1" runat="server">

   6:     <title>Sample WebApplication</title>

   7: </head>

   8: <body style="background-color: #999999; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif;">

   9:     <%
   1:  //Initilize thr Progress Bar and show a message
   2:         initNotify("Welcome to Sample Loading Splasher WebApplication.");
   3:         System.Threading.Thread.Sleep(3000);
   4:     
%>

  10:     <form id="form1" runat="server">

  11:         <span style="font-size: 12pt"><strong><span style="color: #ffffff">Select Your Departure

  12:             Date: </span></strong> </span>

  13:         <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>

  14:         <br />

  15:         <%
   1:  
   2:             // We have achieved a milestone. Let the user know!
   3:             Notify("30", "Loading Departure Calendar Completed ...");
   4:             // Simulate Internet dalay
   5:            System.Threading.Thread.Sleep(2000);
   6:         
%>

  16:         <span style="font-size: 12pt"><span style="color: #ffffff"><strong>Select Your Return

  17:             Date: </strong><span style="color: #000000"> </span></span></span>

  18:         <asp:Calendar ID="Calendar2" runat="server"></asp:Calendar>

  19:         <br />

  20:            <%
   1:  
   2:              Notify("60", "Loading data ...");
   3:              System.Threading.Thread.Sleep(2000);
   4:            
%>

  21:                <span style="font-size: 14pt"><span style="color: #ffffff">Your Recent Flights:</span><strong><span

  22:             style="color: #ffffff"> </span></strong></span>  <br />

  23:         <span style="font-size: 12pt"><span style="color: #ffffff"></span>

  24:  

  25:         </span>

  26:         <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CellPadding="4"

  27:             DataSourceID="XmlDataSource" ForeColor="#333333" GridLines="None" Style="border-left-color: gray;

  28:             border-bottom-color: gray; border-top-style: outset; border-top-color: gray;

  29:             border-right-style: outset; border-left-style: outset; border-right-color: gray;

  30:             border-bottom-style: outset">

  31:             <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />

  32:             <Columns>

  33:  

  34:                 <asp:BoundField DataField="id" HeaderText="id" SortExpression="id" />

  35:  

  36:                 <asp:BoundField DataField="Origin" HeaderText="Origin" SortExpression="Origin" />

  37:  

  38:                 <asp:BoundField DataField="Destination" HeaderText="Destination" SortExpression="Destination" />

  39:  

  40:                 <asp:BoundField DataField="Duration" HeaderText="Duration" SortExpression="Duration" />

  41:  

  42:                 <asp:BoundField DataField="Price" HeaderText="Price" SortExpression="Price" />

  43:  

  44:             </Columns>

  45:  

  46:             <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />

  47:  

  48:             <EditRowStyle BackColor="#999999" />

  49:  

  50:             <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />

  51:  

  52:             <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />

  53:  

  54:             <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />

  55:  

  56:             <AlternatingRowStyle BackColor="White" ForeColor="#284775" />

  57:  

  58:         </asp:GridView>

  59:  

  60:         <asp:XmlDataSource ID="XmlDataSource" runat="server" DataFile="~/Source.xml" XPath="/travel/Itinerary">

  61:  

  62:         </asp:XmlDataSource>

  63:  

  64:         <%
   1:  
   2:  
   3:             Notify("100", "Loading Your Previous Trips Completed.");
   4:  
   5:           System.Threading.Thread.Sleep(1000);
   6:          
%>

  65:     </form>

  66: </body>

  67: </html>

  68:  

点击这儿下载完整示例代码