逐步解說：在 GridView Web 伺服器控制項中進行編輯時顯示下拉式清單
更新：2007 年 11 月
根據預設，GridView 控制項會顯示要編輯的文字方塊。您可以使用 ASP.NET GridView 控制項的內建進階功能將下拉式清單加入至編輯顯示。逐步解說將說明的工作包括：
必要條件
若要完成這個逐步解說，您必須要有：
Microsoft Visual Web Developer (Visual Studio)。
Microsoft Data Access Components (MDAC) 2.7 (含) 以後版本。
如果您使用的是 Microsoft Windows XP 或 Windows Server 2003，就表示已經有 MDAC 2.7。不過，如果您使用的是 Microsoft Windows 2000，就可能需要升級電腦中所安裝的 MDAC。如需詳細資訊，請參閱 MSDN Library 中的＜Microsoft Data Access Components (MDAC) Installation＞。
存取 SQL Server Northwind 資料庫。如需下載並安裝 SQL Server 範例 Northwind 資料庫的詳細資訊，請參閱 Microsoft SQL Server 網站上的安裝範例資料庫。
.gif "注意事項")
注意事項：如果您需要如何登入執行 SQL Server 之電腦的相關資訊，請聯繫伺服器管理員。
建立網站和網頁
依照下列步驟建立新的網站和 Web 網頁。
若要建立檔案系統網站
開啟 Visual Web Developer。
在 [檔案] 功能表上按一下 [新增]，然後按一下 [網站]。如果您是使用 Visual Web Developer Express，請在 [檔案] 功能表中按一下 [新網站]。
[新網站] 對話方塊隨即出現。
請在 [Visual Studio 安裝的範本] 下方，按一下 [ASP.NET 網站]。
在 [位置] 方塊中，選取 [檔案系統]，並輸入您想要用於保存網站頁面的資料夾名稱。
例如，輸入資料夾名稱 C:\WebSites\DropDownEdit。
在 [語言] 清單中，請按一下您想要操作的程式語言。
按一下 [確定]。
Visual Web Developer 會建立資料夾和命名為 Default.aspx 的新頁面。
建立 SQL 資料來源的連接
若要啟動，您必須建立對執行可以在其中存取 Northwind 資料庫的 SQL Server 之電腦的連接。
若要建立對 SQL Server 的連接
在 [伺服器總管] 中，以滑鼠右鍵按一下 [資料連接]，再按一下 [加入資料連接]。如果您是使用 Visual Web Developer Express，請使用 [資料庫總管]。
[加入連接] 對話方塊就會出現。
如果 [資料來源] 清單未顯示 [Microsoft SQL Server (SqlClient)]，請按一下 [變更]，然後在 [變更資料來源] 對話方塊中選取 [Microsoft SQL Server]。
如果出現 [選擇資料來源] 頁面，請在 [資料來源] 清單中選取您將使用的資料來源類型。在此逐步解說中，資料來源型別為 Microsoft SQL Server。在 [資料提供者] 清單中，按一下 [.NET Framework Data Provider for SQL Server]，然後按一下 [繼續]。
注意事項：如果在 Visual Web Developer 中看不到 [伺服器總管] 索引標籤，請在 [檢視] 功能表中按一下 [伺服器總管]。如果看不到 [資料庫總管] 索引標籤，請在 [檢視] 功能表中按一下 [資料庫總管]。
在 [加入資料連接] 方塊中，於 [伺服器名稱] 方塊中輸入伺服器名稱。
對於 [登入伺服器] 區段，選取適合存取正在執行之 SQL Server 資料庫 (整合式安全性或特定 ID 和密碼) 的選項，必要時，請輸入使用者名稱和密碼。
選取 [儲存我的密碼] 核取方塊。
請在 [選取或輸入資料庫名稱] 底下，輸入 Northwind。
按一下 [測試連接]，然後在您確定它有正常運作時，按一下 [確定]。
您的新連接已經建立在 [伺服器總管] 中的 [資料連接] 底下。
將 GridView 控制項設定為顯示資料庫資料
在這部分的逐步解說中，您將動態地將資料填入方格。
若要啟用簡單排序
切換至 Default.aspx 檔案或開啟它。
切換至 [設計] 檢視。
在 [工具箱] 中，從 [資料] 群組將 [GridView] 控制項拖曳到頁面上。
在 [GridView 工作] 功能表的 [選擇資料來源] 方塊中，按一下 [<新增資料來源>]。
[資料來源組態精靈] 隨即出現。
按一下 [資料庫]。
這會指定您要從支援 SQL 陳述式的資料庫中取得資料，包括 SQL Server 和其他 OLE-DB 相容資料庫。
在 [指定資料來源的 ID] 方塊中，會顯示預設的資料來源控制項名稱 [SqlDataSource1]。您可以保留這個名稱。
按一下 [確定]。
[設定資料來源] 精靈便會顯示。
在 [您的應用程式應該使用哪個資料連接來連接資料庫?] 方塊中，輸入您在＜建立 SQL Server 的連接＞中所建立的連接，然後按一下 [下一步]。
精靈會顯示一個頁面，您可以在該頁面中選擇將連接字串 (Connection String) 儲存在組態檔中。在組態檔中儲存連接字串有兩個優點：
這麼做比將它儲存在頁面裡來得安全。
您可以在多個頁面中使用相同的連接字串。
選取 [是，將這個連接儲存為] 核取方塊，然後按 [下一步]。
此精靈會顯示一個頁面，您可以在其中指定要從資料庫擷取哪些資料。
在 [指定資料表或檢視的資料行] 下的 [名稱] 方塊中，按一下 [Employees]。
在 [資料行] 下方，選取 [EmployeeId]、[LastName]、[FirstName]、[HireDate] 和 [City] 核取方塊。
精靈會在頁面底部的方塊中，顯示您正在建立的 SQL 陳述式。
注意事項：精靈可讓您指定選取準則 (WHERE 子句) 和其他 SQL 查詢選項。在這個逐步解說中，您將建立不含選取或排序選項的簡單陳述式。
按一下 [進階]，選取 [產生 INSERT、UPDATE 和 DELETE 陳述式] 核取方塊，然後再按 [確定]。
這會根據您先前所設定的 Select 陳述式，產生 [SqlDataSource1] 控制項的 Insert、Update 和 Delete 陳述式。
注意事項：或者，您也可以選取 [指定自訂 SQL 陳述式或預存程序] 並輸入 SQL 查詢，以手動建立陳述式。
按一下 [下一步]。
按一下 [測試查詢]，確認您所擷取的資料是您所要的。
按一下 [完成]。
以滑鼠右鍵按一下 [GridView] 控制項，然後選取 [顯示智慧標籤]。從 [GridView 工作] 功能表中，選取 [啟用編輯] 方塊。
現在您可以測試網頁。
若要測試網頁
按 CTRL+F5 執行頁面。
[GridView] 控制項隨即顯示，其中包含 [EmployeeId]、[LastName]、[FirstName]、[HireDate] 和 [City] 資料行。
按一下資料列旁邊的 [編輯] 連結。
已選取之以供編輯的資料列隨即顯示，其中包含 [LastName]、[FirstName]、[HireDate] 和 [City] 資料行，做為可編輯的文字方塊。[EmployeeId] 不會顯示在文字方塊中，因為它是索引鍵欄位，而且無法編輯。
變更欄位，如 [LastName]，並按一下 [更新]。
[GridView] 控制項隨即顯示，其中包含 [EmployeeId]、[ LastName]、[FirstName]、[HireDate] 和 [City] 資料行，而 LastName 已更新為新值。
關閉瀏覽器。
在 GridView 控制項中進行編輯時顯示下拉式清單
在這部分的逐步解說中，您可以加入下拉式清單，以在方格中編輯資料列時進行選取。
若要在編輯時顯示下拉式清單
從 [工具箱] 的 [資料] 節點中，將 SqlDataSource 控制項拖曳至頁面。
會建立名為 [SqlDataSource2] 的新資料來源控制項。
在 [SqlDataSource 工作] 功能表中，選擇 [設定資料來源]。
在 [您的應用程式應該使用哪個資料連接來連接資料庫?] 方塊，輸入您之前建立的連接。
按一下 [下一步]。
在 [設定 Select 陳述式] 頁面上，選取 [指定資料表或檢視的資料行]，然後在 [名稱] 方塊中，按一下 [Employees]。
僅選取 [City] 資料行，然後再選取 [只傳回不重複的資料列] 核取方塊。按一下 [下一步]。
按一下 [測試查詢] 以預覽資料，然後按一下 [完成]。
以滑鼠右鍵按一下 [GridView] 控制項，然後選取 [顯示智慧標籤]。在 [GridView 工作] 功能表中，選取 [編輯資料行]。
在 [欄位] 對話方塊中，從 [選取的欄位] 清單方塊中選取 [City]。
按一下 [將這個欄位轉換為 TemplateField] 連結。
按一下 [確定]，關閉 [欄位] 對話方塊。
以滑鼠右鍵按一下 [GridView] 控制項，然後選取 [顯示智慧標籤]。在 [GridView 工作] 功能表中，選取 [編輯樣板]。
在 [顯示] 下拉式清單中選取 [EditItemTemplate]。
以滑鼠右鍵按一下樣板中的預設 TextBox 控制項，然後選取 [刪除] 將它移除。
從 [工具箱] 的 [標準] 索引標籤中，將 [DropDownList] 控制項拖曳至樣板。
以滑鼠右鍵按一下 [DropDownList] 控制項，然後選取 [顯示智慧標籤]。在 [DropDownList 工作] 功能表中，選取 [選擇資料來源]。
選取 [SqlDataSource2]。
按一下 [確定]。
在 [DropDownList 工作] 功能表中，選擇 [編輯 DataBindings]。在 [DataBindings] 對話方塊中選取 DropDownList 控制項的 SelectedValue 屬性。
按一下 [欄位繫結] 選項按鈕，並為 [繫結至] 選取 [City]。
選取 [雙向資料繫結] 核取方塊。
按一下 [確定]。
以滑鼠右鍵按一下 [GridView] 控制項，然後選取 [顯示智慧標籤]。在 [GridView 工作] 功能表中，按一下 [結束樣板編輯]。
.gif "安全性注意事項")
安全性注意事項：在 ASP.NET Web 網頁中的使用者輸入可能會含有惡意的用戶端指令碼。ASP.NET Web 網頁預設會驗證使用者輸入，以確保輸入中未包含指令碼或 HTML 項目。一旦啟用了驗證，就不需要明確檢查使用者輸入中的指令碼或 HTML 項目。如需詳細資訊，請參閱指令碼攻擊概觀。
現在您可以測試網頁。
若要測試網頁
按 CTRL+F5 執行頁面。
[GridView] 控制項隨即顯示，其中包含 [EmployeeId]、[LastName]、[FirstName]、[HireDate] 和 [City] 資料行。
按一下資料列旁邊的 [編輯] 連結。
目前的 [City] 值為下拉式清單中預先選取的值。
從下拉式清單中選取不同的 [City] 值，並按一下 [更新]。
[City] 欄位使用在下拉式清單中選取的值來更新。