Home>

I have just been in contact with mvc recently, because paging is used in the project,I found the information online.Finally, mvcpager () is used to support synchronous and ajax asynchronous paging.Not much nonsense to go directly to the code.

A. mvcpager asynchronousviewmodel:

public class article
 {
 [display (name="Message Number")]
 public int id {get;set;}
 [display (name="Message Title")]
 public string title {get;set;}
 [display (name="Message Content")]
 public string content {get;set;}
 }
public class ajaxpager
 {
 public pagedlist<article&articles;articles {get;set;}
 }

control:

///<summary>
 ///Asynchronous paging test
 ///</summary>
 ///<param name="id"&pageindex</param>
 ///<param name="key">keyword</param>
 ///<returns></returns>
 public actionresult ajaxpaging (int?id=1, string key=null)
 {
  int totalcount=0;
  int pageindex=id??1;
  int pagesize=2;
  list<article>infolist=new solefudal.mytest (). getarticlelist (key, pagesize, (pageindex-1) * 2, out totalcount);
  pagedlist<article>infopager=infolist.asqueryable (). orderbydescending (o =>o.id) .topagedlist (pageindex, pagesize);
  infopager.totalitemcount=totalcount;
  infopager.currentpageindex=(int) (id??1);
  models.mytest.ajaxpager model=new models.mytest.ajaxpager ();
  model.articles=infopager;
  if (request.isajaxrequest ())
  {
  return partialview ("_ articlelist", model);
  }
  return view (model);
 }

view:

@model soulefu_manage.models.mytest.ajaxpager
@using webdiyer.webcontrols.mvc;
<! Doctype html>
<html>
<head>
 <meta name="viewport" content="width=device-width" />
 <title>mvcpager-ajaxpaging</title>
 <link href="~/content/pagerstyles.css" rel="stylesheet" />
 <link href="~/content/bootstrap.css" rel="stylesheet" />
</head>
<body>
 <div>
 @using (html.beginform ("ajaxpaging", "mytest", new routevaluedictionary {{"id", ""}}, formmethod.get))
 {
  @ html.label ("Keyword:")<input name="key" value="@ request.querystring [" key "]" /<input type="submit" value="query" /> ;
 }
 @ *Pagination table * @
 @ {html.renderpartial ("_ articletable");}
 <div>
  @ ajax.pager (model.articles, new pageroptions
  {
  pageindexparametername="id",  firstpagetext="First Page",  prevpagetext="Previous Page",  nextpagetext="Next Page",  lastpagetext="last page",  numericpageritemcount=5,  containertagname="ul",  cssclass="pagination",  currentpageritemtemplate="<li class=\" active \ "><a href=\" #\ ">{0}</a></li>",  disabledpageritemtemplate="<li class=\" disabled \ "><a>{0}</a></li>",  pageritemtemplate="<li>{0}</li>"
  }). ajaxoptions (a =>a.setupdatetargetid ("articles"))
 </div>
 </div>
</body>
</html>
@model soulefu_manage.models.mytest.ajaxpager
<table>
 <tr>
 <th>serial number</th>
 <th>
  title
 </th>
 <th>
  content
 </th>
 </tr>
 @foreach (var item in model.articles)
 {
 <tr>
  <td>@ html.displayfor (model =>item.id)</td>
  <td>
  @ html.displayfor (modelitem =>item.title)
  </td>
  <td>
  @ html.displayfor (modelitem =>item.content)
  </td>
 </tr>
 }
</table>

Two.mvcpager synchronization

viewmodel (not added here,Direct and asynchronous sharing the same):

public class mvcpager
 {
 //list of information
 public pagedlist<article&articles;articles {get;set;}
 }

control:

///<summary>
 ///synchronous paging test
 ///</summary>
 ///<param name="id"&pageindex</param>
 ///<param name="key">keyword</param>
 ///<returns></returns>
 public actionresult mvcpager (int?id=1, string key=null)
 {
  int totalcount=0;
  int pageindex=id??1;
  int pagesize=2;
  list<article>infolist=new solefudal.mytest (). getarticlelist (key, pagesize, (pageindex-1) * 2, out totalcount);
  pagedlist<article>infopager=infolist.asqueryable (). orderbydescending (o =>o.id) .topagedlist (pageindex, pagesize);
  infopager.totalitemcount=totalcount;
  infopager.currentpageindex=(int) (id??1);
  //Data is assembled into viewmodel
  models.mytest.mvcpager model=new models.mytest.mvcpager ();
  model.articles=infopager;
  return view (model);
 }

view:

@model soulefu_manage.models.mytest.mvcpager
@using webdiyer.webcontrols.mvc;
<! Doctype html>
<html>
<head>
 <meta name="viewport" content="width=device-width" />
 <title>mvcpager</title>
 <link href="~/content/pagerstyles.css" rel="stylesheet" />
 <link href="~/content/bootstrap.css" rel="stylesheet" />
</head>
<body>
 <div>
 @using (html.beginform ("mvcpager", "mytest", new routevaluedictionary {{"id", ""}}, formmethod.get))
 {
  @ html.label ("Keyword:")<input name="key" value="@ request.querystring [" key "]" /<input type="submit" value="query" /> ;
 }
 <table>
  <tr>
  <th>number</th>
  <th>Title</th>
  <th>content</th>
  </tr>
  @foreach (var info in model.articles)
  {
  <tr>
   <td>@ html.displayfor (model =>info.id)</td>
   <td>@ html.displayfor (model =>info.title)</td>
   <td>@ html.displayfor (model =>info.content)</td>
  </tr>
  }
 </table>
 <div>
  <nav>
  @ html.pager (model.articles, new pageroptions
  {
   pageindexparametername="id",   firstpagetext="First Page",   prevpagetext="Previous Page",   nextpagetext="Next Page",   lastpagetext="last page",   containertagname="ul",   cssclass="pagination",   currentpageritemtemplate="<li class=\" active \ "><a href=\" #\ ">{0}</a></li>",   disabledpageritemtemplate="<li class=\" disabled \ "><a>{0}</a></li>",   pageritemtemplate="<li>{0}</li>",   id="bootstrappager"
  })
  </nav>
 </div>
 </div>
</body>
</html>

Method for obtaining test data (shared):

public class mytest
 {
 ///<summary>
 ///Get test data
 ///</summary>
 ///<param name="key"></param>
 ///<param name="pagesize"></param>
 ///<param name="currentcount"></param>
 ///<param name="totalcount"></param>
 ///<returns></returns>
 public list<article>getarticlelist (string key, int pagesize, int currentcount, out int totalcount)
 {
  string tabname=string.format ("article");
  string strwhere="1=1";
  if (! string.isnullorempty (key))
  {
  //sql keyword filtering
  if (! sqlinjection.getstring (key))
  {
   strwhere +=string.format ("and (title like"%{0}%"or content like"%{0}%")", key);
  }
  }
  string order=string.format ("id asc");
  dataset ds=sqlhelper.getlist (sqlhelper.connstr, order, pagesize, currentcount, tabname, strwhere, out totalcount);
  list<article&list;list=new list<article>();
  if (ds!=null&&ds.tables.count>0)
  {
  foreach (datarow dr in ds.tables [0] .rows)
  {
   article model=new article ();
   model.id=convert.toint32 (dr ["id"]);
   model.title=dr ["title"]. tostring ();
   model.content=dr ["content"]. tostring ();
   list.add (model);
  }
  }
  return list;
 }
 }

Effect picture:(requires css)

  • Previous Cartclassphp definition and usage example
  • Next PHP disable function settings and viewing methods