MVC分页之MvcPager使用详解
程序员文章站
2023-11-24 15:07:22
最近刚刚接触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）
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。