1 / 71

ASP.NET 網頁製作教本 – 從基本語法學起

ASP.NET 網頁製作教本 – 從基本語法學起. 第 8 章 DataGrid 與 DataTable. 8-1 DataTable 的資料結構. DataTable 的資料結構. DataTable 的建構：開啟資料庫. Table01.aspx Part I. <!-- # include File="Mdb.vb" --> <Html> <Body BgColor="White"> <H3>DataTable 的建構：開啟資料庫< HR></H3> <asp:Label runat="server" id="Msg" /><p>

samira
Download Presentation

ASP.NET 網頁製作教本 – 從基本語法學起

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. ASP.NET 網頁製作教本 – 從基本語法學起 第 8 章 DataGrid 與 DataTable

  2. 8-1 DataTable 的資料結構

  3. DataTable 的資料結構

  4. DataTable 的建構：開啟資料庫

  5. Table01.aspx Part I <!-- #include File="Mdb.vb" --> <Html> <Body BgColor="White"> <H3>DataTable的建構：開啟資料庫<HR></H3> <asp:Label runat="server" id="Msg" /><p> <HR></Body> </Html>

  6. Table01.aspx Part II <script Language="VB" runat="server"> Sub Page_Load(sender As Object, e As EventArgs) Dim Table As System.Data.DataTable Table = OpenMdbTable( "Sample.mdb", "股票行情表" ) If Not Table Is Nothing Then Msg.Text = "已經建構好 DataTable!" End If End Sub </script>

  7. Table02.aspx Part I <%@ Import Namespace="System.Data" %> <!-- #include File="Mdb.vb" --> <Html> <Body BgColor="White"> <H3>DataTable的建構：開啟資料庫<HR></H3> <asp:Label runat="server" id="Msg" /><p> <HR></Body> </Html>

  8. Table02.aspx Part II <script Language="VB" runat="server"> Sub Page_Load(sender As Object, e As EventArgs) Dim Table As DataTable Table = OpenMdbTable( "Sample.mdb", "股票行情表" ) If Not Table Is Nothing Then Msg.Text = "已經建構好 DataTable!" End If End Sub </script>

  9. DataTable 的建構：逐欄逐列填入資料 • 將資料填入 DataTable 大致可以分成三道程序： • 建立 DataTable 物件：使用 New DataTable 的方式先建立好物件 。 • 建立欄位：包含欄位抬頭及其資料型別的建立 。 • 加入資料列：根據實際的資料列數(或稱「資料筆數」)，逐列加入於DataTable之中。

  10. 實例 (1) • 有四個陣列資料如下： Dim 姓名() = { “陳桶一”, “黃光權”, “胡生妙”, “王為全”, _ “李日正”, “劉德菖”, “方正一”, “劉康寶”, _ "謝掬花", "王美蘭", "徐小噹", "葉小毛" }Dim 國文() = { 90, 58, 41, 95, 59, 28, 98, 0, 95, 41, 91, 0 }Dim 英文() = { 76, 77, 14, 97, 66, 11, 100, 0, 74, 46, 99, 10 }Dim 數學() = { 98, 75, 33, 87, 57, 33, 100, 10, 89, 49, 84, 0 }

  11. 實例 (2) • 將其填入 DataTable 成為以下結構：

  12. Table03.aspx 節錄Part I,II ' Part 1: 宣告並且建立 DataTable 物件 Dim Table As New DataTable ' Part 2: 建立欄位 Table.Columns.Add(New DataColumn("姓名", GetType(String))) Table.Columns.Add(New DataColumn("國文", GetType(Integer))) Table.Columns.Add(New DataColumn("英文", GetType(Integer))) Table.Columns.Add(New DataColumn("數學", GetType(Integer)))

  13. Table03.aspx 節錄Part III ' Part 3: 加入資料列 For I = 0 To UBound(姓名) Dim Row As DataRow Row = Table.NewRow() Row("姓名") = 姓名(I) Row("國文") = 國文(I) Row("英文") = 英文(I) Row("數學") = 數學(I) Table.Rows.Add(Row) Next

  14. 8-2 DataGrid 初體驗

  15. DataGrid 的安插與資料繫結

  16. Grid01.aspx Part I <%@ Import Namespace="System.Data" %> <!-- #include File="Mdb.vb" --> <Html> <Body BgColor="White"><Center> <H3>Grid01.aspx -- 用 DataGrid 顯示 DataTable 的資料<HR></H3><asp:DataGrid runat="server" id="MyGrid" /> <p> <HR></Center></Body> </Html>

  17. Grid01.aspx Part II <script Language="VB" runat="server"> Sub Page_Load(sender As Object, e As EventArgs) Dim Table As DataTable Table = OpenMdbTable( "Sample.mdb", "股票行情表" ) ' DataGrid 與 DataTable 的資料繫結 MyGrid.DataSource = Table.DefaultView MyGrid.DataBind() End Sub

  18. 開啟其他資料庫(表)

  19. 設定 DataGrid 的外觀 • 想改變 DataGrid 的外觀，讓它從下圖(左)變成下圖(右)：

  20. Grid03.aspx Part I <%@ Import Namespace="System.Data" %> <!-- #include File="Mdb.vb" --> <Html> <Body BgColor="White"><Center> <H3>Grid03.aspx -- 設定DataGrid的外觀<HR></H3> <asp:DataGrid runat="server" id="MyGrid" HeaderStyle-BackColor="#AAAADD" AlternatingItemStyle-BackColor="#FFFFC0" BorderColor="Black" CellPadding="2" CellSpacing="0" /> <p> <HR></Center></Body> </Html>

  21. Grid03.aspx Part II <script Language="VB" runat="server"> Sub Page_Load(sender As Object, e As EventArgs) Dim Table As DataTable Table = OpenMdbTable( "Sample.mdb", "成績單" ) ' DataGrid 與 DataTable 的資料繫結 MyGrid.DataSource = Table.DefaultView MyGrid.DataBind() End Sub </script>

  22. 設定 DataGrid 的外觀—特殊的屬性 Part I • HeaderStyle-BackColor：用來設定第一列(抬頭列)的背景顏色。

  23. 設定 DataGrid 的外觀—特殊的屬性 Part II • AlternatingItemStyle-BackColor：用來設定間隔一列的背景顏色。 • BorderColor：表格邊框的顏色。

  24. 8-3 可以分頁瀏覽的 DataGrid

  25. 可以分頁瀏覽的 DataGrid

  26. 分頁瀏覽的基礎

  27. Grid04.aspx Part I <%@ Import Namespace="System.Data" %> <!-- #include File="Mdb.vb" --> <Html> <Body BgColor="White"><Center> <H3>Grid04.aspx -- 分頁瀏覽的基礎<HR></H3> <Form runat="server"> <asp:DataGrid runat="server" id="MyGrid" AllowPaging="True" PageSize="10" OnPageIndexChanged="ChangePage" HeaderStyle-BackColor="#AAAADD" AlternatingItemStyle-BackColor="#FFFFC0" BorderColor="Black" CellPadding="2" CellSpacing="0" /> </Form>

  28. Grid04.aspx Part II <p> <HR></Center></Body> </Html> <script Language="VB" runat="server"> Sub Page_Load(sender As Object, e As EventArgs) Dim Table As DataTable Table = OpenMdbTable( "Sample.mdb", "成績單" ) MyGrid.DataSource = Table.DefaultView MyGrid.DataBind() End Sub

  29. Grid04.aspx Part III Sub ChangePage(sender As Object, e As DataGridPageChangedEventArgs) MyGrid.CurrentPageIndex = e.NewPageIndex Dim Table As DataTable Table = OpenMdbTable( "Sample.mdb", "成績單" ) MyGrid.DataSource = Table.DefaultView MyGrid.DataBind() End Sub </script>

  30. 執行效能問題

  31. 利用IsPostBack 解決執行效能問題 (Grid04b.aspx 節錄) Sub Page_Load(sender As Object, e As EventArgs) If Not IsPostBack Then ' 網頁第一次被瀏覽 Dim Table As DataTable Table = OpenMdbTable( "Sample.mdb", "成績單" ) MyGrid.DataSource = Table.DefaultView MyGrid.DataBind() End If End Sub

  32. Grid04c.aspx 節錄 Part I <script Language="VB" runat="server"> Sub OpenDataBase_And_BindToDataGrid() Dim Table As DataTable Table = OpenMdbTable( "Sample.mdb", "成績單" ) MyGrid.DataSource = Table.DefaultView MyGrid.DataBind() End Sub

  33. Grid04c.aspx 節錄 Part II Sub Page_Load(sender As Object, e As EventArgs) If Not IsPostBack Then OpenDataBase_And_BindToDataGrid() End If End Sub Sub ChangePage(sender As Object, e As DataGridPageChangedEventArgs) MyGrid.CurrentPageIndex = e.NewPageIndex OpenDataBase_And_BindToDataGrid() End Sub </script>

  34. 將<及>改成上一頁及下一頁

  35. Grid05.aspx Part I <%@ Import Namespace="System.Data" %> <!-- #include File="Mdb.vb" --> <Html> <Body BgColor="White"> <H3>Grid05.aspx -- 將 < 及 > 改成「上一頁」及「下一頁」<HR></H3> <Form runat="server"> <asp:DataGrid runat="server" id="MyGrid" AllowPaging="True" PageSize="10" OnPageIndexChanged="ChangePage"

  36. Grid05.aspx Part II PagerStyle-HorizontalAlign="Right" PagerStyle-NextPageText="下一頁" PagerStyle-PrevPageText="上一頁" HeaderStyle-BackColor="#AAAADD" AlternatingItemStyle-BackColor="#FFFFC0" BorderColor="Black" CellPadding="2" CellSpacing="0" /> </Form> <p> <HR></Center></Body> </Html>

  37. Grid05.aspx Part III <script Language="VB" runat="server"> Sub OpenDataBase_And_BindToDataGrid() Dim Table As DataTable Table = OpenMdbTable( "Sample.mdb", "成績單" ) MyGrid.DataSource = Table.DefaultView MyGrid.DataBind() End Sub

  38. Grid05.aspx Part IV Sub Page_Load(sender As Object, e As EventArgs) If Not IsPostBack Then OpenDataBase_And_BindToDataGrid() End If End Sub Sub ChangePage(sender As Object, e As DataGridPageChangedEventArgs) MyGrid.CurrentPageIndex = e.NewPageIndex OpenDataBase_And_BindToDataGrid() End Sub </script>

  39. 將 < 及 > 改成 1 2 3 4 … 的頁次連結

  40. Grid06.aspx Part I <%@ Import Namespace="System.Data" %> <!-- #include File="Mdb.vb" --> <Html> <Body BgColor="White"><Center> <H3>Grid06.aspx -- 將 < 及 > 改成 1 2 3 4 … 的頁次連結<HR></H3> <Form runat="server"> <asp:DataGrid runat="server" id="MyGrid" AllowPaging="True" PageSize="10" OnPageIndexChanged="ChangePage"

  41. Grid06.aspx Part II PagerStyle-Mode="NumericPages" PagerStyle-HorizontalAlign="Right" HeaderStyle-BackColor="#AAAADD" AlternatingItemStyle-BackColor="#FFFFC0" BorderColor="Black" CellPadding="2" CellSpacing="0" /> </Form> <p> <HR></Center></Body> </Html>

  42. Grid06.aspx Part III <script Language="VB" runat="server"> Sub OpenDataBase_And_BindToDataGrid() Dim Table As DataTable Table = OpenMdbTable( "Sample.mdb", "股票行情表" ) MyGrid.DataSource = Table.DefaultView MyGrid.DataBind() End Sub

  43. Grid06.aspx Part IV Sub Page_Load(sender As Object, e As EventArgs) If Not IsPostBack Then OpenDataBase_And_BindToDataGrid() End If End Sub Sub ChangePage(sender As Object, e As DataGridPageChangedEventArgs) MyGrid.CurrentPageIndex = e.NewPageIndex OpenDataBase_And_BindToDataGrid() End Sub </script>

  44. 8-4 DataGrid 與欄位設定

  45. 自定欄位抬頭及對齊方式

  46. Grid07.aspx Part I <%@ Import Namespace="System.Data" %> <!-- #include File="Mdb.vb" --> <Html> <Body BgColor="White"><Center> <H3>Grid07.aspx -- 自定欄位抬頭及對齊方式<HR></H3> <Form runat="server"> <asp:DataGrid runat="server" id="MyGrid" AllowPaging="True" PageSize="10" OnPageIndexChanged="ChangePage" PagerStyle-HorizontalAlign="Right" PagerStyle-NextPageText="下一頁" PagerStyle-PrevPageText="上一頁" HeaderStyle-BackColor="#AAAADD" AlternatingItemStyle-BackColor="#FFFFC0" BorderColor="Black" CellPadding="2" CellSpacing="0"

  47. Grid07.aspx Part II AutoGenerateColumns="false" > <Columns> <asp:BoundColumn DataField="學號" HeaderText="學號" /> <asp:BoundColumn DataField="姓名" HeaderText="姓名" /> <asp:BoundColumn DataField="國文" HeaderText="國語" ItemStyle-HorizontalAlign="right"/> <asp:BoundColumn DataField="英文" HeaderText="英語" ItemStyle-HorizontalAlign="right"/> <asp:BoundColumn DataField="數學" HeaderText="數學" ItemStyle-HorizontalAlign="right"/> </Columns> </asp:DataGrid> </Form> <p> <HR></Center></Body> </Html>

  48. Grid07.aspx Part III <script Language="VB" runat="server"> Sub OpenDataBase_And_BindToDataGrid() Dim Table As DataTable Table = OpenMdbTable( "Sample.mdb", "成績單" ) MyGrid.DataSource = Table.DefaultView MyGrid.DataBind() End Sub

  49. Grid07.aspx Part IV Sub Page_Load(sender As Object, e As EventArgs) If Not IsPostBack Then OpenDataBase_And_BindToDataGrid() End If End Sub Sub ChangePage(sender As Object, e As DataGridPageChangedEventArgs) MyGrid.CurrentPageIndex = e.NewPageIndex OpenDataBase_And_BindToDataGrid() End Sub </script>

  50. 設定 DataGrid 欄位的連結

More Related