逐步解說：使用 FormView Web 伺服器控制項顯示 Web 網頁中已格式化的資料

  • 發行項

更新：2007 年 11 月

ASP.NET 提供各種控制項，這些控制項可讓您顯示和編輯資料錄。在此逐步解說中，您將使用 FormView 控制項，一次處理一個單一資料錄。FormView 控制項的主要功能是可讓您透過定義樣板自己建立資料錄配置。使用樣板，您可以完整地控制控制項中之資料的配置和外觀。FormView 控制項也支援更新，例如編輯、插入和刪除資料錄。如果資料來源提供一個以上的資料錄給 FormView 控制項，則該控制項可讓您逐頁巡覽資料錄。

注意事項：

您還可以使用 DetailsView 控制項編輯個別的資料錄，該控制項會為資料提供預先定義的配置。如需詳細資訊，請參閱 DetailsView Web 伺服器控制項概觀。

逐步解說將說明的工作包括：

  • 建立頁面以顯示主從式資訊。

  • 使用 FormView 控制項為資料錄建立自由格式配置。

  • 將 FormView 控制項設定為允許編輯。

必要條件

若要完成這個逐步解說，您必須要有：

  • Microsoft Visual Web Developer。

  • 存取 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。如需詳細資訊，請參閱 MSDN Library 中的＜Microsoft Data Access Components (MDAC) Installation＞。

建立網站

依照下列步驟建立新的網站和 Web 網頁。

若要建立檔案系統網站

  1. 開啟 Visual Web Developer。

  2. 在 [檔案] 功能表上按一下 [新增]，然後按一下 [網站]。如果您是使用 Visual Web Developer Express，請在 [檔案] 功能表中按一下 [新網站]。

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

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

  4. 在 [位置] 方塊中，輸入您想要用來保存網站頁面的資料夾名稱。

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

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

  6. 然後按一下 [確定]。

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

使用下拉式清單做為主版

在這部分的逐步解說中，您將加入下拉式清單至頁面，並在其中填入產品名稱清單。當使用者選取產品時，頁面將在 FormView 控制項中顯示該產品的詳細資料。

若要建立並填入下拉式清單

  1. 切換至 Default.aspx 頁面或開啟它。如果您使用的是已建立的網站，請加入或開啟此逐步解說中可以使用的頁面。

  2. 切換至 [設計] 檢視。

  3. 在頁面中輸入 Display Product Information。

  4. 從 [工具箱] 的 [標準] 群組中，將 DropDownList 控制項拖曳至頁面。

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

  6. 在 [DropDownList 工作] 功能表上選取 [啟用 AutoPostBack] 核取方塊。

  7. 按一下 [選擇資料來源]，以開啟 [資料來源組態精靈]。

  8. 在 [選取資料來源] 清單中，按一下 [<新增資料來源>]。

  9. 按一下 [資料庫]。

    這樣會指定您要從支援 SQL 陳述式的資料庫中取得資料。

    在 [指定資料來源的 ID] 方塊中，會顯示預設的資料來源控制項名稱。您可以保留這個名稱。

  10. 按一下 [確定]。

    此精靈會顯示可以選取連接的頁面。

  11. 按一下 [新增連接] 按鈕。

    [加入連接] 對話方塊隨即出現。

    • 如果 [資料來源] 清單未顯示 [Microsoft SQL Server (SqlClient)]，請按一下 [變更]，然後在 [變更資料來源] 對話方塊中選取 [Microsoft SQL Server]。

    • 如果出現 [選擇資料來源] 頁面，請在 [資料來源] 清單中選取您將使用的資料來源類型。在此逐步解說中，資料來源型別為 Microsoft SQL Server。在 [資料提供者] 清單中，按一下 [.NET Framework Data Provider for SQL Server]，然後按一下 [繼續]。

  12. 在 [加入連接] 對話方塊中，執行下列事項：

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

    2. 對於登入認證，請選取適合存取正在執行之 SQL Server 資料庫 (整合式安全性或特定 ID 和密碼) 的選項，必要時，請輸入使用者名稱和密碼。如果輸入了密碼，請選取 [儲存我的密碼] 核取方塊。

    3. 選取 [選取或輸入資料庫名稱] 按鈕，然後輸入 Northwind。

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

    您將返回精靈，而連接資訊將被填入。

  13. 按 [下一步]。

  14. 請確定已選取 [是，將這個連接儲存為] 核取方塊，然後按 [下一步] (您可以保留預設的連接字串名稱)。

    此精靈會顯示一個頁面，您可以在其中指定要從資料庫擷取哪些資料。

  15. 按一下 [指定資料表或檢視的資料行]。

  16. 在 [名稱] 清單中，按一下 [產品]。

  17. 在 [資料行] 下，選取 [ProductID] 和 [ProductName]。

  18. 按 [下一步]。

  19. 按一下 [測試查詢]，確認您所擷取的資料是您所要的。

  20. 按一下 [完成]。

    您將返回精靈。

  21. 在 [選取要顯示在 DropDownList 中的資料欄位] 清單中，按一下 [ProductName]。

  22. 在 [選取 DropDownList 值的資料欄位] 清單中，按一下 [ProductID]。

    這樣做會指定當選取項目時 ProductID 欄位將做為該項目的值傳回。

  23. 按一下 [確定]。

繼續之前，請測試下拉式清單。

若要測試下拉式清單

  1. 按 CTRL+F5 執行頁面。

  2. 當頁面顯示時，請檢查下拉式清單。

  3. 選取產品名稱，以確定清單執行回傳。

加入 FormView 控制項

您現在可以加入 FormView 控制項，以顯示產品詳細資料。FormView 控制項會從加入至頁面的第二個資料來源控制項中取得其資料。第二個資料來源控制項包含了參數型查詢，會取得在 DropDownList 控制項中目前選取之項目的產品資料錄。

若要加入 FormView 控制項

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

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

  3. 在 [FormView 工作] 功能表的 [選擇資料來源] 清單中，按一下 [<新增資料來源>]。

    [資料來源組態精靈] 對話方塊隨即出現。

  4. 按一下 [資料庫]。

    FormView 控制項將從與 DropDownList 控制項相同的資料表中取得資料。

    在 [指定資料來源的 ID] 方塊中，會顯示預設的資料來源控制項名稱。您可以保留這個名稱。

  5. 然後按一下 [確定]。

    [設定資料來源] 精靈隨即啟動。

  6. 從 [您的應用程式應該使用哪個資料連接來連接資料庫？] 清單中，選取您之前在逐步解說中建立並儲存的連接。

  7. 按一下 [下一步]。

    此精靈會顯示可以建立 SQL 陳述式的頁面。

  8. 從 [指定資料表或檢視的資料行] 下的 [名稱] 清單中，選取 [產品]。

  9. 在 [資料行] 方塊中，選取 [ProductID]、[ProductName] 和 [UnitPrice]。

  10. 按一下 [WHERE] 按鈕。

    接著會顯示 [加入 WHERE 子句] 對話方塊。

  11. 從 [資料行] 清單中，選取 [ProductID]。

  12. 從 [運算子] 清單中，選取 [=]。

  13. 從 [來源] 清單中，選取 [控制項]。

  14. 在 [參數屬性] 下的 [控制項 ID] 清單中，選取 [DropDownList1]。

    最後兩個步驟指定了查詢將從之前加入的 DropDownList 控制項中取得產品 ID 的搜尋值。

  15. 按一下 [加入]。

  16. 按一下 [確定]，關閉 [加入 WHERE 子句] 對話方塊。

  17. 按一下 [進階]。

    [進階 SQL 產生選項] 對話方塊隨即出現。

  18. 選取 [產生 INSERT、UPDATE、和 DELETE 陳述式] 核取方塊。

    這個選項可讓精靈根據已設定的 Select 陳述式建立 SQL Update 陳述式。在稍後的逐步解說中，您將使用 FormView 控制項編輯並插入資料錄，這需要資料來源控制項中的 Update 陳述式。

  19. 然後按一下 [確定]。

  20. 按 [下一步]。

  21. 在 [預覽] 頁面上，按一下 [測試查詢]。

    此精靈會顯示一個對話方塊，以提示您輸入要在 WHERE 子句中使用的值。

  22. 在 [值] 方塊中，輸入 4，然後再按 [確定]。

    產品資訊隨即出現。

  23. 按一下 [完成]。

自訂 FormView 控制項中的配置

使用 FormView 控制項的原因是您可以定義其顯示之資料錄的配置。在本章節的逐步解說中，您將透過編輯樣板來自訂資料錄配置。您可以使用 HTML 表格來處理您的版面配置。

若要格式化配置

  1. 按一下 [FormView] 控制項以選取它，然後拖曳控制項右邊的調整大小控點，使控制項與目前頁面的寬度相同。

  2. 拖曳控制項底部的調整大小控點，將控制項的高度變更為大約 400 像素 (約略值即可)。

  3. 以滑鼠右鍵按一下控制項，然後按一下 [編輯樣板]，再按 [ItemTemplate]。

    控制項將以項目樣板編輯模式重新顯示。項目樣板包含靜態 (Static) 文字和用於在頁面執行時顯示資料錄的控制項。依照預設，Visual Web Developer 會將資料來源中之每個資料行的資料繫結 Label 控制項填入項目樣板。此外，Visual Web Developer 還會為每個標籤 (Label) 產生靜態文字做為標題。

    樣板也可以由具有文字 [編輯]、[刪除] 和 [新增] 的三個 LinkButton 控制項產生。

  4. 將插入點放在項目樣板的上方，按 ENTER 數次以留出空間，然後在項目樣板的上方輸入 Product Details，做為標題。

  5. 將游標放在控制項和靜態文字的下方，然後按一下 [表格] 功能表上的 [插入表格]。

    您將建立 HTML 表格做為文字和控制項的容器。

  6. 在 [插入表格] 對話方塊中，將 [列] 設定為 4，將 [欄] 設定為 2。

  7. 按一下 [確定] 關閉 [插入表格] 對話方塊。

  8. 選取表格的所有儲存格，然後選取 [表格] 功能表上的 [儲存格格式化]。

    [儲存格屬性] 對話方塊隨即出現。

  9. 將 [寬度] 設定為 35 像素 (px)，將 [高度] 設定為 30 像素 (px)。

  10. 按一下 [確定] 以關閉 [儲存格屬性] 對話方塊。

  11. 將 [ProductIdLabel] 控制項拖曳至右上角的儲存格中。

  12. 將 [ProductNameLabel] 控制項拖曳至右邊第二個儲存格中。

  13. 將 [UnitPriceLabel] 控制項拖曳至右邊第三個儲存格中。

  14. 在左邊的行中，輸入靜態文字，做為 Label 控制項的標題。例如，在 [ProductIdLabel] 控制項旁邊的儲存格中輸入 ID。您可以輸入任何想要的標題文字。

  15. 以滑鼠右鍵按一下左邊的行，然後按一下 [選取]，再按 [行]。

  16. 在 [屬性] 視窗中，將 [對齊] 設定為 [靠右對齊]，以使標題文字靠右對齊。

  17. 選取右邊的行，並拖曳其右邊的框線，以使表格的寬度足以顯示長產品名稱。

  18. 選取由 Visual Web Developer 產生的文字 (例如，文字 [ProductID]) 並將其刪除。

  19. 以滑鼠右鍵按一下 [FormView] 控制項的標題列，然後按一下 [結束樣板編輯]。

    樣板編輯器隨即關閉，而控制項會以所建立的配置出現。

測試 FormView 控制項

您現在可以測試配置。

若要測試 FormView 控制項

  1. 按 CTRL+F5 執行頁面。

  2. 在 DropDownList 控制項中，按一下產品名稱。

    FormView 控制項會顯示與該產品相關的詳細資料。

  3. 選取不同的產品，並確認 FormView 控制項會顯示產品的詳細資料。

  4. 關閉瀏覽器。

將編輯和插入功能加入至 FormView 控制項

FormView 控制項可以顯示個別資料錄，同時支援編輯、刪除和插入。

在這部分的逐步解說中，您可以加入編輯目前所顯示之資料錄的功能。若要編輯資料錄，請定義包含文字方塊 (也可能是其他控制項) 的不同樣板。

若要將編輯功能加入至 FormView 控制項

  1. 以滑鼠右鍵按一下 [FormView] 控制項，然後按一下 [編輯樣板]，再按 [EditItemTemplate]。

    樣板編輯器隨即出現，顯示 EditItemTemplate 屬性，該屬性會定義在控制項處於編輯模式時如何配置資料錄。Visual Web Developer 會將非索引鍵之每個資料行的 TextBox 控制項填入編輯樣板，並加入做為標題的靜態文字。這樣做類似於產生項目樣板的方法，不同之處在於，在編輯樣板中 Visual Web Developer 會產生文字方塊。

    與之前方法相同，會使用 [更新] 和 [取消] LinkButton 控制項產生樣板，在編輯時這兩個控制項用於儲存和捨棄變更。

  2. (選項性) 加入配置表格並依據之前在逐步解說中使用項目樣板的方式排列控制項。

  3. 以滑鼠右鍵按一下 [FormView] 控制項，然後按一下 [編輯樣板]，再按 [InsertItemTemplate]。

    如同 EditItemTemplate 屬性一般，Visual Web Developer 會自動建立標籤的樣板配置和 TextBox 控制項。當使用者要將新資料錄插入產品資料表時，就會顯示控制項。樣板同樣也使用 [插入] 和 [取消] LinkButton 控制項產生。

  4. (選項性) 加入配置表格並依據使用編輯項目樣板的方式排列控制項。

  5. 以滑鼠右鍵按一下 [FormView] 控制項，然後按一下 [結束樣板編輯]。

    安全性注意事項：

    在 ASP.NET Web 網頁中的使用者輸入可能會含有惡意的用戶端指令碼。ASP.NET Web 網頁預設會驗證使用者輸入，以確保輸入中未包含指令碼或 HTML 項目。一旦啟用了驗證，就不需要明確檢查使用者輸入中的指令碼或 HTML 項目。如需詳細資訊，請參閱 指令碼攻擊概觀。

測試編輯和插入

您現在可以測試編輯和插入。

若要測試 FormView 控制項的編輯功能

  1. 按 CTRL+F5 執行頁面。

  2. 在 DropDownList 控制項中選取產品。

    產品詳細資料會出現在 FormView 控制項中。

  3. 按一下 [編輯]。

    FormView 控制項會切換至編輯模式。

  4. 變更產品名稱或單價。

  5. 按一下 [更新]。

    會儲存資料錄，且 FormView 控制項會切換至顯示模式。顯示的畫面將會反映您所做的變更。

  6. 選取另一個產品。

  7. 按一下 [編輯]。

  8. 變更產品名稱。

  9. 按一下 [取消]。

    確認未儲存變更。

若要測試 FormView 控制項的插入功能

  1. 在 FormView 控制項中按一下 [新增]。

    FormView 控制項會切換至插入模式，顯示兩個空白文字方塊。

  2. 輸入新產品名稱和價格，然後按一下 [插入]。

    資料錄會儲存在資料庫中，同時 FormView 控制項會切換至顯示 (ItemTemplate) 檢視。

    注意事項：

    新資料錄不會顯示在下拉式清單中。您將在下一章節中加入該功能。

在下拉式清單中重新顯示更新的產品名稱

您的頁面現在允許在產品資料庫資料表中檢視、編輯或刪除資料錄。不過，下拉式清單尚未與您在 FormView 控制項中所做的變更進行同步處理。例如，您插入新的產品資料錄後，下拉式清單不會顯示此新資料錄，除非您關閉頁面然後重新開啟。此外，頁面最初會顯示產品資料表中的第一個資料錄，而其可能並不是您想要的資料錄。

您可以加入一些程式碼以修正這些次要問題。在這個部分的逐步解說中，您將執行下列事項：

  • 只要使用者編輯或插入資料錄，便更新下拉式清單。

  • 頁面第一次出現時，會將文字 [(Select)] 加入至下拉式清單，並在使用者做出第一個選取時將其移除。

若要在資料錄已編輯或插入後更新下拉式清單

  1. 在頁面的 [設計] 檢視中選取 [FormView] 控制項。

  2. 在 [屬性] 視窗中，按一下 [事件] 按鈕，以顯示 FormView 控制項的事件清單。

  3. 按兩下 [ItemInserted] 方塊。

    Visual Web Developer 會切換至程式碼編輯檢視，並建立 ItemInserted 事件的處理常式。

  4. 將下列以粗體顯示的程式碼加入至事件處理常式。

    Protected Sub FormView1_ItemInserted(ByVal sender As Object, _
   ByVal e As System.Web.UI.WebControls.FormViewInsertedEventArgs) _
   Handles FormView1.ItemInserted
      DropDownList1.DataBind()
End Sub

    [C#]

    protected void FormView1_ItemInserted(object sender, 
        FormViewInsertedEventArgs e)
{
    DropDownList1.DataBind();
}

    程式碼會在插入新資料錄後執行。它會將下拉式清單重新繫結至產品資料表，這樣做會重新整理清單的內容。

  5. 切換至 [設計] 檢視 (如果您正在使用程式碼後置 (Code-Behind) 的頁面，請切換至 Default.aspx 頁面，然後再切換至 [設計] 檢視)。

  6. 在 [屬性] 視窗中，按一下 [事件] 按鈕，以顯示 FormView 控制項的事件清單。

  7. 按兩下 [ItemUpdated] 方塊。

    Visual Web Developer 會切換至程式碼編輯檢視，並建立 ItemUpdated 事件的事件處理常式。

  8. 加入下列以粗體顯示的程式碼。

    Protected Sub FormView1_ItemUpdated(ByVal sender As Object, _
   ByVal e As System.Web.UI.WebControls.FormViewUpdatedEventArgs) _
   Handles FormView1.ItemUpdated
      DropDownList1.DataBind()
End Sub

    [C#]

    protected void FormView1_ItemUpdated(object sender, 
    FormViewUpdatedEventArgs e)
{
    DropDownList1.DataBind();
}

    程式碼會在更新資料錄後執行。它會將下拉式清單重新繫結至產品資料表，這樣做會重新整理清單的內容。

  9. 按 CTRL+F5 執行頁面。

  10. 編輯資料錄的產品名稱，然後按一下 [更新]，再檢查下拉式清單以確定顯示已更新的名稱。

  11. 插入新產品資料錄，然後按一下 [插入]，再檢查下拉式清單以確定新名稱已加入至清單。

最後一步是變更下拉式清單以顯示 [(Select)]，這樣做會讓 FormView 控制項只在使用者進行選取時顯示。

若要將選取項目加入至 DropDownList 控制項

  1. 在 [設計] 檢視中，按兩下頁面的空白部分。

    Visual Web Developer 會建立該頁面之 Load 事件的事件處理常式。

  2. 在處理常式中加入下列以粗體顯示的程式碼。

    [Visual Basic]

    Protected Sub Page_Load(ByVal sender As Object, _
        ByVal e As System.EventArgs) Handles Me.Load
    If Not IsPostBack Then        FormView1.Visible = False    End If
End Sub

    [C#]

    protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        FormView1.Visible = false;
    }
}

    當頁面執行時，程式碼就會跟著執行。它會首先測試以查看是否為回傳，如果不是，則為第一次執行頁面。如果不是回傳，程式碼會隱藏 FormView 控制項，因為只有在使用者已明確選取要檢視或編輯的資料錄時，才會想顯示該控制項。

  3. 請在頁面的 [設計] 檢視中選取 [DropDownList] 控制項。

  4. 在 [屬性] 視窗中，按一下 [項目] 方塊中的省略號 (...)。

    [ListItem 集合編輯器] 對話方塊隨即出現。

  5. 按一下 [加入] 以建立新項目。

  6. 在 [ListItem 屬性] 下的 [文字] 方塊中，輸入 (Select)。

  7. 按一下 [確定] 關閉 [ListItem 集合編輯器] 對話方塊。

  8. 在 [屬性] 方塊中，將 [AppendDataBoundItems] 設定為 true。

    在資料繫結期間填入下拉式清單時，會將產品資訊加入至所定義的 [(Select)] 項目。

  9. 在 [屬性] 視窗中，按一下 [事件] 按鈕，以顯示 DropDownList 控制項的事件清單。

  10. 按兩下 [SelectedIndexChanged] 方塊。

  11. 加入下列以粗體顯示的程式碼。

    [Visual Basic]

    Protected Sub DropDownList1_SelectedIndexChanged(ByVal sender _
    As Object, ByVal e As System.EventArgs) _
    Handles DropDownList1.SelectedIndexChanged
        If DropDownList1.Items(0).Text = "(Select)" Then            DropDownList1.Items.RemoveAt(0)        End If        FormView1.Visible = True
End Sub

    [C#]

    protected void DropDownList1_SelectedIndexChanged(object sender, 
    EventArgs e)
{
    if(DropDownList1.Items[0].Text == "(Select)")    {        DropDownList1.Items.RemoveAt(0);    }    FormView1.Visible = true;
}

    會在使用者選取 DropDownList 控制項中的項目時，執行程式碼。它會移除之前加入的 [(Select)] 項目 (請先檢查以確保它存在)，因為在使用者第一次選取項目後，將不再需要提示使用者選取項目。程式碼還會顯示 (取消隱藏) FormView 控制項，這樣做會讓使用者可以查看他們所選取的資料錄。

  12. 按 CTRL+F5 執行頁面。

    此頁面只顯示下拉式清單以及文字 [(Select)]。

  13. 選取清單中的項目。

    此項目會顯示在 FormView 控制項中。

  14. 檢查下拉式清單，您會注意到文字 [(Select)] 不再存在於清單中。

後續步驟

此逐步解說會示範使用 FormView 控制項並利用自訂配置來顯示和編輯個別資料錄的基本步驟。FormView 控制項可以讓您執行比這個逐步解說中更複雜的格式化動作。此外，您還可以為其他模式 (包括選取模式和插入模式) 以及隨資料錄一起顯示的頁首和頁尾建立樣板。如需其他 FormView 的相關使用案例，請參閱下列主題：

建立 FormView Web 伺服器控制項的範本

使用 FormView Web 伺服器控制項修改資料

請參閱

概念

FormView Web 伺服器控制項概觀

參考

DetailsView Web 伺服器控制項概觀