asp.net webform How to customize a paging control

Web development has been used to page control, but also hands-on implementation, the use of user-defined controls.

After the page is loaded, the data load uses the delegate, and the implementation is registered with the page that uses the paging control.

There is a picture of the truth, give an intuitive understanding:

Customizing the page-front code for pagination controls:

The code is as follows

Copy Code

<styletype= "Text/css" > . pager-m-l { margin-left:10px; } . Pager { font-family: "Helvetica neue", Helvetica, Arial, Sans-serif; font-size:14px; Color: #333; Background-color: #fff; Text-align:center; border:1px solid #eee; border-radius:5px; height:30px; line-height:30px; margin:10px Auto; width:650px; } . font-blue { Color: #5bc0de; } . Pager a { Color: #5bc0de; Text-decoration:none; } . Pager A.Gray { Color: #808080; } . pager-num { width:30px; Text-align:center; } . Pager-form-control { Color: #555; Background-color: #fff; Background-image:none; border:1px solid #ccc; border-radius:4px; -webkit-box-shadow:inset 0 1px 1px rgba (0, 0, 0,. 075); Box-shadow:inset 0 1px 1px rgba (0, 0, 0,. 075); -webkit-transition:border-color ease-in-out 15s,-webkit-box-shadow ease-in-out. 15s; -o-transition:border-color ease-in-out 15s, Box-shadow ease-in-out. 15s; Transition:border-color ease-in-out 15s, Box-shadow ease-in-out. 15s; PADDING:2PX 0px; margin:0px 2px; } . pager-form-control:focus { Border-color: #66afe9; outline:0; -webkit-box-shadow:inset 0 1px 1px rgba (0,0,0,.075), 0 0 8px Rgba (102, 175, 233,. 6); Box-shadow:inset 0 1px 1px rgba (0,0,0,.075), 0 0 8px Rgba (102, 175, 233,. 6); } . btn { Display:inline-block; padding:2px; Font-weight:normal; Text-align:center; White-space:nowrap; Vertical-align:middle; -ms-touch-action:manipulation; Touch-action:manipulation; Cursor:pointer; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; User-select:none; Background-image:none; border:1px solid Transparent; border-radius:4px; } . btn-default { Color: #333; Background-color: #fff; Border-color: #ccc; } </style> <divclass= "Pager" > <span> current <asp:labelrunat= "server" id= "Labcurrentpageindex" cssclass= "Font-blue" ></asp:label>/ <asp:labelrunat= "Server" cssclass= "Font-blue" id= "labtotalnumberofpages" ></asp:Label> page </span> <spanclass= "Pager-m-l" > Total <asp:labelrunat= "server" cssclass= "Font-blue" id= "Labrecordcount" ></asp: Label> Strip Record </span> <spanclass= "Pager-m-l" > <asp:linkbuttonrunat= "Server" id= "Labfirstpage" onclick= "Labfirstpage_click" > Home </asp:LinkButton> | <asp:linkbuttonrunat= "Server" id= "Labpreviouspage" onclick= "Labpreviouspage_click" > previous page </asp:linkbutton > |<asp:linkbuttonrunat= "Server" id= "Labnextpage" onclick= "Labnextpage_click" > next page </asp:LinkButton> |<asp:linkbuttonrunat= "Server" id= "Lablastpage" onclick= "Lablastpage_click" > End </asp:LinkButton> </span> <spanclass= "Pager-m-l" > Skip to <asp:textboxrunat= "Server" id= "Txtpagenum" cssclass= "Pager-form-control" Pager-num ">1</asp:TextBox> page <asp:buttonrunat= "Server" text= "Go" id= "Btngo" cssclass= "btn Btn-default" onclick= "Btngo_click"/></span > <spanclass= "Pager-m-l" > <asp:dropdownlistrunat= "Server" id= "ddlpagesize" cssclass= "Pager-form-control" autopostback= "true" onselectedindexchanged= "Ddlpagesize_selectedindexchanged" > <asp:listitemtext= "Ten" value= "ten" ></asp:ListItem> <asp:listitemtext= "Value=" ></asp:ListItem> <asp:listitemtext= "Value=" ></asp:ListItem> <asp:listitemtext= "Value=" ></asp:ListItem> <asp:listitemtext= "Value=" ></asp:ListItem> </asp:DropDownList>/per page </span> </div> Customizing the paging Control background code: Privateconststringviewstatecurrentpageindex = "CurrentPageIndex"; Privateconststringviewstaterecordcount = "RecordCount"; Publicdelegatevoidpagechangedhandle (); Publiceventpagechangedhandle onpagechanged; Publicintpagesize { Get { Returnconvert.toint32 (Ddlpagesize.selectedvalue); } } Publicintcurrentpageindex { Set { Viewstate[viewstatecurrentpageindex] = value; } Get { if (Viewstate[viewstatecurrentpageindex] ==null) { Viewstate[viewstatecurrentpageindex] = 1; } Returnconvert.toint32 (Viewstate[viewstatecurrentpageindex]); } } Publicintrecordcount { Get { if (Viewstate[viewstaterecordcount] ==null) { Viewstate[viewstaterecordcount] = 0; } Returnconvert.toint32 (Viewstate[viewstaterecordcount]); } Set { Viewstate[viewstaterecordcount] = value; } } Privateinttotalnumberofpages { Get { Returnrecordcount% PageSize = 0? Recordcount/pagesize: (recordcount/pagesize) + 1; } } Protectedvoidpage_load (Objectsender, EventArgs e) { if (! IsPostBack) { } } Protectedvoidlabfirstpage_click (Objectsender, EventArgs e) { CurrentPageIndex = 1; This. DataBind (); } Protectedvoidlabpreviouspage_click (Objectsender, EventArgs e) { CurrentPageIndex-= 1; This. DataBind (); } Protectedvoidlabnextpage_click (Objectsender, EventArgs e) { CurrentPageIndex + 1; This. DataBind (); } Protectedvoidlablastpage_click (Objectsender, EventArgs e) { CurrentPageIndex = totalnumberofpages; This. DataBind (); } Protectedvoidbtngo_click (Objectsender, EventArgs e) { Intpagenum = 1; Boolisnum = Int32.TryParse (txtpagenum.text,outpagenum); if (isnum) { CurrentPageIndex = Math.min (Pagenum, totalnumberofpages); } This. DataBind (); } Protectedvoidddlpagesize_selectedindexchanged (Objectsender, EventArgs e) { CurrentPageIndex = 1; This. DataBind (); } Protectedoverridevoiddatabind (boolraiseondatabinding) { Bindpager (); Base. DataBind (raiseondatabinding); if (onpagechanged!=null) { Onpagechanged (); } } Privatevoidbindpager () { Labcurrentpageindex.text = Currentpageindex.tostring (); Labtotalnumberofpages.text = Totalnumberofpages.tostring (); Labrecordcount.text = Recordcount.tostring (); Setnavigateenabled (); } Privatevoidsetnavigateenabled () { Txtpagenum.text = Currentpageindex.tostring (); Labfirstpage.enabled =true; Labpreviouspage.enabled =true; Labnextpage.enabled =true; Lablastpage.enabled =true; Labfirstpage.cssclass = "Font-blue"; Labpreviouspage.cssclass = "Font-blue"; Labnextpage.cssclass = "Font-blue"; Lablastpage.cssclass = "Font-blue"; if (CurrentPageIndex = 1) { Labfirstpage.enabled =false; Labpreviouspage.enabled =false; Labfirstpage.cssclass = "Gray"; Labpreviouspage.cssclass = "Gray"; } if (CurrentPageIndex = = totalnumberofpages) { Labnextpage.enabled =false; Lablastpage.enabled =false; Labnextpage.cssclass = "Gray"; Lablastpage.cssclass = "Gray"; } if (RecordCount = 0) { Labfirstpage.enabled =false; Labpreviouspage.enabled =false; Labfirstpage.cssclass = "Gray"; Labpreviouspage.cssclass = "Gray"; Labnextpage.enabled =false; Lablastpage.enabled =false; Labnextpage.cssclass = "Gray"; Lablastpage.cssclass = "Gray"; } }

The current page number, the total number of records, uses ViewState to record state information because the navigation control causes a postback refresh.
Page-After data loading, using events.

The specific implementation of the event is placed on the specific page that uses the paging control to register the event.

To test the front page for a paging control:

code is as follows	copy code
<divstyle= "margin-bottom:10px;" >   text:   <asp:textboxid= "txtcontent" runat= se RVer ></asp:TextBox>   <asp:buttonid= "btnquery" runat= "server" text= "query" Oncli ck= "Btnquery_click"/>  </div>  <div>   <asp:gridviewid= "gvlist" runat= "Server" width= "99%" autogeneratecolumns= "true" ></asp: Gridview>   <uc1:pagercontrolrunat= "Server" id= "Pager"/> </div>

To test the background code for a paging control:

The code is as follows

Copy Code

Privateconststringdtsourceviewstatekey = "Dtsourceviewstatekey"; Protectedvoidpage_load (Objectsender, EventArgs e) { if (! IsPostBack) { Binddata (TRUE); } Pager.onpagechanged + = onpagechanged; } Privatevoidbinddata (Boolbindrecordcount) { DataTable dtsource = Getdatasource (); var Source = dtsource.asenumerable (); if (!string. IsNullOrEmpty (TxtContent.Text.Trim ())) { Source = source. Where (w => w.field<string> ("text"). Contains (TxtContent.Text.Trim ())); } if (Bindrecordcount) { Pager.recordcount = source. Count (); Pager.currentpageindex = 1; Pager.databind (); } Gvlist.datasource = Source . Skip ((pager.currentpageindex-1) * pager.pagesize) . Take (Pager.pagesize) . Select (r =>new{id = r["id"]. ToString (), Text = r["text"]. ToString ()}) . ToList (); Gvlist.databind (); } Privatevoidonpagechanged () { Binddata (FALSE); } Privatedatatable initdatatable () { DataTable dtsource =newdatatable (); DataColumn ID =newdatacolumn ("id"); Id. AutoIncrement =true; Id. AutoIncrementSeed = 1; DTSOURCE.COLUMNS.ADD (ID); DTSOURCE.COLUMNS.ADD ("text"); for (inti = 1; I <= 1000; i++) { DataRow dr = Dtsource.newrow (); dr["text"] = "content" + I; DTSOURCE.ROWS.ADD (DR); } Returndtsource; } Privatedatatable Getdatasource () { if (Viewstate[dtsourceviewstatekey] ==null) { Viewstate[dtsourceviewstatekey] = initdatatable (); } returnviewstate[dtsourceviewstatekey]asdatatable; } Protectedvoidbtnquery_click (Objectsender, EventArgs e) { Binddata (TRUE); }

Registers the paging event in the Page_Load.