MVC 使用PageList进行分页

1.新建MVC项目

2.在Web项目下添加PagedList

nuget 命令 ：install-package pagedlist.mvc

在安装完成之后，会在Content下添加PagedList.css文件，这个是在分页中会用到的样式

3.有些人用的数据来源是其他地方来的，就用Ilist 的类型进行分页吧

顺便做一下json文件的转换

安装newtonsoft.json

Nuget 命令 ：install-package newtonsoft.json

4.在Models中添加model类型定义 TestModel ，用来转换的

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

namespace MvcApplication2.Models
{
    public class TestModel
    {
        public string Name { get; set; }

        public int? Age { get; set; }

        public string Remark { get; set; }
    }
}

5.创建Controller 进行管理，代码中使用局部页添加到index页中，分页之后还是跳转到局部页中，就是随笔一记，不做多的处理

index ACtion中产生数据，并将其计入到静态变量中国

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcApplication2.Models;
using Newtonsoft.Json;
using PagedList;

namespace MvcApplication2.Controllers
{
    public class PartTestController : Controller
    {
        //
        // GET: /PartTest/
        static IList<TestModel> models = new List<TestModel>();

        public ActionResult Index()
        {
            Random rd = new Random();
            models.Add(new TestModel() { Name = "test1", Age = rd.Next(, ), Remark = "Remark" });
            models.Add(new TestModel() { Name = "test" + rd.Next(, ) + "", Age = rd.Next(, ), Remark = "Remark" });
            models.Add(new TestModel() { Name = "test" + rd.Next(, ) + "", Age = rd.Next(, ), Remark = "Remark" });
            models.Add(new TestModel() { Name = "test" + rd.Next(, ) + "", Age = rd.Next(, ), Remark = "Remark" });
            models.Add(new TestModel() { Name = "test" + rd.Next(, ) + "", Age = rd.Next(, ), Remark = "Remark" });
            models.Add(new TestModel() { Name = "test" + rd.Next(, ) + "", Age = rd.Next(, ), Remark = "Remark" });
            models.Add(new TestModel() { Name = "test" + rd.Next(, ) + "", Age = rd.Next(, ), Remark = "Remark" });
            models.Add(new TestModel() { Name = "test" + rd.Next(, ) + "", Age = rd.Next(, ), Remark = "Remark" });
            models.Add(new TestModel() { Name = "test" + rd.Next(, ) + "", Age = rd.Next(, ), Remark = "Remark" });
            models.Add(new TestModel() { Name = "test" + rd.Next(, ) + "", Age = rd.Next(, ), Remark = "Remark" });
            models.Add(new TestModel() { Name = "test" + rd.Next(, ) + "", Age = rd.Next(, ), Remark = "Remark" });
            models.Add(new TestModel() { Name = "test" + rd.Next(, ) + "", Age = rd.Next(, ), Remark = "Remark" });
            models.Add(new TestModel() { Name = "test" + rd.Next(, ) + "", Age = rd.Next(, ), Remark = "Remark" });
            models.Add(new TestModel() { Name = "test" + rd.Next(, ) + "", Age = rd.Next(, ), Remark = "Remark" });
            models.Add(new TestModel() { Name = "test" + rd.Next(, ) + "", Age = rd.Next(, ), Remark = "Remark" });
            models.Add(new TestModel() { Name = "test" + rd.Next(, ) + "", Age = rd.Next(, ), Remark = "Remark" });
            models.Add(new TestModel() { Name = "test" + rd.Next(, ) + "", Age = rd.Next(, ), Remark = "Remark" });
            models.Add(new TestModel() { Name = "test" + rd.Next(, ) + "", Age = rd.Next(, ), Remark = "Remark" });
            models.Add(new TestModel() { Name = "test" + rd.Next(, ) + "", Age = rd.Next(, ), Remark = "Remark" });
            models.Add(new TestModel() { Name = "test" + rd.Next(, ) + "", Age = rd.Next(, ), Remark = "Remark" });
            models.Add(new TestModel() { Name = "test" + rd.Next(, ) + "", Age = rd.Next(, ), Remark = "Remark" });
            models.Add(new TestModel() { Name = "test" + rd.Next(, ) + "", Age = rd.Next(, ), Remark = "Remark" });
            models.Add(new TestModel() { Name = "test" + rd.Next(, ) + "", Age = rd.Next(, ), Remark = "Remark" });
            models.Add(new TestModel() { Name = "test" + rd.Next(, ) + "", Age = rd.Next(, ), Remark = "Remark" });
            models.Add(new TestModel() { Name = "test" + rd.Next(, ) + "", Age = rd.Next(, ), Remark = "Remark" });
            models.Add(new TestModel() { Name = "test" + rd.Next(, ) + "", Age = rd.Next(, ), Remark = "Remark" });
            models.Add(new TestModel() { Name = "test" + rd.Next(, ) + "", Age = rd.Next(, ), Remark = "Remark" });
            models.Add(new TestModel() { Name = "test" + rd.Next(, ) + "", Age = rd.Next(, ), Remark = "Remark" });
            models.Add(new TestModel() { Name = "test" + rd.Next(, ) + "", Age = rd.Next(, ), Remark = "Remark" });
            models.Add(new TestModel() { Name = "test" + rd.Next(, ) + "", Age = rd.Next(, ), Remark = "Remark" });
            models.Add(new TestModel() { Name = "test" + rd.Next(, ) + "", Age = rd.Next(, ), Remark = "Remark" });
            models.Add(new TestModel() { Name = "test" + rd.Next(, ) + "", Age = rd.Next(, ), Remark = "Remark" });
            models.Add(new TestModel() { Name = "test" + rd.Next(, ) + "", Age = rd.Next(, ), Remark = "Remark" });
            models.Add(new TestModel() { Name = "test" + rd.Next(, ) + "", Age = rd.Next(, ), Remark = "Remark" });
            models.Add(new TestModel() { Name = "test" + rd.Next(, ) + "", Age = rd.Next(, ), Remark = "Remark" });
            models.Add(new TestModel() { Name = "test" + rd.Next(, ) + "", Age = rd.Next(, ), Remark = "Remark" });
            models.Add(new TestModel() { Name = "test" + rd.Next(, ) + "", Age = rd.Next(, ), Remark = "Remark" });
            models.Add(new TestModel() { Name = "test" + rd.Next(, ) + "", Age = rd.Next(, ), Remark = "Remark" });
            models.Add(new TestModel() { Name = "test" + rd.Next(, ) + "", Age = rd.Next(, ), Remark = "Remark" });
            models.Add(new TestModel() { Name = "test" + rd.Next(, ) + "", Age = rd.Next(, ), Remark = "Remark" });
            models.Add(new TestModel() { Name = "test" + rd.Next(, ) + "", Age = rd.Next(, ), Remark = "Remark" });
            models.Add(new TestModel() { Name = "test" + rd.Next(, ) + "", Age = rd.Next(, ), Remark = "Remark" });
            models.Add(new TestModel() { Name = "test" + rd.Next(, ) + "", Age = rd.Next(, ), Remark = "Remark" });
            models.Add(new TestModel() { Name = "test" + rd.Next(, ) + "", Age = rd.Next(, ), Remark = "Remark" });
            models.Add(new TestModel() { Name = "test" + rd.Next(, ) + "", Age = rd.Next(, ), Remark = "Remark" });
            models.Add(new TestModel() { Name = "test" + rd.Next(, ) + "", Age = rd.Next(, ), Remark = "Remark" });
            models.Add(new TestModel() { Name = "test" + rd.Next(, ) + "", Age = rd.Next(, ), Remark = "Remark" });
            models.Add(new TestModel() { Name = "test" + rd.Next(, ) + "", Age = rd.Next(, ), Remark = "Remark" });
            models.Add(new TestModel() { Name = "test" + rd.Next(, ) + "", Age = rd.Next(, ), Remark = "Remark" });
            models.Add(new TestModel() { Name = "test" + rd.Next(, ) + "", Age = rd.Next(, ), Remark = "Remark" });
            models.Add(new TestModel() { Name = "test" + rd.Next(, ) + "", Age = rd.Next(, ), Remark = "Remark" });
            models.Add(new TestModel() { Name = "test" + rd.Next(, ) + "", Age = rd.Next(, ), Remark = "Remark" });
            return View();
        }

        public PartialViewResult PagedListFun(string searchStr, string orderType, int? page)
        {
            if (!string.IsNullOrWhiteSpace(searchStr))
            {
                page = ;
            }

            string str = JsonConvert.SerializeObject(models);

            string jsonstr = str;

            IList<TestModel> list = JsonConvert.DeserializeObject<IList<TestModel>>(jsonstr);

            var res = from q in list
                      where q.Name.Contains(searchStr ?? "")
                      select q;

            //if (orderType.ToLower() == "desc")
            //{
            res = res.OrderByDescending(o => o.Name);
            //}

            int pageSize = ;
            int pageNumber = (page ?? );

            return PartialView("PagedListFun", res.ToPagedList(pageNumber, pageSize));
        }

    }
}

6. 在index中加载页面

@{
    Layout = null;
    ViewBag.Title = "Index";
}

<script src="~/Scripts/jquery-1.8.2.js"></script>

<h2>Index</h2>

<div id="partTime"></div>

<script type="text/javascript">

    $(function () {
        $.ajax({
            url: "@Url.Action("PagedListFun")",
            type: "get",
        data: {name:'mxh'},
        success: function (data) {
            $("#partTime").html(data);
        },
        error:function(error) {
            $("#partTime").html(error.text);
        }
    });

    });

</script>

7.在局部也中进行分页处理

@model PagedList.IPagedList<MvcApplication2.Models.TestModel>
@using PagedList.Mvc

<link href="~/Content/PagedList.css" rel="stylesheet" />@*一定要加入这个，不然没有样式*@
@{
    Layout = null;
    ViewBag.Title = "PagedListFun";
}

<ul>
    @foreach (var item in Model)
    {
        <li>@item.Name   @item.Age   @item.Remark</li>
    }
</ul>

Page @(Model.PageCount < Model.PageNumber ?  : Model.PageNumber) of @Model.PageCount
@Html.PagedListPager(Model, page => Url.Action("PagedListFun", new { page }))