逐步解說：建立具備 AJAX 功能的網站

發行項
08/21/2008

更新：2007 年 11 月

本逐步解說會建立具有網頁的基本 ASP.NET 網站，以說明包含在 Visual Studio 內 ASP.NET AJAX Library 的某些功能。您將建置顯示網頁的應用程式，而網頁上的員工資料來自 AdventureWorks 範例資料庫。應用程式使用 UpdatePanel 控制項只會重新整理已發生變更的局部網頁，不會在回傳時發生網頁閃爍。這稱為「網頁局部更新」。範例應用程式也使用 UpdateProgress 控制項，在處理網頁局部更新時顯示狀態訊息。

必要條件

若要在自己的開發環境中實作這些程序，您需要：

Microsoft Visual Studio 2005 或 Microsoft Visual Web Developer Express 版。
AdventureWorks 範例資料庫。您可以從 Microsoft 下載中心下載並安裝 AdventureWorks 資料庫。(搜尋 "SQL Server 2005 Samples and Sample Databases (December 2006)")。

建立具備 ASP.NET AJAX 能力的網站

您可以使用已安裝的範本建立具備 ASP.NET AJAX 能力的網站。

建立具備 ASP.NET AJAX 能力的網站

在 Visual Studio 中，按一下 [檔案] 功能表上的 [新網站]。

[新網站] 對話方塊便會顯示。
在 [Visual Studio 安裝的範本] 下方，選取 [具備 ASP.NET AJAX 能力的網站]。
輸入位置和語言，然後按一下 [確定]。

將 UpdatePanel 控制項加入至 ASP.NET Web 網頁

當您建立具備 AJAX 能力的網站之後，可以建立包含 UpdatePanel 控制項的 ASP.NET Web 網頁。加入 UpdatePanel 控制項至該網頁之前，您必須加入 ScriptManager 控制項。UpdatePanel 控制項依賴 ScriptManager 控制項來管理網頁局部更新。

建立新 ASP.NET Web 網頁

在 [方案總管] 中，以滑鼠右鍵按一下網站名稱，然後再按一下 [加入新項目]。

接著會顯示 [加入新項目] 對話方塊。
在 [Visual Studio 安裝的範本] 下方，選取 [Web Form]。
將新網頁命名為 Employees.aspx，並清除 [將程式碼置於個別檔案中] 核取方塊。
選取要使用的語言。
然後按一下 [加入]。
切換至 [設計] 檢視。
在工具箱的 [AJAX 擴充功能] 索引標籤中，按兩下 ScriptManager 控制項將它加入網頁。
從工具箱拖曳 UpdatePanel 控制項並將它放到 ScriptManager 控制項下方。

加入內容至 UpdatePanel 控制項

UpdatePanel 控制項會執行網頁局部更新，並識別網頁其餘部分獨立更新的內容。在逐步解說的這個部分中，您將加入資料繫結控制項，此控制項顯示來自 AdventureWorks 資料庫的資料。

加入內容至 UpdatePanel 控制項

從工具箱的 [資料] 索引標籤，將 GridView 控制項拖曳至 UpdatePanel 控制項的可編輯區域。
按一下 [GridView 工作] 功能表上的 [自動格式化]。
在 [自動格式化] 面板中，選取 [選取配置] 下的 [繽紛]，然後按一下 [確定]。
在 [GridView 工作] 功能表中，選取 [選擇資料來源] 清單中的 [<新增資料來源>]。

資料來源組態精靈隨即顯示。
在 [應用程式要從何處取得資料] 底下，選取 [資料庫]，然後按一下 [確定]。
在設定資料來源精靈的 [選擇資料連接] 步驟中，設定 AdventureWorks 資料庫的連接，然後按一下 [下一步]。
在 [設定 Select 陳述式] 步驟中，選取 [指定自訂 SQL 陳述式或預存程序]，然後按一下 [下一步]。
在 [定義自訂陳述式或預存程序] 步驟的 [SELECT] 索引標籤中，輸入下列 SQL 陳述式：
```
SELECT FirstName, LastName FROM HumanResources.vEmployee ORDER BY LastName, FirstName
```
按 [下一步]。
按一下 [完成]。
選取 [GridView 工作] 功能表上的 [啟用分頁] 核取方塊。
儲存變更，然後按 CTRL+F5 在瀏覽器中檢視網頁。

請注意，當您選取不同的資料網頁時，網頁不會閃爍。這是因為網頁並非每次都執行回傳並更新整個網頁。

加入 UpdateProgress 控制項至網頁

要求 UpdatePanel 控制項的新內容時，UpdateProgress 控制項會顯示狀態訊息。

加入 UpdateProgress 控制項至網頁

從工具箱的 [AJAX 擴充功能] 索引標籤，拖曳 UpdateProgress 控制項至網頁，並將它放在 UpdatePanel 控制項下方。
選取 UpdateProgress 控制項，然後在 [屬性] 視窗中，將 AssociatedUpdatePanelID 屬性設定為 UpdatePanel1。

這樣會將 UpdateProgress 控制項與您先前加入的 UpdatePanel 控制項關聯。
在 UpdateProgress 控制項的可編輯區域中，輸入 Getting Employees ....
儲存變更，然後按 CTRL+F5 在瀏覽器中檢視網頁。

若網頁傳回 SQL 查詢與傳回資料時有延遲，UpdateProgress 控制項會顯示您輸入到 UpdateProgress 控制項的訊息。

加入延遲至範例應用程式

如果您的應用程式更新每個資料網頁的速度很快，您可能在網頁上看不到 UpdateProgress 控制項的內容。UpdateProgress 控制項支援 DisplayAfter 屬性，可讓您在顯示控制項之前設定延遲。這樣可避免如果更新迅速發生，控制項在瀏覽器中發生閃爍的情況。根據預設，延遲是設定為 500 毫秒 (0.5 秒)，表示若更新時間少於 0.5 秒，UpdateProgress 控制項將不會顯示。

在開發環境中，您可以在應用程式中加入人工延遲，以確保 UpdateProgress 控制項可如預期般運作。這是選擇性步驟，而且只適用於測試您的應用程式。

加入延遲至範例應用程式

在 UpdatePanel 控制項內，選取 GridView 控制項。
在 [屬性] 視窗中，按一下 [事件] 按鈕。
按兩下 PageIndexChanged 事件以建立事件處理常式。

將下列程式碼加入至 PageIndexChanged 事件處理常式，這樣可用手動方式建立三秒鐘的延遲：

'Include three second delay for example only.
System.Threading.Thread.Sleep(3000)

//Include three second delay for example only.
System.Threading.Thread.Sleep(3000);

注意事項：
在此逐步解說中，PageIndexChanged 事件的處理常式會故意造成延遲。實際上，延遲並非由您造成。此延遲是因伺服端傳輸或需要長時間執行的伺服端程式碼 (例如，需長時間執行的資料庫查詢) 所造成。