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

1. 第10章 網頁資料庫的顯示與維護

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

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

4. 10-1-1 再談資料邊界控制項-說明 • 在第9章已經說明過資料邊界控制項的種類，ASP.NET 2.0版提供Repeater、DataList、GridView和DetailsView控制項；3.5版新增ListView與DataPager控制項，可以使用資料來源控制項，將外部資料整合到控制項來顯示資料表的記錄資料，如下圖所示：

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

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

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

8. 10-1-2 格式化欄位顯示的資料-2 日期/時間資料的格式字串 • 對於日期/時間資料來說，常用的格式字串說明，如下表所示：

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

10. 10-2-1 格式化GridView控制項-說明 • GridView控制項是ASP.NET 2.0版新增的控制項，它是舊版DataGrid控制項的新版本，可以使用表格方式來顯示、分頁、排序和建立複雜資料表的顯示和編輯功能。 • GridView控制項的編輯功能只能更新和刪除資料，在使用上和DetailsView控制項的編輯功能相似，詳細說明請參閱第10-3-2節。 • 在GridView控制項指定使用的資料來源控制項後，就可以使用表格方式來顯示取得的記錄資料，我們準備使用自動格式化（自動指定結尾為Style的樣式屬性值）來指定顯示樣式，並且指定欄位的顯示格式和標題名稱。

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

12. 10-2-1 格式化GridView控制項-自動格式化 • 開啟「GridView工作」功能表，選【自動格式化】超連結，可以看到「自動格式設定」對話方塊。

13. 10-2-1 格式化GridView控制項-指定欄位屬性 • 在「GridView工作」功能表，選【編輯資料行】超連結來編輯欄位屬性，可以看到「欄位」對話方塊。 指定欄位資料格式為【{0:c}】的貨幣格式

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

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

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

17. 10-2-2 編輯GridView控制項的欄位- ImageField控制項 • ImageField控制項可以在GridView控制項顯示圖片欄位，其相關的常用屬性說明，如下表所示： • DataImageUrlField屬性可以指定圖片網址來源的欄位名稱，例如：來源是BookID欄位值。DataImageUrlFormatString屬性是使用格式字元{0}來定義圖檔路徑，例如：「~/images/{0}small.gif」格式字串，此格式字串以BookID欄位值F6476為例，就是位在「~/images/F6476 small.gif」的圖片。

18. 10-2-2 編輯GridView控制項的欄位- HyperLinkField控制項 • 在GridView控制項顯示超連結欄位是使用HyperLinkField控制項，其相關的常用屬性說明，如下表所示： • 如同ImageField控制項，我們也可以使用格式字元{0}來定義超連結的URL參數，例如：來源是BookID欄位值，格式字串是Details.aspx?Id={0}，表示將書號值作為URL參數值傳遞至Details.aspx網頁。

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

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

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

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

23. 10-2-3 GridView控制項的分頁與排序-分頁屬性 • 當啟用分頁預設新增上下頁超連結，或頁碼超連結，屬於PagerSettings-開頭的屬性，如下表所示：

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

25. 10-2-3 GridView控制項的分頁與排序-範例網站 ASP.NET網站：Ch10-2-3 • 在ASP.NET網頁的GridView控制項啟用分頁和排序功能，並且取消【出版日】欄位的排序功能，其建立步驟如下所示：

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

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

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

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

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

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

32. 10-4 建立主要與詳細表單-說明 • GridView和DetailsView控制項可以結合起來，建立主要與詳細表單（Master/Detail）。在主要表單的GridView控制項顯示清單，選擇後，才在DetailsView顯示單筆記錄的詳細資料。 • 事實上，在第9-3節我們已經使用DropDownList控制項建立過主要與詳細表單，這是一種一對多的主要與詳細表單；在這一節我們準備建立的則是一種多對一的主要與詳細表單。

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

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

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

36. 10-4 建立主要與詳細表單-範例網站 ASP.NET網站：Ch10-4 • 在ASP.NET網頁使用GridView控制項選取書號後，在DetailsView控制項顯示詳細圖書記錄資料和封面圖片，如下圖所示：

37. 10-5 樣板基礎的資料控制項 • 10-5-1 Repeater控制項 • 10-5-2 DataList控制項 • 10-5-3 FormView控制項

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

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

40. 10-5-1 Repeater控制項-Template樣板標籤 • Repeater控制項支援的Template樣板標籤，其說明如下表所示：

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

42. 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("BookID")%></td> 11: <td><%#Eval("BookTitle")%></td> 12: <td><%#Eval("BookPrice","{0:c}")%></td> 13: </tr>

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

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

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

46. 10-5-2 DataList控制項- ItemTemplate樣板標籤 • 當在VWD建立DataList控制項且指定資料來源後，預設在ItemTemplate樣板標籤新增Label控制項來顯示欄位資料，如下所示： <asp:Label ID="BookIDLabel" runat="server" Text='<%# Eval("BookID") %>' />

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

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

49. 10-5-3 FormView控制項-資料繫結運算式 • 在VWD建立FormView控制項且指定資料來源後，預設在EditItemTemplate和InsertItemTemplate樣板標籤自動新增TextBox控制項來編輯欄位資料，如下所示： <asp:TextBox ID="BookTitleTextBox" runat="server" Text='<%# Bind("BookTitle") %>' /> • 上述TextBox控制項的Text屬性是使用資料繫結運算式來顯示欄位值，不過，不是使用Eval()方法，而是Bind()方法的雙向資料繫結，因為我們不只顯示欄位資料，還需要更新資料。

50. 10-5-3 FormView控制項-LinkButton控制項 • 除了編輯欄位外，VWD自動新增LinkButton控制項建立更新和取消記錄編輯的功能，如下所示： <asp:LinkButton ID="UpdateButton" runat="server" CausesValidation="True" CommandName="Update" Text="更新" /> <asp:LinkButton ID="UpdateCancelButton" runat="server" CausesValidation="False" CommandName="Cancel" Text="取消" /> • 上述LinkButton控制項是使用CommandName屬性值來指定FormView控制項執行的功能。