逐步解說：Web 網頁中的基本資料存取
更新：2007 年 11 月
這個逐步解說會示範如何藉由使用專門設計用於資料存取的控制項建立簡單的資料繫結網頁。
在此逐步解說期間，您將瞭解如何進行下列作業：
連接到 Microsoft Visual Web Developer Web 開發工具中的 Microsoft SQL Server 資料庫。
使用拖放編輯，建立可用於不具有程式碼之網頁的資料存取項目。
使用 SqlDataSource 控制項管理資料存取和繫結。
顯示具有 GridView 控制項的資料。
設定 GridView 控制項允許排序和分頁。
建立只顯示選定資料錄的篩選查詢。
必要條件
若要完成這個逐步解說，您必須進行下列步驟：
存取 SQL Server Northwind 資料庫。如需下載並安裝 SQL Server 範例 Northwind 資料庫的詳細資訊，請參閱 Microsoft SQL Server 網站上的安裝範例資料庫。
.gif "注意事項")
注意事項：如果您需要如何登入執行 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 網頁。
若要建立檔案系統網站
開啟 Visual Web Developer。
在 [檔案] 功能表上，按一下 [新網站]。
[新網站] 對話方塊隨即出現。
請在 [Visual Studio 安裝的範本] 下方，按一下 [ASP.NET 網站]。
在最右邊的 [位置] 方塊中，輸入您想要用來保存網站頁面的資料夾名稱。
例如，輸入資料夾名稱 C:\WebSites。
在 [語言] 清單中，按一下您想要操作的程式語言。
按一下 [確定]。
Visual Web Developer 會建立資料夾和命名為 Default.aspx 的新頁面。
加入 GridView 控制項以顯示資料
若要在 ASP.NET Web 網頁上顯示資料，您需要下列項目：
資料來源 (例如資料庫) 的連接。
在下列程序中，您將建立 SQL Server Northwind 資料庫的連接。
網頁上的資料來源控制項會執行查詢，並管理查詢的結果。
網頁上的控制項，以實際顯示資料。
在下列程序中，您將會在 GridView 控制項中顯示資料。GridView 控制項將會從 SqlDataSource 控制項取得其資料。
您可以將這些項目分別加入網站。然而，最簡單的開始方式是，藉由使用 GridView 控制項而視覺化處理資料顯示，然後使用精靈建立連接和資料來源控制項。下列程序解說如何建立在網頁上顯示資料所必須具有的全部三個項目。
若要加入並設定用於顯示資料的 GridView 控制項
在 Visual Web Developer 中，切換至 [設計] 檢視。
從 [工具箱] 的 [資料] 資料夾中，將 GridView 控制項拖曳至網頁。
如果 [GridView 工作] 快速鍵功能表沒有出現，請以滑鼠右鍵按一下 [GridView] 控制項，再按一下 [顯示智慧標籤]。
在 [GridView 工作] 功能表的 [選擇資料來源] 清單中，按一下 [<新增資料來源>]。
出現 [資料來源組態] 對話方塊。
.gif)
按一下 [資料庫]。
如此會指定您要從支援 SQL 陳述式的資料庫中取得資料。這包含 SQL Server 和其他 OLE-DB 相容的資料庫。
在 [指定資料來源的 ID] 方塊中，會顯示預設的資料來源控制項名稱 (SqlDataSource1)。您可以保留不改這個名稱。
按一下 [確定]。
設定資料來源精靈隨即出現，顯示一個頁面，讓您可以在其中選擇連接。
.gif)
按一下 [新增連接]。
在 [選擇資料來源] 對話方塊的 [資料來源] 下，按一下 [Microsoft SQL Server]，再按 [繼續]。
[加入連接] 對話方塊就會出現。
在 [伺服器名稱] 方塊中，輸入您想要使用之 SQL Server 的名稱。
.gif)
對於登入認證，請選取適合存取 SQL Server 資料庫的選項 (整合式安全性或特定 ID 和密碼)，並在必要時輸入使用者名稱和密碼。
按一下 [選取或輸入資料庫名稱]，然後輸入 Northwind。
按一下 [測試連接]，然後在您確定它有正常運作時，按一下 [確定]。
會出現填入了連接資訊的 [設定資料來源 - <DataSourceName>] 精靈。
按 [下一步]。
精靈隨即出現，顯示一個頁面，您可以在該頁面中選擇將連接字串儲存在組態檔中。在組態檔中儲存連接字串有兩個優點：
這麼做比將連接字串儲存在網頁裡來得安全。
您可以在多個頁面中重複使用相同的連接字串。
請確定已選取 [是，將這個連接儲存為] 核取方塊，然後按 [下一步] (您可以保留預設的 [NorthwindConnectionString] 連接字串名稱)。
精靈隨即出現，顯示一個頁面，您可以在該頁面中指定要從資料庫擷取的資料。
在 [指定資料表或檢視的資料行] 的 [名稱] 清單中，按一下 [客戶]。
在 [資料行] 底下，選取 [CustomerID]、[CompanyName] 和 [City] 核取方塊。
精靈隨即出現，將您建立的 SQL 陳述式顯示在頁面底部的方塊中。
.gif)
注意事項：精靈可讓您指定選取準則 (WHERE 子句) 和其他 SQL 查詢選項。對於逐步解說的這個部分，您將建立不具有任何選取或排序選項的簡單陳述式。
按 [下一步]。
按一下 [測試查詢]，以確定您所擷取的資料是您所要的。
按一下 [完成]。
精靈隨即關閉，您會返回網頁。執行精靈已完成兩項工作：
精靈已建立並設定 SqlDataSource 控制項 (名為 SqlDataSource1)，它會合併您指定的連接和查詢資訊。
精靈已將 GridView 控制項繫結至 SqlDataSource。因此，GridView 控制項會顯示 SqlDataSource 控制項所傳回的資料。
如果您檢視 SqlDataSource 控制項的屬性，則會看到精靈已建立了 ConnectionString 和 SelectQuery 屬性的值。
注意事項：您可以輕鬆地變更 GridView 控制項的外觀。在 [設計] 檢視中，以滑鼠右鍵按一下 [GridView] 控制項，然後按一下 [顯示智慧標籤]。在 [GridView 工作] 功能表上，按一下 [自動格式化]，然後套用配置。
測試網頁
現在您就可以執行此頁面。
若要測試網頁
按 CTRL+F5 執行網頁。
頁面會出現在瀏覽器中。GridView 控制項會顯示 [客戶] 表格中的所有資料列。
關閉瀏覽器。
加入排序和分頁
您可以將排序和分頁加入 GridView 控制項，而不需要撰寫任何程式碼。
若要加入排序和分頁
在 [設計] 檢視中，以滑鼠右鍵按一下 [GridView] 控制項，然後按一下 [顯示智慧標籤]。
在 [GridView 工作] 快速鍵功能表上，選取 [啟用排序] 核取方塊。
GridView 控制項中的資料行標題會變更為連結。
在 [GridView 工作] 功能表上，選取 [啟用分頁] 核取方塊。
將頁尾 (Footer) 加入具有頁碼連結的 GridView 控制項。
或者，使用 [屬性] 將 PageSize 屬性的值從 10 變更為較小的頁面大小。
按 CTRL+F5 執行頁面。
按一下資料行標題，可以依據該資料行的內容進行排序。如果資料來源中的資料錄超過 GridView 控制項的頁面大小，則您可以使用 GridView 控制項底部的網頁巡覽連結在網頁間移動。
關閉瀏覽器。
加入篩選
通常，您只想在網頁中顯示已選取的資料。在逐步解說的這個部分中，您將修改 SqlDataSource 控制項的查詢，以便使用者可以選取特定城市的客戶資料錄。
首先，您將使用 TextBox 控制項建立使用者可在其中輸入城市名稱的文字方塊。然後變更查詢以包括參數型篩選 (WHERE 子句)。做為該處理序 (Process) 的一部分，您將建立 SqlDataSource 控制項的參數項目。參數項目會建立 SqlDataSource 控制項取得其參數型查詢值的方式 (即透過文字方塊)。
當您完成逐步解說的這個部分時，網頁可能看起來與 [設計] 檢視中的下列項目相同。
.gif)
若要加入用於指定城市的文字方塊
從 [工具箱] 的 [標準] 群組中，將 TextBox 控制項和 Button 控制項拖曳至網頁。
Button 控制項只用於將網頁張貼至伺服器。您將無需為其撰寫任何程式碼。
在 [屬性] 中，將 TextBox 控制項的 [ID] 設為 textCity。
如果需要，可在文字方塊成為標題之前輸入 [城市] 或類似的文字。
在 Button 控制項的 [屬性] 中，將 [文字] 設為 [送出]。
您現在可以修改查詢，以包括篩選。
若要修改具有參數型篩選的查詢
在 SqlDataSource 控制項按一下滑鼠右鍵，再按 [顯示智慧標籤]。
在 [SqlDataSource 工作] 功能表上，按一下 [設定資料來源]。
[設定資料來源 - <Datasourcename>] 精靈隨即出現。
按一下 [下一步]。
精靈會顯示目前為 SqlDataSource 控制項所設定的 SQL 命令。
按一下 [WHERE]。
[加入 WHERE 子句] 頁隨即出現。
在 [資料行] 清單中，按一下 [City]。
在 [運算子] 清單中，按一下 [=]。
在 [來源] 清單中，按一下 [Control]。
在 [參數屬性] 的 [控制項 ID] 清單中，按一下 [textCity]。
.gif)
前五步指定查詢會從您在先前程序中加入的 TextBox 控制項中取得 [城市] 的搜尋值。
按一下 [加入]。
您已建立的 WHERE 子句隨即出現在頁面底部的方塊中。
按一下 [確定]，以關閉 [加入 WHERE 子句] 頁。
在 [設定資料來源 - <DataSourceName>] 精靈中，按一下 [下一步]。
在 [測試查詢] 頁上，按一下 [測試查詢]。
精靈隨即出現，顯示 [參數值編輯器] 頁，提示輸入您用於 WHERE 子句的值。
在 [值] 方塊中，輸入倫敦，然後按一下 [確定]。
倫敦的客戶資料錄隨即出現。
按一下 [完成] 關閉精靈。
您現在可以測試篩選。
若要測試篩選
按 CTRL+F5 執行網頁。
在文字方塊中，輸入倫敦，然後按一下 [送出]。
倫敦市的客戶清單隨即出現在 GridView 控制項中。
嘗試其他城市，例如布宜諾斯艾利斯和柏林。
後續步驟
資料存取是許多 Web 應用程式的重要部分，這個逐步解說只能讓您稍微瞭解可以對 Web 網頁中的資料進行那些處理。您可能會想要實驗其他的資料存取功能。例如，您可能會想要進行下列動作：
使用 Microsoft Access 而不要使用 SQL Server (SQL 快取相依性無法與 Access 一起使用)。
如需詳細資訊，請參閱逐步解說：建立可以顯示 Access 資料庫資料的 Web 網頁。
編輯並插入資料錄。
使用具有主版詳細資料關係的資料錄。
如需詳細資訊，請參閱逐步解說：在 Visual Studio 中建立主從式 Web 網頁。
建立執行資料存取的中介層 (商務) 元件，然後使用其做為網頁中的資料來源。
如需詳細資訊，請參閱逐步解說：資料繫結至自訂的商務物件。