Custom Page Style of the gridview (Previous Page, next page, to the page)

Today, I want to create an article list for my website. I found that the pagination style of the gridview is very ugly. So I made one by myself based on the online example. Not very beautiful, but it is still very practical. Let's first look at the effect, (1 ).

Figure (1) pagination effect of the gridview

Customize the pagination style of the gridview using the <pagertemplate> element of the gridview. Let's first look at the paging code.

1 <pagertemplate> 2 <br/> 3 <asp: Label id = "lblpage" runat = "server" text = '<% # "no." + (gridview) container. namingcontainer ). pageindex + 1) + "Page/total" + (gridview) container. namingcontainer ). pagecount) + "page" %> '> </ASP: Label> 4 <asp: linkbutton id = "lbnfirst" runat = "server" text = "Homepage" enabled = '<% # (gridview) container. namingcontainer ). pageindex! = 0%> 'commandname = "page" commandargument = "first"> </ASP: linkbutton> 5 <asp: linkbutton id = "lbnprev" runat = "server" text = "Previous Page" enabled = '<% # (gridview) container. namingcontainer ). pageindex! = 0%> 'commandname = "page" commandargument = "Prev"> </ASP: linkbutton> 6 <asp: linkbutton id = "lbnnext" runat = "server" text = "next page" enabled = '<% # (gridview) container. namingcontainer ). pageindex! = (Gridview) container. namingcontainer ). pagecount-1) %> 'commandname = "page" commandargument = "Next"> </ASP: linkbutton> 7 <asp: linkbutton id = "lbnlast" runat = "server" text = "last page" enabled = '<% # (gridview) container. namingcontainer ). pageindex! = (Gridview) container. namingcontainer ). pagecount-1) %> 'commandname = "page" commandargument = "last"> </ASP: linkbutton> 8 to <asp: textbox runat = "server" id = "inpagenum"> </ASP: textbox> page <asp: button id = "button1" commandname = "go" runat = "server"/> 9 <br/> 10 </pagertemplate>

<Asp: Label id = "lblpage" runat = "server" text = '<% # "no." + (gridview) container. namingcontainer ). pageindex + 1) + "Page/total" + (gridview) container. namingcontainer ). pagecount) + "page" %> '> </ASP: Label>

This code displays the number of pages of data that are currently on. We get the current page through (gridview) container. namingcontainer). pageindex, and get the total number of pages through (gridview) container. namingcontainer). pagecount.

<Asp: linkbutton id = "lbnfirst" runat = "server" text = "Homepage" enabled = '<% # (gridview) container. namingcontainer). pageindex! = 0%> 'commandname = "page" commandargument = "first"> </ASP: linkbutton>

This code jumps to the first page of the list. The background code responds to the gridview. rowcommand event. the first page of the page list is located based on commandname = "page" and commandargument = "first. A rowcommand event is triggered when any button in the gridview is clicked. You can use this event to customize the handler. We recommend that you use the built-in properties of the gridview. The following table provides a simple description of the built-in properties of the gridview on msdn.

 

Commandname Value	Description
"Cancel"	Cancel the edit operation and setGridviewThe control returns the read-only mode. Raise the rowcancelingedit event.
"Delete"	Delete the current record. This triggers rowdeleting and rowdeleted events.
"Edit"	Place the current record in edit mode. The rowediting event is triggered.
"Page"	Perform the paging operation. ChangeCommandargumentSet the property to "first", "last", "Next", "Prev", or page number to specify the paging operation type to be executed. Raises pageindexchanging and pageindexchanged events.
"Select"	Select the current record. The selectedindexchanging and selectedindexchanged events are raised.
"Sort"	PairGridviewControl. Trigger sorting and sorted events.
"Update"	Update the current record in the data source. Raise rowupdating and rowupdated

 

In this custom page, the previous, next, last, and homepage use built-in attributes.

To the <asp: textbox runat = "server" id = "inpagenum"> </ASP: textbox> page <asp: button id = "button1" commandname = "go" runat = "server"/>

This code is the front-end code that enables the user to enter the page number and click the button to jump. To use the rowcommand event, we have customized commandname = "go". You can also add commandargument here to pass more information.

 

This is the front-end code. Next we will introduce the background code.

private void BindGridView(){using (BlogDataContext bdc = new BlogDataContext()){var artList = bdc.Blog_GetAllCommentationArticles();Blog_GetAllCommentationArticlesResult g = new Blog_GetAllCommentationArticlesResult();GridView1.DataSource = artList;GridView1.DataBind();}}protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e){try{GridView1.PageIndex = e.NewPageIndex;BindGridView();TextBox tb = (TextBox)GridView1.BottomPagerRow.FindControl("inPageNum");tb.Text = (GridView1.PageIndex + 1).ToString();}catch{}}protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e){if (e.CommandName == "go"){try{TextBox tb = (TextBox)GridView1.BottomPagerRow.FindControl("inPageNum");int num = Int32.Parse(tb.Text);GridViewPageEventArgs ea = new GridViewPageEventArgs(num - 1);GridView1_PageIndexChanging(null, ea);}catch{}}}

Here there are three main methods: bindgridview () method, which extracts data from the database and binds it to the gridview control. The gridview1_pageindexchanging method allows you to use gridview1.pageindex = E. the newpageindex statement is used to set the page data that the gridview control should display, and then the textbox TB = (textbox) gridview1.bottompagerrow is used. findcontrol ("inpagenum"); TB. TEXT = (gridview1.pageindex + 1 ). tostring (); the current page number is displayed in textbox.

The gridviewdomainrowcommand method is used to respond to the event where the user enters the page number and clicks the button. First, obtain the number of pages entered by the user, and then call the gridview1_pageindexchanging method to update the data in the gridview.

This example is from the Internet, but it is not clearly explained. Maybe this example does not need to be explained, so I will be able to draw a snake.

Custom Page Style of the gridview (Previous Page, next page, to the page)