ASP.NET数据展示与分页控件实现

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; }
沪ICP备2024098111号-1
上海秋旦网络科技中心:上海市奉贤区金大公路8218号1幢 联系电话:17898875485