ASP.NET AJAX的主要架構,Client端(Microsoft AJAX Library)與Server端(ASP.NET AJAX Extensions)

2008-03-16

38291
0
ASP.NET
2008-03-17

最近開始看一些asp.net ajax 的書了....

才知道asp.net ajax主要是分為兩個主要部分

第一是客戶端,第二是伺服器端...如下圖所示

資料來源：http://www.asp.net/AJAX/Documentation/Live/Overview/default.aspx

一般都比較常用Server端的做法來實現ajax功能....

其實也可以透過ajax library來實現ajax功能..但要寫一點javascript語法....呵呵..

小弟做了兩個範例..分別是用一般的做法...拉一拉控制項與利用ajax library所提供的類別庫,並寫點javascript

做出兩個功能完全一樣的範例讓大家比較比較....

1.一般的做法
AjaxUpdate1.aspx

01 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxUpdate1.aspx.cs" Inherits="AjaxUpdate1" %>
02
03 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
04 <html xmlns="http://www.w3.org/1999/xhtml">
05 <head id="Head1" runat="server">
06     <title>AjaxUpdate1</title>
07 </head>
08 <body>
09     <form id="form1" runat="server">
10         <div>
11             <asp:ScriptManager ID="ScriptManager1" runat="server">
12             </asp:ScriptManager>
13             <asp:UpdatePanel ID="UpdatePanel1" runat="server">
14                 <contenttemplate>
15 <asp:Button ID="Button1" runat="server" Text="Update" onclick="Button1_Click" />
16 <br/>
17 <%= DateTime.Now.ToString() %>
18 </contenttemplate>
19             </asp:UpdatePanel>
20             <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
21                 <progresstemplate>
22 Loading...
23 </progresstemplate>
24             </asp:UpdateProgress>
25         </div>
26     </form>
27 </body>
28 </html>
29

AjaxUpdate1.aspx.cs

using System;
02

using System.Collections;
03

using System.Configuration;
04

using System.Data;
05

using System.Linq;
06

using System.Web;
07

using System.Web.Security;
08

using System.Web.UI;
09

using System.Web.UI.HtmlControls;
10

using System.Web.UI.WebControls;
11

using System.Web.UI.WebControls.WebParts;
12

using System.Xml.Linq;
13

public partial class AjaxUpdate1 : System.Web.UI.Page
15

{
16

protected void Page_Load(object sender, EventArgs e)
17

{
18

}
20

protected void Button1_Click(object sender, EventArgs e)
21

{
22

System.Threading.Thread.Sleep(2000);
23

}
24

}

2.使用ajax library的做法
AjaxUpdate2.aspx

01 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxUpdate2.aspx.cs" Inherits="AjaxUpdate2" %>
02
03 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
04 <html xmlns="http://www.w3.org/1999/xhtml">
05 <head id="Head1" runat="server">
06     <title>AjaxUpdate2</title>
07 </head>
08 <body>
09     <form id="form1" runat="server">
10         <div>
11             <asp:ScriptManager ID="ScriptManager1" runat="server">
12             </asp:ScriptManager>
13
14             <script type="text/javascript" language="javascript">
15 Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
16 Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
17
18 //開始更新時,將div內容顯示Loading...,並且顯示div tag
19 function BeginRequestHandler(sender, args)
20 {
21 var elem = args.get_postBackElement();
22 ActivateAlertDiv('visible', 'Msg', 'Loading...');
23 }
24
25 //結束更新時,將div內容清空,並且隱藏div tag
26 function EndRequestHandler(sender, args)
27 {
28 ActivateAlertDiv('hidden', 'Msg', '');
29 }
30 function ActivateAlertDiv(visstring, elem, msg)
31 {
32 var adiv = $get(elem);
33 adiv.style.visibility = visstring;
34 adiv.innerHTML = msg;
35 }
36             </script>
37
38         </div>
39         <asp:UpdatePanel ID="UpdatePanel1" runat="server">
40             <contenttemplate>
41 <asp:Button ID="Button1" runat="server" Text="Update" OnClick="Button1_Click" />
42 <br />
43 <%= DateTime.Now.ToString() %>
44 </contenttemplate>
45         </asp:UpdatePanel>
46         <div id="Msg" />
47     </form>
48 </body>
49 </html>
50

AjaxUpdate2.aspx.cs