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>
}

View Code