MvcPager 概述 MvcPager 分页示例 — 标准Ajax分页 对SEO进行优化的ajax分页 (支持asp.net mvc)

Posted 2020-08-21 WebEnh

该示例演示如何使用MvcPager最基本的Ajax分页模式。

使用AjaxHelper的Pager扩展方法来实现Ajax分页，使用Ajax分页模式时，必须至少指定MvcAjaxOptions的UpdateTargetId属性，该属性值即是分页后要通过Ajax来更新的 DOM 元素的 ID。

Ajax.Pager()方法返回AjaxPager对象，您可以通过Ajax.Pager()方法的重载来传递PagerOptions和MvcAjaxOptions参数，也可以通过新的AjaxPager的Options()和AjaxOptions()方法来设置参数值。

http://www.webdiyer.com/mvcpager/demos/ajaxpaging/#id=1

 

View：

@model PagedList<article>
<div id="articles">
    @html.Partial("_ArticleList",Model)
</div>
@section scripts
{
    @{Html.RegisterMvcPagerScriptResource();}
}

_ArticleList.cshtml:

@model PagedList<article>
           
<div class="text-center">
    @Ajax.Pager(Model, new PagerOptions { PageIndexParameterName = "id", 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>" }).AjaxOptions(a => a.SetUpdateTargetId("articles"))
</div>
@{ Html.RenderPartial("_ArticleTable"); }
<div class="text-center">
    @Ajax.Pager(Model, new PagerOptions { PageIndexParameterName = "id", 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>" }).AjaxOptions(a => a.SetUpdateTargetId("articles"))
</div>

_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 AjaxPaging(int id = 1)
        {
            using (var db = new DataContext())
            {
                var model = db.Articles.OrderByDescending(a => a.PubDate).ToPagedList(id, 5);
                if (Request.IsAjaxRequest())
                    return PartialView("_ArticleList", model);
                return View(model);
            }
        }

MvcPager 下载

Version 3.0.1:

• 源代码及示例项目 (zip)
• 源代码及示例项目 (tar.gz)
• Nuget 包

 

MvcPager分页控件是在ASP.NET MVC Web应用程序中实现分页功能的一系列扩展方法，该分页控件的最初的实现方法借鉴了网上流行的部分源代码， 尤其是ScottGu的PagedList<T>类和相关方法，经过站长不断完善和改进后推出的比较成熟而且功能强大的ASP.NET MVC分页解决方案。

MvcPager主要功能：

1. 实现最基本的url route分页功能；
2. 支持手工输入或选择页索引并对输入的页索引进行有效性验证；
3. 支持使用jQuery实现Ajax分页，生成的Html代码更精简；
4. Ajax分页模式下支持在分页过程中通过GET或POST方法提交表单数据，实现查询功能；
5. Ajax分页模式下支持浏览器历史记录功能（暂不支持IE7及早期版本和Opera浏览器）；
6. Ajax分页模式下，若客户端浏览器不支持或禁用javascript功能时优雅降级为普通分页
7. 搜索引擎友好，无论是普通分页还是Ajax分页，搜索引擎都可以直接搜索到所有页面。
8. 支持最新的ASP.NET MVC 4.0 或更高版本；
9. 支持IE、Firefox、Opera、Chrome及Safari等常用浏览器；
10. 支持调用客户端Javascript API跳转到指定页（3.0版新增）；
11. 多语言支持（简体中文、繁体中文和英文）（3.0版新增）；

MvcPager 3.0 更新说明

• 修正了路由定义中对页索引参数使用约束而导致无法为页索引文本或下拉框生成跳链接的bug；
• 修正了Ajax分页模式下，如果首次加载时数据只有一页且未设置AutoHide=false，则控件不呈现任何有效html标签，导致MvcPager初始化失败以及后续Ajax分页功能失效的bug；
• 修正了Ajax分页模式下，同一PartialView中包含两个或更多MvcPager且PagerOptions.PageIndexParameterName属性值相同的情况下多次发送相同http请求的问题；
• MvcAjaxOptions新增EnableHistorySupport属性，用于Ajax分页时启用或禁用浏览器历史记录功能，默认值为true；
• MvcAjaxOptions新增AllowCache属性，用于Ajax分页时是否允许缓存（默认值为true，禁用缓存仅在GET提交时有效，详情参见jQuery文档）；
• PagerOptions新增DisabledPagerItemTemplate属性，用于设置被禁用的分页元素的html模板；
• PagerOptions新增OnPageIndexError属性，用于设置页索引出错时要调用的Javascript函数，若未设置则默认用alert弹出错误信息；
• PagerOptions新增HidePagerItems属性，用于设置是否隐藏所有分页元素，开发者可通过客户端Javascript API自己创建分页元素并用goToPage()方法实现分页跳转；
• PagerOptions新增ActionName、ControllerName、RouteName、RouteValues和HtmlAttributes属性，即将原HtmlHelper.Pager及AjaxHelper.Pager扩展方法中的actionName，controllerName，routeName，routeValues及htmlAttributes参数并入PagerOptions属性中，相应调整了HtmlHelper.Pager和AjaxHelper.Pager扩展方法重载；
• PagerOptions的属性PagerItemWrapperFormatString，NumericPagerItemWrapperFormatString，CurrentPagerItemWrapperFormatString，NavigationPagerItemWrapperFormatString，MorePagerItemWrapperFormatString，分别改名为PagerItemTemplate，NumericPagerItemTemplate，CurrentPagerItemTemplate，NavigationPagerItemTemplate，MorePagerItemTemplate
• PagerOptions.MaxPageIndex属性更名为PagerOptions.MaximumPageNumber；
• 去除PagerOptions的属性PageIndexBoxWrapperFormatString，GoToPageSectionWrapperFormatString；
• 去除PagerOptions中页索引框的相关属性ShowPageIndexBox、ShowGoButton、PageIndexBoxType和GoButtonText，新增PageIndexBoxId和GoToButtonId属性，用于指定页索引框和跳转按钮；
• 去除PagerOptions.PagerItemsSeperator属性，分页按钮之间若需使用空格分隔可以用PagerOptions.PagerItemTemplate="&nbsp;{0}&nbsp;"模板来实现；
• PagedList.StartRecordIndex 重命名为 PagedList.StartItemIndex;
• PagedList.EndRecordIndex 重命名为 PagedList.EndItemIndex;
• 被禁用的分页按钮不再使用超链接（<a disabled="disabled"></a>）；
• HtmlHelper.Pager新增Options方法，AjaxHelper.Pager新增Options和AjaxOptions方法；
• 新增HtmlHelper.LoadMvcPagerScript方法，用于动态加载MvcPager的客户端脚本库（用该方法注册的脚本必须包含在<script>与</script>标签内），支持通过Ajax加载和初始化MvcPager；
• 对MvcPager客户端jQuery插件进行重构，添加新功能并做了大量代码优化和完善；
• 同时支持简体中文、繁体中文和英文等多种语言，不再单独发布中文版和英文版；
• 新增客户端Javascript API，用于获取分页控件属性及跳转到指定页；
• 添加更多示例项目，覆盖MvcPager所有功能；
• 重新制作的全新的在线帮助文档；
• 添加更多服务器端及客户端Javascript单元测试；
• 仅支持ASP.NET MVC 4.0及更高版本；

升级说明：

从MvcPager 2.0升级到3.0时，需注意以下事项：

1. PagerOptions的属性PagerItemWrapperFormatString，NumericPagerItemWrapperFormatString，CurrentPagerItemWrapperFormatString，NavigationPagerItemWrapperFormatString，MorePagerItemWrapperFormatString，分别改名为PagerItemTemplate，NumericPagerItemTemplate，CurrentPagerItemTemplate，NavigationPagerItemTemplate，MorePagerItemTemplate；
2. PagerOptions.MaxPageIndex属性改名为PagerOptions.MaximumPageNumber；
3. Pager()方法中原actionName、controllerName、routeName、routeValues和htmlAttributes等参数被并入PagerOptions属性中，设置时请设置PagerOptions属性；
4. Html.Pager()扩展方法重载从原来十个减为四个，升级时请注意使用合适的重载方法；
5. Ajax.Pager()扩展方法重载从原来十个减为四个，升级时请注意使用合适的重载方法；
6. PagerOptions中页索引框的相关属性ShowPageIndexBox、ShowGoButton、PageIndexBoxType和GoButtonText已被去除，启用页索引框时请使用PagerOptions.PageIndexBoxId和PagerOptions.GoToButtonId属性；
7. 被禁用的分页按钮不再使用超链接，若需使用，请通过新增的PagerOptions.DisabledPagerItemTemplate属性来设置；
8. PagerOptions.MaxPageIndex属性更名为PagerOptions.MaximumPageNumber；
9. PagerOptions.PagerItemsSeperator属性已去除，分页按钮之间若需使用空格分隔可以用PagerOptions.PagerItemTemplate="&nbsp;{0}&nbsp;"模板来实现；
10. 支持多语言，默认为英文，若需使用简体中文版，请在网站根目录的web.config中system.web配置节下添加如下设置：globalization culture="zh-CN" uiCulture="zh-CN"

运行最低需求：

1. jQuery 1.7及以上版本；（启用页索引输入或选择框、调用Javascript API或使用Ajax分页模式时必需）
2. ASP.NET MVC 4.0及以上版本；

3.0版已知问题：

1. Ajax分页模式下，如果用于返回数据的PartialView中包含多个MvcPager且PagerOptions.PageIndexParameterName属性值相同时，只有第一个MvcPager会发起Ajax请求且触发Ajax事件，其后的MvcPager将不再发起请求，因此OnSuccess、OnComplete和OnFailure等ajax事件不会被触发，对应的页索引输入或选择框在分页后也无法绑定事件及填充页索引；
2. Ajax分页模式下浏览器历史记录支持功能暂不支持IE7以下及Opera浏览器；
3. Url中值为空的参数在分页后将被从Url中去除；如：/articles/show/2?cls=news&type= 在分页后type参数将丢失，Url变为：/articles/show/3?cls=news
4. 为AjaxForm使用Ajax分页查询功能时，web.config中的UnobtrusiveJavaScriptEnabled必须设为true（默认），否则会导致分页时数据被加载两次；