ASP.Net MVC4.0+无刷新分页

新建项目后必须引用MvcPager.dll    注意引用4.0+版本以上哦

分页控制器

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Webdiyer.WebControls.Mvc;

namespace MvcDemo.Controllers
{
    public class PageUnitController : Controller
    {
        // GET: PageUnit
        public ActionResult Index(int? id, string name)
        {
            List<Person> data = new List<Person>();
            for (int i = 0; i < 100; i++)
            {
                data.Add(new Person(){ID=i,Name="Name"+i});
            }
            id = id ?? 1;
            int pageSize = 3;
            //IQueryable<Person> temp = db.Person.Where(c =>true).OrderBy(c=>c.ID);
            IQueryable<Person> temp = data.AsQueryable();
            PagedList<Person> pageList = temp.AsQueryable<Person>().ToPagedList<Person>(id.Value, pageSize);
            if (Request.IsAjaxRequest())
            {
                return PartialView("_ParIndex", pageList);
            }
            return View(pageList);
        }
    }

    public class Person 
    {
        public int ID { get; set; }
        public string Name { get; set; }
    }
}

View Code

视图

@using Webdiyer.WebControls.Mvc
@model PagedList<MvcDemo.Controllers.Person>
@{
    ViewBag.Title = "Index";
}
<div id="articles">
    @Html.Partial("_ParIndex", Model)
</div>
@section scripts{@{Html.RegisterMvcPagerScriptResource();}} 

此处注意，一定要加上最后一句话@section scripts{@{Html.RegisterMvcPagerScriptResource();}}  ，否则无刷新失效，页码跳转也失效哦

 

分部视图

@using Webdiyer.WebControls.Mvc
@model Webdiyer.WebControls.Mvc.PagedList<MvcDemo.Controllers.Person>
<table class="table table-bordered table-striped">
    <tr>
        <th class="nowrap">序号</th>
        <th>
            姓名
        </th>
    </tr>
    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.ID)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Name)
            </td>
        </tr>
    }
</table>

@*下拉选择跳转*@
<div class="row">
    <div class="col-xs-8">
        @Ajax.Pager(Model, new PagerOptions { FirstPageText = "<<", LastPageText = ">>", NextPageText = ">", PrevPageText = "<", PageIndexParameterName = "id", NumericPagerItemCount = 5, ContainerTagName = "ul", CssClass = "pagination", CurrentPagerItemTemplate = "<li class=\"active\"><a href=\"#\">{0}</a></li>", DisabledPagerItemTemplate = "<li class=\"disabled\"><a>{0}</a></li>", PagerItemTemplate = "<li>{0}</li>", PageIndexBoxId = "pageIndexBox" }).Options(o => o.AddRouteValue("target", "articles")).AjaxOptions(a => a.SetUpdateTargetId("articles"))
    </div>
    <div class="col-xs-4">
        <div class="input-group" style="margin:20px 0">
            <span class="input-group-addon">转到第</span>
            <select id="pageIndexBox" class="form-control input-sm"></select>
            <span class="input-group-addon">页</span>
        </div>
    </div>
</div>

@*输入跳转到指定页*@
@*<div class="row">
        <div class="col-xs-8">
            @Ajax.Pager(Model, new PagerOptions { FirstPageText = "<<", LastPageText = ">>", NextPageText = ">", PrevPageText = "<", ContainerTagName = "ul", PageIndexParameterName = "id",NumericPagerItemCount = 5, CssClass = "pagination", CurrentPagerItemTemplate = "<li class=\"active\"><a href=\"#\">{0}</a></li>", DisabledPagerItemTemplate = "<li class=\"disabled\"><a>{0}</a></li>", PagerItemTemplate = "<li>{0}</li>", PageIndexBoxId = "pageIndexBox2", GoToButtonId = "goToBtn2" }).Options(o => o.AddRouteValue("target", "articles")).AjaxOptions(a => a.SetUpdateTargetId("articles"))
        </div>
        <div class="col-xs-4">
            <div class="input-group" style="margin:20px 0">
                <span class="input-group-addon">转到第</span>
                <input type="text" id="pageIndexBox2" class="form-control input-sm" />
                <span class="input-group-addon">页</span>
                <span class="input-group-btn"><button class="btn btn-primary btn-sm" id="goToBtn2">跳转</button></span>
            </div>
        </div>
    </div>*@

View Code

 

参考地址：http://www.webdiyer.com/mvcpager/demos/ajaxpagers/

 

转载于:https://www.cnblogs.com/SmilePastaLi/p/7526941.html