講師 : 紀天佑

AJAX

講師 : 紀天佑

Overview

AJAX 概觀及安裝 UpdatePanel 的介紹 UpdateProgress 與 PageRequestManager 的介紹 ScriptManager 與 Timer Control 的介紹 Toolkits 安裝 及 介紹

講師 : 紀天佑

Lesson: AJAX 概觀及安裝

何謂 AJAX

典範站台介紹 Asp.Net AJAX 安裝

講師 : 紀天佑

何謂 AJAX

AJAX 全稱為「 Asynchronous JavaScript and XML 」（非同步 JavaScript 和 XML ），是一種創建互動式網頁應用的網頁開發技術。

Jesse James Garrett 提出 使用 XHTML+CSS 來表示信息； 使用 JavaScript 操作 DOM （ Document Object Model ）進

行動態顯示及交互； 使用 XML 和 XSLT 進行數據交換及相關操作； 使用 XMLHttpRequest 對象與 Web 伺服器進行非同步數

據交換； 使用 JavaScript 將所有的東西綁定在一起。

講師 : 紀天佑

傳統網頁模式與 AJAX 比較

圖片引自： http://www.adaptivepath.com/publications/essays/archives/000385.php

講師 : 紀天佑

傳統網頁模式與 AJAX 比較

圖片引自： http://msdn.microsoft.com/msdnmag/issues/07/09/CuttingEdge/default.aspx?loc=zx

講師 : 紀天佑

同步與非同步網頁模式比較

圖片引自： http://www.adaptivepath.com/publications/essays/archives/000385.php

講師 : 紀天佑

典範站台介紹

http://maps.live.com/

http://preview.local.live.com/

講師 : 紀天佑

Asp.Net AJAX 安裝

http://ajax.asp.net/

ASPAJAXExtSetup.msi

1.36 Mb

講師 : 紀天佑

Lesson: UpdatePanel 的介紹

Partial-Page Rendering Scenarios

Server Controls for Partial-Page Updates

UpdatePanel Control Overview

Practice ： Ajax Hello World

UpdateMode & Triggers

Practice ： UpdatePanel

Programmatically UadatePanel

Practice ： Programmatically

講師 : 紀天佑

Partial-Page Rendering Scenarios

Improve the user experience with Web pages that are richer, that are more responsive to user actions, and that behave like traditional client applications.

Reduce full-page refreshes and avoid page flicker.

Enable cross-browser compatibility without writing client script.

Perform AJAX-style client/server communication without writing client script.

Use the controls and components from the ASP.NET AJAX Control Toolkit.

Develop custom Microsoft ASP.NET AJAX controls

講師 : 紀天佑

Server Controls for Partial-Page Updates

ScriptManager control

提供網頁 Partial Rendering 能力的控制項

每個 AJAX 頁面必需要 ( 也只需要 ) 一 ScriptManager

UpdatePanel controls

Partial Rendering 的空間 Ｗ eb.config

%ProgramFiles%\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\v1.0.61025\Web.config

講師 : 紀天佑

UpdatePanel Control Overview

講師 : 紀天佑

Practice ： Ajax Hello World

ContentTemplate

Server Time

Calendar

講師 : 紀天佑

UpdateMode, Triggers and Nested UpdatePanel

UpdateMode

Always

Conditional

Triggers

AsyncPostBackTrigger

PostBackTrigger

Nested UpdatePanel Controls

講師 : 紀天佑

Practice ： UpdatePanel

UpdateMode

UpdateMode

Nested UpdatePanel

講師 : 紀天佑

Programmatically UadatePanel

Refreshing an UpdatePanel Programmatically

UpdatePanel.Update();

Creating UpdatePanel Controls Programmatically

ContentTemplateContainer.Controls.Add();

講師 : 紀天佑

Practice ： Programmatically

Update UpadtePanel

Add Control

講師 : 紀天佑

Non-work Controls in UpdatePanel

Validators

http://blogs.msdn.com/mattgi/archive/2007/01/23/asp-net-ajax-validators.aspx

FileUpload

PostBackTrigger

講師 : 紀天佑

Lesson: UpdateProgress and PageRequestManager

UpdateProgress Control Overview

Practice ： UpdateProgress

PageRequestManager Class Overview

Practice ： PageRequestManager

講師 : 紀天佑

UpdateProgress Control Overview

ProgressTemplate

AssociatedUpdatePanel

DisplayAfter

講師 : 紀天佑

Practice ： UpdateProgress

AssociatedUpdatePanel

DisplayAfter

講師 : 紀天佑

PageRequestManager Class Overview

Abort

Sys.WebForms.PageRequestManager.getInstance().abortPostBack();

initializeRequest

beginRequest

pageLoading

pageLoaded

endRequest

Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequest);

講師 : 紀天佑

Practice ： PageRequestManager

Abort

beginRequest

pageLoaded

講師 : 紀天佑

Lesson: ScriptManager 與 Timer Control 的介紹

ScriptManager Control Overview

Timer Control Overview

講師 : 紀天佑

ScriptManager Control Overview

ScriptManager1.RegisterAsyncPostBackControl

RegisterStartUpScript

ScriptManager.RegisterStartupScript(this.UpdatePanel1, this.GetType(), "UpdatePanel1", "alert(‘hello’)", true);

Calling Web Service Methods

[ScriptService] <asp:ServiceReference path="WebService.asmx" />

Calling Page Methods

[WebMethod] EnablePagemethods = true

講師 : 紀天佑

Practice ： ScriptManager

RegisterStartUpScript

Calling Web Service

講師 : 紀天佑

Timer Control Overview

Interval

Tick

Triggers

講師 : 紀天佑

Practice ： Timer Control

Interval

Tick

Triggers

Flickr Slide Show

講師 : 紀天佑

Lesson: Toolkits 安裝 及 介紹

下載位置

http://www.codeplex.com/AtlasControlToolkit/Project/FileDownload.aspx?DownloadId

=7711

控置項介紹

http://www.ithome.com.tw/itadm/article.php?c=42548&s=2

講師 : 紀天佑

Review

AJAX

UpdatePanel

UpdateProgress

PageRequestManager

ScriptManager

Timer Control

Toolkits