杨涛主页
Fork me on GitHub

 在线演示

 帮助文档

 源 代 码

MvcPager 分页示例 — Ajax局部加载

本示例演示MvcPager 2.0中新增的Ajax局部加载功能。

MvcPager 2.0以前版本在使用Ajax分页功能时，要加载的分页数据必须位于单独的用户控件（ascx文件）或PartialView中， 在Ajax请求时只加载此用户控件或PartialView中的内容，MvcPager 2.0版以后的Ajax局部加载功能可以无需使用用户控件或PartialView，Ajax请求获取当前页面后只更新UpdateTargetId属性值对应部分的内容。

Ajax局部加载分页功能使用简单方便，甚至只需要改动MvcPager的设置即可实现普通的Url跳转分页与Ajax分页切换的效果，但这种分页方法每次都需要从服务器端重新生成并下载整个页面，对于内容较多、生成时比较耗费服务器资源的页面，建议使用用户控件或PartialView的方法在服务器端生成和下载只需要更新的内容，不建议使用局部加载分页方式。

序号 文章标题 作者 文章来源
16 延安市吴起县境内古城投资三亿欲变陕北名镇 杨涛 吴起政府网
17 延安市居住证首发仪式在吴起举行 Webdiyer 吴起热线
18 黄土高原上的绿色丰碑——吴起县生态环境建设巡礼 杨涛 吴起热线
19 吴起的追梦之旅——吴起县争创“全国百强县”纪实 杨涛 吴起热线
20 延安铁边城入选第七批全国重点文保单位 杨涛 吴起热线
跳转到第页
首页 上页 1 2 3 4 5 6 7 8 9 10 ... 下页 尾页 

View：

@model PagedList<article>
<div id="articles">
@Html.Partial("_ArticleTable", Model)
        <div style="width:100%;overflow:auto;">
        <div style="float:right">跳转到第<select id="pib"></select>页</div>
        @Ajax.Pager(Model).Options(o => o.SetId("mypager").SetPageIndexParameterName("id").SetPageIndexBoxId("pib").SetPagerItemTemplate("{0}&nbsp;")).AjaxOptions(a => a.SetUpdateTargetId("articles").EnablePartialLoading())
    </div>
</div>
@section Scripts{@{Html.RegisterMvcPagerScriptResource();}}

_ArticleTable.cshtml:

@model PagedList<Article>
<table class="table table-bordered table-striped">
    <tr>
        <th class="nowrap">序号</th>
        <th>
            @Html.DisplayNameFor(model => model.Title)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.PubDate)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Author)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Source)
        </th>
    </tr>
    @{ int i = 0;}
    @foreach (var item in Model)
    {
        <tr>
            <td>@(Model.StartItemIndex + i++)</td>
            <td>
                @Html.DisplayFor(modelItem => item.Title)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.PubDate)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Author)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Source)
            </td>
        </tr>
    }
</table>

Model:

    public class Article
    {
        [Display(Name="文章编号")]
        public int ID { get; set; }
        [Display(Name="文章标题")]
        [MaxLength(200)]
        public string Title { get; set; }
        [Display(Name = "文章内容")]
        public string Content { get; set; }
        [Display(Name = "发布日期")]
        public DateTime PubDate { get; set; }
        [Display(Name = "作者")]
        [MaxLength(20)]
        public string Author { get; set; }
        [Display(Name = "文章来源")]
        [MaxLength(20)]
        public string Source { get; set; }
    }

Controller:

        
        public ActionResult AjaxPartialLoading(int id = 1)
        {
            using (var db = new DataContext())
            {
                return View(db.Articles.OrderByDescending(a => a.PubDate).ToPagedList(id, 5));
            }
        }