ASP.NET MVC分页 Ajax+JsRender

前段时间整mvc的分页,倒是很顺利,参考了以下几篇博客,启发很大。

http://www.cnblogs.com/tangmingjun/archive/2012/05/30/2526301.html

http://www.cnblogs.com/tangmingjun/archive/2012/05/31/2528732.html

顺便扩展了需求,在分页的基础上,继续做关键字查询。

用PagedList生成的页码链接虽然样式很漂亮,但是要做到无刷新的分页,PagedList自动生成的代码是不够用的,可以配合jsRender和Ajax做上面的效果,同时手动构建PagedList生成的页码标签,根据自己的需要设置href和onclick事件。

直接上代码

前台:

@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
} <h2>商品信息</h2> <p>
@Html.ActionLink("新建", "Create") |
@Html.Editor("txtSearch")
<input type="button" value="查找" id="btnSearch" />
<img id="imgWaiting" src="~/Images/loading.gif" style="display:none; width:30px; height:30px;" />
</p>
<table class="table">
<thead>
<tr>
<th>商品名称</th>
<th>商品描述</th>
<th>原价</th>
<th>特价(现价)</th>
<th>销量</th>
<th>修改日期</th>
<th>商品链接</th>
<th>状态</th>
<th>图片</th>
<th></th>
</tr>
</thead>
<tbody id="tblContent"></tbody>
</table>
<div id="divPage"></div> <script type="text/x-jsrender" id="contentTemplate">
<tr>
<td>{{:GoodName}}</td>
<td>{{:Description}}</td>
<td>{{:OriginalPrice}}</td>
<td>{{:SpecialPrice}}</td>
<td>{{:Sales}}</td>
<td>{{:ActiveTime}}</td>
<td>{{:Url}}</td>
<td>{{:Status}}</td>
<td>{{:PicPath}}@*<img id="PicPath" src="{{:PicPath}}" class="thumbnailPdt" />*@</td>
<td>
<a href="/Admin/Goods/Edit/{{:GoodID}}">Edit</a> |
<a href="/Admin/Goods/Delete/{{:GoodID}}">Delete</a>
</td>
</tr>
</script> @section Scripts{
<script src="~/Scripts/jsrender.min.js" type="text/javascript"></script>
<script>
var key = "";
function doSearch(page) {
key = $("#txtSearch").val();
$.post(
"/Admin/Goods/SearchProduct",
{ keyword: key, pageNo: page },
function (data, status) {
//数据写到前台
$("#tblContent").html($("#contentTemplate").render(data.contents));
$("#divPage").html(data["pageList"]);
},
"json"
);
};
//绑定点击查询事件
$("#btnSearch").click(function () {
doSearch(1);
});
//输入框回车开始查询
$("#txtFilter").bind("keypress", function () {
if (event.keyCode == 13) { $("#btnSearch").click(); return false; }
});
//加载初始化数据
$(function () {
doSearch(1);
});
</script>
}

后台Controller:

public ActionResult Index()
{
return View();
} public JsonResult SearchProduct(string keyword, int? pageNo)
{
int pageIndex = pageNo ?? ;
int totalCount;
var goods = GetSearchData(keyword, ref pageIndex, _PageSize, out totalCount);
int totalPage = totalCount / _PageSize + (totalCount % _PageSize == ? : );
var pagerHtml = ExHtml.CreatePagesHtml(totalPage, pageIndex); return Json(new { contents = goods, pageList = pagerHtml }, JsonRequestBehavior.DenyGet);
} List<Good> GetSearchData(string keyword, ref int pageIndex, int pageSize, out int totalCount)
{
var linq = from p in db.Goods select p;
if (!string.IsNullOrWhiteSpace(keyword))
{
linq = linq.Where(t =>
t.GoodID.ToString() == keyword
|| t.GoodName.Contains(keyword)
|| t.Description.Contains(keyword)
);
}
totalCount = linq.Count();
//修正pageIndex
var maxPage = totalCount / pageSize + (totalCount % pageSize == ? : );
if (pageIndex < ) pageIndex = ;
if (pageIndex > maxPage) pageIndex = maxPage;
linq = linq.OrderByDescending(x => x.GoodID)
.Skip((pageIndex - ) * pageSize)
.Take(pageSize); return linq.ToList();
}

扩展函数:

public static string CreatePagesHtml(int totalPageNo, int currPageNo, string jsClickName = "doSearch")
{
if (currPageNo > totalPageNo || currPageNo < || totalPageNo == ) return "";
string res = "";
if (currPageNo > ) res += LiForFirst(jsClickName);//有跳转到第一页
//if (currPageNo > 2) res += LiForPrev(currPageNo - 1, jsClickName);//跳转到前一页
if (currPageNo > ) res += LiForOthers();//无跳转,显示中间有页面
if (currPageNo > ) res += LiForPage(currPageNo - , jsClickName);//前两页
if (currPageNo > ) res += LiForPage(currPageNo - , jsClickName);//前一页 res += LiForCurr(currPageNo);//当前页 if (currPageNo < totalPageNo) res += LiForPage(currPageNo + , jsClickName);//下一页
if (currPageNo < totalPageNo - ) res += LiForPage(currPageNo + , jsClickName);//下两页
if (currPageNo < totalPageNo - ) res += LiForOthers();//无跳转,显示中间有页面
//if (currPageNo < totalPageNo - 1) res += LiForNext(currPageNo + 1, jsClickName);//跳转到后一页
if (currPageNo < totalPageNo - ) res += LiForLast(totalPageNo, jsClickName);//跳转到最后页
return string.Format(@"
<div class=""pagination-container"">
<ul class=""pagination"">
{0}
</ul>
</div>"
, res);
}
static string GetPageItem(int pageNo, string text, string jsClickName, string classStr = null, string rel = null)
{
return string.Format(@"<li{0}><a href=""#""{1}{2}>{3}</a></li>"
, string.IsNullOrWhiteSpace(classStr) ? "" : " class=\"" + classStr + "\""
, string.IsNullOrWhiteSpace(rel) ? "" : " rel=\"" + rel + "\""
, string.IsNullOrWhiteSpace(jsClickName) ? "" : string.Format(" onclick=\"{0}({1});\"", jsClickName, pageNo)
, text
);
}
static string LiForFirst(string jsClickName) { return GetPageItem(, ""/*"««"*/, jsClickName, classStr: "PagedList-skipToFirst"); }
static string LiForPrev(int pageNo, string jsClickName) { return GetPageItem(pageNo, "«", jsClickName, classStr: "PagedList-skipToPrevious", rel: "prev"); }
static string LiForNext(int pageNo, string jsClickName) { return GetPageItem(pageNo, "»", jsClickName, classStr: "PagedList-skipToNext", rel: "next"); }
static string LiForLast(int totalPageNo, string jsClickName) { return GetPageItem(totalPageNo, totalPageNo.ToString()/*"»»"*/, jsClickName, classStr: "PagedList-skipToLast"); }
static string LiForPage(int pageNo, string jsClickName) { return GetPageItem(pageNo, pageNo.ToString(), jsClickName); }
static string LiForCurr(int pageNo) { return GetPageItem(pageNo, pageNo.ToString(), null, classStr: "active"); }
static string LiForOthers() { return GetPageItem(, "…", null, classStr: "disabled PagedList-ellipses"); }

前台的关键代码是js函数doSearch,通过post发送请求,请求成功后处理返回的json数据,并重新加载页面部分元素。json数据包有两个属性,一个contents,里面是类型为List<T>的数据,通过jsrender的调用,生成前台表格的tbody中的代码;另一个pageList是后台组装好的,显示page按钮的string。

后台Controller代码中,主要是第二个函数SearchProduct,它可以作为一个controller下面的action调用,在里面执行查询数据,以及组装pageHtml的操作,并打包这些数据成json数据,返回给前台。

扩展函数代码则主要是组装page的string结果。这部分参考PagedList生成的页码标签的代码,样式在bootstrap里面都有。

环境:VS2013 + MVC5.0 + Bootstrap 3.0

JsRender下载地址

上一篇:01背包问题:Charm Bracelet (POJ 3624)(外加一个常数的优化)


下一篇:Pthon魔术方法(Magic Methods)-hash