利用ASP.NET AJAX的UpdateProgress控制項來達到載入網頁資料等待時的Loading...效果
此篇主要介紹如何使用ASP.NET AJAX的UpdateProgress控制項
來達到載入網頁資料時有Loading...的效果
可以分為兩種方式來呈現
1.純文字(Loading...)效果
2.圖片.Gif檔(Loading...)效果
C#範例(為了方便模擬載入大量資料的情形，使用System.Threading.Thread.Sleep(3000);這個方式先讓程式睡一下)
Default.aspx
01 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
02
03 <%@ Register Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
04 Namespace="System.Web.UI" TagPrefix="asp" %>
05 <%@ Register Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
06 Namespace="System.Web.UI.WebControls" TagPrefix="asp" %>
07 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
08 <html xmlns="http://www.w3.org/1999/xhtml">
09 <head id="Head1" runat="server">
10 <title>Untitled Page</title>
11 </head>
12 <body>
13 <form id="form1" runat="server">
14 <asp:ScriptManager ID="ScriptManager1" runat="server" />
15 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
16 <ContentTemplate>
17 <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Loading" />
18 </ContentTemplate>
19 </asp:UpdatePanel>
20 <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
21 <ProgressTemplate>
22 Loading...
23 </ProgressTemplate>
24 </asp:UpdateProgress>
25 <asp:UpdateProgress ID="UpdateProgress2" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
26 <ProgressTemplate>
27 <img src="images/loading.gif" />
28 </ProgressTemplate>
29 </asp:UpdateProgress>
30 </form>
31 </body>
32 </html>
33
02
03 <%@ Register Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
04 Namespace="System.Web.UI" TagPrefix="asp" %>
05 <%@ Register Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
06 Namespace="System.Web.UI.WebControls" TagPrefix="asp" %>
07 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
08 <html xmlns="http://www.w3.org/1999/xhtml">
09 <head id="Head1" runat="server">
10 <title>Untitled Page</title>
11 </head>
12 <body>
13 <form id="form1" runat="server">
14 <asp:ScriptManager ID="ScriptManager1" runat="server" />
15 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
16 <ContentTemplate>
17 <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Loading" />
18 </ContentTemplate>
19 </asp:UpdatePanel>
20 <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
21 <ProgressTemplate>
22 Loading...
23 </ProgressTemplate>
24 </asp:UpdateProgress>
25 <asp:UpdateProgress ID="UpdateProgress2" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
26 <ProgressTemplate>
27 <img src="images/loading.gif" />
28 </ProgressTemplate>
29 </asp:UpdateProgress>
30 </form>
31 </body>
32 </html>
33
Default.aspx.cs
01 
using System;
02
using System.Data;
03using System.Configuration;
04using System.Web;
05using System.Web.Security;
06using System.Web.UI;
07using System.Web.UI.WebControls;
08using System.Web.UI.WebControls.WebParts;
09
using System.Web.UI.HtmlControls;
10
11public partial class _Default : System.Web.UI.Page
12{
13
protected void Page_Load(object sender, EventArgs e)
14
{
15
}
16 protected void Button1_Click(object sender, EventArgs e)
17 {
18 System.Threading.Thread.Sleep(3000);
19 }
20}
21
using System;
using 02
using System.Data;03
using System.Configuration;04
using System.Web;05
using System.Web.Security;06
using System.Web.UI;07
using System.Web.UI.WebControls;08
using System.Web.UI.WebControls.WebParts;09
using System.Web.UI.HtmlControls;10
11
public partial class _Default : System.Web.UI.Page12
{13
protected void Page_Load(object sender, EventArgs e)14
{
15
}16
protected void Button1_Click(object sender, EventArgs e)17
{18
System.Threading.Thread.Sleep(3000);19
}20
}21
