MVC generate page selector return HTML code

Time:2021-5-3

I mainly talk about this code for MVC distribution page.

Let’s see the final effect first

The style is “pagination” in bootstrap 3. If bootstrap is not used, it is not easy to propose it alone

The page number generation code is:

public string GetPaginationHtml(PaginationViewModel p)
{
  var PageNum = p.Page;// Current page number (page number starts from 1)
  var PageCount = p.PageCount;// PageCount 
  var ItemCount = p.ItemCount;// Total number

  var showPageNum = 6;// Number of pages showing numbers

  var html = new StringBuilder();
  html.Append(string.Format("<ul class='pagination' id='{0}' data-data='{1}'>", p.ULID, p.Data));// Ulid and data are convenient for adding events in the foreground
  if (PageCount > 1)
  {
    var startPage = 1;
    if (showPageNum > PageCount)
    {
      startPage = 1;
    }
    else
    {
      if (PageNum - (showPageNum / 2) <= 0)
      {
        startPage = 1;
      }
      else if (PageNum + (showPageNum / 2) >= PageCount)
      {
        startPage = PageCount - showPageNum;
      }
      else
      {
        startPage = PageNum - (showPageNum / 2);
      }
    }
    startPage = (startPage == 0 ?  1 : startPage);// The first page number to start displaying numbers
    //Previous button
    HTML. Append (string. Format ("< Li class = '{0}' > < a (a) = '#'class =' {JS pageselect 'data page =' {1} '> < span > previous < / span > < / a > < / Li >", pagenum < = 1“ disabled" : "", PageNum - 1));

    If (startpage > 1) // generate the first page button and middle ellipsis
    {
      html.Append("<li><a class='js-pageSelect'' href='#' data-page='1'>1</a></li>");
      if (startPage > 2)
      {
        html.Append("<li><span>...</span></li>");
      }
    }
    for (int i = startPage;  i <= (startPage + showPageNum);  (I + +) // generate page number
    {
      if (i > PageCount)
      {
        break;
      }
      html.Append(string.Format("<li class='{0}'><a class='js-pageSelect'' href='#' data-page='{1}'>{2}</a></li>", i == PageNum ? "active" : "", i, i));
    }

    //Generate last page button and middle ellipsis
    int maxShowPage = startPage + showPageNum;
    if (maxShowPage <= PageCount - 1)
    {
      if(maxShowPage <= PageCount - 2)
      {
        html.Append("<li><span>...</span></li>");
      }
      html.Append(string.Format("<li><a class='js-pageSelect'' href='#' data-page='{0}'>{1}</a></li>",PageCount,PageCount));
    }
    //Show next page button
    HTML. Append (string. Format ("< Li class = '{0}' > < a HH = '{JS pageselect' data page = '{1}' > < span > next page < / span > < / a > < / Li >", pagenum > = pagecount“ disabled" : "", PageNum + 1));
    //Display page information
    HTML. Append (string. Format ("< li > < span > page {0} of {1} pages {2} content < / span > < / Li >", pagenum, pagecount, itemcount));
  }
  else
  {
    //The content displayed when the content is less than one page
    HTML. Append (string. Format ("< li > < span > of 1 page {0} content < / span > < / Li >", itemcount));
  }
  return html.ToString();
}

When you use it, you can directly put it into MVC controllers. Actionresult returns content (HTML).

Page can be directly  


@Html.Action("", new {page = 1,pageSize = 20, ... })

it’s fine too


$.ajax({
 url: '/Function/FileArchiveSelectShouWenDengJiTableMessage',
 type: 'post',
 dataType: 'html',
 data: {
  page: page,
  pageSize: pagesize,
  ...
  },
})
.done(function (data) {
 $('#ShouWenPageSelect').html(data);
 InitPageSelectEvent();
});

The above is the whole content of this article, I hope to help you learn, and I hope you can support developer more.