I. Overview
In web development, some data is often displayed. To facilitate the layout and browsing, we only need to display part of all records. In general, we use paging to achieve this requirement. There are multiple paging methods. In this article, we use a paging space to record the total number of records, the current page, the total number of pages, and the page size. To give an intuitive impression, first demonstrate the effect of the control after running, as shown in:
II. Implementation Scheme
To achieve this, you can use Custom Controls and User Controls in asp.net. The Implementation Method of User Controls is simple, and the method of using Controls is significantly different when it is used or when it is used, therefore, we use Custom Controls.
Reference: Professional ASP. NET 2.0 Server Control and Component Development
Iii. Implementation of paging controls
1) Create an ASP. NET Server Control Project,
2) add an ASP. NET Server Control Item in the project and set its Name to PageOn,
3) modify the class to inherit from the CompositeControl class and modify its Attribute as follows:
Copy codeThe Code is as follows:
[DefaultProperty ("PageSize")]
[ToolboxData ("<{0}: PageOn runat = server Width = 100%> </{0}: PageOn>")]
Public class PageOn: CompositeControl
Note: custom controls must inherit from Control or its subclass.
4) define controls to be combined
Copy codeThe Code is as follows:
Label lblMessage;
LinkButton btnFirst;
LinkButton btnPrev;
LinkButton btnNext;
LinkButton btnLast;
TextBox txtGoPage;
Button btnGo;
5) define the Proptery required for the paging Control
The page control mainly includes the page size, current page, total number of records, and total number of pages, and needs to be saved in ViewState. The detailed code is as follows:
Copy codeThe Code is as follows:
Public int RowCount
{
Get
{
If (ViewState ["m_rowCount"] = null | int. Parse (ViewState ["m_rowCount"]. ToString () <0)
{
ViewState ["m_rowCount"] = 0;
}
Return int. Parse (ViewState ["m_rowCount"]. ToString ());
}
Set
{
If (value <0)
{
ViewState ["m_rowCount"] = 0;
}
Else
{
ViewState ["m_rowCount"] = value;
}
This. RecreateChildControls ();
}
}
Public int CurPage
{
Get
{
If (ViewState ["m_curPage"] = null | int. Parse (ViewState ["m_curPage"]. ToString () <1)
{
ViewState ["m_curPage"] = 1;
}
Return int. Parse (ViewState ["m_curPage"]. ToString ());
}
Set
{
If (value <1)
{
ViewState ["m_curPage"] = 1;
}
Else if (value> PageCount)
{
ViewState ["m_curPage"] = PageCount;
}
Else
{
ViewState ["m_curPage"] = value;
}
}
}
Public int PageCount
{
Get
{
Return RowCount/PageSize + 1;
}
}
Public int PageSize
{
Get
{
If (ViewState ["m_pageSize"] = null | int. Parse (ViewState ["m_pageSize"]. ToString () <1)
{
ViewState ["m_pageSize"] = 15;
}
Return int. Parse (ViewState ["m_pageSize"]. ToString ());
}
Set
{
If (value> 0)
{
ViewState ["m_pageSize"] = value;
This. RecreateChildControls ();
}
}
}
6) generate the sub-spaces of the custom control
The CreateChildControls () method in the override base class Control is required to generate the sub-spaces of a custom space. The detailed code is as follows:
Copy codeThe Code is as follows:
Protected override void CreateChildControls ()
{
Controls. Clear ();
LblMessage = new Label ();
LblMessage. Text = "current section" + CurPage + "Page total" + PageCount + "Page total" + RowCount + "record ";
LblMessage. ID = "lblMessage ";
Controls. Add (lblMessage );
BtnFirst = new LinkButton ();
BtnFirst. Text = "Homepage ";
BtnFirst. CommandName = "first ";
BtnFirst. ID = "btnFirst ";
If (CurPage <= 1)
{
BtnFirst. Enabled = false;
}
Controls. Add (btnFirst );
BtnPrev = new LinkButton ();
BtnPrev. Text = "Previous Page ";
BtnPrev. CommandName = "prev ";
BtnPrev. ID = "btnPrev ";
If (CurPage <= 1)
{
BtnPrev. Enabled = false;
}
Controls. Add (btnPrev );
BtnNext = new LinkButton ();
BtnNext. Text = "next page ";
BtnNext. CommandName = "next ";
BtnNext. ID = "btnNext ";
If (CurPage> = PageCount)
{
BtnNext. Enabled = false;
}
Controls. Add (btnNext );
BtnLast = new LinkButton ();
BtnLast. Text = "last page ";
BtnLast. CommandName = "last ";
BtnLast. ID = "btnLast ";
If (CurPage> = PageCount)
{
BtnLast. Enabled = false;
}
Controls. Add (btnLast );
TxtGoPage = new TextBox ();
TxtGoPage. TabIndex = 1;
TxtGoPage. ID = "txtGoPage ";
TxtGoPage. Attributes. Add ("onkeyup", @ "this. value = this. value. replace (/\ D/g ,'')");
TxtGoPage. Attributes. Add ("onafterpaste", @ "this. value = this. value. replace (/\ D/g ,'')");
Controls. Add (txtGoPage );
BtnGo = new Button ();
BtnGo. TabIndex = 2;
BtnGo. CommandName = "go ";
BtnGo. Text = "GO ";
BtnGo. ID = "btnGO ";
Controls. Add (btnGo );
Debug. WriteLine ("ffffffffffffffffffffffffffffffffffffffffffffffffff ");
Base. CreateChildControls ();
}
7) define the layout of Custom Controls
After step 1 is completed, all the defined controls will be displayed on the page in sequence, but this effect is unfriendly. If the multi-row space is more like this, all controls must be defined. The layout of custom controls must overwrite the RenderContents () method and TagKey attribute. The code in this example is as follows:
Copy codeThe Code is as follows:
Protected override void RenderContents (HtmlTextWriter output)
{
Output. RenderBeginTag (HtmlTextWriterTag. Tr );
Output. AddStyleAttribute ("text-align", "left ");
Output. RenderBeginTag (HtmlTextWriterTag. Td );
Output. Write ("");
LblMessage. RenderControl (output );
Output. RenderEndTag ();
Output. AddStyleAttribute ("text-align", "right ");
Output. RenderBeginTag (HtmlTextWriterTag. Td );
BtnFirst. RenderControl (output );
Output. Write ("");
BtnPrev. RenderControl (output );
Output. Write ("");
BtnNext. RenderControl (output );
Output. Write ("");
BtnLast. RenderControl (output );
Output. Write ("");
Output. AddStyleAttribute (HtmlTextWriterStyle. Width, "30px ");
TxtGoPage. RenderControl (output );
Output. Write ("page ");
BtnGo. RenderControl (output );
Output. Write ("");
Output. RenderEndTag ();
Output. RenderEndTag ();
}
Protected override HtmlTextWriterTag TagKey
{
Get
{
Return HtmlTextWriterTag. Table;
}
}
In the above Code, we use Table for layout, or other layout methods, such as DIV + CSS.
8) capture and process control events
After that, the code can generate the effect shown in the graph at the beginning of the article, but nothing can be done and cannot respond to events on the control, all the event codes on the control need to be implemented, and these events are implemented using events of all the child control bubbles.
First, define a delegate:
Copy codeThe Code is as follows:
Public delegate void PageOnEventHandler (object sender, EventArgs args );
Second, define the events based on the delegate:
Copy codeThe Code is as follows:
Public event PageOnEventHandler RecPageChanged;
Finally, rewrite the bubble event and capture the event to be processed based on the parameter features so that it can call the required methods.
Copy codeThe Code is as follows:
Protected override bool OnBubbleEvent (object source, EventArgs args)
{
Bool handled = false;
CommandEventArgs cea = args as CommandEventArgs;
If (cea = null)
{
Return handled;
}
Switch (cea. CommandName)
{
Case "first ":
Handled = true;
CurPage = 1;
Break;
Case "prev ":
Handled = true;
If (CurPage> 1)
{
CurPage --;
}
Else
{
CurPage = 1;
}
Break;
Case "next ":
Handled = true;
If (CurPage <PageCount)
{
CurPage ++;
}
Else
{
CurPage = PageCount;
}
Break;
Case "last ":
Handled = true;
CurPage = PageCount;
Break;
Case "go ":
String strGo = txtGoPage. Text. Trim ();
Int iGo;
If (! String. IsNullOrEmpty (strGo) & int. TryParse (strGo, out iGo ))
{
Handled = true;
CurPage = iGo;
}
Break;
}
If (handled)
{
If (this. RecPageChanged! = Null)
{
RecPageChanged (this, args );
This. RecreateChildControls ();
}
Return handled;
}
Else
{
Return base. OnBubbleEvent (source, args );
}
}
This completes the development of the paging control.
Note: You can customize the style of the control, or use properties to expose the attributes of the sub-control to control the style.
4. Use paging controls
After the development of the custom control, you can reference the project or DLL in the Toolbox's Choose Items or directly in the project that needs to use the custom control, the custom control is displayed in the Toolbox. Then, you can drag the page control to the desired place, as easy as using the button control.
Then, in the OnLoad event of the background code of the page, register the method to be called to the RecPageChanged event of the control, as shown below:
Copy codeThe Code is as follows:
PageOn1.RecPageChanged + = new CustomControl. PageOnEventHandler (PageOn1_RecPageChanged );
Finally, you only need to write your own code in the pageonappsrecpagechanged method.
Copy codeThe Code is as follows:
Void pageon#recpagechanged (object sender, EventArgs args)
{
// To do something
}
The detailed code of the control is as follows:
Copy codeThe Code is as follows:
Namespace CustomControl
{
Public delegate void PageOnEventHandler (object sender, EventArgs args );
[DefaultProperty ("PageSize")]
[ToolboxData ("<{0}: PageOn runat = server Width = 100%> </{0}: PageOn>")]
Public class PageOn: CompositeControl
{
# Region
Label lblMessage;
LinkButton btnFirst;
LinkButton btnPrev;
LinkButton btnNext;
LinkButton btnLast;
TextBox txtGoPage;
Button btnGo;
# Endregion
Protected override void CreateChildControls ()
{
Controls. Clear ();
LblMessage = new Label ();
LblMessage. Text = "current section" + CurPage + "Page total" + PageCount + "Page total" + RowCount + "record ";
LblMessage. ID = "lblMessage ";
Controls. Add (lblMessage );
BtnFirst = new LinkButton ();
BtnFirst. Text = "Homepage ";
BtnFirst. CommandName = "first ";
BtnFirst. ID = "btnFirst ";
If (CurPage <= 1)
{
BtnFirst. Enabled = false;
}
Controls. Add (btnFirst );
BtnPrev = new LinkButton ();
BtnPrev. Text = "Previous Page ";
BtnPrev. CommandName = "prev ";
BtnPrev. ID = "btnPrev ";
If (CurPage <= 1)
{
BtnPrev. Enabled = false;
}
Controls. Add (btnPrev );
BtnNext = new LinkButton ();
BtnNext. Text = "next page ";
BtnNext. CommandName = "next ";
BtnNext. ID = "btnNext ";
If (CurPage> = PageCount)
{
BtnNext. Enabled = false;
}
Controls. Add (btnNext );
BtnLast = new LinkButton ();
BtnLast. Text = "last page ";
BtnLast. CommandName = "last ";
BtnLast. ID = "btnLast ";
If (CurPage> = PageCount)
{
BtnLast. Enabled = false;
}
Controls. Add (btnLast );
TxtGoPage = new TextBox ();
TxtGoPage. TabIndex = 1;
TxtGoPage. ID = "txtGoPage ";
TxtGoPage. Attributes. Add ("onkeyup", @ "this. value = this. value. replace (/\ D/g ,'')");
TxtGoPage. Attributes. Add ("onafterpaste", @ "this. value = this. value. replace (/\ D/g ,'')");
Controls. Add (txtGoPage );
BtnGo = new Button ();
BtnGo. TabIndex = 2;
BtnGo. CommandName = "go ";
BtnGo. Text = "GO ";
BtnGo. ID = "btnGO ";
Controls. Add (btnGo );
Debug. WriteLine ("ffffffffffffffffffffffffffffffffffffffffffffffffff ");
Base. CreateChildControls ();
}
Public int RowCount
{
Get
{
If (ViewState ["m_rowCount"] = null | int. Parse (ViewState ["m_rowCount"]. ToString () <0)
{
ViewState ["m_rowCount"] = 0;
}
Return int. Parse (ViewState ["m_rowCount"]. ToString ());
}
Set
{
If (value <0)
{
ViewState ["m_rowCount"] = 0;
}
Else
{
ViewState ["m_rowCount"] = value;
}
This. RecreateChildControls ();
}
}
Public int CurPage
{
Get
{
If (ViewState ["m_curPage"] = null | int. Parse (ViewState ["m_curPage"]. ToString () <1)
{
ViewState ["m_curPage"] = 1;
}
Return int. Parse (ViewState ["m_curPage"]. ToString ());
}
Set
{
If (value <1)
{
ViewState ["m_curPage"] = 1;
}
Else if (value> PageCount)
{
ViewState ["m_curPage"] = PageCount;
}
Else
{
ViewState ["m_curPage"] = value;
}
}
}
Public int PageCount
{
Get
{
Return RowCount/PageSize + 1;
}
}
Public int PageSize
{
Get
{
If (ViewState ["m_pageSize"] = null | int. Parse (ViewState ["m_pageSize"]. ToString () <1)
{
ViewState ["m_pageSize"] = 15;
}
Return int. Parse (ViewState ["m_pageSize"]. ToString ());
}
Set
{
If (value> 0)
{
ViewState ["m_pageSize"] = value;
This. RecreateChildControls ();
}
}
}
Protected override void RenderContents (HtmlTextWriter output)
{
Output. RenderBeginTag (HtmlTextWriterTag. Tr );
Output. AddStyleAttribute ("text-align", "left ");
Output. RenderBeginTag (HtmlTextWriterTag. Td );
Output. Write ("");
LblMessage. RenderControl (output );
Output. RenderEndTag ();
Output. AddStyleAttribute ("text-align", "right ");
Output. RenderBeginTag (HtmlTextWriterTag. Td );
BtnFirst. RenderControl (output );
Output. Write ("");
BtnPrev. RenderControl (output );
Output. Write ("");
BtnNext. RenderControl (output );
Output. Write ("");
BtnLast. RenderControl (output );
Output. Write ("");
Output. AddStyleAttribute (HtmlTextWriterStyle. Width, "30px ");
TxtGoPage. RenderControl (output );
Output. Write ("page ");
BtnGo. RenderControl (output );
Output. Write ("");
Output. RenderEndTag ();
Output. RenderEndTag ();
}
Protected override HtmlTextWriterTag TagKey
{
Get
{
Return HtmlTextWriterTag. Table;
}
}
Public event PageOnEventHandler RecPageChanged;
Protected override bool OnBubbleEvent (object source, EventArgs args)
{
Bool handled = false;
CommandEventArgs cea = args as CommandEventArgs;
If (cea = null)
{
Return handled;
}
Switch (cea. CommandName)
{
Case "first ":
Handled = true;
CurPage = 1;
Break;
Case "prev ":
Handled = true;
If (CurPage> 1)
{
CurPage --;
}
Else
{
CurPage = 1;
}
Break;
Case "next ":
Handled = true;
If (CurPage <PageCount)
{
CurPage ++;
}
Else
{
CurPage = PageCount;
}
Break;
Case "last ":
Handled = true;
CurPage = PageCount;
Break;
Case "go ":
String strGo = txtGoPage. Text. Trim ();
Int iGo;
If (! String. IsNullOrEmpty (strGo) & int. TryParse (strGo, out iGo ))
{
Handled = true;
CurPage = iGo;
}
Break;
}
If (handled)
{
If (this. RecPageChanged! = Null)
{
RecPageChanged (this, args );
This. RecreateChildControls ();
}
Return handled;
}
Else
{
Return base. OnBubbleEvent (source, args );
}
}
}
}
OK, complete
