V. Sử dụng điều khiển BulletedList
Và bạn thấy kết xuất của nó như sau:
Lớp PagingSetting hỗ trợ các thuộc tính sau:
• FirtPageImageURL: cho phép hiển thị ảnh của liên kết tới trang đầu tiên
• FirstPageText: Cho phép hiển thị Text của liên kết đến trang đầu tiên
• LastPageImageUrl: cho phép hiển thị ảnh của liên kết tới trang cuối cùng.
• LastPageTex: Cho phép hiển thị Text của liên kết đến trang cuối cùng.
• Mode: cho phép bạn lựa chọn hiển thị kiểu cho giao diện phân trang, nó có thể có các giá trị sau:
• NextPrevious, NextPreviousFirstLast, Numeric, and NumericFirstLast.
• NextPageImageUrl: Cho phép hiển thị ảnh liên kết tới trang tiếp theo.
• NextPageText: Text hiển thị cho liên kết đến trang tiếp theo .
• PageButtonCount: hiển thị tổng số trang.
• Position: chỉ định vị trí hiển thị phân trang. Giá trị của nó có thể là: Bottom, Top, and TopAndBottom.
• PreviousPageImageUrl: ảnh hiển thị cho liên kết tới trang trước đó.
• Visible: Cho phép hiển thị hay ẩn giao diện phân trang.
Ví dụ tiếp theo chúng ta cùng customize phân trang 1 GridView với PagerTemplate GridView như sau:
Code 10.2 trang GridViewpage.aspx
<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="GridViewpage.aspx.cs" Inherits="GridViewpage" %>
<script runat="server">
protected void GridView1_DataBound(object sender, EventArgs e) {
Menu menuPager =
(Menu)this.GridView1.BottomPagerRow.FindControl("menuPager"); for (int i = 0; i < GridView1.PageCount; i++)
{
MenuItem item = new MenuItem(); item.Text = Convert.ToString(i+1); item.Value = i.ToString(); if (GridView1.PageIndex == i) item.Selected = true; menuPager.Items.Add(item); menuPager.DataBind(); } }
protected void menuPager_MenuItemClick(object sender, MenuEventArgs e)
{
GridView1.PageIndex = Int32.Parse(e.Item.Value); }
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Gridview</title>
<style type="text/css"> (adsbygoogle = window.adsbygoogle || []).push({});
.menu td{padding:5px 0px;}
.selectedPage a{font-weight:bold;color:red;} </style>
</head> <body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" AllowPaging="true" PageSize="3"
DataSourceID="SqlDataSource1" OnDataBound="GridView1_DataBound" runat="server"> <PagerTemplate> <table> <tr> <td>
<asp:LinkButton id="lnkPrevious" Text="< Prev" CommandName="Page" CommandArgument="Prev" ToolTip="Previous Page" Runat="server" />
</td> <td> <asp:Menu id="menuPager" Orientation="Horizontal" OnMenuItemClick="menuPager_MenuItemClick" StaticSelectedStyle-CssClass="selectedPage" CssClass="menu" Runat="server" /> </td> <td>
<asp:LinkButton id="lnkNext" Text="Next >" CommandName="Page" CommandArgument="Next" ToolTip="Next Page"
Runat="server" /> </td> </tr> </table> </PagerTemplate> </asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<% $ConnectionStrings:Gridview %>"
SelectCommand="select * from tblIntrodure" runat="server"></asp:SqlDataSource>
</div>
</form> </body> </html>
Ở đây trong PagerTemple bạn thêm vào 2 điều khiển Linkbutton và 1 điều khiển Menu để thực hiện phân trang. 2 điều khiển Linkbutton với các thuộc tính Command và CommandArgument được GridView hỗ trợ lên ta không phải viết các phương thức để thực thi còn với điều menu trong sự kiện DataBound của GridView bạn cung cấp một phương thức GridView1_DataBound để điền dữ liệu cho Menu.
Thay đổi dữ liệu trong GridView
Điều khiển GridView chỉ cho phép bạn thay đổi hoặc xoá dữ liệu trong Database được điền vào nó.
Ví dụ sau sẽ hướng dẫn bạn cách chỉnh sửa dữ liệu và xoá dữ liệu trong điều khiển GridView.
Ví dụ trang GridviewEdit.aspx
<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="GridviewEdit.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>GridView</title> </head>
<body>
<form id="form1" runat="server">
<div id="navcontain">
<asp:GridView AllowSorting="true" PageSize="10"
PagerSettings-Mode="NextPreviousFirstLast" PagerSettings- Position="TopAndBottom" PagerStyle-HorizontalAlign="Center" (adsbygoogle = window.adsbygoogle || []).push({});
AutoGenerateDeleteButton="true"
DataKeyNames="pkIntrodureID" AllowPaging="true" DataSourceID="SqlDataSource1" ID="GridView1" runat="server"> </asp:GridView> <asp:SqlDataSource ConnectionString="<%$ ConnectionStrings:Gridview %>" SelectCommand="select
pkIntrodureID,sTitle,sSummary,sContent,iPosition from tblIntrodure"
UpdateCommand="Update tblIntrodure set sTitle=@sTitle, sSummary=@sSummary, sContent=@sContent,iPosition=@iPosition where pkIntrodureID=@pkIntrodureID"
DeleteCommand="Delete from tblIntrodure where pkIntrodureID=@pkIntrodureID" ID="SqlDataSource1" runat="server"></asp:SqlDataSource> </div> </form> </body> </html>