共用方式為


逐步解說:使用 ListView Web 伺服器控制項顯示、分頁和排序資料

更新:2007 年 11 月

在本逐步解說中您要使用 ListView 控制項,它可讓您以使用範本所定義的格式來顯示資料來源中的資料。使用樣板,您就可以完整地控制控制項中之資料的配置和外觀。ListView 控制項自動支援編輯、插入和刪除作業,以及排序和分頁功能。

此逐步解說將說明以下工作:

  • 使用 ListView 控制項顯示資料庫中的資料。

  • 將分頁功能加入至 ListView 控制項。

  • 將排序功能加入至 ListView 控制項。

必要條件

若要完成這個逐步解說,您必須要有:

  • Visual Studio 2008 或 Visual Web Developer 2008 Express 版。

  • SQL Server Express Edition。如果已經安裝 SQL Server,則只需稍微調整某些程序,您就可以改用 SQL Server。

  • 電腦上已安裝的 AdventureWorks 資料庫。如需下載並安裝 SQL Server 範例 AdventureWorks 資料庫的詳細資訊,請參閱 Microsoft SQL Server 網站上的安裝 Express Edition 的範例資料庫 (英文)。

  • 可以存取 AdventureWorks 資料庫的 SQL Server 帳戶使用者名稱和密碼。

建立網站

如果您已經建立了網站 (例如,完成了 逐步解說:在 Visual Web Developer 中建立基本 Web 網頁),就可以使用該網站並繼續至下一節。否則,請依照下列步驟建立新的網站和網頁。

若要建立檔案系統網站

  1. 開啟 Visual Studio 2008 或 Visual Web Developer 2008 Express 版。

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

    [新網站] 對話方塊便會顯示。

  3. 按一下 [Visual Studio 安裝的範本] 之下的 [ASP.NET 網站]。

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

    例如,輸入資料夾名稱 C:\WebSites\DisplayData。

  5. 在 [語言] 清單中,按一下您想要使用的程式語言。

  6. 按一下 [確定]。

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

在 ListView 控制項中顯示和分頁資料

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

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

  • 頁面上的資料來源控制項,會與資料來源 (資料庫) 互動以讀取和寫入資料。在本逐步解說中,您要使用與 SQL Server AdventureWorks 資料庫互動的 SqlDataSource 控制項。

  • 頁面上的控制項,用以顯示資料。在下面的程序中,您要將資料顯示在 ListView 控制項中,它會從 SqlDataSource 控制項中取得其資料。

若要在 ListView 控制項中顯示和分頁資料

  1. 如果網站沒有 App_Data 資枓夾,請在 [方案總管] 中以滑鼠右鍵按一下專案,然後按一下 [加入 ASP.NET 資料夾],再按一下 [App_Data]。

  2. 在 [方案總管] 中,以滑鼠右鍵按一下 [App_Data] 資料夾,然後按一下 [加入現有項目]。

    [加入現有項目] 對話方塊隨即出現。

  3. 輸入 AdventureWorks 資料庫檔案的位置 (AdventureWorks_Data.mdf)。

    根據預設,.mdf 檔案的安裝路徑是 C:\Program Files\Microsoft SQL Server\MSSQL.1\MSSQL\Data\AdventureWorks_Data.mdf。

    注意事項:

    這個程序會建立專案中資料庫檔案的複本。資料庫檔案很大。如果不方便製作資料庫複本,您可以使用替代方法連接至資料庫,例如直接附加資料庫檔案。但是,本逐步解說不提供這個程序的說明。

  4. 切換至 Default.aspx 檔案或開啟它。

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

  6. 從 [工具箱] 的 [資料] 索引標籤,將 ListView 控制項拖曳到網頁上。

    ListView 控制項

  7. 在 [一般 ListView 工作] 功能表上,按一下 [選擇資料來源] 下拉式清單中的 [<新增資料來源>]。

    [資料來源組態] 精靈隨即出現。

  8. 按一下 [資料庫]。

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

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

    資料來源組態精靈

  10. 按一下 [確定]。

    [設定資料來源] 精靈便會顯示。

  11. 在 [您的應用程式應該使用哪個資料連接來連接資料庫?] 之下,選取清單中的 AdventureWorks_Data.mdf。

  12. 按 [下一步]。

    精靈會顯示一個頁面,您可以在此指定將連接字串儲存在組態檔中。在組態檔中儲存連接字串有兩個優點:

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

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

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

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

  14. 選取 [指定自訂 SQL 陳述式或預存程序] 選項。

    設定 Select 陳述式

    注意事項:

    一般而言,您要使用的選項是 [指定資料表或檢視的資料行]。但是,因為 AdventureWorks 資料庫有結構描述名稱,所以在本逐步解說中,您要建立自訂 SQL 陳述式。

  15. 按 [下一步]。

  16. 在 [定義自訂陳述式或預存程序] 頁面中,輸入下列 SQL 查詢以擷取 [AdventureWorks] 資料庫中的連絡人資料。

    SELECT  ContactID, FirstName, LastName, EmailAddress
    FROM    Person.Contact
    

    您也可以按一下 [查詢產生器] 並使用 [查詢產生器] 視窗以建立查詢,然後使用 [執行查詢] 按鈕驗證查詢。

    注意事項:

    精靈可讓您指定選取準則 (Where 子句) 和其他 SQL 查詢選項。在這個逐步解說中,您將建立不含選取或排序準則的簡單陳述式。

  17. 按 [下一步]。

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

  19. 按一下 [完成]。

    精靈會建立 SqlDataSource 控制項並將其加入至頁面。您先前所加入的 ListView 控制項會繫結至 SqlDataSource 控制項。

    如果您檢視 SqlDataSource 控制項的屬性,將會看到精靈已建立 ConnectionStringSelectCommand 屬性的值。

  20. 以滑鼠右鍵按一下 ListView 控制項,然後按一下 [顯示智慧標籤]。

  21. 按一下 [一般 ListView 工作] 功能表上的 [設定 ListView]。

    [設定 ListView] 對話方塊隨即出現。

  22. 選取 [啟用分頁]。

    注意事項:

    您可能也想要選取更方便檢視資料的其他樣式。若要這麼做,請在 [選取樣式] 之下選取一個樣式,例如 [繽紛]。

    精靈會根據查詢中的資料行,為 ListView 控制項建立範本。您可以編輯內含配置項目、控制項及繫結運算式的範本,以自訂配置。

    設定 ListView

  23. 按一下 [確定]。

    ListView 控制項

繼續下個步驟之前,您可以測試 ListView 控制項。

若要測試 ListView 控制項

  1. 按 CTRL+F5 執行頁面。

    ListView 控制項會與 [ContactID]、[FirstName]、[LastName] 和 [EmailAddress] 資料行一起顯示。

  2. 按一下頁面底部的 [第一頁]、[上一頁]、[下一頁] 和 [最後一頁] 按鈕,逐頁查看資料。

  3. 完成後,請關閉瀏覽器。

將排序功能加入至 ListView 控制項

您現在要將排序功能加入至 ListView 控制項。您也可以將按鈕加入至 ListView 控制項並設定此按鈕,以提供這個功能。

若要將排序功能加入至 ListView 控制項

  1. 請在 Default.aspx 檔案中,以滑鼠右鍵按一下 ListView 控制項,再按 [顯示智慧標籤]。

  2. 在 [一般 ListView 工作] 功能表下的 [目前檢視] 清單中,選取一種檢視來編輯 LayoutTemplate 範本,例如 [ItemTemplate]。

    注意事項:

    不需要特定檢視即可編輯 LayoutTemplate 範本。除了 [執行階段檢視] 和 [EmptyDataTemplate] 外,您可以在 [目前檢視] 清單中所列的任何檢視中編輯這個範本。

  3. 從 [工具箱] 的 [標準] 索引標籤中,將兩個 Button 控制項拖曳至控制項的底部,分頁控制項就在此。

  4. 在 [屬性] 視窗中,將按鈕的屬性變更如下:

    • 將第一個按鈕的 [Text] 屬性設定為 [Sort by First Name]、[CommandName] 屬性設定為 [Sort],[CommandArgument] 設定為 [FirstName]。

    • 將第二個按鈕的 [Text] 屬性設定為 [Sort by Last Name]、[CommandName] 屬性設定為 [Sort],[CommandArgument] 設定為 [LastName]。

    按鈕的 CommandArgument 屬性設定為排序運算式。對於資料庫資料而言,這是標準的資料行名稱。

  5. 儲存 Web 網頁。

您現在可以再測試一次網頁。

若要測試排序

  1. 按 CTRL+F5 執行頁面。

  2. 按一下 [Sort by First Name] 和 [Sort by Last Name] 按鈕,以不同方式排序資料。

  3. 重複按一下按鈕,即可切換遞增和遞減排序次序。

後續步驟

此逐步解說示範使用 ListView 控制項並利用提供給控制項的其中一個配置,以顯示、分頁和排序資料錄的基本步驟。您可能要嘗試 ListView 控制項的其他功能,以試驗不同的情況。例如,您可能想要編輯、刪除和插入資料錄。如需詳細資訊,請參閱逐步解說:使用 ListView Web 伺服器控制項修改資料

請參閱

工作

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

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

概念

ListView Web 伺服器控制項概觀