共用方式為

逐步解說：建立巢狀 GridView 控制項

更新：2007 年 11 月

GridView 控制項會在方格 (HTML 資料表) 中顯示資料列，且在每個方格資料列中顯示一個資料列。本逐步解說會顯示如何擴充 GridView 控制項的功能，使個別的方格資料列可以顯示相關資料表的資料。在本逐步解說中，您會在巢狀的 GridView 控制項 (也就是在父代 GridView 控制項的方格資料列內的 GridView 控制項) 中顯示相關資料。

巢狀資料的範例包括顯示客戶清單的 GridView 控制項，其中 GridView 控制項的每個資料列都包含另一個顯示該客戶訂單的 GridView 控制項。

在本逐步解說中，兩個 GridView 控制項都會使用 SqlDataSource 控制項從資料來源擷取資料。

在瀏覽這份逐步解說期間，您將了解如何進行下列作業：

  • 連接到 Microsoft Visual Web Developer 中的 SQL Server 資料庫。

  • 使用 SqlDataSource 控制項管理資料存取和繫結。

  • 顯示從 GridView 控制項中的資料庫傳回的資料。

  • 建立具有巢狀控制項且由 GridView 控制項所顯示的 TemplateField。

  • 根據執行階段條件動態地自訂每個資料列的顯示。

  • 或者以 SqlDataSource 控制項使用資料快取，以減少對資料庫的要求。

必要條件

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

  • 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 網站上的安裝範例資料庫 (英文)。

    注意事項：

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

建立網站

如果您已經藉由完成逐步解說：在 Visual Web Developer 中建立基本 Web 網頁中的步驟而在 Visual Web Developer 中建立了網站，則可以使用該網站，並繼續進行下一節的步驟。否則，請依照下列這些步驟建立新的網站和 Web 網頁。

若要建立檔案系統網站

  1. 開啟 Visual Web Developer。

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

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

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

  4. 請在第一個 [位置] 方塊中，選取 [檔案系統]；在第二個中，輸入您想要用來保存網站網頁的資料夾名稱。

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

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

  6. 按一下 [確定]。

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

加入 GridView 控制項的資料來源

若要在 ASP.NET Web 網頁上顯示資料，您需要下列項目：

  • 資料來源 (例如資料庫) 的連接。在下列程序中，您將建立 SQL Server Northwind 資料庫的連接。

  • 頁面上的控制項，用以顯示資料。

在下列程序中，您將會在 GridView 控制項中顯示資料。GridView 控制項將會從 SqlDataSource 控制項取得其資料。

若要加入 GridView 控制項的資料來源

  1. 開啟或切換至 Default.aspx 頁面

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

  3. 在 [工具箱] 中，將 SqlDataSource 控制項從 [資料] 群組拖曳至網頁。

    如果 [SqlDataSource 工作] 智慧標籤沒有出現，請以滑鼠右鍵按一下 SqlDataSource 控制項，再按一下 [顯示智慧標籤]。

  4. 在 [SqlDataSource 工作] 面板中，按一下 [設定資料來源]。

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

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

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

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

    • 如果出現 [選擇資料來源] 對話方塊而不是 [連接屬性] 對話方塊，請在 [資料來源] 清單中選取要使用的資料來源類型。在此逐步解說中，資料來源型別為 Microsoft SQL Server。在 [資料提供者] 清單中，按一下 [.NET Framework Data Provider for SQL Server]，然後按一下 [繼續]。

  6. 在 [加入連接] 網頁的 [伺服器名稱] 文字方塊中，輸入範例 Northwind 資料庫安裝所在的電腦名稱。

  7. 在 [登入伺服器] 區段中，選取正確的選項以存取所執行的 SQL Server 資料庫 (整合式安全性或特定的 ID 和密碼)。視需要輸入使用者名稱和密碼。

  8. 如果您輸入密碼，請選取 [儲存我的密碼] 核取方塊。

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

  10. 按一下 [測試連接]，只要您確定連接已正常運作後，按一下 [確定]。

  11. 在 [設定資料來源] 精靈中按一下 [下一步]。

  12. 確定已選取 [是，將這個連接儲存為] 核取方塊。

  13. 將連接命名為 [NorthwindConnectionString]，然後按一下 [下一步]。

  14. 在 [設定 Select 陳述式] 精靈步驟中，選取 [指定資料表或檢視的資料行]。

  15. 在 [名稱] 清單方塊中，選取 [客戶]。

  16. 在 [資料行] 面板中，選取 [客戶編號] 和 [公司名稱] 資料行。

  17. 按一下 [下一步]。

  18. 按一下 [完成]。

加入 GridView 控制項以顯示資料

在建立資料來源控制項來擷取資料之後，頁面上還需要加入控制項來顯示資料。

在下列程序中，您將會在 GridView 控制項中顯示資料。GridView 控制項將會從之前所加入的 SqlDataSource 控制項取得其資料。

若要加入並設定用於顯示資料的 GridView 控制項

  1. 確定您在 Default.aspx 頁面的 [設計] 檢視中。

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

  3. 在 [GridView 工作] 功能表的 [選擇資料來源] 清單方塊中，選取先前加入的 SqlDataSource 控制項 SqlDataSource1。

  4. 選取 [啟用分頁] 核取方塊。

  5. 在 [屬性] 視窗中，展開 GridView 控制項的 RowStyle 屬性，然後將 VerticalAlign 屬性設定為 Top。這樣會將儲存頂端方格資料列中的文字對齊，因為巢狀的方格會顯示多行文字。

加入巢狀 GridView 控制項以顯示相關資料

您現在必須建立巢狀的資料來源和 GridView 控制項，以在每一個資料列中顯示相關資料。若要這麼做，您需要執行下列作業：

若要加入並設定用於顯示資料的巢狀 GridView 控制項

  1. 確定您在 Default.aspx 頁面的 [設計] 檢視中。

  2. 以滑鼠右鍵按一下 GridView 控制項，然後選取 [顯示智慧標籤]。

  3. 按一下 [編輯資料行]。

    [欄位] 對話方塊隨即出現。

  4. 在 [可用的欄位] 面板中，選取 [TemplateField]，然後按一下 [加入]。

  5. 在 [TemplateField 屬性] 面板中，將 [HeaderText] 設定為 [訂單]。

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

  7. 在 [GridView 工作] 面板中，按一下 [編輯樣板]。

  8. 在 [樣板編輯模式] 面板中，從 [顯示] 清單方塊選取 [ItemTemplate]。

  9. 從 [工具箱] 的 [資料] 群組中，將 [SqlDataSource] 控制項拖曳至頁面的 ItemTemplate 可編輯區域。

    如果 [SqlDataSource 工作] 智慧標籤沒有出現，請以滑鼠右鍵按一下 SqlDataSource 控制項，再按一下 [顯示智慧標籤]。

  10. 在 [SqlDataSource 工作] 智慧標籤中，按一下 [設定資料來源]。

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

  11. 針對 [選擇資料連接] 步驟，選取稍早在本逐步解說中所建立的 NorthwindConnectionString，然後按一下 [下一步]。

  12. 在 [設定 Select 陳述式] 精靈步驟中，選取 [指定資料表或檢視的資料行]。

  13. 從 [名稱] 清單中，選取 [訂單]。

  14. 在 [資料行] 面板中，選取 [訂單編號] 和 [訂單日期] 資料行。

  15. 按一下 [WHERE] 以加入 SELECT 陳述式的參數。

  16. 在 [加入 WHERE 子句] 視窗中，選取 [資料行] 清單方塊中的 [客戶編號]。

  17. 選取 [來源] 清單方塊中的 [無]。

  18. 按一下 [加入]。

    這樣會建立選取參數，而您將針對與父 GridView 控制項繫結的每個資料列，將此參數設定為客戶編號值。

  19. 按一下 [確定]。

  20. 按一下 [下一步]。

  21. 按一下 [完成]。

  22. 從 [工具箱] 的 [資料] 群組中，將 GridView 控制項拖曳至 ItemTemplate 的可編輯區域。

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

  23. 在 [GridView 工作] 智慧標籤的 [選擇資料來源] 清單方塊中，選取巢狀 SqlDataSource 控制項的名稱 SqlDataSource2。

  24. 以滑鼠右鍵按一下父 GridView 控制項 GridView1，然後選取 [顯示智慧標籤]。

  25. 在 [GridView 工作] 面板中，按一下 [結束樣板編輯]。

    注意事項：

    巢狀 GridView 控制項不會顯示在 [設計] 檢視中。

  26. 在 GridView1 的 [屬性] 面板中，按一下 [事件] 按鈕 。

  27. 在 [RowDataBound ] 方塊中輸入 GridView1_RowDataBound，然後按 ENTER 鍵。

    Visual Web Developer 會為 GridView 控制項的 RowDataBound 事件建立事件處理常式。此程式碼將類似於下列的程式碼範例。

    Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowDataBound

End Sub

    protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{

}

  28. 將下列程式碼加入程序中：

    If e.Row.RowType = DataControlRowType.DataRow Then
    Dim s As SqlDataSource = CType(e.Row.FindControl("SqlDataSource2"), SqlDataSource)
    s.SelectParameters(0).DefaultValue = e.Row.Cells(0).Text
End If

    if (e.Row.RowType == DataControlRowType.DataRow)
{
    SqlDataSource s = (SqlDataSource)e.Row.FindControl("SqlDataSource2");
    s.SelectParameters[0].DefaultValue = e.Row.Cells[0].Text;
}

    程式碼會擷取目前資料列的客戶編號值，並將其設定為巢狀 SqlDataSource 控制項 SqlDataSource2 的選取參數值。

  29. 將這些變更儲存至檔案。

測試網頁

現在您就可以執行此頁面。

若要測試網頁

  1. 按 CTRL+F5 執行頁面。

    GridView 控制項會顯示 Northwind Customers 資料表的資料列，且每一個資料列中都會嵌入 Northwind Orders 資料表中每個客戶的資料。

  2. 關閉瀏覽器。

以巢狀的 GridView 控制項使用快取

本逐步解說到目前為止，已經利用巢狀的 GridView 控制項建立了頁面。就目前的撰寫方式，此頁面會針對父 GridView 控制項查詢資料庫一次，然後針對每個巢狀 GridView 控制項再查詢資料庫一次。

為了減輕資料庫的負擔，您可以修改巢狀查詢，以傳回所有的資料列、將結果存入快取，然後再針對每個巢狀的 GridView 控制項篩選結果。

注意事項：

如果是大型資料庫，則這種方法並不實際。如果要從大型資料庫擷取資料，請建置 (Build) 只會擷取必要資料列的資料物件，並使用 ObjectDataSource 控制項與該物件繫結。如需詳細資訊，請參閱 ObjectDataSource Web 伺服器控制項概觀。

若要將巢狀 SqlDataSource 控制項設定為快取查詢結果

  1. 確定您在 Default.aspx 頁面的 [設計] 模式中。

  2. 以滑鼠右鍵按一下父 GridView 控制項 GridView1，然後按一下 [編輯樣板]。

  3. 在 [訂單] 資料行的 ItemTemplate 中，選取巢狀的 SqlDataSource 控制項 SqlDataSource2。

  4. 在 [屬性] 視窗中，將 EnableCaching 屬性設定成 true。

  5. 將 FilterExpression 屬性設為 CustomerID='{0}'。

  6. 在 FilterParameters 屬性中按一下省略號按鈕 () 以開啟 [參數集合編輯器] 視窗。

  7. 在 [參數集合編輯器] 視窗中按一下 [加入參數]。

  8. 在 [名稱] 方塊中，輸入客戶編號。

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

  10. 以滑鼠右鍵按一下巢狀 SqlDataSource 控制項 SqlDataSource2，然後選取 [顯示智慧標籤]。

  11. 按一下 [設定資料來源]。

  12. 保留連接資訊不變，然後按一下 [下一步]。

  13. 在 [設定 Select 陳述式] 步驟中，選取 [指定資料表或檢視的資料行]。

  14. 從 [名稱] 清單方塊中，選取 [訂單]。

  15. 在 [資料行] 區段中檢查 [訂單編號]、[客戶編號] 和 [訂單日期] 資料行，然後按一下 [下一步]。

  16. 按一下 [完成]。

  17. 當您接到提示，詢問是否要重新整理巢狀 GridView 控制項 GridView2 的欄位和索引鍵時，按一下 [否]。

    由巢狀 GridView 控制項所顯示的資料行不會變更。

    您已經將巢狀 SqlDataSource 控制項 SqlDataSource2 設定為從資料庫擷取所有的訂單資料，並將其快取在本機。當巢狀 GridView 控制項繫結到資料後，就會套用篩選條件，以僅顯示與目前資料列的客戶編號值相關的訂單。

  18. 如果是使用程式碼後置 (Code-Behind) 頁面，請以滑鼠右鍵按一下頁面的空白區域，然後按一下 [檢視程式碼]。

  19. 將 RowDataBound 事件處理常式的程式碼變更為如下所述：

    If e.Row.RowType = DataControlRowType.DataRow Then
    Dim s As SqlDataSource = CType(e.Row.FindControl("SqlDataSource2"), SqlDataSource)
    s.FilterParameters(0).DefaultValue = e.Row.Cells(0).Text
End If

    if (e.Row.RowType == DataControlRowType.DataRow)
{
    SqlDataSource s = (SqlDataSource)e.Row.FindControl("SqlDataSource2");
    s.FilterParameters[0].DefaultValue = e.Row.Cells[0].Text;
}

    在這個程式碼版本中，並不是在 SqlDataSource 控制項的 SelectParameters 集合中設定值，而是在其 FilterParameters 集合中設定值。

  20. 儲存檔案。

測試網頁

現在您就可以執行此頁面。

若要測試網頁

  1. 按 CTRL+F5 執行頁面。

    GridView 控制項會顯示 Northwind Customers 資料表的資料列，且每一個資料列中都會嵌入 Northwind Orders 資料表中每個客戶的資料。不過，當第一個資料列有資料繫結時，會一次要求繫結至 GridView 控制項的所有資料。資料會與 GridView 控制項的剩餘資料列快取以供使用。

  2. 關閉瀏覽器。

後續步驟

本逐步解說已說明如何擴充 GridView 控制項的功能，以在 ASP.NET Web 網頁上使用巢狀 GridView 控制項顯示相關的資料。您也可以使用 DetailsView 或 FormView 控制項來擴充應用程式，以更新和刪除資料，或者讓使用者插入新的資料錄。您也可以使用 TextBox 控制項以外的控制項 (例如 DropDownList 控制項) 變更值。如需詳細資訊，請參閱下列主題：

請參閱

工作

HOW TO：使用資料來源控制項時保護連接字串

逐步解說：在 GridView Web 伺服器控制項中進行編輯時顯示下拉式清單

逐步解說：Web 網頁中的基本資料存取

  • Last updated on