.net MvcPager+Ajax无刷新分页

.net MvcPager+Ajax无刷新分页百度网盘链接:

https://pan.baidu.com/s/1QmtBVH_sb4O6pNnEIsB5jw

1.新建Asp.net Web项目，重命名为MvcAppPager，再选择MVC框架，完成。

在项目“引用”下添加“MvcPager.dll”的引用

2.（为了将MVC框架默认的视图改为空页面）先将Views下的Home文件夹删掉，

再在Shared文件下的_Layout.cshtml改为如下代码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>_Layout</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>

    @RenderBody()

    @Scripts.Render("~/bundles/jquery")
    @RenderSection("scripts", required: false)
</body>
</html>

_Layout.cshtml

然后修改HomeController代码（全部复制即可）：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcAppPager.Models;
using Webdiyer.WebControls.Mvc;

namespace MvcAppPager.Controllers
{
    public class HomeController : Controller
    {
        List<Order> list = new List<Order> { new Order { ID = 1, OrderNo = "2016050501", WayFee = 20,EMS="C01111" },
             new Order { ID = 2, OrderNo = "2016050502", WayFee = 10,EMS="C01222" },
             new Order { ID = 3, OrderNo = "201605050203", WayFee = 10,EMS="C01222" }, new Order { ID = 4, OrderNo = "201605050204", WayFee = 10,EMS="C01222" },
             new Order { ID = 5, OrderNo = "201605050205", WayFee = 10,EMS="C01222" }, new Order { ID = 6, OrderNo = "201605050206", WayFee = 10,EMS="C01222" },
             new Order { ID = 7, OrderNo = "201605050207", WayFee = 10,EMS="C01222" }, new Order { ID = 8, OrderNo = "201605050208", WayFee = 10,EMS="C01222" },
             new Order { ID = 9, OrderNo = "201605050205", WayFee = 10,EMS="C01222" }, new Order { ID = 10, OrderNo = "2016050502010", WayFee = 10,EMS="C01222" },
             new Order { ID = 11, OrderNo = "2016050502011", WayFee = 10,EMS="C01222" }, new Order { ID = 12, OrderNo = "201605050212", WayFee = 10,EMS="C01222" },
        };
        private const int PageSize = 2;
        private int counts;



        public ActionResult MvcPagerAjax(int id = 1)
        {
            counts = list.Count;
            PagedList<Order> lst = list.AsQueryable().ToPagedList(id, PageSize);
            lst.TotalItemCount = counts;
            lst.CurrentPageIndex = id;
            if (Request.IsAjaxRequest())//如果是Ajax请求
            {
                return PartialView("OrderList", lst);
            }
            else
            {
                return View(lst);
            }
        }
    }
}

HomeController

并将RouteConfig.cs的路由改为;Home，MvcPagerAjax（action名）

3.在Models文件夹新建一个类Order.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MvcAppPager.Models
{
    public class Order
    {
        public int ID { get; set; }
        public string OrderNo { get; set; }
        public decimal WayFee { get; set; }
        public string EMS { get; set; }
    }
}

Order.cs

4.在Views下的Home文件夹新建MvcPagerAjax视图：

@model PagedList<MvcAppPager.Models.Order>
@using Webdiyer.WebControls.Mvc;
@Scripts.Render("~/Scripts/jquery-1.8.2.min.js")
@Scripts.Render("~/Scripts/jquery.unobtrusive-ajax.min.js")
@{
    Html.RenderPartial("OrderList", Model);
}
<div>@DateTime.Now.ToString()</div>

MvcPagerAjax

5.在Shared下新建 “局部视图” 名为OrderList，也就是说在新建视图的时候勾选 “ Create as a partial view”

@model PagedList<MvcAppPager.Models.Order>
@using Webdiyer.WebControls.Mvc;
<div id='divList'>
    <table>
        <tr>
            <th>ID</th>
            <th>订单号</th>
            <th>运单号</th>
            <th>运费</th>
        </tr>
        @if (Model != null && Model.Count > 0)
        {
            foreach (var item in Model.ToList())
            {
                <tr>
                    <td>@item.ID</td>
                    <td>@item.OrderNo</td>
                    <td>@item.EMS</td>
                    <td>@item.WayFee</td>
                </tr>
            }
        }
    </table>

    @Ajax.Pager(Model, new PagerOptions
    {
        PageIndexParameterName = "id",
        ShowPageIndexBox = true,
        FirstPageText = "首页",
        PrevPageText = "上一页",
        NextPageText = "下一页",
        LastPageText = "末页",
        PageIndexBoxType = PageIndexBoxType.TextBox,
        PageIndexBoxWrapperFormatString = "请输入页数{0}",
        GoButtonText = "转到"
    }, new AjaxOptions { UpdateTargetId = "divList" })
    <br />
    >>分页 共有 @Model.TotalItemCount 条订单 @Model.CurrentPageIndex/@Model.TotalPageCount
</div>

OrderList.cshtml

6.在Scripts文件夹下添加下面两个js文件，否则无法进行Ajax无刷新分页

jquery-1.8.2.min.js和jquery.unobtrusive-ajax.min.js

7.运行截图