逐步解說：具有 Visual Studio 資料元件的資料繫結 Web 網頁

更新：2007 年 11 月

許多 Web 應用程式是使用多層建置，且在中介層 (Middle Tier) 中有一或多個將資料存取與商務邏輯結合在一起的元件。本逐步解說會顯示如何在網站中建置資料存取元件，並將 Web 伺服器控制項 (GridView 控制項) 繫結至由元件所管理的資料。資料元件會與 Microsoft SQL Server 資料庫互動，而且可以讀取和寫入資料。

本逐步解說將說明的工作包括下列項目：

• 建立可以讀取和寫入資料的元件

• 將資料元件做為 Web 網頁上的資料來源來參考

• 將控制項繫結至由資料元件所傳回的資料

• 使用資料元件讀取和寫入資料

必要條件

若要完成這個逐步解說，您必須進行下列步驟：

• 存取 SQL Server Northwind 資料庫。如需下載並安裝 SQL Server 範例 Northwind 資料庫的詳細資訊，請參閱 Microsoft SQL Server 網站上的安裝範例資料庫。

  注意事項：
  如果您需要如何登入執行 SQL Server 之電腦的相關資訊，請聯繫伺服器管理員。

• Microsoft Data Access Components (MDAC) 2.7 (含) 以後版本。

  如果使用的是 Microsoft Windows XP 或 Windows Server 2003，您就會已經有了 MDAC 2.7。不過，如果您是使用 Microsoft Windows 2000，可能需要升級電腦中已安裝的 MDAC 版本。若要下載目前的 MDAC 版本，請參閱 Data Access and Storage Developer Center。

建立網站

如果您已經完成逐步解說：在 Visual Web Developer 中建立基本 Web 網頁中的步驟，在 Visual Web Developer 中建立好網站，便可以使用該網站並跳到下一章節。否則，依照下列這些步驟建立新的網站和 Web 網頁。

若要建立檔案系統網站

1. 開啟 Visual Web Developer。

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

   [新增網站] 對話方塊隨即出現。

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

4. 在最左邊的 [位置] 清單中，按一下 [檔案系統]，然後在最右邊的 [位置] 文字方塊中，輸入您要用來保留網站之網頁的資料夾名稱。

   例如，輸入資料夾名稱 C:\WebSites\ComponentSample。

5. 在 [語言] 清單中，按一下您想要操作的程式語言。

6. 按一下 [確定]。

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

建立資料存取元件

在本逐步解說中，您會使用精靈來產生可在 Northwind 資料庫中讀取和寫入資料的元件。該元件包含描述您所需資料的結構描述檔 (.xsd)，以及將用來讀取和寫入資料的方法。您將不用撰寫任何程式碼。在執行階段，.xsd 檔會編譯成可執行您在精靈中所指定之工作的組件。

若要建立資料存取元件

1. 如果網站還沒有 App_Code 資料夾，請執行下列步驟：

   1. 在 [方案總管] 中，以滑鼠右鍵按一下網站的名稱。

   2. 指向 [加入資料夾]，然後按一下 [App_Code 資料夾]。

2. 以滑鼠右鍵按一下 App_Code 資料夾，然後按一下 [加入新項目]。

   [加入新項目] 對話方塊隨即出現。

3. 在 [Visual Studio 安裝的範本] 底下，按一下 [資料集]。

4. 在 [名稱] 方塊中，輸入 EmployeesObject，然後按一下 [加入]。

   [TableAdapter 組態] 精靈便會顯示。

5. 按一下 [新增連接]。

6. 如果出現 [選擇資料來源] 對話方塊，請按一下 [Microsoft SQL Server]，然後按一下 [繼續]。

7. 在 [伺服器名稱] 方塊中，輸入執行 SQL Server 之電腦的名稱。

8. 對於登入認證，請選取適合存取 SQL Server 資料庫的選項 (整合式安全性或特定 ID 和密碼)，並在必要時輸入使用者名稱和密碼。

   • 如果您指定明確認證，請選取 [儲存我的密碼] 核取方塊。

9. 按一下 [選取或輸入資料庫名稱]，然後輸入 Northwind。

10. 按一下 [測試連接]，然後在您確定連接正常運作時，按一下 [確定]。

    [TableAdapter 組態] 精靈便會顯示，其中已填入連接資訊。

11. 按一下 [下一步]。

    可讓您選擇將連接字串 (Connection String) 儲存在組態檔中的頁面便會顯示。

12. 選取 [是，將這個連接儲存為] 核取方塊，然後按 [下一步]。

    您可以保留預設的連接字串名稱。

    可讓您選擇使用 SQL 陳述式或預存程序 (Stored Procedure) 的頁面便會顯示。

13. 按一下 [使用 SQL 陳述式]，然後按 [下一步]。

    使用預存程序有某些優點，包括效能和安全性，不過，在本逐步解說中為了簡單起見，將會使用 SQL 陳述式。

    可讓您定義 SQL 陳述式的頁面便會顯示。

14. 在 [資料表應載入哪些資料] 底下，請輸入下列 SQL 陳述式：

    SELECT EmployeeID, LastName, FirstName, HireDate FROM Employees
    

    注意事項：
    如果有需要，您可以按一下 [查詢產生器] 以使用產生器工具。

15. 按一下 [下一步]。

    可讓您定義元件將公開 (Expose) 之方法的頁面便會顯示。

16. 按一下以清除 [填入 DataTable] 核取方塊，然後選取 [傳回 DataTable] 和 [建立方法以直接將更新傳送至資料庫] 核取方塊。

    在這個逐步解說中，您不需要使用方法來填入資料的資料表 (Data Table)，不過，您將需要傳回資料的方法，而且元件中也要包含更新資料庫的方法。

17. 在 [方法名稱] 方塊中，輸入 GetEmployees。

    您現在命名的方法將在稍後用來取得資料。

18. 按一下 [完成]。

    精靈會設定元件並將其顯示在元件設計工具中，這會顯示元件所管理的資料，以及元件公開的方法。

19. 儲存資料元件，然後關閉元件設計工具。

20. 在 [建置] 功能表中，按一下 [建置網站]，以確認正確編譯元件。

在網頁上使用資料元件

您現在可以在 ASP.NET Web 網頁中，使用資料元件做為資料來源。為了存取資料元件，您將使用 ObjectDataSource 控制項，並將其設定為呼叫由資料元件所公開的資料存取方法。然後，您便可以將控制項加入至頁面，並將其繫結至資料來源控制項。

若要將資料來源控制項加入至頁面

1. 開啟 Default.aspx 頁面，並切換到 [設計] 檢視。

2. 從 [工具箱] 的 [資料] 群組中，將 ObjectDataSource 控制項拖曳到頁面上。

   • 如果 [ObjectDataSource 工作] 快速鍵功能表沒有出現，請以滑鼠右鍵按一下 [ObjectDataSource] 控制項，然後按一下 [顯示智慧標籤]。

3. 在 [ObjectDataSource 工作] 快速鍵功能表中，按一下 [設定資料來源]。

   [設定資料來源] 精靈便會出現。

4. 在 [選擇您的商務物件] 清單中，按一下 [EmployeesObjectTableAdapters.EmployeesTableAdapter]。

   這是您在前一章節中所建立之元件的型別名稱 (命名空間和類別名稱)。

5. 按一下 [下一步]。

6. 在 [選取] 索引標籤上的 [選擇方法] 清單中，按一下 [GetEmployees() 傳回 EmployeesDataTable]。

   GetEmployees 方法是您在前一章節建立之元件中所定義的方法，該方法會傳回 SQL 陳述式的結果，並於資料控制項可以繫結的 DataTable 物件中提供。

7. 按一下 [完成]。

您現在可以將資料控制項加入至頁面，並將其繫結至 ObjectDataSource 控制項。在本逐步解說中，您將會使用 GridView 控制項。

若要將 GridView 控制項加入至頁面並繫結至資料

1. 從 [工具箱] 的 [資料] 群組中，將 GridView 控制項拖曳到頁面上。

   • 如果 [GridView 工作] 快速鍵功能表沒有出現，請以滑鼠右鍵按一下 [GridView] 控制項，再按一下 [顯示智慧標籤]。

2. 在 [GridView 工作] 快速鍵功能表中，於 [選擇資料來源] 清單中按一下 [ObjectDataSource1]，這是您在前一章節中所設定之控制項的 ID。

   GridView 控制項會重新顯示，其中包含由 SQL 陳述式所傳回的每個資料行。

3. 在 [屬性] 中，確認 DataKeyNames 設定為 EmployeeID。

測試網頁

現在所有您需要的控制項都已在網頁上，您接下來可以測試網頁。

若要測試網頁

1. 按 CTRL+F5 執行頁面。

2. 確認來自 Employees 資料表的 EmployeeID、LastName、FirstName 和 HireDate 資料行都顯示在方格中。

3. 關閉瀏覽器。

GridView 控制項會向 ObjectDataSource 控制項要求資料，而 ObjectDataSource 控制項則會建立資料元件的執行個體，並呼叫資料元件的 GetEmployees 方法。GetEmployees 方法會傳回 DataTable 物件，然後 ObjectDataSource 控制項會將該物件傳回給 GridView 控制項。

在網頁中加入更新

您所建立的資料元件包含用於更新資料庫的 SQL 陳述式 (更新、插入和刪除資料錄)。資料元件之更新機能會由在精靈建立元件時自動產生的方法所公開。GridView 控制項和 ObjectDataSource 控制項可以彼此互動，以自動開始更新方法。

注意事項：
GridView 控制項不支援插入。

若要啟用更新和刪除

1. 在 GridView 控制項按一下滑鼠右鍵，再按 [顯示智慧標籤]。

2. 選取 [啟用編輯] 核取方塊。

3. 選取 [啟用刪除] 核取方塊。

   注意事項：
   啟用刪除可讓您從資料庫中永久移除資料錄。除非您是使用可擴展的測試資料，否則請不要啟用刪除。

測試更新

您現在可以進行測試，以確認可以使用元件來更新資料庫。

若要測試更新

1. 按 CTRL+F5 執行頁面。

   這次，GridView 控制項會在每個資料列中顯示 [編輯] 和 [刪除] 連結。

2. 按一下資料列旁的 [編輯] 連結。

3. 在資料列中執行變更，然後按一下 [更新]。

   更新過的日期便會重新顯示在方格中。

4. 按一下資料列中的 [刪除] 連結。

   資料列便會從資料庫中永久刪除，且重新顯示的方格中不會包含該資料列。

5. 關閉瀏覽器。

後續步驟

在本逐步解說中，說明了如何使用資料元件。您可能會想要實驗其他的巡覽功能。例如，您可能會想要進行下列動作：

• 建立自訂資料元件，而不要使用精靈。

  如需範例，請參閱逐步解說：資料繫結至自訂的商務物件。

• 限制哪些使用者可以變更資料。一般方法是將成員資格和角色加入至網站，然後建立商務元件可在允許變更資料前檢查的規則。

• 如需詳細資訊，請參閱逐步解說：建立具有成員資格和使用者登入的網站 和逐步解說：使用角色管理網站使用者。

請參閱

工作

逐步解說：在 Visual Web Developer 中使用網站中的共用程式碼

逐步解說：在 Visual Web Developer 中建立基本 Web 網頁

概念

資料來源控制項概觀

使用含有資料來源控制項的參數