範例 AJAX 應用程式

  • 發行項

更新：2007 年 11 月

本教學課程建立一個使用 ASP.NET 之 AJAX 功能的基本範例應用程式。您可以閱讀下列簡介文件，詳細了解 ASP.NET 的 AJAX 功能、這些功能所要解決的技術問題，以及重要的 AJAX 元件：

在此教學課程中，您將建置 (Build) 應用程式來顯示 AdventureWorks 範例資料庫的員工資料網頁。這個應用程式會使用 UpdatePanel 控制項，只重新整理已變更的網頁部分，不會發生使用回傳時的網頁閃爍現象。這就是所謂的「網頁局部更新」(Partial-page Update)。範例應用程式也使用 UpdateProgress 控制項，在處理網頁局部更新的同時顯示狀態訊息。

必要條件

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

  • Microsoft Visual Studio 2005 或 Microsoft Visual Web Developer Express 版。

  • 具備 AJAX 能力的 ASP.NET 網站。

  • AdventureWorks 範例資料庫。您可以從 Microsoft 下載中心 (英文) 下載和安裝 AdventureWorks 資料庫 (搜尋 "SQL Server 2005 Samples and Sample Databases (December 2006)")。

建立 ASP.NET 網站

在 ASP.NET 中建立的網站預設已包含 AJAX 功能的支援。

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

  1. 啟動 Visual Studio。

  2. 按一下 [檔案] 功能表上的 [新網站]。

    [新網站] 對話方塊便會顯示。

  3. 請在 [Visual Studio 安裝的範本] 下方，選取 [ASP.NET 網站]。

  4. 輸入位置和語言，然後按一下 [確定]。

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

建立 ASP.NET 網站之後，接著要建立包含 UpdatePanel 控制項的 ASP.NET 網頁。將 UpdatePanel 控制項加入至網頁之前，您必須加入 ScriptManager 控制項。UpdatePanel 控制項依賴 ScriptManager 控制項來管理網頁局部更新。

建立新 ASP.NET Web 網頁

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

    接著會顯示 [加入新項目] 對話方塊。

  2. 選取 [Visual Studio 安裝的範本] 底下的 [Web Form]。

  3. 將新網頁命名為 Employees.aspx，並清除 [將程式碼置於個別檔案中] 核取方塊。

  4. 選取要使用的語言。

  5. 按一下 [加入]。

  6. 切換至 [設計] 檢視

  7. 在工具箱的 [AJAX 擴充功能] 索引標籤中，按兩下 ScriptManager 控制項加入至網頁。

  8. 從工具箱將 UpdatePanel 控制項拖放至 ScriptManager 控制項之下。

將內容加入至 UpdatePanel 控制項

UpdatePanel 控制項會執行網頁局部更新，並識別與網頁其餘部分獨立更新的內容。在這部分的教學課程中，您將加入資料繫結控制項來顯示 AdventureWorks 資料庫中的資料。

將內容加入至 UpdatePanel 控制項

  1. 從工具箱的 [資料] 索引標籤，將 GridView 控制項拖曳至 UpdatePanel 控制項的可編輯區域。

  2. 按一下 [GridView 工作] 功能表上的 [自動格式化]。

  3. 在 [自動格式化] 面板中，選取 [選取配置] 下的 [繽紛]，然後按一下 [確定]。

  4. 在 [GridView 工作] 功能表中，選取 [選擇資料來源] 清單中的 [<新增資料來源>]。

    [資料來源組態] 精靈隨即出現。

  5. 選取 [應用程式要從何處取得資料] 底下的 [資料庫]，然後按一下 [確定]。

  6. 在 [設定資料來源] 精靈的 [選擇資料連接] 步驟中，設定到 AdventureWorks 資料庫的連接，然後按 [下一步]。

  7. 在 [設定 Select 陳述式] 步驟中，選取 [指定自訂 SQL 陳述式或預存程序]，然後按 [下一步]。

  8. 在 [定義自訂陳述式或預存程序] 步驟的 [SELECT] 索引標籤中，輸入下列 SQL 陳述式：

    SELECT FirstName, LastName FROM HumanResources.vEmployee ORDER BY LastName, FirstName

  9. 按一下 [下一步]。

  10. 按一下 [完成]。

  11. 選取 [GridView 工作] 功能表上的 [啟用分頁] 核取方塊。

  12. 儲存變更，然後按 CTRL+F5 在瀏覽器中檢視頁面。

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

將 UpdateProgress 控制項加入至頁面

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

將 UpdateProgress 控制項加入至頁面

  1. 從工具箱的 [AJAX 擴充功能] 索引標籤，將 UpdateProgress 控制項拖曳至網頁，並放在 UpdatePanel 控制項之下。

  2. 選取 UpdateProgress 控制項，然後在 [屬性] 視窗中，將 AssociatedUpdatePanelID 屬性設定為 UpdatePanel1。

    這樣會將 UpdateProgress 控制項與您先前加入的 UpdatePanel 控制項產生關聯。

  3. 在 UpdateProgress 控制項的可編輯區域中，輸入 Getting Employees ....

  4. 儲存變更，然後按 CTRL+F5 在瀏覽器中檢視頁面。

    如果頁面執行 SQL 查詢與傳回資料時發生延遲，UpdateProgress 控制項會顯示您在 UpdateProgress 控制項中輸入的訊息。

將延遲加入至範例應用程式

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

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

將延遲加入至範例應用程式

  1. 在 UpdatePanel 控制項內，選取 GridView 控制項。

  2. 在 [屬性] 視窗中，按一下 [事件] 按鈕。

  3. 按兩下 PageIndexChanged 事件以建立事件處理常式。

  4. 將下列程式碼加入至 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 事件的處理常式會故意造成延遲。實際上，延遲並非由您造成。此延遲是因伺服器流量或需要長時間執行的伺服端程式碼 (例如，需長時間執行的資料庫查詢) 所造成。

  5. 儲存變更，然後按 CTRL+F5 在瀏覽器中檢視頁面。

    因為現在每當您移到新的資料頁面時會有三秒鐘的延遲，您將能看到 UpdateProgress 控制項。

    <%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script >

    Protected Sub GridView1_PageIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs)
        'Include three second delay for example only.
        System.Threading.Thread.Sleep(3000)
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>

    </div>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <asp:GridView ID="GridView1"  AllowPaging="True" CellPadding="4" DataSourceID="SqlDataSource1"
                    ForeColor="#333333" GridLines="None" OnPageIndexChanged="GridView1_PageIndexChanged">
                    <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
                    <RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
                    <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
                    <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
                    <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
                    <AlternatingRowStyle BackColor="White" />
                </asp:GridView>
                <asp:SqlDataSource ID="SqlDataSource1"  ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
                    SelectCommand="SELECT FirstName, LastName FROM HumanResources.vEmployee ORDER BY LastName, FirstName">
                </asp:SqlDataSource>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdateProgress ID="UpdateProgress1" >
            <ProgressTemplate>
                Getting employees...
            </ProgressTemplate>
        </asp:UpdateProgress>
    </form>
</body>
</html>

    <%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script >

    protected void GridView1_PageIndexChanged(object sender, EventArgs e)
    {
        //Include three second delay for example only.
        System.Threading.Thread.Sleep(3000);
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>

    </div>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <asp:GridView ID="GridView1"  AllowPaging="True" CellPadding="4" DataSourceID="SqlDataSource1"
                    ForeColor="#333333" GridLines="None" OnPageIndexChanged="GridView1_PageIndexChanged">
                    <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
                    <RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
                    <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
                    <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
                    <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
                    <AlternatingRowStyle BackColor="White" />
                </asp:GridView>
                <asp:SqlDataSource ID="SqlDataSource1"  ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
                    SelectCommand="SELECT FirstName, LastName FROM HumanResources.vEmployee ORDER BY LastName, FirstName">
                </asp:SqlDataSource>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdateProgress ID="UpdateProgress1" >
            <ProgressTemplate>
                Getting employees...
            </ProgressTemplate>
        </asp:UpdateProgress>
    </form>
</body>
</html>

請參閱

工作

UpdatePanel 控制項簡介

UpdateProgress 控制項簡介

概念

ASP.NET AJAX 概觀

加入 AJAX 和用戶端功能

UpdatePanel 控制項概觀

UpdateProgress 控制項概觀