在ASP.NET中,GridView控件是用于展示数据和实现分页功能的强大工具。本文将详细介绍如何使用GridView控件进行数据展示和分页操作,包括前端页面代码和后端代码的实现。
首先,需要在ASPX页面中添加GridView控件,并配置其属性以实现分页和排序功能。
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:GridView
ID="grdList" runat="server" CellPadding="2" CellSpacing="0" BorderWidth="0px"
AutoGenerateColumns="False" GridLines="None"
OnPageIndexChanging="grdList_PageIndexChanging" Width="100%"
CssClass="listing-table" AllowSorting="true" AllowPaging="true"
PageSize="3" ShowFooter="True" onrowcreated="grdList_RowCreated" >
<Columns>
<asp:BoundField DataField="Title" HeaderText="Name" SortExpression="Name" />
<asp:BoundField DataField="Class" HeaderText="Class" SortExpression="Class" />
<asp:BoundField DataField="RollNo" HeaderText="RollNo" SortExpression="RollNo" />
</Columns>
<PagerTemplate>
<div>
<div id="pagn">
Goto Page
<asp:DropDownList ID="ddlPageSelector" runat="server" AutoPostBack="true">
</asp:DropDownList>
of
<%=grdList.PageCount%>
<asp:Label ID="lblNumber" runat="server"></asp:Label>
<span>
<asp:Button Text="First" CommandName="Page" CommandArgument="First" runat="server"
ID="btnFirst" />
<asp:Button Text="Previous" CommandName="Page" CommandArgument="Prev" runat="server"
ID="btnPrevious" />
</span>
<span>
<asp:Button Text="Next" CommandName="Page" CommandArgument="Next" runat="server"
ID="btnNext" />
<asp:Button Text="Last" CommandName="Page" CommandArgument="Last" runat="server"
ID="btnLast" />
</div>
<div style="float: right;padding-right:15px">
Record Per Page:
<asp:TextBox ID="txtPageSize" runat="server" Width="25px" EnableViewState="true"></asp:TextBox>
<asp:LinkButton ID="lnkSavePageSize" runat="server" ValidationGroup="grpList" OnClick="lnkSavePageSize_Click"><strong>Save</strong></asp:LinkButton>
</div>
</div>
</div>
</PagerTemplate>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
Private Sub BindData()
grdList.DataSource = (Pass Dataset or datatable Here)
grdList.DataBind()
End Sub
Protected Sub grdList_PageIndexChanging(ByVal sender As Object, ByVal e As GridViewPageEventArgs)
grdList.PageIndex = e.NewPageIndex
BindData()
End Sub
Protected Sub grdList_Sorting(ByVal sender As Object, ByVal e As GridViewSortEventArgs)
Dim sortExpression As String = e.SortExpression
ViewState("SortExpression") = sortExpression
If GridViewSortDirection = SortDirection.Ascending Then
GridViewSortDirection = SortDirection.Descending
SortGridView(sortExpression, "DESC")
Else
GridViewSortDirection = SortDirection.Ascending
SortGridView(sortExpression, "ASC")
End If
End Sub
Private Property GridViewSortDirection() As SortDirection
Get
If ViewState("sortDirection") Is Nothing Then
ViewState("sortDirection") = SortDirection.Ascending
End If
Return CType(ViewState("sortDirection"), SortDirection)
End Get
Set(ByVal value As SortDirection)
ViewState("sortDirection") = value
End Set
End Property
Private Sub SortGridView(ByVal sortExpression As String, ByVal direction As String)
Dim dataTable As New DataTable()
dataTable = getData()
Dim dv As New DataView()
dv = dataTable.DefaultView
dv.Sort = sortExpression & " " & direction
grdList.DataSource = dv
grdList.DataBind()
End Sub
Protected Sub grdList_RowCreated(ByVal sender As Object, ByVal e As GridViewRowEventArgs)
If e.Row.RowType = DataControlRowType.Pager Then
SetPagerButtonStates(grdList, e.Row, Me)
End If
End Sub
Public Sub SetPagerButtonStates(ByVal gridView As GridView, ByVal gvPagerRow As GridViewRow, ByVal page As Page)
Dim pageIndex As Integer = gridView.PageIndex
Dim pageCount As Integer = gridView.PageCount
Dim btnFirst As Button = CType(gvPagerRow.FindControl("btnFirst"), Button)
Dim btnPrevious As Button = CType(gvPagerRow.FindControl("btnPrevious"), Button)
Dim btnNext As Button = CType(gvPagerRow.FindControl("btnNext"), Button)
Dim btnLast As Button = CType(gvPagerRow.FindControl("btnLast"), Button)
Dim txtPageSize As TextBox = CType(gvPagerRow.FindControl("txtPageSize"), TextBox)
btnFirst.Enabled = btnPrevious.Enabled = (pageIndex <> 0)
btnNext.Enabled = btnLast.Enabled = (pageIndex < (pageCount - 1))
Dim ddlPageSelector As DropDownList = CType(gvPagerRow.FindControl("ddlPageSelector"), DropDownList)
ddlPageSelector.Items.Clear()
For i As Integer = 1 To gridView.PageCount
ddlPageSelector.Items.Add(i.ToString())
Next
ddlPageSelector.SelectedIndex = pageIndex
txtPageSize.Text = gridView.PageSize.ToString()
'Anonymous method (see another way to do this at the bottom)
AddHandler ddlPageSelector.SelectedIndexChanged, AddressOf AddressOf ddlPageSelector_SelectedIndexChanged
End Sub
Private Sub ddlPageSelector_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs)
grdList.PageIndex = ddlPageSelector.SelectedIndex
BindData()
End Sub
Protected Sub lnkSavePageSize_Click(ByVal sender As Object, ByVal e As EventArgs)
Dim pagerRow As GridViewRow = grdList.BottomPagerRow
Dim temp1 As TextBox = CType(pagerRow.FindControl("txtPageSize"), TextBox)
If temp1.Text <> "" Then
grdList.PageSize = Convert.ToInt32(temp1.Text)
End If
End Sub
div.header {
border-top: 1px solid #d0eaf8;
border-bottom: 1px solid #d0eaf8;
width: 100%;
margin: 4px 0;
}
div.resultCount {
width: 29%;
}
div.pagn {
text-align: left;
width: 100%;
}
div.pagnBtm {
text-align: center;
width: 100%;
}
div.pagn .pagnCur, div.pagnBtm .pagnCur {
font-weight: bold;
padding: 0 5px;
}
div.pagn .pagnDisabled, div.pagnBtm .pagnDisabled {
color: #999;
padding: 0px 5px;
white-space: nowrap;
}
div.pagn .pagnMore, div.pagn .pagnSep, div.pagnBtm .pagnMore, div.pagnBtm div.pagnSep {
padding: 0 2px;
}
div.pagn .pagnLead, div.pagnBtm .pagnLead {
font-weight: bold;
padding: 0 5px 0 2px;
}
div.pagn input, div.pagn input:visited, div.pagnBtm input, div.pagnBtm input:visited {
text-decoration: none;
padding: 6px;
color: #055d90;
white-space: nowrap;
}
div.pagn input:hover, div.pagn input:active, div.pagnBtm input:hover, div.pagnBtm input:active {
text-decoration: none;
padding: 6px;
color: #050;
white-space: nowrap;
}
div.headerPaging {
background: url("../images/tile-blue-bg._V45465059_.gif") repeat-x;
}