第第 1010 章 章 網頁資料庫的顯網頁資料庫的顯示與維護示與維護

第第 1010 章 章 網頁資料庫的顯示與維網頁資料庫的顯示與維護護

10-1 10-1 再談資料控制項再談資料控制項 10-2 GridView10-2 GridView 控制項控制項 10-3 DetailsView10-3 DetailsView 控制項控制項 10-4 10-4 建立主要與詳細表單建立主要與詳細表單 10-5 10-5 樣板基礎的資料控制項樣板基礎的資料控制項 10-6 ListView10-6 ListView和和 DataPagerDataPager 控制項控制項

10-1 10-1 再談資料控制項再談資料控制項 10-1-1 10-1-1 再談資料邊界控制項再談資料邊界控制項 10-1-2 10-1-2 格式化欄位顯示的資料格式化欄位顯示的資料

10-1-1 10-1-1 再談資料邊界控制項再談資料邊界控制項 -- 說說明明

在第在第 99 章已經說明過資料邊界控制項的種章已經說明過資料邊界控制項的種類，類， ASP.NET 2.0ASP.NET 2.0 版提供版提供 RepeaterRepeater、、 DataListDataList、、GridViewGridView和和 DetailsViewDetailsView 控制項；控制項； 3.53.5 版新增版新增ListViewListView與與 DataPagerDataPager 控制項，可以使用資料來控制項，可以使用資料來源控制項，將外部資料整合到控制項來顯示資料源控制項，將外部資料整合到控制項來顯示資料表的記錄資料，如下圖所示：表的記錄資料，如下圖所示：

10-1-1 10-1-1 再談資料邊界控制項再談資料邊界控制項 -- 欄位欄位基礎的資料控制項基礎的資料控制項

欄位基礎的資料控制項（欄位基礎的資料控制項（ Field-based Data Field-based Data ControlsControls ）是以欄位為單位來編排資料，支援表）是以欄位為單位來編排資料，支援表格或單筆記錄的顯示，可以使用表格的一列為一格或單筆記錄的顯示，可以使用表格的一列為一筆記錄；一欄為一個欄位，或單筆記錄的方式來筆記錄；一欄為一個欄位，或單筆記錄的方式來編排資料。一般來說，欄位基礎的資料控制項都編排資料。一般來說，欄位基礎的資料控制項都內建強大功能，預設提供資料維護功能，可以幫內建強大功能，預設提供資料維護功能，可以幫助我們新增、更新或刪除資料。助我們新增、更新或刪除資料。

不過，顯示部分受限於是以欄位為單位，所以只不過，顯示部分受限於是以欄位為單位，所以只能使用內建屬性來調整欄位的外觀，並不允許自能使用內建屬性來調整欄位的外觀，並不允許自行插入自訂文字、行插入自訂文字、 HTMLHTML 標籤或其他標籤或其他 ASP.NETASP.NET控制項，例如：控制項，例如： GridViewGridView和和 DetailsViewDetailsView 控制項。控制項。

10-1-1 10-1-1 再談資料邊界控制項再談資料邊界控制項 -- 樣板樣板基礎的資料控制項基礎的資料控制項

樣板基礎的資料控制項（樣板基礎的資料控制項（ Templated-based Data Templated-based Data ControlsControls ）是使用樣板（）是使用樣板（ TemplatesTemplates ）來定義如）來定義如何編排資料，我們可以在控制項定義的樣板中，何編排資料，我們可以在控制項定義的樣板中，插入自訂文字、插入自訂文字、 HTMLHTML 標籤、樣式或其他標籤、樣式或其他ASP.NETASP.NET 控制項。而資料控制項本身只是使用內控制項。而資料控制項本身只是使用內建方式來單次、交叉或重複顯示各種樣板的內容，建方式來單次、交叉或重複顯示各種樣板的內容，例如：例如： RepeaterRepeater、、 DataListDataList和和 ListViewListView 控制項。控制項。

因為是使用樣板來定義控制項輸出的內容，所以因為是使用樣板來定義控制項輸出的內容，所以在使用上擁有更大的彈性來編排資料，相反的，在使用上擁有更大的彈性來編排資料，相反的，實作上就比欄位基礎的控制項來的複雜些。實作上就比欄位基礎的控制項來的複雜些。

10-1-2 10-1-2 格式化欄位顯示的資料格式化欄位顯示的資料 --11

數值資料的格式字串數值資料的格式字串 數值資料的格式字串可以格式化輸出貨幣、科學數值資料的格式字串可以格式化輸出貨幣、科學

符號、百分比和指定的小數位數，常用的格式字符號、百分比和指定的小數位數，常用的格式字串說明，如下表所示：串說明，如下表所示：種類 格式字串 範例輸出貨幣 {0:C}或{0:c} $12,345.98

科學符號 {0:E} 3.456E+004

百分比 {0:P} 56.7%

指定位數 {0:F?} 「?」是小數位數，{0:F3}就是 123.400

10-1-2 10-1-2 格式化欄位顯示的資料格式化欄位顯示的資料 --22

日期日期 // 時間資料的格式字串時間資料的格式字串 對於日期對於日期 // 時間資料來說，常用的格式字串說明，時間資料來說，常用的格式字串說明，

如下表所示：如下表所示：種類 格式字串 範例輸出短日期 {0:d} 4/30/2010

長日期 {0:D} Friday, April 30, 2010

短時間 {0:t} 12:00 AM

長時間 {0:T} 12:00:00 AM

完整日期短時間 {0:f} Friday, April 30, 2010 12:00 AM

完整日期長時間 {0:F} Friday, April 30, 2010 12:00:00 AM

一般日期短時間 {0:g} 4/30/2010 12:00 AM

一般日期長時間 {0:G} 4/30/2010 12:00:00 AM

10-2 GridView10-2 GridView 控制項控制項 10-2-1 10-2-1 格式化格式化 GridViewGridView 控制項控制項 10-2-2 10-2-2 編輯編輯 GridViewGridView 控制項的欄位控制項的欄位 10-2-3 GridView10-2-3 GridView 控制項的分頁與排序控制項的分頁與排序

10-2-1 10-2-1 格式化格式化 GridViewGridView 控制項控制項 -- 說說明明

GridViewGridView 控制項是控制項是 ASP.NET 2.0ASP.NET 2.0 版新增的控制版新增的控制項，它是舊版項，它是舊版 DataGridDataGrid 控制項的新版本，可以使控制項的新版本，可以使用表格方式來顯示、分頁、排序和建立複雜資料用表格方式來顯示、分頁、排序和建立複雜資料表的顯示和編輯功能。表的顯示和編輯功能。

GridViewGridView 控制項的編輯功能只能更新和刪除資料，控制項的編輯功能只能更新和刪除資料，在使用上和在使用上和 DetailsViewDetailsView 控制項的編輯功能相似，控制項的編輯功能相似，詳細說明請參閱第詳細說明請參閱第 10-3-210-3-2 節。節。

在在 GridViewGridView 控制項指定使用的資料來源控制項後，控制項指定使用的資料來源控制項後，就可以使用表格方式來顯示取得的記錄資料，我就可以使用表格方式來顯示取得的記錄資料，我們準備使用自動格式化（自動指定結尾為們準備使用自動格式化（自動指定結尾為 StyleStyle的樣式屬性值）來指定顯示樣式，並且指定欄位的樣式屬性值）來指定顯示樣式，並且指定欄位的顯示格式和標題名稱。的顯示格式和標題名稱。

10-2-1 10-2-1 格式化格式化 GridViewGridView 控制項控制項 -- 屬屬性性

GridViewGridView 控制項欄位的常用屬性說明，如控制項欄位的常用屬性說明，如下表所示：下表所示：屬性 說明

HeaderText 欄位的標題名稱ShowHeader 是否顯示標題列，True預設值為是；False為否FooterText 欄位的註腳列

ShowFooter 是否顯示註腳列，True為是；False預設值為否HeaderImageUrl 在標題顯示圖片的 URL網址

Visible 控制項是否顯示，預設值 True顯示；False為不顯示ReadOnly 欄位是否可編輯，True為唯讀；False預設值是可編輯DataField 與資料來源結合的欄位名稱

DataFormatString DataField欄位資料的顯示格式，即指定格式字串NullDisplayText 欄位值是 Null時顯示的內容

10-2-1 10-2-1 格式化格式化 GridViewGridView 控制項控制項 -- 自自動格式化動格式化

開啟「開啟「 GridViewGridView 工作」功能表，選工作」功能表，選【【自動格式自動格式化化】】超連結，可以看到「自動格式設定」對話方超連結，可以看到「自動格式設定」對話方塊。塊。

10-2-1 10-2-1 格式化格式化 GridViewGridView 控制項控制項 -- 指指定欄位屬性定欄位屬性

在「在「 GridViewGridView 工作」功能表，選工作」功能表，選【【編輯資料行編輯資料行】】超連結來編輯欄位屬性，可以看到「欄位」對話超連結來編輯欄位屬性，可以看到「欄位」對話方塊。方塊。

指定欄位資料格式為【 {0:c}】的貨幣格式

10-2-1 10-2-1 格式化格式化 GridViewGridView 控制項控制項 -- 範範例網站例網站

ASP.NETASP.NET 網站：網站： Ch10-2-1Ch10-2-1 在在 ASP.NETASP.NET 網頁的網頁的 GridViewGridView 控制項使用自動格控制項使用自動格

式化來指定顯示樣式，並且指定中文的標題名稱，式化來指定顯示樣式，並且指定中文的標題名稱，數值和日期數值和日期 // 時間欄位的格式，如下圖所示：時間欄位的格式，如下圖所示：

10-2-2 10-2-2 編輯編輯 GridViewGridView 控制項的欄控制項的欄位位 -- 說明說明

GridViewGridView 控制項是一種欄位基礎的資料邊界控制控制項是一種欄位基礎的資料邊界控制項，我們可以在項，我們可以在 <Columns><Columns> 區段子標籤來定義區段子標籤來定義FieldField 欄位控制項，常用的欄位控制項說明，如下欄位控制項，常用的欄位控制項說明，如下表所示：表所示：欄位控制項 說明BoundField 顯示資料來源的欄位資料，將欄位視為文字字串顯示，

此為預設欄位類型，即上一節編輯的欄位ButtonField 顯示按鈕欄位，可以新增整欄的按鈕控制項，例如：刪

除、顯示和隱藏記錄等按鈕CheckboxField 欄位值如果是布林值時，顯示核取方塊HyperLinkField 顯示超連結欄位

ImageField 顯示圖形欄位

10-2-2 10-2-2 編輯編輯 GridViewGridView 控制項的欄控制項的欄位位 -ButtonField-ButtonField 控制項控制項

ButtonFieldButtonField 控制項可以顯示整欄控制項可以顯示整欄 ButtonButton 控控制項的按鈕，其相關的常用屬性說明，如制項的按鈕，其相關的常用屬性說明，如下表所示：下表所示：屬性 說明

ButtonType 控制項的顯示方式，值 Link是超連結，Button是按鈕，Image

是圖片Text 如果有使用 DataTextField屬性，就不需使用 Text屬性，

它是按鈕的名稱CommandName 按鈕的命令名稱，在控制項提供有預設功能的命令名稱，

只需指定名稱就可以執行特定的功能

10-2-2 10-2-2 編輯編輯 GridViewGridView 控制項的欄控制項的欄位位 - ImageField- ImageField 控制項控制項

ImageFieldImageField 控制項可以在控制項可以在 GridViewGridView 控制項顯示控制項顯示圖片欄位，其相關的常用屬性說明，如下表所示：圖片欄位，其相關的常用屬性說明，如下表所示：

DataImageUrlFieldDataImageUrlField 屬性可以指定圖片網址來源的屬性可以指定圖片網址來源的欄位名稱，例如：來源是欄位名稱，例如：來源是 BookIDBookID 欄位欄位值。值。 DataImageUrlFormatStringDataImageUrlFormatString 屬性是使用格式屬性是使用格式字元字元 {0}{0} 來定義圖檔路徑，例如：「來定義圖檔路徑，例如：「 ~/images/~/images/{0}small.gif{0}small.gif 」格式字串，此格式字串以」格式字串，此格式字串以 BookIDBookID欄位值欄位值 F6476F6476 為例，就是位在「為例，就是位在「 ~/images/~/images/F6476 small.gifF6476 small.gif 」的圖片。」的圖片。

屬性 說明DataImageUrlField 以資料來源的欄位名稱作為圖片的 URL網址

DataImageUrlFormatString DataImageUrlField欄位資料的顯示方式NullImageUrl 圖片不存在時顯示的內容

10-2-2 10-2-2 編輯編輯 GridViewGridView 控制項的欄控制項的欄位位 - HyperLinkField- HyperLinkField 控制項控制項

在在 GridViewGridView 控制項顯示超連結欄位是使用控制項顯示超連結欄位是使用HyperLinkFieldHyperLinkField 控制項，其相關的常用屬性說明，控制項，其相關的常用屬性說明，如下表所示：如下表所示：

如同如同 ImageFieldImageField 控制項，我們也可以使用格式字控制項，我們也可以使用格式字元元 {0}{0} 來定義超連結的來定義超連結的 URLURL 參數，例如：來源是參數，例如：來源是BookIDBookID 欄位值，格式字串是欄位值，格式字串是 Details.aspx?Id={0}Details.aspx?Id={0} ，，表示將書號值作為表示將書號值作為 URLURL 參數值傳遞至參數值傳遞至Details.aspxDetails.aspx 網頁。網頁。

屬性 說明NavigateUrl 超連結連接的 URL網址

Target 超連結的目標框架DataNavigateUrlField 以資料來源的欄位名稱作為 URL網址

DataNavigateUrlFormatString DataNavigateUrlField欄位資料的顯示方式

10-2-2 10-2-2 編輯編輯 GridViewGridView 控制項的欄控制項的欄位位 - RowCommand- RowCommand 事件事件

在在 GridViewGridView 控制項按下按鈕欄位時會產生控制項按下按鈕欄位時會產生RowCommandRowCommand 事件，可以建立事件處理程序事件，可以建立事件處理程序顯示選取記錄的書號，如下所示：顯示選取記錄的書號，如下所示：if (e.CommandName == "Select")if (e.CommandName == "Select"){{ pos = Convert.ToInt32(e.CommandArgument);pos = Convert.ToInt32(e.CommandArgument); no = GridView1.DataKeys[pos].Value.ToString();no = GridView1.DataKeys[pos].Value.ToString(); lblOutput.Text = "lblOutput.Text = " 書號書號 : " + no;: " + no;}}

10-2-2 10-2-2 編輯編輯 GridViewGridView 控制項的欄控制項的欄位位 - - 範例網站範例網站 (( 說明說明 ))

ASP.NETASP.NET 網站：網站： Ch10-2-2Ch10-2-2 在在 ASP.NETASP.NET 網頁網頁 Default.aspxDefault.aspx的的 GridViewGridView 控制控制

項建立項建立 ButtonFieldButtonField、、 HyperLinkFieldHyperLinkField和和ImageFieldImageField 欄位控制項，以便顯示按鈕、超連結欄位控制項，以便顯示按鈕、超連結和圖片的控制項欄位。和圖片的控制項欄位。

當使用者按下書號超連結，就可以連接當使用者按下書號超連結，就可以連接Details.aspxDetails.aspx 顯示單筆的記錄資料，這是修改第顯示單筆的記錄資料，這是修改第9-5-39-5-3 節的網頁，可以取得節的網頁，可以取得 URLURL 參數參數 IdId ，只是改，只是改為使用為使用 DetailsViewDetailsView 控制項來顯示記錄資料；如控制項來顯示記錄資料；如果是按下按鈕欄位的按鈕，可以在上方顯示該列果是按下按鈕欄位的按鈕，可以在上方顯示該列的書號。的書號。

10-2-2 10-2-2 編輯編輯 GridViewGridView 控制項的欄控制項的欄位位 - - 範例網站範例網站 (( 圖例圖例 ))

10-2-3 GridView10-2-3 GridView 控制項的分頁與排控制項的分頁與排序序 -- 說明說明

VWDVWD 只需在「只需在「 GridViewGridView 工作」功能表勾工作」功能表勾選選【【啟用分頁啟用分頁】】或或【【啟用排序啟用排序】】選項，就選項，就可以開啟可以開啟 GridViewGridView 控制項的分頁和排序功控制項的分頁和排序功能，也就是將控制項的能，也就是將控制項的 AllowSortingAllowSorting和和AllowPagingAllowPaging 屬性設為屬性設為 TrueTrue 。。

GridViewGridView 控制項如果啟用排序，預設將所控制項如果啟用排序，預設將所有可排序欄位都啟用排序功能，如果有指有可排序欄位都啟用排序功能，如果有指定欄位不需要有排序功能，請清除定欄位不需要有排序功能，請清除SortExpressionSortExpression 屬性值。屬性值。

10-2-3 GridView10-2-3 GridView 控制項的分頁與排控制項的分頁與排序序 -- 分頁屬性分頁屬性

當啟用分頁預設新增上下頁超連結，或頁碼超連當啟用分頁預設新增上下頁超連結，或頁碼超連結，屬於結，屬於 PagerSettings-PagerSettings- 開頭的屬性，如下表所開頭的屬性，如下表所示：示：屬性 說明

Mode 巡覽分頁的顯示模式，Numeric預設值是頁碼，NextPrevious是上下頁，NextPreviousFirstLast是上下頁和第 1與最後頁，NumericFirstLast為頁碼和第 1與

最後頁PageButtonCount 如為 Numeric模式，共顯示幾頁頁碼，預設值是 10頁

Position 巡覽超連結的位置，可以是 Bottom（預設值）、Top和TopAndButtom

FirstPageText、LastPageText、

PreviousPageText、NextPageText

第 1頁、最後 1頁、上一頁和下一頁的標題文字

10-2-3 GridView10-2-3 GridView 控制項的分頁與排控制項的分頁與排序序 -- 啟用分頁與排序啟用分頁與排序

選選 GridViewGridView 控制項且開啟「控制項且開啟「 GridViewGridView 工工作」功能表，如下圖所示：作」功能表，如下圖所示：

10-2-3 GridView10-2-3 GridView 控制項的分頁與排控制項的分頁與排序序 -- 範例網站範例網站

ASP.NETASP.NET 網站：網站： Ch10-2-3Ch10-2-3 在在 ASP.NETASP.NET 網頁的網頁的 GridViewGridView 控制項啟用分頁和控制項啟用分頁和

排序功能，並且取消排序功能，並且取消【【出版日出版日】】欄位的排序功能，欄位的排序功能，其建立步驟如下所示：其建立步驟如下所示：

10-3 DetailsView10-3 DetailsView 控制項控制項 10-3-1 DetailsView10-3-1 DetailsView 控制項的基本使用控制項的基本使用 10-3-2 DetailsView10-3-2 DetailsView 控制項的編輯功能控制項的編輯功能

10-3-1 DetailsView10-3-1 DetailsView 控制項的基本使控制項的基本使用用 -- 說明說明

DetailsViewDetailsView 控制項是以單筆方式來顯示資控制項是以單筆方式來顯示資料來源的資料，如同料來源的資料，如同 GridViewGridView 控制項，一控制項，一樣支援分頁和編輯功能，而且能夠新增、樣支援分頁和編輯功能，而且能夠新增、刪除和更新記錄資料。刪除和更新記錄資料。

在在 DetailsViewDetailsView 控制項指定使用的資料來源控制項指定使用的資料來源控制項後，就可以使用單筆方式顯示記錄控制項後，就可以使用單筆方式顯示記錄資料，一樣可以使用分頁來顯示資料。資料，一樣可以使用分頁來顯示資料。

10-3-1 DetailsView10-3-1 DetailsView 控制項的基本使控制項的基本使用用 -- 範例網站範例網站

ASP.NETASP.NET 網站：網站： Ch10-3-1Ch10-3-1 在在 ASP.NETASP.NET 網頁的網頁的 DetailsViewDetailsView 控制項使用自動控制項使用自動

格式化來指定顯示樣式，並且指定中文的標題名格式化來指定顯示樣式，並且指定中文的標題名稱，數值和日期稱，數值和日期 // 時間欄位的格式，如下圖所示：時間欄位的格式，如下圖所示：

10-3-2 DetailsView10-3-2 DetailsView 控制項的編輯功控制項的編輯功能能 -- 說明說明

DetailsViewDetailsView 控制項提供資料表記錄的編輯功能，控制項提供資料表記錄的編輯功能，在在 DetailsViewDetailsView 控制項只需勾選選項就可以啟用控制項只需勾選選項就可以啟用編輯功能，我們只需在資料來源控制項勾選編輯功能，我們只需在資料來源控制項勾選【【產產生生 INSERTINSERT、、 UPDATEUPDATE和和 DELETEDELETE陳述式陳述式】】後，後，就可以建立就可以建立 DetailsViewDetailsView 控制項的編輯功能。控制項的編輯功能。

勾選【產生INSERT、UPDATE和DELETE陳述

式】

10-3-2 DetailsView10-3-2 DetailsView 控制項的編輯功控制項的編輯功能能 -- 啟用編輯功能啟用編輯功能

選選 DetailsViewDetailsView 控制項，控制項，開啟「開啟「 DetailsViewDetailsView 工工作」功能表，勾選作」功能表，勾選【【啟啟用插入用插入】】、、【【啟用編啟用編輯輯】】和和【【啟用刪除啟用刪除】】，，就可以在就可以在 DetailsViewDetailsView 控控制項新增、更新和刪除制項新增、更新和刪除記錄資料 ，如右圖所示：記錄資料 ，如右圖所示：

10-3-2 DetailsView10-3-2 DetailsView 控制項的編輯功控制項的編輯功能能 -- 範例網站範例網站

ASP.NETASP.NET 網站：網站： Ch10-3-2Ch10-3-2 在在 ASP.NETASP.NET 網頁的網頁的 DetailsViewDetailsView 控制項啟用編輯控制項啟用編輯

功能，如下圖所示：功能，如下圖所示：

10-4 10-4 建立主要與詳細表單建立主要與詳細表單 -- 說明說明 GridViewGridView和和 DetailsViewDetailsView 控制項可以結合控制項可以結合起來，建立主要與詳細表單（起來，建立主要與詳細表單（ Master/Master/DetailDetail ）。在主要表單的）。在主要表單的 GridViewGridView 控制項控制項顯示清單，選擇後，才在顯示清單，選擇後，才在 DetailsViewDetailsView 顯示顯示單筆記錄的詳細資料。單筆記錄的詳細資料。

事實上，在第事實上，在第 9-39-3 節我們已經使用節我們已經使用DropDownListDropDownList 控制項建立過主要與詳細表控制項建立過主要與詳細表單，這是一種一對多的主要與詳細表單；單，這是一種一對多的主要與詳細表單；在這一節我們準備建立的則是一種多對一在這一節我們準備建立的則是一種多對一的主要與詳細表單。的主要與詳細表單。

10-4 10-4 建立主要與詳細表單建立主要與詳細表單 --步驟一步驟一

步驟一：啟用步驟一：啟用 GridViewGridView 控制項的選取功能控制項的選取功能選選 GridViewGridView 控制項，按一下上方箭頭圖示控制項，按一下上方箭頭圖示

顯示「顯示「 GridViewGridView 工作」功能表，如下圖所工作」功能表，如下圖所示：示：

勾選【樞紐分析表選取模式】，可以啟用GridView控制項的選取功能

10-4 10-4 建立主要與詳細表單建立主要與詳細表單 --步驟二步驟二

步驟二：設定步驟二：設定 SqlDataSource2SqlDataSource2 控制項的參數查詢控制項的參數查詢 選右邊選右邊 SqlDataSource2SqlDataSource2 控制項，在設定資料來控制項，在設定資料來

源的設定源的設定 SQLSQL陳述式步驟陳述式步驟，，按按【【 WHEREWHERE 】】鈕鈕可以看到「加入可以看到「加入 WHEREWHERE 子句」對話方塊。子句」對話方塊。

在【資料行】欄選欄位【 BookID】，【運算子】欄位選【=】，來源選【 Control】後，在右上方的【控制項 ID】欄位選

【GridView1】，按【加入】鈕建立WHERE子句

10-4 10-4 建立主要與詳細表單建立主要與詳細表單 --步驟三步驟三

步驟三：指定步驟三：指定 DetailsViewDetailsView 控制項的屬性控制項的屬性 選選 DetailsViewDetailsView 控制項，在「屬性」視窗找到控制項，在「屬性」視窗找到【【 HeaderTextHeaderText 】】屬性的標題文字，輸入屬性的標題文字，輸入【【圖書圖書資訊資訊】】標題文字，如下圖所示：標題文字，如下圖所示：

10-4 10-4 建立主要與詳細表單建立主要與詳細表單 --範例網站範例網站

ASP.NETASP.NET 網站：網站： Ch10-4Ch10-4 在在 ASP.NETASP.NET 網頁使用網頁使用 GridViewGridView 控制項選取書號控制項選取書號

後，在後，在 DetailsViewDetailsView 控制項顯示詳細圖書記錄資控制項顯示詳細圖書記錄資料和封面圖片，如下圖所示：料和封面圖片，如下圖所示：

10-5 10-5 樣板基礎的資料控制項樣板基礎的資料控制項 10-5-1 Repeater10-5-1 Repeater 控制項控制項 10-5-2 DataList10-5-2 DataList 控制項控制項 10-5-3 FormView10-5-3 FormView 控制項控制項

10-5 10-5 樣板基礎的資料控制項樣板基礎的資料控制項 樣板（樣板（ TemplatesTemplates ）是一種模組元素，內）是一種模組元素，內含使用者自訂的文字內容、標籤、樣式或含使用者自訂的文字內容、標籤、樣式或其他其他 ASP.NETASP.NET 控制項，它是資料控制項編控制項，它是資料控制項編排顯示的基本單位。排顯示的基本單位。

當在資料邊界控制項定義好樣板，此時控當在資料邊界控制項定義好樣板，此時控制項本身只是依樣板預設的功能來單次、制項本身只是依樣板預設的功能來單次、交叉或重複顯示樣板的內容，或提供編輯交叉或重複顯示樣板的內容，或提供編輯功能。例如：顯示標頭文字是使用功能。例如：顯示標頭文字是使用HeaderTemplateHeaderTemplate 樣板、重複顯示是樣板、重複顯示是ItemTemplateItemTemplate 樣板和編輯功能是樣板和編輯功能是EditItemTemplateEditItemTemplate 樣板等。樣板等。

10-5-1 Repeater10-5-1 Repeater 控制項控制項 -- 說明說明 RepeaterRepeater 控制項可以使用清單方式來顯示控制項可以使用清單方式來顯示

資料，能夠讓使用者自行定義資料，能夠讓使用者自行定義 TemplateTemplate 樣樣板標籤後，以樣板標籤的項目如同迴圈一板標籤後，以樣板標籤的項目如同迴圈一般來重複編排和顯示資料。般來重複編排和顯示資料。

10-5-1 Repeater10-5-1 Repeater 控制項控制項 -Template-Template樣板標籤樣板標籤

RepeaterRepeater 控制項支援的控制項支援的 TemplateTemplate 樣板標籤，其樣板標籤，其說明如下表所示：說明如下表所示：Template樣板標籤 說明

HeaderTemplate 定義清單標題，以資料表的表格來說，就是開頭標籤<table>和記錄的標題列，如果沒有定義就不顯示

ItemTemplate 定義清單項目，也就是重複顯示的部分，以資料表來說就是每一筆記錄

FooterTemplate 定義清單註腳，以資料表的表格來說，就是結尾標籤</table>，如果沒有定義就不顯示

AlternatingItemTemplate 如果想讓項目交叉顯示不同樣式，例如：輪流使用不同色彩顯示，就可以定義此標籤，在奇數項目（以0開始）是使用此樣板顯示，偶數是使用 ItemTemplate

樣板SeparatorTemplate 在項目間可以使用此標籤來定義分隔方式，通常是

使用 HTML的<br/>或<hr/>標籤

10-5-1 Repeater10-5-1 Repeater 控制項控制項 -- 資料繫結資料繫結運算式運算式

當當 TemplateTemplate 樣板標籤需要輸出資料來源的樣板標籤需要輸出資料來源的資料時，我們是使用資料繫結運算式，執資料時，我們是使用資料繫結運算式，執行行 Eval()Eval() 方法來取得欄位值，這是位在「方法來取得欄位值，這是位在「 <<%#%# 」和「」和「 %>%> 」符號間的運算式，如下所」符號間的運算式，如下所示：示：<%# Eval("BookID")%><%# Eval("BookID")%>

上述上述 Eval()Eval() 方法可以取得參數字串的欄位方法可以取得參數字串的欄位值，即欄位名稱，以此例是書號值，即欄位名稱，以此例是書號 BookIDBookID ，，如果有第如果有第 22 個參數就是格式字串。個參數就是格式字串。

10-5-1 Repeater10-5-1 Repeater 控制項控制項 --<asp:Repeater><asp:Repeater> 標籤標籤 11

01: <asp:Repeater ID="Repeater1" runat="server" 01: <asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">DataSourceID="SqlDataSource1">02: <HeaderTemplate>02: <HeaderTemplate>03: <table border="0" cellspacing="0" cellpadding="5">03: <table border="0" cellspacing="0" cellpadding="5">04: <tr bgcolor="FFCC99">04: <tr bgcolor="FFCC99">05: <th>05: <th> 書號書號 </th><th></th><th> 書名書名 </th><th></th><th> 書價書價 </th></th>06: </tr>06: </tr>07: </HeaderTemplate>07: </HeaderTemplate>08: <ItemTemplate>08: <ItemTemplate>09: <tr>09: <tr>10: <td><%#Eval("BookID")%></td>10: <td><%#Eval("BookID")%></td>11: <td><%#Eval("BookTitle")%></td>11: <td><%#Eval("BookTitle")%></td>12: <td><%#Eval("BookPrice","{0:c}")%></td>12: <td><%#Eval("BookPrice","{0:c}")%></td>13: </tr>13: </tr>

10-5-1 Repeater10-5-1 Repeater 控制項控制項 --<asp:Repeater><asp:Repeater> 標籤標籤 22

14: </ItemTemplate>14: </ItemTemplate>15: <AlternatingItemTemplate>15: <AlternatingItemTemplate>16: <tr bgcolor="yellow">16: <tr bgcolor="yellow">17: <td><%#Eval("BookID")%></td>17: <td><%#Eval("BookID")%></td>18: <td><%#Eval("BookTitle")%></td>18: <td><%#Eval("BookTitle")%></td>19: <td><%#Eval("BookPrice","{0:c}")%></td>19: <td><%#Eval("BookPrice","{0:c}")%></td>20: </tr>20: </tr>21: </AlternatingItemTemplate>21: </AlternatingItemTemplate>22: <FooterTemplate>22: <FooterTemplate>23: </table>23: </table>24: </FooterTemplate>24: </FooterTemplate>25: </asp:Repeater>25: </asp:Repeater>

10-5-1 Repeater10-5-1 Repeater 控制項控制項 -- 範例網範例網站站

ASP.NETASP.NET 網站：網站： Ch10-5-1Ch10-5-1 在在 ASP.NETASP.NET 網頁的網頁的 RepeaterRepeater 控制項使用樣板標控制項使用樣板標

籤來顯示資料來源的記錄資料，我們是使用籤來顯示資料來源的記錄資料，我們是使用HTMLHTML 表格標籤來編排資料，如下圖所示：表格標籤來編排資料，如下圖所示：

10-5-2 DataList10-5-2 DataList 控制項控制項 -- 說明說明 DataListDataList 控制項也是使用樣板標籤來編排資料，控制項也是使用樣板標籤來編排資料，

提供多欄位、顯示方向和版面配置的資料顯示與提供多欄位、顯示方向和版面配置的資料顯示與編排，即使用編排，即使用 RepeatRepeat 開頭的相關屬性，其說明開頭的相關屬性，其說明如下表所示：如下表所示：

Repeat屬性 說明RepeatColumns 設定 DataList控制項的內容是分成幾欄顯示RepeatDirection 設定 DataList控制項顯示的方向是 Vertical（垂直）或

Horizontal（水平）RepeatLayout 設定 DataList控制項的版面配置為 Table（表格）或 Flow

（水流，即一直線）

10-5-2 DataList10-5-2 DataList 控制項控制項 - - ItemTemplateItemTemplate 樣板標籤樣板標籤

當在當在 VWDVWD 建立建立 DataListDataList 控制項且指定資料來源控制項且指定資料來源後，預設在後，預設在 ItemTemplateItemTemplate 樣板標籤新增樣板標籤新增 LabelLabel 控控制項來顯示欄位資料，如下所示：制項來顯示欄位資料，如下所示：

<asp:Label ID="BookIDLabel" runat="server" <asp:Label ID="BookIDLabel" runat="server"

Text='<%# Eval("BookID") %>' />Text='<%# Eval("BookID") %>' />

10-5-2 DataList10-5-2 DataList 控制項控制項 -- 範例網範例網站站

ASP.NETASP.NET 網站：網站： Ch10-5-2Ch10-5-2 在在 ASP.NETASP.NET 網頁的網頁的 DataListDataList 控制項指定多欄編控制項指定多欄編

排，可以顯示資料來源的排，可以顯示資料來源的 BookIDBookID、、 BookTitleBookTitle和和BookPriceBookPrice 三個欄位的記錄資料，如下圖所示：三個欄位的記錄資料，如下圖所示：

10-5-3 FormView10-5-3 FormView 控制項控制項 -- 說明說明 FormViewFormView 控制項可以提供控制項可以提供 DetailsViewDetailsView 控制項的控制項的

所有功能，只是它是使用所有功能，只是它是使用 TemplateTemplate 樣板標籤來編樣板標籤來編排欄位，換句話說，我們可以自訂單筆記錄的顯排欄位，換句話說，我們可以自訂單筆記錄的顯示、編輯和插入記錄的表單。示、編輯和插入記錄的表單。

FormViewFormView 控制項除了在控制項除了在 ItemTemplateItemTemplate 樣板顯示樣板顯示資料外，還提供編輯和插入記錄功能的相關樣板，資料外，還提供編輯和插入記錄功能的相關樣板，如下表所示：如下表所示：

Template樣板標籤 說明EditItemTemplate 定義編輯記錄功能的控制項

InsertItemTemplate 定義新增記錄功能的控制項

10-5-3 FormView10-5-3 FormView 控制項控制項 -- 資料繫結資料繫結運算式運算式

在在 VWDVWD 建立建立 FormViewFormView 控制項且指定資料來源控制項且指定資料來源後，預設在後，預設在 EditItemTemplateEditItemTemplate和和InsertItemTemplateInsertItemTemplate 樣板標籤自動新增樣板標籤自動新增 TextBoxTextBox控制項來編輯欄位資料，如下所示：控制項來編輯欄位資料，如下所示：

<asp:TextBox ID="BookTitleTextBox" <asp:TextBox ID="BookTitleTextBox" runat="server" runat="server"

Text='<%# Bind("BookTitle") %>' />Text='<%# Bind("BookTitle") %>' /> 上述上述 TextBoxTextBox 控制項的控制項的 TextText 屬性是使用資料繫結屬性是使用資料繫結運算式來顯示欄位值，不過，不是使用運算式來顯示欄位值，不過，不是使用 Eval()Eval() 方方法，而是法，而是 Bind()Bind() 方法的雙向資料繫結，因為我們方法的雙向資料繫結，因為我們不只顯示欄位資料，還需要更新資料。不只顯示欄位資料，還需要更新資料。

10-5-3 FormView10-5-3 FormView 控制項控制項 --LinkButtonLinkButton 控制項控制項

除了編輯欄位外，除了編輯欄位外， VWDVWD 自動新增自動新增 LinkButtonLinkButton 控控制項建立更新和取消記錄編輯的功能，如下所示：制項建立更新和取消記錄編輯的功能，如下所示：

<asp:LinkButton ID="UpdateButton" runat="server" <asp:LinkButton ID="UpdateButton" runat="server" CausesValidation="True" CausesValidation="True"

CommandName="Update" Text="CommandName="Update" Text=" 更新更新 " />" /><asp:LinkButton ID="UpdateCancelButton" <asp:LinkButton ID="UpdateCancelButton"

runat="server" runat="server" CausesValidation="False" CausesValidation="False"

CommandName="Cancel" Text="CommandName="Cancel" Text=" 取消取消 " />" /> 上述上述 LinkButtonLinkButton 控制項是使用控制項是使用 CommandNameCommandName

屬性值來指定屬性值來指定 FormViewFormView 控制項執行的功能。控制項執行的功能。

10-5-3 FormView10-5-3 FormView 控制項控制項 --CommandNameCommandName屬性值屬性值

LinkButtonLinkButton 控制項是使用控制項是使用 CommandNameCommandName屬性值來指定屬性值來指定 FormViewFormView 控制項執行的功控制項執行的功能，如下表所示：能，如下表所示：

屬性值 說明Update 執行更新記錄功能，即執行 SQL的 UPDATE指令Insert 執行插入記錄功能，即執行 SQL的 INSERT指令Cancel 取消記錄新增或編輯

Edit 切換至編輯功能，即顯示 EditItemTemplate樣板標籤Delete 執行刪除記錄功能，即執行 SQL的 DELETE指令New 切換至新增記錄功能，即顯示 InsertItemTemplate樣板標籤

10-5-3 FormView10-5-3 FormView 控制項控制項 -- 範例網站範例網站

ASP.NETASP.NET 網站：網站： Ch10-5-3Ch10-5-3 在在 ASP.NETASP.NET 網頁的網頁的 FormViewFormView 控制項建立控制項建立

InsertItemTemplateInsertItemTemplate和和 EditItemTemplateEditItemTemplate 樣板的樣板的新增和編輯功能，且啟用分頁顯示，如下圖所示：新增和編輯功能，且啟用分頁顯示，如下圖所示：

10-6 ListView10-6 ListView和和 DataPagerDataPager 控制控制項項 -- 說明說明

ListViewListView和和 DataPagerDataPager 控制項是控制項是 ASP.NET 3.5ASP.NET 3.5 版版新增的資料邊界控制項，新增的資料邊界控制項， ListViewListView 控制項擁有完控制項擁有完整整 GridViewGridView 控制項的功能，但使用控制項的功能，但使用 TemplateTemplate 樣樣板標籤來編排資料。板標籤來編排資料。 DataPagerDataPager 控制項則是搭配控制項則是搭配ListViewListView 控制項，提供分頁切換的功能。控制項，提供分頁切換的功能。

ListViewListView 控制項因為能夠指定多種版面配置，所控制項因為能夠指定多種版面配置，所以在功能上可以取代以在功能上可以取代 RepeaterRepeater和和 DataListDataList 控制控制項，而且提供比項，而且提供比 GridViewGridView 控制項更大的彈性來編控制項更大的彈性來編排、編輯、刪除、選取和分頁資料的顯示，不只排、編輯、刪除、選取和分頁資料的顯示，不只如此，如此， ListViewListView 控制項一樣支援插入記錄；而控制項一樣支援插入記錄；而GridViewGridView 控制項並不支援。控制項並不支援。

10-6 ListView10-6 ListView和和 DataPagerDataPager 控控制項制項 -- 設定設定 ListViewListView 控制項控制項

開啟「開啟「 ListViewListView 工作」功能表，選工作」功能表，選【【設定設定ListViewListView 】】超連結，可以看到「設定超連結，可以看到「設定ListViewListView 」對話方塊。」對話方塊。版面配置

樣式

編輯功能與分頁

10-6 ListView10-6 ListView和和 DataPagerDataPager 控控制項制項 -ListView-ListView 控制項標籤控制項標籤 11

在在 VWDVWD切換至原始檔檢視，我們可以看到切換至原始檔檢視，我們可以看到ListViewListView控制項除了使用控制項除了使用 ItemTemplateItemTemplate和和AlternatingItemTemplateAlternatingItemTemplate 樣板標籤來自訂顯示項樣板標籤來自訂顯示項目外，還使用目外，還使用 LayoutTemplateLayoutTemplate樣板標籤來指定控樣板標籤來指定控制項版面配置的容器元素，常用的元素有制項版面配置的容器元素，常用的元素有 <div><div>和和 HTMLHTML表格。表格。

在在 LayoutTemplateLayoutTemplate樣板標籤需要新增樣板標籤需要新增 IDID屬性值屬性值為為 itemPlaceholderitemPlaceholder的元素，如下所示：的元素，如下所示：

<tr ID="itemPlaceholder" runat="server"><tr ID="itemPlaceholder" runat="server"> <tr><tr>標籤的內容就是標籤的內容就是 ItemTemplateItemTemplate和和

AlternatingItemTemplateAlternatingItemTemplate 樣板標籤在版面配置預樣板標籤在版面配置預設插入的位置。設插入的位置。

10-6 ListView10-6 ListView和和 DataPagerDataPager 控控制項制項 -ListView-ListView 控制項標籤控制項標籤 22

EmptyDataTemplateEmptyDataTemplate樣版標籤是當資料來樣版標籤是當資料來源沒有取得資料時顯示的網頁內容。源沒有取得資料時顯示的網頁內容。

EditItemTemplateEditItemTemplate和和 InsertItemTemplateInsertItemTemplate樣板標籤的內容分別是編輯和插入記錄的樣板標籤的內容分別是編輯和插入記錄的TextBoxTextBox控制項和指定控制項和指定 CommandNameCommandName屬屬性的性的 ButtonButton控制項，這部分和控制項，這部分和 FormViewFormView控制項相同。控制項相同。

10-6 ListView10-6 ListView和和 DataPagerDataPager 控控制項制項 --範例網站範例網站

ASP.NETASP.NET 網站：網站： Ch10-6Ch10-6 在在 ASP.NETASP.NET 網頁設定網頁設定 ListViewListView 控制項，使用類控制項，使用類似似 GridViewGridView 的格線版面配置，並且指定樣式和啟的格線版面配置，並且指定樣式和啟用控制項的編輯、插入、刪除和分頁功能，如下用控制項的編輯、插入、刪除和分頁功能，如下圖所示：圖所示：