MvcPager.dll使用实现无刷新分页以及MvcPager的Nuget程序包实现刷新分页

无刷新分页：

1.引入JQuery的NuGet程序包

2.引入程序包

3.引入MvcPager.dll ,MvcPager.dll文件下载链接http://pan.baidu.com/s/1hsvBYcc 密码：baws

4.引入MvcPager.js 和MvcPager.min.js 文件下载链接（同上3所示）

5.代码编写

Controller：

public class HomeController : Controller
    {
        //
        // GET: /Home/
        int pageSize = 2;
        [HttpGet]
        public ActionResult Index(int pageIndex = 1)
        {
            var list = PrepareUserList();   //list为取到的所有数据
            PagedList<User> p_list = list.ToPagedList(pageIndex, pageSize);
            if (Request.IsAjaxRequest())   //判断请求是否为Ajax请求
            {
                return PartialView("ShowPart", p_list);
            }
            return View(p_list);
        }
        [HttpPost]
        public ActionResult Index(string keyword,int pageIndex = 1)
        {
            var list = PrepareUserList();
            PagedList<User> p_list = list.ToPagedList(pageIndex, pageSize);
            if (Request.IsAjaxRequest())
            {
                p_list = string.IsNullOrEmpty(keyword) ? p_list : list.Where(p=>p.Name.Contains(keyword)).ToPagedList(pageIndex, pageSize);
                return PartialView("ShowPart",p_list);
            }
            return View(p_list);
        }

//此类是为了制造数据，方便可以不用从数据库调数据也能运行程序，若从数据库取数据则不需要此类
        public List<User> PrepareUserList()
        {
            List<User> list = new List<User>();
            User u1 = new User() { Id = 1, Address = "sda", Name = "das" };
            User u11 = new User() { Id = 2, Address = "a", Name = "gffs" };
            User u12 = new User() { Id = 3, Address = "b", Name = "dfts" };
            User u13 = new User() { Id = 4, Address = "c", Name = "dfg" };
            User u14 = new User() { Id = 5, Address = "sda", Name = "vb" };
            User u15 = new User() { Id = 6, Address = "sa", Name = "hj" };
            User u16 = new User() { Id = 7, Address = "eda", Name = "ui" };
            User u10 = new User() { Id = 8, Address = "sda", Name = "we" };
            User u110 = new User() { Id = 9, Address = "a", Name = "rf" };
            User u120 = new User() { Id = 10, Address = "b", Name = "hy" };
            User u130 = new User() { Id = 11, Address = "c", Name = "jy" };
            User u140 = new User() { Id = 12, Address = "sda", Name = "nm" };
            User u150 = new User() { Id = 13, Address = "sa", Name = "qr" };
            User u160 = new User() { Id = 14, Address = "eda", Name = "ts" };
            list.Add(u1);
            list.Add(u11);
            list.Add(u12);
            list.Add(u13);
            list.Add(u14);
            list.Add(u15);
            list.Add(u16);
            list.Add(u10);
            list.Add(u110);
            list.Add(u120);
            list.Add(u130);
            list.Add(u140);
            list.Add(u150);
            list.Add(u160);
            return list;
        }
    }

HomeController.cs

Index视图：

@{
    Layout = null;
}
@using Webdiyer.WebControls.Mvc;
@model PagedList<N_Refresh.Models.User>
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-1.9.1.js"></script>
    <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
    <script src="~/Scripts/MvcPager.js"></script>
/*注意：这三个script文件是必须引用的文件，否则不能实现无刷新分页，Ajax请求过不去*/
</head>
<body>
    <div>
        @using (Ajax.BeginForm("Index", "Home", new RouteValueDictionary { { "id", "" } },
            new AjaxOptions { HttpMethod = "Post", UpdateTargetId = "list", InsertionMode = InsertionMode.Replace }, new RouteValueDictionary { {"id","searchForm"} }))
        {
            <div class="row">
                <span class="col-md-2">姓名：</span>
                <input name="keyword" type="text" class="col-md-3" />
                <input type="submit" class="btn btn-primary btn-sm input-inline" value="搜索" />
            </div>
        }
    </div>
    <div id="list">
        @{
            Html.RenderPartial("ShowPart", Model);
        }
    </div>
<!--ShowPart是分部视图的名称 -->
</body>
</html>

Index.cshtml

分部视图ShowPart.cshtml

@using Webdiyer.WebControls.Mvc;
@model PagedList<N_Refresh.Models.User>

<table class="table table-bordered table-hover center-block top">
    <tr>
        <td>姓名</td>
        <td>地址</td>
    </tr>
    @foreach (var item in Model)
    {
        <tr>
            <td>@item.Name</td>
            <td>@item.Address</td>
        </tr>
    }
</table>
<div>
    <div style="float:left;50%;">当前页 @Model.CurrentPageIndex 共 @Model.TotalPageCount 页，共 @Model.TotalItemCount 条记录 </div>
    @Ajax.Pager(Model, new PagerOptions
   {
       PageIndexParameterName = "pageIndex",
       ActionName = "Index",
       HtmlAttributes = new Dictionary<string, object> { { "style", "float:right" } },
       ContainerTagName = "ul",
       CssClass = "pagination",
       CurrentPagerItemTemplate = "<li class="active "><a href="javascript:void(0)">{0}</a></li>",
       DisabledPagerItemTemplate = "<li class="disabled"><a>{0}</a></li>",
       PagerItemTemplate = "<li>{0}</li>",
       Id = "bootstrappager",
       AutoHide = false,
       FirstPageText = "首页",
       NextPageText = "下一页",
       PrevPageText = "上一页",
       LastPageText = "末页"
   },
       new MvcAjaxOptions
       {
           UpdateTargetId = "list",         //此为无刷新分页做准备，list为数据表格外层包围的div的id
           HttpMethod = "Post",
           DataFormId = "searchForm"        //此为无刷新搜索做准备，searchForm为搜索的form的id
       })
</div>

View Code

6.忘记说了，模型类User.cs

public class User
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Address { get; set; }
    }

View Code

6其实应该放在Controller之前，

至此，无刷新分页和搜索就完成了，

程序代码实现链接：http://pan.baidu.com/s/1eSh2VRW 密码：g1b1

欢迎大家进行批评指正