逐步解說：使用 DetailsView Web 伺服器控制項在 Web 網頁中編輯和插入資料
更新：2007 年 11 月
Microsoft Visual Web Developer 可讓您只要使用幾行程式碼，便能建立用於更新資料錄並將新資料錄插入資料庫中的資料輸入表單。藉由結合使用封裝資料存取的資料來源控制項，以及採用可編輯之格式顯示資料錄的 DetailsView 和 GridView 控制項，您可以建立資料輸入頁，讓使用者編輯現有資料錄或插入新資料錄，且完全不需要任何程式碼。
在瀏覽這份逐步解說期間，您將瞭解如何：
建立資料輸入頁。
使用執行資料庫更新和插入作業所需的資訊，設定資料來源控制項。
使用 DetailsView 控制項來檢視個別資料錄、變更資料錄，以及插入新資料錄。
使用 GridView 控制項，以啟用從資料輸入頁進行資料庫修改。
必要條件
若要完成這個逐步解說，您必須要有：
Visual Web Developer。
Microsoft Data Access Components (MDAC) 2.7 (含) 以後版本。
如果您使用的是 Microsoft Windows XP 或 Windows Server 2003 作業系統，就表示已經有 MDAC 2.7。不過，如果您使用的是 Microsoft Windows 2000 Server 作業系統，就可能需要升級電腦中所安裝的 MDAC。若要下載目前的 MDAC 版本，請參閱 Data Access and Storage Developer Center。
存取 SQL Server Northwind 資料庫。如需下載並安裝 SQL Server 範例 Northwind 資料庫的詳細資訊，請參閱 Microsoft SQL Server 網站上的安裝範例資料庫。
.gif "注意事項")
注意事項：如果您需要如何登入執行 SQL Server 之電腦的相關資訊，請聯繫伺服器管理員。
在範例 Northwind 資料庫中修改資料的使用權限。
建立網站和網頁
依照下列步驟建立新的網站和 Web 網頁。
若要建立新的檔案系統網站
開啟 Visual Web Developer。
在 [檔案] 功能表上按一下 [新增]，然後按一下 [網站]。如果您是使用 Visual Web Developer Express，請在 [檔案] 功能表中按一下 [新網站]。
[新網站] 對話方塊隨即出現。
請在 [Visual Studio 安裝的範本] 下方，按一下 [ASP.NET 網站]。
在 [位置] 方塊中，選取 [檔案系統]，並輸入您想要用來保存網站頁面的資料夾名稱。
例如，輸入資料夾名稱 C:\WebSites\EditData。
在 [語言] 清單中，請按一下您想要操作的程式語言。
您選擇的程式語言將變成網站的預設值，但您可以為每個網頁分別設定程式語言。
按一下 [確定]。
Visual Web Developer 便會建立資料夾和名為 Default.aspx 的新網頁。
連接到 SQL Server
下一個步驟是建立與 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 中看不到 [伺服器總管] 索引標籤，請在 [檢視] 功能表中按一下 [伺服器總管]。如果在 Express 版中看不到 [資料庫總管] 索引標籤，請在 [檢視] 功能表中按一下 [資料庫總管]。
在 [加入資料連接] 方塊中，於 [伺服器名稱] 方塊中輸入伺服器名稱。
在 [登入伺服器] 區段中，請選取適用於存取執行中之 SQL Server 資料庫的選項 (整合式安全性或特定 ID 和密碼)，且如果有必要，請輸入使用者名稱和密碼。如果輸入了密碼，請選取 [儲存我的密碼] 核取方塊。
請在 [選取或輸入資料庫名稱] 底下，輸入 Northwind。
按一下 [測試連接]，然後在您確定它有正常運作時，按一下 [確定]。
您的新連接已經建立在 [伺服器總管] 中的 [資料連接] 底下。
建立資料輸入頁
在本章節中，您將會建立資料輸入頁並設定 DetailsView 控制項，以便能夠檢視儲存在 Northwind 資料庫之 Employees 資料表中的員工資料。為了處理該頁面的資料存取，您將會設定 SQL 資料來源控制項。
若要建立資料輸入頁並設定 DetailsView 控制項
在 [網站] 功能表上，按一下 [加入新項目]。
[加入新項目] 對話方塊隨即出現。
在 [Visual Studio 安裝的範本] 下方，按一下 [Web Form]，然後在 [名稱] 方塊中，輸入 EditEmployees.aspx。
按一下 [加入]。
開啟 EditEmployees.aspx 頁面。
切換至 [設計] 檢視。
輸入編輯員工並選取該文字，然後將文字格式化為標題。
在 [工具箱] 中，從 [資料] 群組將 [DetailsView] 控制項拖曳到頁面上。
在 [DetailsView] 控制項上按一下滑鼠右鍵，並按一下 [屬性]，然後將 [AllowPaging] 設定為 true。
這可讓您在個別員工項目顯示時逐頁檢視。
下一個步驟是建立和設定可用來查詢資料庫的資料來源控制項。有幾種方法可以建立資料來源控制項，包括將資料項目從 [伺服器總管] 或 [資料庫總管] 拖曳到頁面上。在本逐步解說中，您會從 DetailsView 控制項該處開始設定資料來源控制項。
若要設定資料來源控制項
在 [DetailsView] 控制項上按一下滑鼠右鍵，然後按一下 [顯示智慧標籤]。
在 [DetailsView 工作] 功能表中，於 [選擇資料來源] 方塊內，按一下 [<新增資料來源>]。.
[資料來源組態精靈] 對話方塊隨即出現。
在 [選取資料來源類型] 底下，按一下 [資料庫]。
保留 SqlDataSource1 的預設名稱，然後按一下 [確定]。
[設定資料來源] 精靈會顯示 [選擇連接] 頁面。
在 [您的應用程式應該使用哪個資料連接來連接資料庫?] 方塊中，輸入您在＜建立 SQL Server 的連接＞中所建立的連接，然後按一下 [下一步]。
精靈會顯示一個頁面，您可以在該頁面中選擇將連接字串 (Connection String) 儲存在組態檔中。在組態檔中儲存連接字串有兩個優點：
這麼做比將它儲存在頁面裡來得安全。
您可以在多個頁面中使用相同的連接字串。
選取 [是，將這個連接儲存為] 核取方塊，然後按 [下一步]。
此精靈會顯示一個頁面，您可以在其中指定要從資料庫擷取哪些資料。
在 [設定 Select 陳述式] 頁面上，選取 [指定資料表或檢視的資料行]，然後在 [名稱] 方塊中，按一下 [Employees]。
在 [資料行] 底下，選取 [EmployeeID]、[LastName]、[FirstName] 和 [HireDate] 核取方塊，然後按 [下一步]。
按一下 [測試查詢] 以預覽資料，然後按一下 [完成]。
您現在可以測試員工資料錄顯示頁面。
若要測試員工資料錄的顯示
按 CTRL+F5 執行頁面。
第一筆員工資料錄會顯示在 DetailsView 控制項中。
按一下頁碼連結即可查看其他員工資料錄。
關閉瀏覽器。
允許在 GridView 控制項中編輯
此時，您可以檢視員工資料錄，但是無法加以編輯。在本章節中，您會加入並設定 GridView 控制項，以便能夠編輯個別資料錄。
| 注意事項： |
|---|
GridView 控制項會呈現資料錄清單，以讓您編輯資料錄，不過無法讓您插入資料錄。稍後在本逐步解說中，您將會使用允許加入新資料錄的 DetailsView 控制項。 |
為了支援編輯，您必須使用可執行更新的 SQL 陳述式，設定先前所建立的資料來源控制項 (SqlDataSource1)。
若要加入 GridView 控制項以允許編輯
在 [工具箱] 中，從 [資料] 群組將 [GridView] 控制項拖曳到頁面上。
在 [GridView] 控制項上按一下滑鼠右鍵，並按一下 [顯示智慧標籤]，然後在 [GridView 工作] 功能表的 [選擇資料來源] 方塊中，按一下 [SqlDataSource1]。
在 [GridView 工作] 功能表中，按一下 [設定資料來源]。
按 [下一步] 前進至精靈的 [設定 Select 陳述式] 頁面。
在 [設定 Select 陳述式] 頁面上，按一下 [進階]，並選取 [產生 INSERT、UPDATE 和 DELETE 陳述式] 核取方塊，然後按一下 [確定]。
這會根據您先前所設定的 Select 陳述式，產生 SqlDataSource1 控制項的 Insert、Update 和 Delete 陳述式。
注意事項：或者，您也可以選取 [指定自訂 SQL 陳述式或預存程序] 並輸入 SQL 查詢，以手動建立陳述式。
按 [下一步]，然後按一下 [完成]。
SqlDataSource 控制項現在便已設定好額外的 SQL 陳述式。
注意事項：您可以選取 SqlDataSource 控制項並檢視 DeleteQuery、InsertQuery 和 UpdateQuery 屬性，以檢查由精靈所產生的陳述式。您也可以切換至 [原始碼] 檢視並檢查控制項的標記，以檢視已更新的控制項屬性。
在 [GridView 工作] 功能表中，選取 [啟用分頁] 和 [啟用編輯] 核取方塊。
.gif "安全性注意事項")
安全性注意事項：在 ASP.NET Web 網頁中的使用者輸入可能會含有惡意的用戶端指令碼。ASP.NET Web 網頁預設會驗證使用者輸入，以確保輸入中未包含指令碼或 HTML 項目。一旦啟用了驗證，就不需要明確檢查使用者輸入中的指令碼或 HTML 項目。如需詳細資訊，請參閱 指令碼攻擊概觀。
您現在可以測試員工資料錄的編輯。
若要在 GridView 控制項中測試編輯
按 CTRL+F5 執行頁面。
[GridView] 控制項會在文字方塊中顯示資料。
在 [GridView] 控制項中選擇資料列，並按一下 [編輯]。
對資料錄執行變更，然後按一下 [更新]。
已更新的資料現在會同時顯示在 [GridView] 控制項和 [DetailsView] 控制項中。
關閉瀏覽器。
允許使用 DetailsView 控制項編輯、刪除和插入
GridView 控制項可讓您編輯資料錄，但是不會讓您插入資料。在本章節中，您將會修改 DetailsView 控制項，以便能夠個別查看資料錄，以及刪除、插入或更新資料錄。
若要使用 DetailsView 控制項以允許刪除、插入和更新
在 [DetailsView] 控制項上按一下滑鼠右鍵，然後按一下 [顯示智慧標籤]。
在 [DetailsView 工作] 功能表中，選取 [啟用插入]、[啟用編輯] 和 [啟用刪除] 核取方塊。
當您先前在逐步解說中使用 DetailsView 控制項時，還無法使用啟用編輯、插入和刪除的選項，這是因為 DetailsView 控制項所繫結的 SqlDataSource1 控制項沒有必要的 SQL 陳述式。不過，現在您已將資料來源控制項設定為包含更新陳述式，因此 DetailsView 控制項便會提供更新選項。
您現在可以在 DetailsView 控制項中測試刪除、插入和更新。
若要在 DetailsView 控制項中測試更新、插入和刪除
按 CTRL+F5 執行頁面。
[DetailsView] 控制項會顯示員工資料錄。
在 [DetailsView] 控制項中，按一下 [編輯]。
[DetailsView] 控制項現在會將資料顯示在文字方塊中。
對資料錄執行變更，然後按一下 [更新]。
已更新的資料錄會顯示在控制項中。
在 [DetailsView] 控制項中，按一下 [新增]。
控制項現在會為每個資料行顯示空白的文字方塊。
輸入每個資料行的值。
Employees 資料表具有自動遞增的索引鍵資料行，因此會在您儲存資料錄時自動指派 [EmployeeID] 的值。
完成後，請按一下 [插入]。
新資料錄便會加入成為最後一筆資料錄。
注意事項：在本逐步解說中，將新資料錄插入 Employees 資料表中不會產生任何錯誤。不過，當您使用實際執行的資料時，資料表可能包含必須在設定 DetailsView 控制項時留意的條件約束 (Constraint)，例如，外部索引鍵條件約束。
在 [DetailsView] 控制項中使用分頁，以巡覽至最後一筆資料錄，然後按一下 [刪除]。
如此便會移除新的資料錄。
注意事項：如同在插入資料時一樣，當您將 DetailsView 控制項設定為允許刪除時，請務必注意套用至資料列的任何條件約束。
後續步驟
在本逐步解說中，說明了建立可讓使用者修改資料錄之 Web 網頁的基本概念。您可能會想要進一步探索 ASP.NET Web 網頁的其他資料功能，例如，您可能會想要進行下列動作：
使用關聯資料表中的資料錄。如需詳細資訊，請參閱逐步解說：在 Visual Studio 中建立主從式 Web 網頁。
使用資料存取的中介層元件。如需詳細資訊，請參閱逐步解說：資料繫結至自訂的商務物件。
使用其他方法在 Web 網頁中設定資料存取。如需詳細資訊，請參閱逐步解說：Web 網頁中的基本資料存取。
請參閱
工作
逐步解說：建立可以顯示 Access 資料庫資料的 Web 網頁