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

ASP.NET 網頁製作教本 – 從基本語法學起
第 8 章 DataGrid 與 DataTable

8-1 DataTable 的資料結構

DataTable 的資料結構

DataTable 的建構：開啟資料庫

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

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>

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

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>

DataTable 的建構：逐欄逐列填入資料
建立 DataTable 物件：使用 New DataTable 的方式先建立好物件。建立欄位：包含欄位抬頭及其資料型別的建立。加入資料列：根據實際的資料列數(或稱「資料筆數」)，逐列加入於DataTable之中。

實例 (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 }

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

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)))

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

8-2 DataGrid 初體驗

DataGrid 的安插與資料繫結

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

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

開啟其他資料庫(表)

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

<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>

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>

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

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

8-3 可以分頁瀏覽的 DataGrid

可以分頁瀏覽的 DataGrid

分頁瀏覽的基礎

<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>

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

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>

執行效能問題

利用 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

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

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 </script>

<Html> <Body BgColor="White"> <H3>Grid05.aspx -- 將 < 及 > 改成「上一頁」及「下一頁」<HR></H3> <Form runat="server"> <asp:DataGrid runat="server" id="MyGrid" AllowPaging="True" PageSize="10" OnPageIndexChanged="ChangePage"

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>

Grid05.aspx Part III <script Language="VB" runat="server">

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 </script>

將 < 及 > 改成 … 的頁次連結

<Html> <Body BgColor="White"><Center> <H3>Grid06.aspx -- 將 < 及 > 改成 … 的頁次連結<HR></H3> <Form runat="server"> <asp:DataGrid runat="server" id="MyGrid" AllowPaging="True" PageSize="10" OnPageIndexChanged="ChangePage"

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>

Sub OpenDataBase_And_BindToDataGrid() Dim Table As DataTable Table = OpenMdbTable( "Sample.mdb", "股票行情表" ) MyGrid.DataSource = Table.DefaultView MyGrid.DataBind() End Sub

8-4 DataGrid 與欄位設定

自定欄位抬頭及對齊方式

<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"

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="英語" <asp:BoundColumn DataField="數學" HeaderText="數學" </Columns> </asp:DataGrid> </Form> <p> <HR></Center></Body> </Html>

設定 DataGrid 欄位的連結

<Html> <Body BgColor="White"><Center> <H3>Grid08.aspx -- 設定 DataGrid 欄位的連結<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" AutoGenerateColumns="false" >

Grid08.aspx Part II <Columns>
<asp:HyperLinkColumn DataTextField="學號" HeaderText="學號" DataNavigateUrlField="學號" DataNavigateUrlFormatString="students.aspx?id={0}" Target="_blank" /> <asp:BoundColumn DataField="姓名" HeaderText="姓名" /> <asp:BoundColumn DataField="國文" HeaderText="國語" ItemStyle-HorizontalAlign="right"/> <asp:BoundColumn DataField="英文" HeaderText="英語" <asp:BoundColumn DataField="數學" HeaderText="數學" </Columns> </asp:DataGrid> </Form> <p> <HR></Center></Body> </Html>

8-5 DataTable 與排序

DataTable 與排序排序也是顯示表格資料時，經常見到的功能，例如下圖是根據「國文」欄位來排序所顯示的表格：

Sort 屬性與資料排序(1) 想要產生排序好的資料，十分簡單，只要將 DataTable 的 DefaultView. Sort 屬性設定成欄位名稱即可，例如： DataTable.DefaultView.Sort = "國文" ' 根據國文欄位排序資料

Sort 屬性與資料排序(2)

Sort01.aspx Part I <%@ Import Namespace="System.Data" %>
 <Html> <Body BgColor="White"><Center> <H3>Sort01.aspx -- Sort 屬性與資料排序<HR></H3> <Form runat="server"> 選擇排序的欄位:<br> <asp:ListBox runat="server" id="SortField" Rows=1> <asp:ListItem Selected>學號</asp:ListItem> <asp:ListItem>姓名</asp:ListItem> <asp:ListItem>國文</asp:ListItem> <asp:ListItem>英文</asp:ListItem> <asp:ListItem>數學</asp:ListItem> </asp:ListBox> <asp:Button runat="server" Text="排序" OnClick="SortPage"/> <p>

Sort01.aspx Part II <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" /><p> </Form> <HR></Center></Body> </Html>

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

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

遞增排序或遞減排序(1)

遞增排序或遞減排序 (2) 想要達到遞減排序的目的，只需在設定 Default.Sort 屬性時，在欄位名稱後面加上 " Desc" 即可，例如： DataTable.DefaultView.Sort = "國文 Desc" ' 國文欄位遞減排序

遞增排序或遞減排序 (3) 新增 RadioButtonList 控制元件，用以選擇「遞增排序」或「遞減排序」：
<asp:RadioButtonList runat="server" id="SortType" RepeatDirection="Horizontal" RepeatColumns="2"> <asp:ListItem Selected>遞增排序</asp:ListItem> <asp:ListItem>遞減排序</asp:ListItem> </asp:RadioButtonList>

遞增排序或遞減排序 (4) 修改 OpenDataBase_And_BindToDataGrid() 副程式，使成為：
Sub OpenDataBase_And_BindToDataGrid() Dim Table As DataTable Table = OpenMdbTable( "Sample.mdb", "成績單" ) If SortType.SelectedItem.Text = "遞減排序" Then Table.DefaultView.Sort = SortField.SelectedItem.Text & " Desc" Else Table.DefaultView.Sort = SortField.SelectedItem.Text End If MyGrid.DataSource = Table.DefaultView MyGrid.DataBind() End Sub

按下 DataGrid 的抬頭以排序資料

Sort03.aspx Part I <%@ Import Namespace="System.Data" %>
 <Html> <Body BgColor="White"><Center> <H3>Sort03.aspx -- 按下 DataGrid 的抬頭以排序資料<HR></H3> <Form runat="server"> <asp:DataGrid runat="server" id="MyGrid" AllowPaging="True" PageSize="10" OnPageIndexChanged="ChangePage" PagerStyle-HorizontalAlign="Right" PagerStyle-NextPageText="下一頁" PagerStyle-PrevPageText="上一頁"

Sort03.aspx Part II AllowSorting="true" OnSortCommand="DgSortPage"
HeaderStyle-BackColor="#AAAADD" AlternatingItemStyle-BackColor="#FFFFC0" BorderColor="Black" CellPadding="2" CellSpacing="0" /><p> <asp:Label runat="server" id="SortField" Text="學號" Visible="False" /> <asp:Label runat="server" id="SortType" Text="" Visible="False" /> </Form> <HR></Center></Body> </Html>

Sort03.aspx Part III <script Language="VB" runat="server">
Sub OpenDataBase_And_BindToDataGrid() Dim Table As DataTable Table = OpenMdbTable( "Sample.mdb", "成績單" ) Table.DefaultView.Sort = SortField.Text & SortType.Text MyGrid.DataSource = Table.DefaultView MyGrid.DataBind() End Sub Sub Page_Load(sender As Object, e As EventArgs) If Not IsPostBack Then OpenDataBase_And_BindToDataGrid() End If

Sort03.aspx Part IV Sub DgSortPage(sender As Object, e As DataGridSortCommandEventArgs) If SortField.Text = e.SortExpression Then If SortType.Text = "" Then SortType.Text = " Desc" Else SortType.Text = "" End If SortField.Text = e.SortExpression SortType.Text = "" OpenDataBase_And_BindToDataGrid() End Sub Sub ChangePage(sender As Object, e As DataGridPageChangedEventArgs) MyGrid.CurrentPageIndex = e.NewPageIndex </script>

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

Similar presentations

Presentation on theme: "ASP.NET 網頁製作教本 – 從基本語法學起"— Presentation transcript:

Similar presentations

About project

反馈

请登录

Auth with social network:

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

Similar presentations

Presentation on theme: "ASP.NET 網頁製作教本 – 從基本語法學起"— Presentation transcript:

Similar presentations

About project

反馈