逐步解說：建立具備 AJAX 功能的資料應用程式

發行項
08/21/2008

更新：2007 年 11 月

本逐步解說描述如何建立支援 AJAX 的 Web 應用程式，使其能以待辦事項或工作清單的方式運作。它能協助您建立用以建立、管理和刪除清單的基本使用者介面，以及這些清單中的項目基本使用者介面。所有的插入、更新、刪除、排序與分頁作業都是在使用 AJAX 的 UpdatePanel 控制項中執行。

您可以使用 UpdatePanel 控制項，在頁面中啟用非同步回傳。根據預設，ASP.NET 會在發生回傳時重新整理整個頁面。但是，當您使用 UpdatePanel 控制項來建立非同步回傳時，只有 UpdatePanel 控制項內的頁面項目會變更。這種機制能讓頁面更機動且執行速度更快，同時提供使用者更豐富的使用經驗。

本逐步解說所述的工作包括下列各項：

建立 SQL 資料庫並加入資料。
將 LinqDataSource 控制項加入網頁。
將 [LINQ to SQL 類別] 加入檔案。
使用 ListView 控制項來顯示、編輯和刪除資料。
使用 LinqDataSource 控制項並透過 Language-Integrated Query (LINQ) 來連接至資料庫。如需詳細資訊，請參閱 Language-Integrated Query (LINQ)。
使用 UpdatePanel 控制項將 AJAX 功能加入至網頁。

必要條件

若要完成此逐步解說，您需要下列項目：

Microsoft Visual Studio 2008 或 Visual Web Developer 2008 Express 版。如需下載資訊，請參閱 Visual Studio 開發人員中心網站。
在電腦上安裝 SQL Server Express Edition。如果已經安裝 SQL Server，則只需稍微調整某些程序，您就可以改用 SQL Server。

建立網站

在這部分的逐步解說中，您要建立網站並在其中加入網頁。在下面一節，您將連接到資料庫。如果您已經建立了網站 (例如，遵循逐步解說：在 Visual Web Developer 中建立基本 Web 網頁中的步驟)，就可以將該網站運用在本逐步解說中。否則，請依照下列步驟建立新的網站。

若要建立新的檔案系統網站

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

[新網站] 對話方塊便會顯示。
按一下 [Visual Studio 安裝的範本] 底下的 [ASP.NET 網站]。
按一下 [位置] 方塊中的 [檔案系統]，輸入您要用來保存網站網頁的資料夾名稱。
按一下 [語言] 清單中的 [Visual Basic] 或 [Visual C#]，然後按一下 [確定]。

注意事項：

您選取的程式語言將成為網站的預設值，不過您可以為每個網頁分別設定程式語言。

Visual Web Developer 會建立資料夾和名為 Default.aspx 的新網頁。

注意事項：
您選取的程式語言將成為網站的預設值，不過您可以為每個網頁分別設定程式語言。

建立新的 SQL Server 資料庫

現在您已經有網站，接下來您會建立一個資料庫，並在 [伺服器總管] 中加入資料庫的參考 (在 Visual Web Developer 2008 Express 版中，[伺服器總管] 稱為 [資料庫總管])。當您將資料庫加入 [伺服器總管] 時，可以使用 Visual Studio 來加入資料表、預存程序 (Stored Procedure)、檢視等等。您也可以手動或使用 [查詢產生器] 視窗，透過圖形化方式檢視資料表資料或建立自己的查詢。

若要將資料庫加入至專案

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

接著會顯示 [加入新項目] 對話方塊。
選取 [SQL 資料庫] 並將資料庫命名為 Tasks.mdf，然後按一下 [確定]。
當 Visual Studio 詢問您是否要將資料庫儲存到 App_Data 資料夾時，按一下 [是]。

為資料庫建立結構描述和範例資料

您可以使用資料庫設計和編輯功能，為負責儲存工作項目的新資料表建立結構描述。

若要為資料庫建立結構描述和範例資料

開啟 [方案總管] 中的 [App_Data] 資料夾，並按兩下 Tasks.mdf。

[伺服器總管] (或 [資料庫總管]) 中的 Tasks 資料庫樹狀階層結構隨即顯示。
以滑鼠右鍵按一下 [資料表] 資料夾，然後按一下 [加入新的資料表]。
在資料庫資料表編輯器中，於資料表中建立下列資料行：

資料行名稱

資料型別

屬性

taskId

int

Allow Nulls: No

taskName

nvarchar(50)

Allow Nulls: No

dateCreated

datetime

Allow Nulls: No

isComplete

bit

Allow Nulls: No
以滑鼠右鍵按一下包含 taskid 的資料列，然後按一下 [設定主索引鍵]。
在已選取 taskid 資料列的情況下開啟 [資料行屬性] 索引標籤中的 [識別規格] 區段，並將 [(為識別)] 設定為 [是]。
儲存資料表，並將它命名為 TasksList。
以滑鼠右鍵按一下 [伺服器總管] 中的資料表，然後按一下 [顯示資料表資料]。

視窗隨即出現，方便您檢視和加入資料。
將四或五筆記錄加入到資料表，然後關閉資料庫設計工具。

您不需要指定 taskid 的值，因為它是識別資料行，會自動為自己指派值。您必須為 isComplete 欄位指定 False 或 True。

資料行名稱	資料型別	屬性
taskId	int	Allow Nulls: No
taskName	nvarchar(50)	Allow Nulls: No
dateCreated	datetime	Allow Nulls: No
isComplete	bit	Allow Nulls: No

建立資料存取控制項

在本節中，您將使用 LinqDataSource 控制項並建立代表資料庫實體的類別。所建立的控制項和類別將會在本逐步解說中做為資料存取層來使用。

LinqDataSource 控制項透過 ASP.NET 資料來源控制項架構，將 Language Integrated Query (LINQ) 公開給 Web 程式開發人員。LinqDataSource 控制項可以建立用以選取、插入、更新和刪除資料庫中物件的程式碼。LINQ 會將物件導向程式設計的原則套用至關聯式資料。它提供統一的程式撰寫模型，來查詢及更新來自不同資料來源類型的資料，並將資料功能直接延伸到 C# 及 Visual Basic 語言。如需有關 LINQ 的詳細資訊，請參閱Language-Integrated Query (LINQ)。

將 Tasks 資料庫對應至 SQL 資料內容物件

若要開始建立資料存取層，請將型別資料集加入至專案。

若要建立 TasksList 資料表的類別

如果網站沒有 App_Code 資枓夾，請以滑鼠右鍵按一下 [方案總管] 中的網站名稱，然後按一下 [加入 ASP.NET 資料夾]，再按一下 [App_Code]。
以滑鼠右鍵按一下 [App_Code] 資料夾，然後按一下 [加入新項目]。
選取 [Visual Studio 安裝的範本] 底下的 [LINQ to SQL 類別]，將檔案重新命名為 Tasks.dbml，然後按一下 [ 加入]。

[物件關聯式設計工具] 隨即出現。
在 [伺服器總管] 中，將 TasksList 資料表拖曳至 [物件關聯式設計工具] 視窗。
儲存 Tasks.dbml 檔案。

在您儲存檔案時，Visual Studio 會在 Tasks.dbml 底下的 [App_Code] 資料夾中建立兩個檔案。第一個檔案是 Tasks.dbml.layout。第二個檔案是 Tasks.designer.cs 或 Tasks.designer.vb (視您在建立 Tasks.dbml 檔案時所選取的語言而定)。
開啟 [方案總管] 中的 Tasks.designer.cs 或 Tasks.designer.vb 檔案。

請注意，程式碼包含名為 TasksDataContext 和 TasksList 的類別。TasksDataContext 類別代表資料庫，而 TasksList 類別則代表資料庫資料表。TasksDataContext 類別的無參數建構函式 (Constructor) 會從 Web.config 檔中讀取連接字串 (Connection String)。
開啟 Web.config 檔。

請注意，Tasks.mdf 資料庫的連接字串已加入 connectionStrings 項目中。
關閉類別檔、[物件關聯式設計工具] 視窗，以及 Web.config 檔。

建立和設定 LinqDataSource 控制項

現在您已有資料庫資料表和代表資料庫實體的類別，可以在 ASP.NET Web 網頁使用 LinqDataSource 控制項來存取資料庫。

建立和設定 LinqDataSource 控制項

開啟或切換至 Default.aspx 頁面。
切換至 [設計] 檢視。
將 LinqDataSource 控制項拖曳至網頁。

您可以將 ID 屬性保留為 LinqDataSource1。
按一下 [LinqDataSource 工作] 智慧標籤面板中的 [設定資料來源]。

注意事項：

如果沒有顯示智慧標籤面板，以滑鼠右鍵按一下 LinqDataSource 控制項，再按一下 [顯示智慧標籤]。
在 [選擇您的內容物件] 清單中，選取 TasksDataContext，然後按 [下一步]。
在 [資料表] 清單中，選取 [TasksLists(Table<TasksList>)]，然後按一下 [完成]。
從 [LinqDataSource 工作] 功能表中，依序選取 [啟用 Delete]、[啟用 Insert] 和 [啟用 Update]。

請注意，您不需要指定任何選取資料的資料庫命令。
儲存網頁。

注意事項：
如果沒有顯示智慧標籤面板，以滑鼠右鍵按一下 LinqDataSource 控制項，再按一下 [顯示智慧標籤]。

使用資料來源控制項

在本節中，您將把控制項加入至使用 LINQ to SQL 類別檔案的網頁中，以將資料庫資料表對應至類別。您將同時使用 LinqDataSource 控制項來建立基本的資料應用程式。

您將加入 ListView 控制項，顯示來自 SQL Server 資料庫的資料。接著，您將加入 DropDownList 控制項，以便篩選出現在 ListView 控制項中的資料。在逐步解說的稍後階段，您將把控制項放置到 UpdatePanel 控制項中以加入非同步回傳能力。

使用 ListView 控制項顯示資料

ListView 控制項非常適合用來顯示任何結構重複的資料，這一點與 DataList 和 Repeater 控制項十分類似；但跟這些控制項不同的是，除了排序和分頁之外，ListView 控制項還可以支援編輯、插入和刪除作業。

您將加入 ListView 控制項來顯示所有工作。稍後您將加入下拉式清單，以便您篩選資料。ListView 控制項可格式化資料的呈現方式，並顯示可用來編輯與更新內容，或是插入新內容的按鈕。

若要將 ListView 控制項加入至頁面

開啟或切換到您加入 LinqDataSource 控制項的網頁。
從 [工具列] 的 [資料] 索引標籤，將 ListView 控制項拖曳到網頁上。
在 [ListView 工作] 功能表上的 [選擇資料來源] 清單中，選取 LinqDataSource1。

這樣會將 ListView 繫節至您先前與逐步解說中設定的 LinqDataSource 控制項。
按一下 [ListView 工作] 智慧標籤面板上的 [設定 ListView]。
在 [設定 ListView] 對話方塊中，依序選取 [啟用編輯]、[啟用插入]、[啟用刪除] 和 [啟用分頁]。
按一下 [確定]。
儲存網頁。

加入 DropDownList 控制項以篩選資料

您可以建立一個可讓您選取要顯示的工作的下拉式清單，以便篩選顯示在 ListView 控制項中的資料。例如，您將建立一個可顯示作用中工作或是已完成工作的清單。

您可以將程式碼放置在 ListView 控制項中來自動產生 Where 子句，以便只顯示符合 DropDownList 控制項中選取範圍的記錄。

若要加入控制項來篩選資料

開啟或切換至 Default.aspx 頁面，並切換至 [原始碼] 檢視。

將下列標記加入至 form 項目內和 ListView 控制項上：

<span id="filter">
  Current List Filter: 
  <asp:DropDownList ID="DropDownList1" 
    AutoPostBack="true" 
    >
  <asp:ListItem Text="Active" Value="False" />
  <asp:ListItem Text="Completed" Value="True" />
  </asp:DropDownList>
</span>
<hr id="separator" />

在 LinqDataSource 控制項中，將 AutoGenerateWhereClause 屬性設定為 true，如下列範例所示：

<asp:LinqDataSource ID="LinqDataSource1"  
  ContextTypeName="TasksDataContext" 
  TableName="TasksLists" 
  EnableDelete="True" 
  EnableInsert="True" 
  EnableUpdate="True" 
  AutoGenerateWhereClause="true" >

將下列 Where 參數標記加入至 LinqDataSource 控制項的開頭和結尾標籤之中。

<WhereParameters>
  <asp:ControlParameter 
    Name="isComplete" 
    ControlID="DropDownList1" 
    Type="Boolean" />
</WhereParameters>

儲存網頁。

現在您可以測試網頁，以確定它會顯示所選取的資料。

若要測試網頁

按 CTRL+F5 於瀏覽器中顯示此頁。
從下拉式清單中選取 [已完成]。

如果您有標記為完成的工作，則您只會看到這些工作。

將 AJAX 功能加入至網頁

在本節中，您要將 ScriptManager 控制項加入至網頁以啟用 ASP.NET 的 AJAX 功能。接著，您要將 UpdatePanel 控制項加入至網頁，這可讓您不需要回傳整個頁面，即可在 ListView 控制項中執行工作。

加入 ScriptManager 控制項

若要使用 UpdatePanel 控制項之類的 ASP.NET AJAX 功能，您必須將 ScriptManager 控制項加入至網頁。

若要將 ScriptManager 控制項加入至頁面

開啟或切換至 Default.aspx 頁面，並切換至 [原始碼] 檢視。
在工具箱的 [AJAX 擴充功能] 索引標籤中，按兩下 ScriptManager 控制項，將其加入至 form 項目內的頁面。

將 ListView 控制項放置到 UpdatePanel 控制項

在此範例中，您要將 ListView 控制項放置到 UpdatePanel 控制項中。變更 ListView 控制項不需要完整頁面的回傳。

若要將 ListView 控制項放置到 UpdatePanel 控制項

在 Default.aspx 頁面中，將下列標記直接加到開頭的 <form> 標籤之後：
```
<asp:UpdatePanel ID="UpdatePanel1" >
<ContentTemplate>
```
將下列程式碼直接加到結束的 </form> 標籤之前：
```
</ContentTemplate>
</asp:UpdatePanel>
```
此程式碼會將 UpdatePanel 控制項放置在 ListView 控制項和 DropDownList 控制項周圍。
儲存網頁。

您現在可以再測試一次網頁。

若要測試網頁

按 CTRL+F5 在瀏覽器中檢視頁面。

請注意，當您從清單篩選器中選取 [作用中] 或 [已完成]，不會發生完整網頁回傳情況，而且 ListView 會穩定不閃動地顯示更新的資料清單。

後續步驟

本逐步解說示範如何將 ListView 加入至使用 LinqDataSource 控制項的網頁中，以加入、修改與刪除資料庫的工作。接著，您將使用 UpdatePanel 控制項來加入 AJAX 功能。

您可以在逐步解說：資料繫結至自訂的商務物件和逐步解說：在 Visual Studio 中建立主從式 Web 網頁等逐步解說中找到有關如何使用資料庫的詳細資訊。

請參閱

概念

LinqDataSource Web 伺服器控制項概觀

ASP.NET AJAX 概觀

網頁局部呈現概觀

共用方式為

逐步解說：建立具備 AJAX 功能的資料應用程式

必要條件

建立網站

若要建立新的檔案系統網站

建立新的 SQL Server 資料庫

若要將資料庫加入至專案

為資料庫建立結構描述和範例資料

若要為資料庫建立結構描述和範例資料

建立資料存取控制項

將 Tasks 資料庫對應至 SQL 資料內容物件

若要建立 TasksList 資料表的類別

建立和設定 LinqDataSource 控制項

建立和設定 LinqDataSource 控制項

使用資料來源控制項

使用 ListView 控制項顯示資料

若要將 ListView 控制項加入至頁面

加入 DropDownList 控制項以篩選資料

若要加入控制項來篩選資料

若要測試網頁

將 AJAX 功能加入至網頁

加入 ScriptManager 控制項

若要將 ScriptManager 控制項加入至頁面

將 ListView 控制項放置到 UpdatePanel 控制項

若要將 ListView 控制項放置到 UpdatePanel 控制項

若要測試網頁

後續步驟

請參閱

概念

其他資源