Asp.net webform custom page control, asp. netwebform

Asp.net webform custom page control, asp. netwebform

Paging controls are always used for web development. You can also implement them by yourself and use custom controls.

After turning pages, the data is loaded using the delegate, and the specific implementation is placed on the page where the paging control is used for registration.

There is a picture and a truth, giving you an intuitive understanding:

Front-end code of the custom page control:

<Style type = "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: pixel PX ;}. font-blue {color: # 5bc0de ;}. pager a {color: # 5bc0de; text-decoration: none ;}. pager. 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 encoding-in-out. 15 s,-webkit-box-shadow audio-in-out. 15 s;-o-transition: border-color contains-in-out. 15 s, box-shadow values-in-out. 15 s; transition: border-color audio-in-out. 15 s, box-shadow values-in-out. 15 s; 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; cursor: pointer;-webkit-user-select: none;-moz-user-select: none; -ms-user-select: none; background-image: none; border: 1px solid transparent; border-radius: 4px ;}. btn-default {color: #333; background-color: # fff; border-color: # ccc ;} </style> <div class = "pager"> <span> current <asp: label runat = "server" ID = "labCurrentPageIndex" CssClass = "font-blue"> </asp: Label>/<asp: label runat = "server" CssClass = "font-blue" ID = "labTotalNumberOfPages"> </asp: label> page </span> <span class = "pager-m-l"> total <asp: label runat = "server" CssClass = "font-blue" ID = "labRecordCount"> </asp: label> record </span> <span class = "pager-m-l"> <asp: linkButton runat = "server" ID = "labFirstPage" OnClick = "labFirstPage_Click"> homepage </asp: LinkButton> | <asp: linkButton runat = "server" ID = "labPreviousPage" OnClick = "labPreviousPage_Click"> previous page </asp: LinkButton> | <asp: linkButton runat = "server" ID = "labNextPage" OnClick = "labNextPage_Click"> next page </asp: LinkButton> | <asp: linkButton runat = "server" ID = "labLastPage" OnClick = "labLastPage_Click"> last page </asp: linkButton> </span> <span class = "pager-m-l"> jump to <asp: textBox runat = "server" ID = "txtPageNum" CssClass = "pager-form-control pager-num"> 1 </asp: TextBox> page <asp: button runat = "server" Text = "GO" ID = "btnGo" CssClass = "btn-default" OnClick = "btnGo_Click"/> </span> <span class =" pager-m-l "> <asp: dropDownList runat = "server" ID = "ddlPageSize" CssClass = "pager-form-control" AutoPostBack = "true" OnSelectedIndexChanged = "ddlPageSize_SelectedIndexChanged"> <asp: listItem Text = "10" Value = "10"> </asp: ListItem> <asp: ListItem Text = "20" Value = "20"> </asp: listItem> <asp: ListItem Text = "30" Value = "30"> </asp: ListItem> <asp: listItem Text = "50" Value = "50"> </asp: ListItem> <asp: ListItem Text = "100" Value = "100"> </asp: listItem> </asp: DropDownList> entries/page </span> </div>

Custom page control background code:

private const string viewStateCurrentPageIndex = "CurrentPageIndex";  private const string viewStateRecordCount = "RecordCount";  public delegate void PageChangedHandle();  public event PageChangedHandle OnPageChanged;  public int PageSize  {   get   {    return Convert.ToInt32(ddlPageSize.SelectedValue);   }  }  public int CurrentPageIndex  {   set   {    ViewState[viewStateCurrentPageIndex] = value;   }   get   {    if (ViewState[viewStateCurrentPageIndex] == null)    {     ViewState[viewStateCurrentPageIndex] = 1;    }    return Convert.ToInt32(ViewState[viewStateCurrentPageIndex]);   }  }  public int RecordCount  {   get   {    if (ViewState[viewStateRecordCount] == null)    {     ViewState[viewStateRecordCount] = 0;    }    return Convert.ToInt32(ViewState[viewStateRecordCount]);   }   set   {    ViewState[viewStateRecordCount] = value;   }  }  private int TotalNumberOfPages  {   get   {    return RecordCount % PageSize == 0 ? RecordCount / PageSize : (RecordCount / PageSize) + 1;   }  }  protected void Page_Load(object sender, EventArgs e)  {   if (!IsPostBack)   {   }  }  protected void labFirstPage_Click(object sender, EventArgs e)  {   CurrentPageIndex = 1;   this.DataBind();  }  protected void labPreviousPage_Click(object sender, EventArgs e)  {   CurrentPageIndex -= 1;   this.DataBind();  }  protected void labNextPage_Click(object sender, EventArgs e)  {   CurrentPageIndex += 1;   this.DataBind();  }  protected void labLastPage_Click(object sender, EventArgs e)  {   CurrentPageIndex = TotalNumberOfPages;   this.DataBind();  }  protected void btnGo_Click(object sender, EventArgs e)  {   int pageNum = 1;   bool isNum = Int32.TryParse(txtPageNum.Text, out pageNum);   if (isNum)   {    CurrentPageIndex = Math.Min(pageNum, TotalNumberOfPages);   }   this.DataBind();  }  protected void ddlPageSize_SelectedIndexChanged(object sender, EventArgs e)  {   CurrentPageIndex = 1;   this.DataBind();  }  protected override void DataBind(bool raiseOnDataBinding)  {   BindPager();   base.DataBind(raiseOnDataBinding);   if (OnPageChanged != null)   {    OnPageChanged();   }  }  private void BindPager()  {   labCurrentPageIndex.Text = CurrentPageIndex.ToString();   labTotalNumberOfPages.Text = TotalNumberOfPages.ToString();   labRecordCount.Text = RecordCount.ToString();   SetNavigateEnabled();  }    private void SetNavigateEnabled()  {   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 and total number of records use ViewState to record status information, because the navigation control will cause sending and refreshing.
Load data after pagination and use events.

The specific implementation of the event is placed on a specific page using the paging Control for event registration.

Test the front-end page of the paging control:

<Div style = "margin-bottom: 10px;"> text: <asp: TextBox ID = "txtContent" runat = "server"> </asp: TextBox> <asp: button ID = "btnQuery" runat = "server" Text = "" OnClick = "btnQuery_Click"/> </div> <asp: gridView ID = "gvList" runat = "server" Width = "99%" AutoGenerateColumns = "true"> </asp: GridView> <uc1: pagerControl runat = "server" ID = "Pager"/> </div>

Test the background code of the paging control:

Private const string dtSourceViewStateKey = "dtSourceViewStateKey"; protected void Page_Load (object sender, EventArgs e) {if (! IsPostBack) {BindData (true);} Pager. onPageChanged + = OnPageChanged;} private void BindData (bool bindRecordCount) {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 ();} private void OnPageChanged () {BindData (false);} private DataTable InitDataTable () {DataTable dtSource = new DataTable (); dataColumn id = new DataColumn ("id"); id. autoIncrement = true; id. autoIncrementSeed = 1; dtSource. columns. add (id); dtSource. columns. add ("text"); for (int I = 1; I <= 1000; I ++) {DataRow dr = dtSource. newRow (); dr ["text"] = "content" + I; dtSource. rows. add (dr);} return dtSource;} private DataTable GetDataSource () {if (ViewState [dtSourceViewStateKey] = null) {ViewState [dtSourceViewStateKey] = InitDataTable ();} return ViewState [dtSourceViewStateKey] as DataTable;} protected void btnQuery_Click (object sender, EventArgs e) {BindData (true );}

Register the paging event in Page_Load.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.