逐步解說:使用 ListView Web 伺服器控制項顯示、分頁和排序資料
更新:2007 年 11 月
在本逐步解說中您要使用 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 網頁),就可以使用該網站並繼續至下一節。否則,請依照下列步驟建立新的網站和網頁。
若要建立檔案系統網站
開啟 Visual Studio 2008 或 Visual Web Developer 2008 Express 版。
在 [檔案] 功能表上按一下 [新增],然後按一下 [網站]。如果您使用 Visual Web Developer Express 版,請按一下 [檔案] 功能表上的 [新網站]。
[新網站] 對話方塊便會顯示。
按一下 [Visual Studio 安裝的範本] 之下的 [ASP.NET 網站]。
請在第一個 [位置] 方塊中,選取 [檔案系統],然後在第二個方塊中輸入要用來保存網站頁面的資料夾名稱。
例如,輸入資料夾名稱 C:\WebSites\DisplayData。
在 [語言] 清單中,按一下您想要使用的程式語言。
按一下 [確定]。
Visual Studio 會建立資料夾和名為 Default.aspx 的新頁面。
在 ListView 控制項中顯示和分頁資料
若要在 ASP.NET Web 網頁上顯示資料,您需要下列項目:
資料來源 (例如資料庫) 的連接。在下列程序中,您將建立 SQL Server AdventureWorks 資料庫的連接。
頁面上的資料來源控制項,會與資料來源 (資料庫) 互動以讀取和寫入資料。在本逐步解說中,您要使用與 SQL Server AdventureWorks 資料庫互動的 SqlDataSource 控制項。
頁面上的控制項,用以顯示資料。在下面的程序中,您要將資料顯示在 ListView 控制項中,它會從 SqlDataSource 控制項中取得其資料。
若要在 ListView 控制項中顯示和分頁資料
如果網站沒有 App_Data 資枓夾,請在 [方案總管] 中以滑鼠右鍵按一下專案,然後按一下 [加入 ASP.NET 資料夾],再按一下 [App_Data]。
在 [方案總管] 中,以滑鼠右鍵按一下 [App_Data] 資料夾,然後按一下 [加入現有項目]。
[加入現有項目] 對話方塊隨即出現。
輸入 AdventureWorks 資料庫檔案的位置 (AdventureWorks_Data.mdf)。
根據預設,.mdf 檔案的安裝路徑是 C:\Program Files\Microsoft SQL Server\MSSQL.1\MSSQL\Data\AdventureWorks_Data.mdf。
注意事項: 這個程序會建立專案中資料庫檔案的複本。資料庫檔案很大。如果不方便製作資料庫複本,您可以使用替代方法連接至資料庫,例如直接附加資料庫檔案。但是,本逐步解說不提供這個程序的說明。
切換至 Default.aspx 檔案或開啟它。
切換至 [設計] 檢視。
從 [工具箱] 的 [資料] 索引標籤,將 ListView 控制項拖曳到網頁上。
在 [一般 ListView 工作] 功能表上,按一下 [選擇資料來源] 下拉式清單中的 [<新增資料來源>]。
[資料來源組態] 精靈隨即出現。
按一下 [資料庫]。
這會指定您要從支援 SQL 陳述式的資料庫中取得資料,包括 SQL Server 和其他 OLE-DB 相容資料庫。
在 [指定資料來源的 ID] 方塊中,會顯示預設的資料來源控制項名稱 [SqlDataSource1]。您可以保留這個名稱。
按一下 [確定]。
[設定資料來源] 精靈便會顯示。
在 [您的應用程式應該使用哪個資料連接來連接資料庫?] 之下,選取清單中的 AdventureWorks_Data.mdf。
按 [下一步]。
精靈會顯示一個頁面,您可以在此指定將連接字串儲存在組態檔中。在組態檔中儲存連接字串有兩個優點:
這麼做比將它儲存在頁面裡來得安全。
您可以在多個頁面中使用相同的連接字串。
請確定已選取 [是,將這個連接儲存為] 核取方塊,然後按 [下一步]您可以保留預設的連接字串名稱。
此精靈會顯示一個頁面,您可以在其中指定要從資料庫擷取哪些資料。
選取 [指定自訂 SQL 陳述式或預存程序] 選項。
注意事項: 一般而言,您要使用的選項是 [指定資料表或檢視的資料行]。但是,因為 AdventureWorks 資料庫有結構描述名稱,所以在本逐步解說中,您要建立自訂 SQL 陳述式。
按 [下一步]。
在 [定義自訂陳述式或預存程序] 頁面中,輸入下列 SQL 查詢以擷取 [AdventureWorks] 資料庫中的連絡人資料。
SELECT ContactID, FirstName, LastName, EmailAddress FROM Person.Contact
您也可以按一下 [查詢產生器] 並使用 [查詢產生器] 視窗以建立查詢,然後使用 [執行查詢] 按鈕驗證查詢。
注意事項: 精靈可讓您指定選取準則 (Where 子句) 和其他 SQL 查詢選項。在這個逐步解說中,您將建立不含選取或排序準則的簡單陳述式。
按 [下一步]。
按一下 [測試查詢],確認擷取的資料是您所要的。
按一下 [完成]。
精靈會建立 SqlDataSource 控制項並將其加入至頁面。您先前所加入的 ListView 控制項會繫結至 SqlDataSource 控制項。
如果您檢視 SqlDataSource 控制項的屬性,將會看到精靈已建立 ConnectionString 和 SelectCommand 屬性的值。
以滑鼠右鍵按一下 ListView 控制項,然後按一下 [顯示智慧標籤]。
按一下 [一般 ListView 工作] 功能表上的 [設定 ListView]。
[設定 ListView] 對話方塊隨即出現。
選取 [啟用分頁]。
注意事項: 您可能也想要選取更方便檢視資料的其他樣式。若要這麼做,請在 [選取樣式] 之下選取一個樣式,例如 [繽紛]。
精靈會根據查詢中的資料行,為 ListView 控制項建立範本。您可以編輯內含配置項目、控制項及繫結運算式的範本,以自訂配置。
按一下 [確定]。
繼續下個步驟之前,您可以測試 ListView 控制項。
若要測試 ListView 控制項
按 CTRL+F5 執行頁面。
ListView 控制項會與 [ContactID]、[FirstName]、[LastName] 和 [EmailAddress] 資料行一起顯示。
按一下頁面底部的 [第一頁]、[上一頁]、[下一頁] 和 [最後一頁] 按鈕,逐頁查看資料。
完成後,請關閉瀏覽器。
將排序功能加入至 ListView 控制項
您現在要將排序功能加入至 ListView 控制項。您也可以將按鈕加入至 ListView 控制項並設定此按鈕,以提供這個功能。
若要將排序功能加入至 ListView 控制項
請在 Default.aspx 檔案中,以滑鼠右鍵按一下 ListView 控制項,再按 [顯示智慧標籤]。
在 [一般 ListView 工作] 功能表下的 [目前檢視] 清單中,選取一種檢視來編輯 LayoutTemplate 範本,例如 [ItemTemplate]。
注意事項: 不需要特定檢視即可編輯 LayoutTemplate 範本。除了 [執行階段檢視] 和 [EmptyDataTemplate] 外,您可以在 [目前檢視] 清單中所列的任何檢視中編輯這個範本。
從 [工具箱] 的 [標準] 索引標籤中,將兩個 Button 控制項拖曳至控制項的底部,分頁控制項就在此。
在 [屬性] 視窗中,將按鈕的屬性變更如下:
將第一個按鈕的 [Text] 屬性設定為 [Sort by First Name]、[CommandName] 屬性設定為 [Sort],[CommandArgument] 設定為 [FirstName]。
將第二個按鈕的 [Text] 屬性設定為 [Sort by Last Name]、[CommandName] 屬性設定為 [Sort],[CommandArgument] 設定為 [LastName]。
按鈕的 CommandArgument 屬性設定為排序運算式。對於資料庫資料而言,這是標準的資料行名稱。
儲存 Web 網頁。
您現在可以再測試一次網頁。
若要測試排序
按 CTRL+F5 執行頁面。
按一下 [Sort by First Name] 和 [Sort by Last Name] 按鈕,以不同方式排序資料。
重複按一下按鈕,即可切換遞增和遞減排序次序。
後續步驟
此逐步解說示範使用 ListView 控制項並利用提供給控制項的其中一個配置,以顯示、分頁和排序資料錄的基本步驟。您可能要嘗試 ListView 控制項的其他功能,以試驗不同的情況。例如,您可能想要編輯、刪除和插入資料錄。如需詳細資訊,請參閱逐步解說:使用 ListView Web 伺服器控制項修改資料。