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下载地址