第10章 網頁資料庫的顯示與維護 10-1 再談資料控制項 10-2 GridView控制項 10-3 DetailsView控制項

Presentation on theme: "第10章 網頁資料庫的顯示與維護 10-1 再談資料控制項 10-2 GridView控制項 10-3 DetailsView控制項"— Presentation transcript:

1 第10章 網頁資料庫的顯示與維護 10-1 再談資料控制項 10-2 GridView控制項 10-3 DetailsView控制項
10-4 建立主要與詳細表單 10-5 樣板基礎的資料控制項 10-6 ListView和DataPager控制項

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

3 再談資料邊界控制項-說明 ASP.NET 2.0版提供Repeater、DataList、GridView和DetailsView控制項；3.5版新增ListView與DataPager控制項，可以使用資料來源控制項，將外部資料整合到控制項來顯示資料表的記錄資料。 Visual Studio 是在「工具箱」視窗的【資料】區段提供資料邊界控制項，只需拖拉至編輯區域，就可以在ASP.NET網頁新增資料邊界控制項。

4 10-1-1 再談資料邊界控制項- 欄位基礎的資料控制項
欄位基礎的資料控制項（Field-based Data Controls）是以欄位為單位來編排資料，支援表格或單筆記錄的顯示，可以使用表格的一列為一筆記錄；一欄為一個欄位，或單筆記錄的方式來編排資料。一般來說，欄位基礎的資料控制項都內建強大功能，預設提供資料維護功能，可以新增、更新或刪除資料。 顯示部分受限於是以欄位為單位，所以只能使用內建屬性來調整欄位的外觀，並不允許自行插入自訂文字、HTML標籤或其他ASP.NET控制項，例如：GridView和DetailsView控制項。

5 10-1-1 再談資料邊界控制項- 樣板基礎的資料控制項
樣板基礎的資料控制項（Templated-based Data Controls）是使用樣板（Templates）來定義如何編排資料，可以在控制項定義的樣板中，插入自訂文字、HTML標籤、樣式或其他ASP.NET控制項。而資料控制項本身只是使用內建方式來單次、交叉或重複顯示各種樣板的內容，例如：Repeater、DataList和ListView控制項。 因為是使用樣板來定義控制項輸出的內容，所以在使用上擁有更大的彈性來編排資料，相反的，實作上就比欄位基礎的控制項來的複雜些。

6 10-1-2 格式化欄位顯示的資料- 數值資料的格式字串
數值資料的格式字串可以格式化輸出貨幣、科學符號、百分比和指定的小數位數，常用的格式字串說明，如下表所示：

7 10-1-2 格式化欄位顯示的資料- 日期/時間資料的格式字串
對於日期/時間資料來說，常用的格式字串說明，如下表所示： 種類 格式字串 範例輸出 短日期 {0:d} 12/30/2016 長日期 {0:D} Friday, December 30, 2016 短時間 {0:t} 12:00 AM 長時間 {0:T} 12:00:00 AM 完整日期短時間 {0:f} Friday, December 30, :00 AM 完整日期長時間 {0:F} Friday, December 30, :00:00 AM 一般日期短時間 {0:g} 12/30/ :00 AM 一般日期長時間 {0:G} 12/30/ :00:00 AM

8 10-2 GridView控制項 10-2-1 格式化GridView控制項 10-2-2 編輯GridView控制項的欄位

9 格式化GridView控制項-說明 GridView控制項可以使用表格方式來顯示、分頁、排序和建立複雜資料表的顯示和編輯功能。編輯功能只能更新和刪除資料。 GridView控制項指定使用的資料來源控制項後，就可以使用表格方式來顯示取得的記錄資料，準備使用自動格式化（自動指定結尾為Style的樣式屬性值）來指定顯示樣式，並且指定欄位的顯示格式和標題名稱。

10 格式化GridView控制項-屬性 GridView控制項欄位的常用屬性說明，如下表所示：

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

12 10-2-1 格式化GridView控制項- 指定欄位屬性
指定欄位資料格式為【{0:c}】的貨幣格式

13 10-2-1 格式化GridView控制項-範例網站
ASP.NET網站：Ch10_2_1 在ASP.NET網頁的GridView控制項使用自動格式化來指定顯示樣式，並且指定中文的標題名稱，數值和日期/時間欄位的格式，如下圖所示：

14 10-2-2 編輯GridView控制項的欄位-說明
GridView控制項是一種欄位基礎的資料邊界控制項，可以在<Columns>區段子標籤來定義Field欄位控制項，常用的欄位控制項說明，如下表所示：

15 10-2-2 編輯GridView控制項的欄位- ButtonField控制項
ButtonField控制項可以顯示整欄Button控制項的按鈕，其相關的常用屬性說明，如下表所示：

16 10-2-2 編輯GridView控制項的欄位- ImageField控制項(說明)
ImageField控制項可以在GridView控制項顯示圖片欄位，其相關的常用屬性說明，如下表所示：

17 10-2-2 編輯GridView控制項的欄位- ImageField控制項(屬性的使用)
DataImageUrlField屬性可以指定圖片網址來源的欄位名稱，例如：來源是c_no欄位值。 DataImageUrlFormatString屬性是使用格式字元{0}來定義圖檔路徑，例如：「~/images/{0}small.gif」格式字串，此格式字串以c_no欄位值CS101為例，就是位在「~/images/CS101small.gif」的圖片，即指定教課書的封面。

18 10-2-2 編輯GridView控制項的欄位- HyperLinkField控制項(說明)

19 10-2-2 編輯GridView控制項的欄位- HyperLinkField控制項(屬性的使用)
如同ImageField控制項，也可以使用格式字元{0}來定義超連結的URL參數，例如：來源(DataNavigateUrlField)是c_no欄位值，格式字串(DataNavigateUrlFormatString)是Details.aspx?No={0}，表示將學號值作為URL參數值傳遞至Details.aspx網頁。

20 10-2-2 編輯GridView控制項的欄位- RowCommand事件
if (e.CommandName == "Select") { pos = Convert.ToInt32(e.CommandArgument); no = GridView1.DataKeys[pos].Value.ToString(); lblOutput.Text = "課程編號: " + no; }

21 10-2-2 編輯GridView控制項的欄位- 範例網站(說明)
ASP.NET網站：Ch10_2_2 在ASP.NET網頁Default.aspx的GridView控制項建立ButtonField、HyperLinkField和ImageField欄位控制項，以便顯示按鈕、超連結和圖片的控制項欄位。 當使用者按下課程編號超連結，可以連接Details.aspx顯示單筆記錄資料，這是修改第9-3節的參數SQL查詢，參數是URL參數Id，只是改為使用DetailsView控制項顯示記錄資料；如果是按下按鈕欄位的按鈕，可以在上方顯示該列的課程編號。

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

23 10-2-3 GridView控制項的分頁與排序-說明
Visual Studio 只需在「GridView工作」功能表勾選【啟用分頁】或【啟用排序】選項，就可以開啟GridView控制項的分頁和排序功能，也就是將控制項的AllowSorting和AllowPaging屬性設為True。 GridView控制項如果啟用排序，預設將所有可排序欄位都啟用排序功能，如果有指定欄位不需要有排序功能，請清除SortExpression屬性值。

24 10-2-3 GridView控制項的分頁與排序- 分頁屬性
當啟用分頁後，就是指定PagerSettings-開頭的屬性，如下表所示：

25 10-2-3 GridView控制項的分頁與排序- 啟用分頁與排序
選GridView控制項且開啟「GridView工作」功能表，如下圖所示：

26 10-2-3 GridView控制項的分頁與排序- 範例網站
ASP.NET網站：Ch10_2_3 在ASP.NET網頁的GridView控制項啟用分頁和排序功能，並且取消【生日】欄位的排序功能，如下圖所示：

27 10-3 DetailsView控制項 10-3-1 DetailsView控制項的基本使用

28 10-3-1 DetailsView控制項的基本使用-說明
DetailsView控制項是以單筆方式來顯示資料來源的資料，如同GridView控制項，一樣支援分頁和編輯功能，而且能夠新增、刪除和更新記錄資料。 DetailsView控制項指定使用的資料來源控制項後，就可以使用單筆方式顯示記錄資料，一樣可以使用分頁來顯示資料。

29 10-3-1 DetailsView控制項的基本使用- 範例網站
ASP.NET網站：Ch10_3_1 在ASP.NET網頁的DetailsView控制項使用自動格式化來指定顯示樣式，並且指定中文的標題名稱，數值和日期/時間欄位的格式，如下圖所示：

30 10-3-2 DetailsView控制項的編輯功能- 說明
DetailsView控制項提供資料表記錄的編輯功能，只需勾選選項就可以啟用編輯功能，在資料來源控制項勾選【產生INSERT、UPDATE和DELETE陳述式】後，就可以建立DetailsView控制項的編輯功能。 勾選【產生INSERT、UPDATE和DELETE陳述式】

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

32 10-3-2 DetailsView控制項的編輯功能- 範例網站
ASP.NET網站：Ch10_3_2 在ASP.NET網頁的DetailsView控制項啟用編輯功能，如下圖所示：

33 10-4 建立主要與詳細表單-說明 GridView和DetailsView控制項可以結合起來，建立主要與詳細表單（Master/Detail）。在主要表單的GridView控制項顯示清單，選擇後，才在DetailsView顯示單筆記錄的詳細資料。 在這一節將準備建立的則是一種多對一的主要與詳細表單。

34 10-4 建立主要與詳細表單- 步驟一：啟用GridView控制項的選取功能
選GridView控制項，按一下上方箭頭圖示顯示「GridView工作」功能表，如下圖所示： 勾選【樞紐分析表選取模式】，可以啟用GridView控制項的選取功能

35 10-4 建立主要與詳細表單- 步驟二：設定SqlDataSource2控制項的參數查詢
選右邊SqlDataSource2控制項，在設定資料來源的設定SQL陳述式步驟，按【WHERE】鈕可以看到「加入WHERE子句」對話方塊。 在【資料行】欄選欄位【c_no】，【運算子】欄位選【=】，來源選【Control】後，在右上方的【控制項ID】欄位選【GridView1】，按【加入】鈕建立WHERE子句

36 10-4 建立主要與詳細表單- 步驟三：指定DetailsView控制項的屬性
選DetailsView控制項，在「屬性」視窗找到【HeaderText】屬性的標題文字，輸入【課程資訊】標題文字，如下圖所示：

37 10-4 建立主要與詳細表單- 範例網站 ASP.NET網站：Ch10_4
在ASP.NET網頁使用GridView控制項選取課程編號後，在DetailsView控制項顯示詳細的課程記錄資料和指定教課書的封面，如右圖所示：

38 10-5 樣板基礎的資料控制項 10-5-1 Repeater控制項 10-5-2 DataList控制項
FormView控制項

39 10-5 樣板基礎的資料控制項 樣板（Templates）是一種模組元素，內含使用者自訂的文字內容、標籤、樣式或其他ASP.NET控制項，它是資料控制項編排顯示的基本單位。 當在資料邊界控制項定義好樣板，此時控制項本身只是依樣板預設的功能來單次、交叉或重複顯示樣板的內容，或提供編輯功能。例如：顯示標頭文字是使用HeaderTemplate樣板、重複顯示是ItemTemplate樣板和編輯功能是EditItemTemplate樣板等。

40 Repeater控制項-說明 Repeater控制項可以使用清單方式來顯示資料，能夠讓使用者自行定義Template樣板標籤後，以樣板標籤的項目如同迴圈一般來重複編排和顯示資料。

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

42 10-5-1 Repeater控制項-資料繫結運算式
當Template樣板標籤需要輸出資料來源的資料時，我們是使用資料繫結運算式，執行Eval()方法來取得欄位值，這是位在「<%#」和「%>」符號間的運算式，如下所示： <%# Eval("sid")%> Eval()方法可以取得參數字串的欄位值，即欄位名稱，以此例是學號sid，如果有第2個參數就是格式字串。

43 10-5-1 Repeater控制項- <asp:Repeater>標籤1
01: <asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1"> 02: <HeaderTemplate> 03: <table border="0" cellspacing="0" cellpadding="5"> 04: <tr bgcolor="FFCC99"> 05: <th>學號</th><th>姓名</th><th>租金</th> 06: </tr> 07: </HeaderTemplate> 08: <ItemTemplate> 09: <tr> 10: <td><%# Eval("sid")%></td> 11: <td><%# Eval("name")%></td> 12: <td><%# Eval("rent", "{0:c}")%></td> 13: </tr>

44 10-5-1 Repeater控制項- <asp:Repeater>標籤2
14: </ItemTemplate> 15: <AlternatingItemTemplate> 16: <tr bgcolor="yellow"> 17: <td><%# Eval("sid")%></td> 18: <td><%# Eval("name")%></td> 19: <td><%# Eval("rent", "{0:c}")%></td> 20: </tr> 21: </AlternatingItemTemplate> 22: <FooterTemplate> 23: </table> 24: </FooterTemplate> 25: </asp:Repeater>

45 10-5-1 Repeater控制項-範例網站 ASP.NET網站：Ch10_5_1
在ASP.NET網頁的Repeater控制項使用樣板標籤來顯示資料來源的記錄資料，我們是使用HTML表格標籤來編排資料，如右圖所示：

46 DataList控制項-說明 DataList控制項也是使用樣板標籤來編排資料，提供多欄位、顯示方向和版面配置的資料顯示與編排，即使用Repeat開頭的相關屬性，其說明如下表所示：

47 10-5-2 DataList控制項- ItemTemplate樣板標籤
當在Visual Studio 建立DataList控制項且指定資料來源，在重新整理結構描述後，預設在ItemTemplate樣板標籤自動新增Label控制項顯示欄位資料，如下所示： <asp:Label ID="sidLabel" runat="server" Text='<%# Eval("sid") %>' />

48 10-5-2 DataList控制項-範例網站 ASP.NET網站：Ch10_5_2
在ASP.NET網頁的DataList控制項指定多欄編排，可以顯示資料來源的sid、name和tel三個欄位的記錄資料，如下圖所示：

49 FormView控制項-說明 FormView控制項可以提供DetailsView控制項的所有功能，只是它是使用Template樣板標籤來編排欄位，換句話說，我們可以自訂單筆記錄的顯示、編輯和插入記錄的表單。 FormView控制項除了在ItemTemplate樣板顯示資料外，還提供編輯和插入記錄功能的相關樣板，如下表所示：

50 10-5-3 FormView控制項-資料繫結運算式
在Visual Studio 建立FormView控制項且指定資料來源後，預設在EditItemTemplate和InsertItemTemplate樣板標籤自動新增TextBox控制項來編輯欄位資料，如下所示： <asp:TextBox ID="nameTextBox" runat="server" Text='<%# Bind("name") %>' /> Bind()方法的雙向資料繫結，因為不只顯示欄位資料，還需要更新資料。

51 10-5-3 FormView控制項- LinkButton控制項
Visual Studio 同時自動新增LinkButton控制項來建立更新和取消記錄編輯的功能，如下所示： <asp:LinkButton ID="UpdateButton" runat="server" CausesValidation="True" CommandName="Update" Text="更新" /> <asp:LinkButton ID="UpdateCancelButton" runat="server" CausesValidation="False" CommandName="Cancel" Text="取消" />

52 10-5-3 FormView控制項- CommandName屬性值
LinkButton控制項是使用CommandName屬性值來指定FormView控制項執行的功能，如下表所示：

53 10-5-3 FormView控制項-範例網站 ASP.NET網站：Ch10_5_3
在ASP.NET網頁的FormView控制項建立InsertItemTemplate和EditItemTemplate樣板的新增和編輯功能，並且啟用分頁顯示功能，如下圖所示：

54 10-6 ListView和DataPager控制項-說明
ListView控制項擁有完整GridView控制項的功能，但使用Template樣板標籤來編排資料。DataPager控制項則是搭配ListView控制項，提供分頁切換的功能。 ListView控制項因為能夠指定多種版面配置，所以在功能上可以取代Repeater和DataList控制項，而且提供比GridView控制項更大的彈性來編排、編輯、刪除、選取和分頁資料的顯示，不只如此，ListView控制項一樣支援插入記錄；而GridView控制項並不支援。

55 10-6 ListView和DataPager控制項- 設定ListView控制項
開啟「ListView工作」功能表，選【設定ListView】超連結，可以看到「設定ListView」對話方塊。 版面配置 樣式 編輯功能與分頁

56 10-6 ListView和DataPager控制項- ListView控制項標籤1
在Visual Studio 切換至原始檔檢視，在LayoutTemplate樣板標籤需要新增ID屬性值為itemPlaceholder的元素，如下所示： <tr ID="itemPlaceholder" runat="server"> <tr>標籤的內容就是ItemTemplate和AlternatingItemTemplate樣板標籤在版面配置預設插入的位置。

57 10-6 ListView和DataPager控制項- ListView控制項標籤2
EmptyDataTemplate樣版標籤是當資料來源沒有取得資料時顯示的網頁內容。 EditItemTemplate和InsertItemTemplate樣板標籤的內容分別是編輯和插入記錄的TextBox控制項和指定CommandName屬性的Button控制項，這部分和FormView控制項相同。

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