MVC分页之MvcPager使用详解

程序员文章站 2023-12-10 22:54:52

最近刚刚接触mvc不久，因项目中要用到分页，网上找了下资料，最后采用了mvcpager(),支持同步和ajax异步分页。废话不多说了直接上代码。一.mv...

最近刚刚接触mvc不久，因项目中要用到分页，网上找了下资料，最后采用了mvcpager(),支持同步和ajax异步分页。废话不多说了直接上代码。

一.mvcpager异步
viewmodel:

 public class article
 {
 [display(name = "信息编号")]
 public int id { get; set; }

 [display(name = "信息标题")]
 public string title { get; set; }

 [display(name = "信息内容")]
 public string content { get; set; }
 }

 public class ajaxpager
 {
 public pagedlist<article> articles { get; set; } 
 }

control:

/// <summary>
 /// 异步分页测试
 /// </summary>
 /// <param name="id">pageindex</param>
 /// <param name="key">关键字</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 style="padding: 15px;">
 @using (html.beginform("ajaxpaging", "mytest", new routevaluedictionary { { "id", "" } }, formmethod.get))
 {
  @html.label("关键字：") <input name="key" value="@request.querystring["key"]" /><input type="submit" value="查询" />
 }

 @*分页table*@
 @{ html.renderpartial("_articletable"); }

 <div class="text-center">
  @ajax.pager(model.articles, new pageroptions
  {
  pageindexparametername = "id",
  firstpagetext = "首页",
  prevpagetext = "上一页",
  nextpagetext = "下一页",
  lastpagetext = "末页",
  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 class="table table-bordered table-striped">
 <tr>
 <th class="nowrap">序号</th>
 <th>
  标题
 </th>
 <th>
  内容
 </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>

二.mvcpager同步
viewmodel（此处可不增加，直接和异步的共用同一个）:

 public class mvcpager
 {
 //信息列表
 public pagedlist<article> articles { get; set; }
 }

control:

 /// <summary>
 /// 同步分页测试
 /// </summary>
 /// <param name="id">pageindex</param>
 /// <param name="key">关键字</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);

  //数据组装到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 style="padding:15px;">
 @using (html.beginform("mvcpager", "mytest", new routevaluedictionary { { "id", "" } }, formmethod.get))
 {
  @html.label("关键字：")<input name="key" value="@request.querystring["key"]" /><input type="submit" value="查询" />
 }

 <table class="table table-bordered table-striped">
  <tr>
  <th>编号</th>
  <th>标题</th>
  <th>内容</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 class="text-center">
  <nav>
  @html.pager(model.articles, new pageroptions
  {
   pageindexparametername = "id",
   firstpagetext = "首页",
   prevpagetext = "上一页",
   nextpagetext = "下一页",
   lastpagetext = "末页",
   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>

获取测试数据方法（共用）：

 public class mytest
 {
 /// <summary>
 /// 获取测试数据
 /// </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关键字过滤 包含关键字则不拼接sql
  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 = 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;
 }
 }

效果图：（需要引用css）

MVC分页之MvcPager使用详解

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇：索尼PS4/PS Vita游戏机正式入华 PS4售2899元

MVC分页之MvcPager使用详解

MVC分页之MvcPager使用详解

Android笔记之:App自动化之使用Ant编译项目多渠道打包的使用详解

解析Android中实现滑动翻页之ViewFlipper的使用详解

Android开发笔记之:Dialog的使用详解

Android Mms之:PDU的使用详解

Spring MVC项目中log4J和AOP使用详解

Android开发笔记之:一分钟学会使用Logcat调试程序的详解

ASP.NET MVC+EF在服务端分页使用jqGrid以及jquery Datatables的注意事项

jQuery Pagination分页插件使用方法详解

Node.js之readline模块的使用详解