共用方式為

逐步解說：使用 DataList Web 伺服器控制項顯示並格式化資料

  • 發行項

更新：2007 年 11 月

Web 網頁中的一般工作是顯示資料，實際上就是建立資料報告。在這個逐步解說中，您將使用 DataList 控制項，它可讓您為在 ASP.NET Web 網頁上顯示的資料錄，建立自由格式的配置。

透過這份逐步解說，您將了解如何：

  • 加入 DataList 控制項，並使用樣板配置由DataList 控制項所顯示的資料。

  • 將 DataList 控制項繫結至資料來源。

  • 將子資料控制項和部分程式碼加入 DataList 控制項，以顯示主要/詳細關係中的資料。

必要條件

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

  • Microsoft Visual Web Developer (Visual Studio)。

  • 存取 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\FormatDataList。

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

    您選擇的程式語言將成為網站的預設值，不過您可以為每個網頁分別設定程式語言。

  6. 按一下 [確定]。

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

加入 DataList 控制項

在這個逐步解說的第一部分中，您將加入 DataList 控制項，然後設定其資料來源。

若要加入和設定要在方格中顯示資料的 DataList 控制項

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

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

  3. 以滑鼠右鍵按一下 [DataList] 控制項，再按 [顯示智慧標籤]。

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

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

  5. 按一下 [資料庫]。

    這樣會指定您要從支援 SQL 陳述式的資料庫中取得資料。(這包含 SQL Server 和其他 OLE-DB 相容的資料庫)。

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

  7. 按一下 [確定]。

    [設定資料來源] 精靈會顯示一個頁面，讓您可以在其中建立連接。

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

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

    [加入連接] 網頁隨即出現。

  9. 在 [加入連接] 網頁的 [伺服器名稱] 文字方塊中，輸入執行 SQL Server 資料庫的電腦名稱。

  10. 對於登入認證，請選取適合存取執行 SQL Server 資料庫之電腦的選項 (整合式安全性或特定 ID 和密碼)，並在必要時輸入使用者名稱和密碼。

  11. 選取 [儲存我的密碼] 核取方塊。

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

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

    會出現填入了連接資訊的 [設定資料來源] 精靈。

  14. 按 [下一步]。

    [設定資料來源] 精靈會顯示一個頁面，您可以在該頁面中選擇將連接字串 (Connection String) 儲存在組態檔中。在組態檔中儲存連接字串有兩個優點：

    • 這麼做比將它儲存在頁面裡來得安全。

    • 您可以在多個頁面中重複使用相同的連接字串。

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

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

  16. 請確定已選取 [指定資料表或檢視的資料行]。

  17. 在 [名稱] 清單中按一下 [分類]。

  18. 在 [資料行] 下方，選取 [CategoryID] 和 [CategoryName] 核取方塊。

    [設定資料來源] 精靈會將您建立的 SQL 陳述式顯示在頁面底部的方塊中。

    注意事項：

    [設定資料來源] 精靈可讓您指定選取條件 (WHERE 子句) 和其他 SQL 查詢選項。對於逐步解說的這個部分，您將建立不具有任何選取或排序選項的簡單陳述式。

  19. 按 [下一步]。

  20. 按一下 [測試查詢]，確定您正在取得所要的資料。

  21. 按一下 [完成]。

    [設定資料來源] 精靈會關閉，且您將返回 SqlDataSource 控制項。如果您檢視 SqlDataSource 控制項的屬性，則會看到 [設定資料來源] 精靈已建立了 ConnectionString 和 SelectQuery 屬性的值。雖然 Visual Web Developer 中的屬性會顯示完整的連接字串，但網頁中只會儲存連接字串識別項 (在這種情況下為 NorthwindConnectionString)。

格式化 DataList 控制項的配置

此時，具有 Categories 資料表資訊之預設配置的網頁上會有 DataList 控制項。DataList 控制項的優點在於，您可以為資料建立自由格式的配置。在本節中，您將使用樣板並使用文字和控制項對其進行設定，以自訂資料顯示畫面。

若要格式化 DataList 控制項中的配置

  1. 以滑鼠右鍵按一下 [DataList] 控制項，按一下 [編輯樣板]，再按 [項目樣板]。

    DataList 控制項會切換至樣板編輯模式，並為這些樣板顯示樣板方塊：

    依照預設，Visual Web Developer 會將資料來源中之每個資料行的資料繫結 Label 控制項填入項目樣板。此外，Visual Web Developer 還會為每個標籤 (Label) 產生靜態 (Static) 文字做為標題。

  2. 拖曳右邊大小調整控點以增加 [DataList] 控制項的寬度，讓其佔用大部分頁寬。

  3. 編輯項目樣板以重新整理 Label 控制項，並建立新標題，以便樣板內容看起來與下列程式碼範例類似。

    Name: [CategoryNameLabel] (ID: [CategoryIDLabel])

  4. 按一下 [CategoryNameLabel] 控制項。在 [屬性] 中，展開 [字型] 節點，然後將 [粗體] 設為 true。

  5. 在 [設計] 檢視中的 DataList 控制項上，以滑鼠右鍵按一下標題列，再按 [編輯樣板] 和 [分隔符號樣板]。

    分隔符號樣板可讓您指定資料錄之間會顯示哪些文字或其他項目。

  6. 在 [工具箱] 中，從 [HTML] 群組將 Horizontal Rule 項目拖曳至分隔符號樣板。

  7. 在 DataList 控制項上，以滑鼠右鍵按一下標題列，再按 [結束樣板編輯]。

測試 DataList 控制項

您現在可以測試已建立的配置。

若要測試 DataList 控制項

  • 按 CTRL+F5 執行頁面。

    網頁會顯示分類名稱和 ID 的清單，每個資料錄之間都用線隔開。

顯示 DataList 控制項內的相關資訊

目前正在使用的 DataList 控制項會使用您先前定義的自訂配置，顯示個別分類資料錄。您只是稍微變更了預設配置，但可以看到藉由使用樣板，您可以其他方式排列文字和控制項、格式化內容，以及修改資料錄顯示畫面。

配置可以包含目前資料錄以及相關的資料錄。在逐步解說的這個部分中，您將變更配置，以便每個資料列都顯示分類和該分類中的產品。實際上，您將在 DataList 控制項的每個資料列內顯示主要/詳細關係。您將需要撰寫簡短的程式碼片段以啟用這個案例。

若要顯示 DataList 控制項內的相關資訊

  1. 以滑鼠右鍵按一下 [DataList] 控制項，按一下 [編輯樣板]，再按 [項目樣板]。

  2. 在 [工具箱] 中，從 [標準] 群組將 BulletedList 控制項拖曳至項目樣板，然後將 BulletedList 放在分類資訊下。

    BulletedList 控制項會顯示資料，每個分項項目中有一個資料行。

  3. 以滑鼠右鍵按一下 [BulletedList] 控制項，再按 [顯示智慧標籤]。

  4. 按一下 [選擇資料來源]。

    您將建立讀取相關資料錄的第二個資料來源控制項。

  5. 在 [選擇資料來源] 對話方塊的 [選取資料來源] 清單上，按一下 [新增資料來源]。

  6. 按一下 [資料庫]。

  7. 在 [指定資料來源的 ID] 方塊中，輸入 bulletedListDataSource。

    雖然您通常可以保留資料來源的預設名稱，但在這種情況下，將可預測的特定名稱指派給資料來源將非常有用，這樣您就可以稍後在程式碼中參考它。

  8. 按一下 [確定]。

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

  9. 在 [您的應用程式應該使用哪個資料連接來連接資料庫?] 清單中，按一下您之前在這個逐步解說中建立的連接名稱，再按 [下一步]。

    [設定資料來源] 精靈會顯示一個頁面，讓您可以在其中建立 SQL 陳述式。

  10. 在 [名稱] 方塊中的 [指定資料表或檢視的資料行] 下，按一下 [產品]。

  11. 在 [資料行] 方塊中，選取 [ProductName] 方塊。

    BulletedList 控制項只會顯示一個資料行。

  12. 按一下 [WHERE] 按鈕。

    [加入 WHERE 子句] 對話方塊隨即出現。

  13. 在 [資料行] 清單中，按一下 [CategoryID]。

  14. 在 [運算子] 清單中，按一下 [=]。

  15. 在 [來源] 清單中，按一下 [無]。

    這表示將以變數形式提供 [CategoryID] 資料行的值。

  16. 依序按一下 [新增]、[確定]、[下一步] 和 [完成]。

    測試查詢將不處理變數。

  17. 在 [選取要顯示在 BulletedList 中的資料欄位] 清單中，按一下 [ProductName]。按一下 [確定]。

  18. 在 DataList 控制項中，以滑鼠右鍵按一下標題列，再按 [結束樣板編輯]。

撰寫用來設定分類 ID 的程式碼

您為 bulletedListDataSource 控制項所建立的 SQL 陳述式會與下列程式碼類似：

SELECT [ProductName] FROM [Products] WHERE ([CategoryID] = @CategoryID)

在執行階段，DataList 控制項會顯示分類資料錄的清單，其包含分類名稱和分類 ID。在上一節中，您已加入將為每個分類顯示全部產品的 BulletedList 控制項。每個分類資料錄都在顯示時，DataList 控制項會使用上一個查詢執行查詢，以取得該分類的產品。

對於顯示的每個資料錄，您都必須對查詢提供分類 ID。要完成這項操作，您可以撰寫簡短的程式碼片段，其會從目前正在顯示的資料錄取得分類 ID，然後將該分類 ID 做為參數傳遞給 bulletedListDataSource 控制項中的查詢。

若要撰寫用來設定分類 ID 的程式碼

  1. 按一下 [DataList] 控制項，然後在工具列的 [屬性] 中，按一下 [事件]。

  2. 按兩下 ItemDataBound，為該事件建立事件處理常式。

  3. 複製下列程式碼至處理常式。

    If e.Item.ItemType = ListItemType.Item Or _
    e.Item.ItemType = ListItemType.AlternatingItem Then
  Dim ds As SqlDataSource
  ds = CType(e.Item.FindControl("bulletedListDataSource"), _
      SqlDataSource)
  Dim categoryID As String
  categoryID = DataBinder.Eval(e.Item.DataItem, _
      "categoryid").ToString()
  ds.SelectParameters("CategoryID").DefaultValue = _
      categoryID
End If

    if (e.Item.ItemType == ListItemType.Item ||
    e.Item.ItemType == ListItemType.AlternatingItem)
{
  SqlDataSource ds;
  ds = e.Item.FindControl("bulletedListDataSource")
      as SqlDataSource;
  ds.SelectParameters["CategoryID"].DefaultValue =
      DataBinder.Eval(e.Item.DataItem,
      "categoryid").ToString();
}

    針對每個顯示的資料錄，會引發 ItemDataBound 事件，進而為您提供讀取或修改資料的機會。這個程式碼會執行下列操作：

    1. 檢查以確定繫結ItemTemplate 或 AlternatingItemTemplate 物件 (而不是 SeparatorTemplate 物件或其他型別的樣板) 時是否正在發生該事件。

    2. 使用 FindControl 方法，以取得在每個項目樣板內所建立之 SqlDataSource 控制項執行個體的參考。

    3. 藉由評估目前的 DataItem 屬性，取得 CategoryID 資料行的值。

    4. 設定參數型查詢的 CategoryID 變數，方法是設定 SelectParameters 集合中的 DefaultValue 屬性。

測試程式碼

您現在可以測試程式碼。

若要測試用來設定分類 ID 的程式碼

  • 按 CTRL+F5 執行頁面。

    DataList 控制項會顯示每個分類資料錄，而對於每個資料錄，它還會在項目符號清單中顯示屬於該分類的產品。

後續步驟

這個逐步解說說明了使用 DataList Web 伺服器控制項顯示和格式化資料之簡單卻很完整的案例。您可以使用該逐步解說中說明的技術和控制項建立更加複雜之資料導向的網頁和應用程式。例如，您可能要：

請參閱

工作

HOW TO：允許使用者選取 DataList Web 伺服器控制項中的項目

逐步解說：在 Visual Studio 中建立主從式 Web 網頁

參考

DataList