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

Source: Internet
Author: User

Today, I want to create a websiteArticleList, it is difficult to see the Page Style of the gridview, so combined with the online example, I made. Not very beautiful, but it is still very practical. Let's first look at the effect, (1 ). Demo address http://www.veryam.com/page.aspx? C = 1589 & FN = TJ

Figure (1) pagination effect of the gridview

Customize the pagination style of the gridview using the <pagertemplate> element of the gridview. Let's take a look at this page.Code.

 

     <  Pagertemplate  >  
< BR />
< ASP: Label ID = " Lblpage " Runat = " Server " Text = ' <% # "No." + (gridview) container. namingcontainer ). pageindex + 1) + "Page/total" + (gridview) container. namingcontainer ). pagecount) + "page" %> ' > </ ASP: Label >
< ASP: linkbutton ID = " Lbnfirst " Runat = " Server " Text = " Homepage " Enabled = ' <% # (Gridview) container. namingcontainer). pageindex! = 0%> ' Commandname = " Page " Commandargument = " First " > </ ASP: linkbutton >
< ASP: linkbutton ID = " Lbnprev " Runat = " Server " Text = " Previous Page " Enabled = ' <% # (Gridview) container. namingcontainer). pageindex! = 0%> ' Commandname = " Page " Commandargument = " Prev " > </ ASP: linkbutton >
< 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 >
< 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 >
To < ASP: textbox runat = " Server " ID = " Inpagenum " > </ ASP: textbox > Page < ASP: button ID = " Button1 " Commandname = " Go " Runat = " Server " />
< BR />
</ 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. When a button in the gridview is clicked, The rowcommand event is triggered. You can customize the event for processing.Program. 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 return the gridview Control to 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. Set the commandargument attribute of the button to "first", "last", "Next", "Prev", or the 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"

sort the gridview control. 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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.