1 / 118

第 21 章 資料連結控制項與資料庫整合應用

第 21 章 資料連結控制項與資料庫整合應用. Repeater DataList GridView DetailsView DataGrid. 21-2 Repeater 控制項. <asp:Repeater runat="server" ID="…" DataMember="…" DataSource="<%# … %>"DataSourceID="…" OnItemCommand="…" OnItemCreated="…" OnItemDataBound="…"> <AlternatingItemTemplate>

pomona
Télécharger la présentation

第 21 章 資料連結控制項與資料庫整合應用

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 第 21 章 資料連結控制項與資料庫整合應用

  2. Repeater • DataList • GridView • DetailsView • DataGrid

  3. 21-2Repeater 控制項 <asp:Repeater runat="server" ID="…" DataMember="…" DataSource="<%# … %>"DataSourceID="…" OnItemCommand="…" OnItemCreated="…" OnItemDataBound="…"> <AlternatingItemTemplate> 替代項目樣板，可以包含 HTML 標籤、伺服器控制項… </AlternatingItemTemplate> <FooterTemplate> 頁尾樣板，可以包含 HTML 標籤、伺服器控制項… </FooterTemplate> <HeaderTemplate> 頁首樣板，可以包含 HTML 標籤、伺服器控制項… </HeaderTemplate>這個部份為樣板，用來定義 Repeater 控制項各區域的內容，其中只有 ItemTemplate 為必要樣板，其它樣板都可以省略。 <ItemTemplate> 一般項目樣板，可以包含 HTML 標籤、伺服器控制項… </ItemTemplate> <SeparatorTemplate> 分隔樣板，可以包含 HTML 標籤、伺服器控制項… </SeparatorTemplate> </asp:Repeater>

  4. Repeater 控制項提供下列五種樣板，用來定義各區域的內容： • AlternatingItemTemplate • FooterTemplate • HeaderTemplate • ItemTemplate • SeparatorTemplate

  5. Repeater 控制項的屬性 • DataMember="…" • DataSource="…" • DataSourceID="…" • Items

  6. Repeater 控制項的事件 • OnItemCommand="ProcedureName" • OnItemCreated="ProcedureName" • OnItemDataBound="ProcedureName"

  7. Repeater 控制項用來控制資料輸出的是「一般項目樣板」及「替代項目樣板」，那麼要如何將連結至 Repeater 控制項的資料顯示出來呢？很簡單，只要在一般項目樣板或替代項目樣板加入下列語法即可，其中格式字串可以省略：格式字串的使用方式與 CheckBoxList 控制項的 DataTextFormatString 屬性相同。 <%#Eval("欄位名稱", "格式字串")%>

  8. \Ch21\Repeater_01_Access.aspx 01:<%@ Page Language="VB" %> 02:<%@ Import Namespace="System.Data" %> 03:<%@ Import Namespace="System.Data.OleDb" %> 04:<script runat="server"> 05: Sub Page_Load(sender As Object, e As System.EventArgs) 06: '取得 web.config 組態檔的資料連接設定 07: Dim setting As ConnectionStringSettings = _ ConfigurationManager.ConnectionStrings("OLEDB_Price") 08: 09: '建立資料連接 10: Dim objConn As New OleDbConnection() 11: objConn.ConnectionString = setting.ConnectionString 12: objConn.Open()

  9. 13: 14: '建立 DataReader 物件 15: Dim strSQL As String = "Select * From 零組件報價表 Where 零組件種類='印表機' Order By 廠牌 Asc" 16: Dim objCmd As New OleDbCommand(strSQL, objConn) 17: Dim objReader As OleDbDataReader = objCmd.ExecuteReader() 18: 19: '連結資料 20: myRepeater.DataSource = objReader 21: myRepeater.DataBind() 22: 23: '關閉 DataReader 物件及資料連接 24: objReader.Close() 25: objConn.Close() 26: End Sub

  10. 27:</script> 28: 29:<html> 30: <body> 31: <form id="form1" runat="server"> 32: <asp:Repeater ID="myRepeater" runat="server"> 33: <HeaderTemplate> 34: <h1>印表機報價單</h1> 35: ------------------------- 由此開始 --------------------------<br> 36: </HeaderTemplate> 37: <ItemTemplate> 38: 廠牌：<%#Eval("廠牌")%><br> 39: 規格：<%#Eval("規格")%><br> 40: 價格：<%#Eval("價格")%><br> 41: 報價日期：<%#Eval("報價日期", "{0:yyyy/MM/dd}")%><br><br> 42: </ItemTemplate>

  11. 43: <AlternatingItemTemplate> 44: <i>廠牌：<%#Eval("廠牌")%></i><br> 45: <i>規格：<%#Eval("規格")%></i><br> 46: <i>價格：<%#Eval("價格")%></i><br> 47: <i>報價日期：<%#Eval("報價日期", "{0:yyyy/MM/dd}")%></i><br> 48: </AlternatingItemTemplate> 49: <SeparatorTemplate> 50: <hr align="Left" width="200"> 51: </SeparatorTemplate> 52: <FooterTemplate> 53: ------------------------- 至此結束 ------------------------- 54: </FooterTemplate> 55: </asp:Repeater> 56: </form> 57: </body> 58:</html>

  12. \Ch21\Repeater_02_Access.aspx <%@ Page Language="VB" %> <%@ Import Namespace="System.Data" %> <%@ Import Namespace="System.Data.OleDb" %> <script runat="server"> Sub Page_Load(sender As Object, e As System.EventArgs) '取得 web.config 組態檔的資料連接設定 Dim setting As ConnectionStringSettings = ConfigurationManager.ConnectionStrings("OLEDB_Price") '建立 DataAdpter 物件 Dim strSQL As String = "Select * From 零組件報價表 Where 零組件種類='印表機' Order By 廠牌 Asc" Dim objCmd As New OleDbDataAdapter(strSQL, setting.ConnectionString)

  13. '建立 DataSet 物件 Dim DS As New DataSet() objCmd.Fill(DS, "零組件報價表") '連結資料 myRepeater.DataSource = DS myRepeater.DataBind() End Sub </script> <html> <body> <form id="form1" runat="server"> <asp:Repeater ID="myRepeater" runat="server"> <HeaderTemplate> <h1> 印表機報價單</h1> ------------------------- 由此開始 -------------------------<br> </HeaderTemplate>

  14. <ItemTemplate> 廠牌：<%#Eval("廠牌")%><br> 規格：<%#Eval("規格")%><br> 價格：<%#Eval("價格")%><br> 報價日期：<%#Eval("報價日期", "{0:yyyy/MM/dd}")%><br> </ItemTemplate> <AlternatingItemTemplate> <i>廠牌：<%#Eval("廠牌")%></i><br> <i>規格：<%#Eval("規格")%></i><br> <i>價格：<%#Eval("價格")%></i><br> <i>報價日期：<%#Eval("報價日期", "{0:yyyy/MM/dd}")%>/i><br> </AlternatingItemTemplate>

  15. <SeparatorTemplate> <hr align="Left" width="200"> </SeparatorTemplate> <FooterTemplate> ------------------------- 至此結束 ------------------------- </FooterTemplate> </asp:Repeater> </form> </body> </html>

  16. \Ch21\Repeater_03_Access.aspx (下頁續1/2) <html> <body> <form id="form1" runat="server"> <asp:AccessDataSource ID="AccessDataSource" runat="server" DataFile="~/App_Data/Price.mdb" SelectCommand="Select * From 零組件報價表 Where 零組件種類='印表機' Order By 廠牌 Asc" /> <asp:Repeater ID="myRepeater" runat="server" DataSourceID="AccessDataSource"> <HeaderTemplate> <h1>印表機報價單</h1> ------------------------- 由此開始 -------------------------<br> </HeaderTemplate>

  17. <ItemTemplate> 廠牌：<%#Eval("廠牌")%><br> 規格：<%#Eval("規格")%><br> 價格：<%#Eval("價格")%><br> 報價日期：<%#Eval("報價日期", "{0:yyyy/MM/dd}")%><br> </ItemTemplate> <AlternatingItemTemplate> <i>廠牌：<%#Eval("廠牌")%></i><br> <i>規格：<%#Eval("規格")%></i><br> <i>價格：<%#Eval("價格")%></i><br> <i>報價日期：<%#Eval("報價日期", "{0:yyyy/MM/dd}")%>/i><br> </AlternatingItemTemplate>

  18. <SeparatorTemplate> <hr align="Left" width="200"> </SeparatorTemplate> <FooterTemplate> ------------------------- 至此結束 ------------------------- </FooterTemplate> </asp:Repeater> </form> </body> </html>

  19. 21-3DataList 控制項 <asp:DataList runat="server" ID="…" Caption="…"CaptionAlign="{NotSet|Top|Bottom|Left|Right}" CellPadding="n" CellSpacing="n" DataKeyField="…" DataMember="…" DataSource="<%# … %>"DataSourceID="…" EditItemIndex="n" ExtractTemplateRows="{True|False}"GridLines="{None|Horizontal|Vertical|Both}" RepeatColumns="n"HorizontalAlign="{NotSet|Left|Center|Right|Justify}"RepeatDirection="{Vertical|Horizontal}" RepeatLayout="{Flow|Table}"SelectedIndex="n" ShowFooter="{True|False}" ShowHeader="{True|False}" OnCancelCommand="…" OnDeleteCommand="…" OnEditCommand="…"OnItemCommand="…" OnItemCreated="…" OnUpdateCommand="…">

  20. <AlternatingItemTemplate>替代項目樣板</AlternatingItemTemplate><AlternatingItemTemplate>替代項目樣板</AlternatingItemTemplate> <EditItemTemplate>編輯樣板</EditItemTemplate> <FooterTemplate>頁尾樣板</FooterTemplate> <HeaderTemplate>頁首樣板</HeaderTemplate> <ItemTemplate>一般項目樣板</ItemTemplate> <SelectedItemTemplate>選取樣板</SelectedItemTemplate> <SeparatorTemplate>分隔樣板</SeparatorTemplate> <AlternatingItemStyle … /> <EditItemStyle … /> <FooterStyle … /> <HeaderStyle … /> <ItemStyle … /> <SelectedItemStyle … /> <SeparatorStyle … /> </asp:DataList>

  21. DataList 控制項提供下列七種樣板，用來定義各區域的內容： • AlternatingItemTemplate • EditItemTemplate • FooterTemplate • HeaderTemplate • ItemTemplate • SelectedItemTemplate • SeparatorTemplate

  22. DataList 控制項提供下列七種樣式物件，用來定義各區域的外觀： • AlternatingItemStyle • EditItemStyle • FooterStyle • HeaderStyle • ItemStyle • SelectedItemStyle • SeparatorStyle

  23. 21-3-1DataList 控制項的屬性與事件 • DataList 控制項的屬性 • Caption="…" • CaptionAlign="{NotSet|Top|Bottom|Left|Right}" • CellPadding="n" • CellSpacing="n" • DataKeyField="…" • DataKeys • DataMember="…" • DataSource="…" • DataSourceID="…" • EditItemIndex="n"

  24. ExtractTemplateRows="{True|False}" • GridLines="{None|Horizontal|Vertical|Both}" • HorizontalAlign="{NotSet|Left|Center|Right|Justify}" • Items • RepeatColumns="n" • RepeatDirection="{Vertical|Horizontal}" • RepeatLayout="{Flow|Table}" • SelectedIndex = "n" • SelectedItem • SelectedValue • ShowFooter="{True|False}" • ShowHeader="{True|False}"

  25. DataList 控制項的事件 • OnCancelCommand="ProcedureName" • OnDeleteCommand="ProcedureName" • OnEditCommand="ProcedureName" • OnItemCommand="ProcedureName" • OnItemCreated="ProcedureName" • OnItemDataBound="ProcedureName" • OnSelectedIndexChanged="ProcedureName" • OnUpdateCommand="ProcedureName"

  26. \Ch21\DataList_01_Access.aspx 01:<html> 02: <body> 03: <form id="form1" runat="server"> 04: <asp:AccessDataSource ID="AccessDataSource" runat="server"DataFile="~/App_Data/Address.mdb" SelectCommand="Select * From 通訊錄" /> 05: <asp:DataList ID="myDataList" runat="server" DataSourceID="AccessDataSource" BackColor="LightGoldenrodYellow" BorderColor="Tan" BorderWidth="1px" Caption="通訊錄清單" CaptionAlign="Top" CellPadding="2" Width="600" HorizontalAlign="Center" RepeatColumns="2">

  27. 06: <ItemTemplate> 07: 姓名：姓名：<%#Eval("姓名")%><br> 08: 生日：生日：<%#Eval("生日", "{0:yyyy/MM/dd}")%><br> 09: 電話：電話：<%#Eval("電話") %><br><br> 10: </ItemTemplate> 11: <AlternatingItemTemplate> 12: <b><i>姓名：<%#Eval("姓名")%></i></b><br> 13: <b><i>生日：<%#Eval("生日", "{0:yyyy/MM/dd}")%> </i></b><br> 14: <b><i>電話：<%#Eval("電話")%></i></b><br><br> 15: </AlternatingItemTemplate> 16: </asp:DataList> 17: </form> 18: </body> 19:</html>

  28. 21-3-2　樣式物件的屬性 • BackColor="{ColorName|#RRGGBB}" • BorderColor="{ColorName|#RRGGBB}" • BorderStyle="{NotSet|None|Dotted|Dashed|Solid|Double|Groove|Ridge|Inset|Outset}" • BorderWidth="n" • CssClass="…" • Font • ForeColor="{ColorName|#RRGGBB}" • Height="n" • HorizontalAlign="{NotSet|Left|Center|Right|Justify}" • VerticalAlign="{NotSet|Top|Middle|Bottom}" • Width="n" • Wrap="{True|False}"

  29. 21-4GridView 控制項 <asp:GridView runat="server" ID="…" AllowPaging="{True|False}"AllowSorting="{True|False}" AutoGenerateColumns="True|False"AutoGenerateDeleteButton="{True|False}" CellPadding="n" AutoGenerateEditButton="{True|False}" CellSpacing="n" AutoGenerateSelectButton="{True|False}" BackImageUrl="URI"Caption="…" CaptionAlign="{NotSet|Top|Bottom|Left|Right}" DataKeyNames="…" DataMember="…" DataSource="<%# … %>"DataSourceID="…" EditIndex="n" EmptyDataText="…"EnableSortingAndPagingCallbacks="{True|False}" GridLines="{None|Horizontal|Vertical|Both}"HorizontalAlign="{NotSet|Left|Center|Right|Justify}" PageIndex="n" PageSize="n" SelectedIndex="n" ShowFooter="{True|False}" ShowHeader="{True|False}" OnPageIndexChanged="…" OnPageIndexChanging="…" OnRowCancelingEdit="…" OnRowCommand="…" OnRowCreated="…" OnRowDataBound="…"OnRowDeleted="…" OnRowDeleting="…" OnRowEditing="…" OnRowUpdated="…" OnRowUpdating="…" OnSelectedIndexChanged="…" OnSelectedIndexChanging="…" OnSorted="…" OnSorting="…">

  30. <PagerSettings FirstPageImageUrl="URI" FirstPageText="…"LastPageImageUrl="URI" LastPageText="…"Mode="{NextPrevious|Numeric|NextPreviousFirstLast|NumericFirstLast}" NextPageImageUrl="URI" NextPageText="…" PageButtonCount="n"Position="{Bottom|Top|TopAndBottom}" PreviousPageImageUrl="URI" PreviousPageText="…" Visible="{True|False}" /> <EmptyDataTemplate> 設定當資料來源沒有傳回資料時，GridView 控制項所要顯示的內容，可以包含HTML標籤及其它控制項 </EmptyDataTemplate> <AlternatingRowStyle /> <EditRowStyle /> <EmptyDataRowStyle /> <FooterStyle />

  31. <HeaderStyle /> <PagerStyle /> <RowStyle /> <SelectedRowStyle /> <Columns> <asp:BoundField ApplyFormatInEditMode="{True|False}" ConvertEmptyStringToNull="{True|False}" DataField="…" DataFormatString="…" FooterText="…" HeaderImageUrl="URI" HeaderText="…" InsertVisible="{True|False}" NullDisplayText="…" ReadOnly="{True|False}" ShowHeader="{True|False}" SortExpression="…" Visible="{True|False}"> <ControlStyle /> <FooterStyle /> <HeaderStyle /> <ItemStyle /> </asp:BoundField>

  32. <asp:ButtonField ButtonType="{Button|Image|Link}" CausesValidation="{True|False}" CommandName="…" DataTextField="…" DataTextFormatString="…" FooterText="…" HeaderImageUrl="URI" HeaderText="…" ImageUrl="URI" InsertVisible="{True|False}" ShowHeader="{True|False}" SortExpression="…" Text="…" ValidationGroup="…" Visible="{True|False}"> <ControlStyle /> <FooterStyle /> <HeaderStyle /> <ItemStyle /> </asp:ButtonField> <asp:CheckBoxField DataField="…" FooterText="…" HeaderImageUrl="URI" HeaderText="…" InsertVisible="{True|False}" ReadOnly="{True|False}" ShowHeader="{True|False}" SortExpression="…" Text="…" Visible="{True|False}"> <ControlStyle /> <FooterStyle /> <HeaderStyle /> <ItemStyle /> </asp:CheckBoxField>

  33. <asp:CommandField ButtonType="{Button|Image|Link}" CancelImageUrl="URI" CancelText="…" CausesValidation="{True|False}" DeleteImageUrl="URI" DeleteText="…" EditImageUrl="URI" EditText="…" FooterText="…" HeaderImageUrl="URI" HeaderText="…" InsertImageUrl="URI" InsertText="…" InsertVisible="{True|False}" NewImageUrl="URI" NewText="…" SelectImageUrl="URI" SelectText="…" ShowCancelButton="{True|False}" ShowDeleteButton="{True|False}" ShowEditButton="{True|False}" ShowHeader="{True|False}" ShowInsertButton="{True|False}" ShowSelectButton="{True|False}" SortExpression="…" UpdateImageUrl="URI" UpdateText="…" ValidationGroup="…" Visible="{True|False}"> <ControlStyle /> <FooterStyle /> <HeaderStyle /> <ItemStyle /> </asp:CommandField>

  34. <asp:HyperLinkField DataNavigateUrlFields="…" DataTextField="…" DataNavigateUrlFormatString="…" DataTextFormatString="…" FooterText="…" HeaderImageUrl="URI" HeaderText="…" InsertVisible="{True|False}" NavigateUrl="URI" ShowHeader="{True|False}" SortExpression="…" Target="…" Text="…" Visible="{True|False}"> <ControlStyle /> <FooterStyle /> <HeaderStyle /> <ItemStyle /> </asp:HyperLinkField> <asp:ImageField ConvertEmptyStringToNull="{True|False}" AlternateText="…" DataAlternateTextField="…" DataAlternateTextFormatString="…" DataImageUrlField="…" DataImageUrlFormatString="…" FooterText="…" SortExpression="…" HeaderImageUrl="URI" HeaderText="…" InsertVisible="{True|False}" NullDisplayText="…" NullImageUrl="URI" ReadOnly="{True|False}" ShowHeader="{True|False}" Visible="{True|False}"> <ControlStyle /> <FooterStyle /> <HeaderStyle /> <ItemStyle /> </asp:ImageField>

  35. <asp:TemplateField ConvertEmptyStringToNull="{True|False}" FooterText="…" HeaderImageUrl="URI" HeaderText="…" InsertVisible="{True|False}" ShowHeader="{True|False}" SortExpression="…" Visible="{True|False}"> <ControlStyle /> <FooterStyle /> <HeaderStyle /> <ItemStyle /> <AlternatingItemTemplate> 文字、HTML 標籤或控制項 </AlternatingItemTemplate> <EditItemTemplate> 文字、HTML 標籤或控制項 </EditItemTemplate>

  36. <FooterTemplate> 文字、HTML 標籤或控制項 </FooterTemplate> <HeaderTemplate> 文字、HTML 標籤或控制項 </HeaderTemplate> <InsertItemTemplate> 文字、HTML 標籤或控制項 </InsertItemTemplate> <ItemTemplate> 文字、HTML 標籤或控制項 </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView>

  37. 21-4-1GridView 控制項的基本觀念

  38. GridView 控制項由下列五個項目所組成： • 標題 • 頁首 • 資料項目 • 頁尾 • 頁面巡覽區

  39. GridView 控制項使用下列八個 TableItemStyle 物件定義其外觀： • AlternatingRowStyle • EditRowStyle • EmptyDataRowStyle • FooterStyle • HeaderStyle • PagerStyle • RowStyle • SelectedRowStyle

  40. GridView 控制項是以表格的形式顯示資料，縱向代表欄位，而 GridView 控制項會顯示哪些欄位，可以透過下列三種方式來決定： • 自動產生欄位 • 手動定義欄位 • 混合式欄位

  41. \Ch21\GridView_01_Access.aspx 01:<html> 02: <body> 03: <form id="form1" runat="server"> 04: <asp:AccessDataSource ID="AccessDataSource" runat="server" DataFile="~/App_Data/Grades.mdb" SelectCommand="Select 學號, 姓名, 會計, 統計, 會計 + 統計 As 總分 From 成績單" /> 05: <asp:GridView ID="GV" runat="server" DataSourceID="AccessDataSource" /> 06: </form> 07: </body> 08:</html>

  42. 21-4-2GridView 控制項的屬性與事件 • GridView 控制項的屬性 • AllowPaging="{True|False}" • AllowSorting="{True|False}" • AutoGenerateColumns="{True|False}" • AutoGenerateDeleteButton="{True|False} • AutoGenerateEditButton="{True|False}" • AutoGenerateSelectButton="{True|False}" • BackImageUrl="URI" • Caption="…" • CaptionAlign="{NotSet|Top|Bottom|Left|Right}" • CellPadding="n" • CellSpacing="n"

  43. BottomPagerRow • Columns • DataKeyNames="…" • DataSourceID="…" • EditIndex="n" • DataKeys • EmptyDataText="…" • EnableSortingAndPagingCallbacks="{True|False}" • FooterRow • GridLines="{None|Horizontal|Vertical|Both}" • HeaderRow

  44. HorizontalAlign="{NotSet|Left|Center|Right|Justify}" • PageIndex="n" • PageCount="n" • PagerSettings • PageSize="n" • Rows • SelectedDataKey • SelectedIndex="n" • SelectedRow • SelectedValue

  45. ShowFooter="{True|False}" • ShowHeader="{True|False}" • SortDirection • SortExpression • TopPagerRow

  46. GridView 控制項的事件 • OnPageIndexChanged="ProcedureName" • OnPageIndexChanging="ProcedureName" • OnRowCancelingEdit="ProcedureName" • OnRowCommand="ProcedureName" • OnRowCreated="ProcedureName" • OnRowDataBound="ProcedureName" • OnRowDeleted="ProcedureName" • OnRowDeleting="ProcedureName" • OnRowEditing="ProcedureName"

  47. OnRowUpdated="ProcedureName" • OnRowUpdating="ProcedureName" • OnSelectedIndexChanged="ProcedureName" • OnSelectedIndexChanging="ProcedureName" • OnSorted="ProcedureName" • OnSorting="ProcedureName"

More Related