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

该示例演示如何使用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
@Html.Partial("_ArticleList",Model)
@section scripts { @{Html.RegisterMvcPagerScriptResource();} } _ArticleList.cshtml:@model PagedList
@Ajax.Pager(Model, new PagerOptions { PageIndexParameterName = "id", ContainerTagName = "ul", CssClass = "pagination", CurrentPagerItemTemplate = "
  • {0}
  • ", DisabledPagerItemTemplate = "
  • {0}
  • ", PagerItemTemplate = "
  • {0}
  • " }).AjaxOptions(a => a.SetUpdateTargetId("articles"))
    @{ Html.RenderPartial("_ArticleTable"); }
    @Ajax.Pager(Model, new PagerOptions { PageIndexParameterName = "id", ContainerTagName = "ul", CssClass = "pagination", CurrentPagerItemTemplate = "
  • {0}
  • ", DisabledPagerItemTemplate = "
  • {0}
  • ", PagerItemTemplate = "
  • {0}
  • " }).AjaxOptions(a => a.SetUpdateTargetId("articles"))
    _ArticleTable.cshtml:@model PagedList
    @{ int i = 0;} @foreach (var item in Model) { }
    序号 @Html.DisplayNameFor(model => model.Title) @Html.DisplayNameFor(model => model.PubDate) @Html.DisplayNameFor(model => model.Author) @Html.DisplayNameFor(model => model.Source)
    @(Model.StartItemIndex + i++) @Html.DisplayFor(modelItem => item.Title) @Html.DisplayFor(modelItem => item.PubDate) @Html.DisplayFor(modelItem => item.Author) @Html.DisplayFor(modelItem => item.Source)
    Model: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:
  • Nuget 包
  •  MvcPager分页控件是在ASP.NET MVC Web应用程序中实现分页功能的一系列扩展方法,该分页控件的最初的实现方法借鉴了网上流行的部分源代码, 尤其是ScottGu的PagedList类和相关方法,经过站长不断完善和改进后推出的比较成熟而且功能强大的ASP.NET MVC分页解决方案。MvcPager主要功能:
  • 实现最基本的url route分页功能;
  • 支持手工输入或选择页索引并对输入的页索引进行有效性验证;
  • 支持使用jQuery实现Ajax分页,生成的Html代码更精简;
  • Ajax分页模式下支持在分页过程中通过GET或POST方法提交表单数据,实现查询功能;
  • Ajax分页模式下支持浏览器历史记录功能(暂不支持IE7及早期版本和Opera浏览器);
  • Ajax分页模式下,若客户端浏览器不支持或禁用Javascript功能时优雅降级为普通分页
  • 搜索引擎友好,无论是普通分页还是Ajax分页,搜索引擎都可以直接搜索到所有页面。
  • 支持最新的ASP.NET MVC 4.0 或更高版本;
  • 支持IE、Firefox、Opera、Chrome及Safari等常用浏览器;
  • 支持调用客户端Javascript API跳转到指定页(3.0版新增);
  • 多语言支持(简体中文、繁体中文和英文)(3.0版新增);
  • MvcPager 3.0 更新说明
  • 修正了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=" {0} "模板来实现;
  • PagedList.StartRecordIndex 重命名为 PagedList.StartItemIndex;
  • PagedList.EndRecordIndex 重命名为 PagedList.EndItemIndex;
  • 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时,需注意以下事项:
  • PagerOptions的属性PagerItemWrapperFormatString,NumericPagerItemWrapperFormatString,CurrentPagerItemWrapperFormatString,NavigationPagerItemWrapperFormatString,MorePagerItemWrapperFormatString,分别改名为PagerItemTemplate,NumericPagerItemTemplate,CurrentPagerItemTemplate,NavigationPagerItemTemplate,MorePagerItemTemplate;
  • PagerOptions.MaxPageIndex属性改名为PagerOptions.MaximumPageNumber;
  • Pager()方法中原actionName、controllerName、routeName、routeValues和htmlAttributes等参数被并入PagerOptions属性中,设置时请设置PagerOptions属性;
  • Html.Pager()扩展方法重载从原来十个减为四个,升级时请注意使用合适的重载方法;
  • Ajax.Pager()扩展方法重载从原来十个减为四个,升级时请注意使用合适的重载方法;
  • PagerOptions中页索引框的相关属性ShowPageIndexBox、ShowGoButton、PageIndexBoxType和GoButtonText已被去除,启用页索引框时请使用PagerOptions.PageIndexBoxId和PagerOptions.GoToButtonId属性;
  • PagerOptions.MaxPageIndex属性更名为PagerOptions.MaximumPageNumber;
  • PagerOptions.PagerItemsSeperator属性已去除,分页按钮之间若需使用空格分隔可以用PagerOptions.PagerItemTemplate="&nbsp;{0}&nbsp;"模板来实现;
  • 支持多语言,默认为英文,若需使用简体中文版,请在网站根目录的web.config中system.web配置节下添加如下设置:globalization culture="zh-CN" uiCulture="zh-CN"
  • 运行最低需求:
  • jQuery 1.7及以上版本;(启用页索引输入或选择框、调用Javascript API或使用Ajax分页模式时必需)
  • ASP.NET MVC 4.0及以上版本;
  • 3.0版已知问题:
  • Ajax分页模式下,如果用于返回数据的PartialView中包含多个MvcPager且PagerOptions.PageIndexParameterName属性值相同时,只有第一个MvcPager会发起Ajax请求且触发Ajax事件,其后的MvcPager将不再发起请求,因此OnSuccess、OnComplete和OnFailure等ajax事件不会被触发,对应的页索引输入或选择框在分页后也无法绑定事件及填充页索引;
  • Ajax分页模式下浏览器历史记录支持功能暂不支持IE7以下及Opera浏览器;
  • Url中值为空的参数在分页后将被从Url中去除;如:/articles/show/2?cls=news&type= 在分页后type参数将丢失,Url变为:/articles/show/3?cls=news
  • 为AjaxForm使用Ajax分页查询功能时,web.config中的UnobtrusiveJavaScriptEnabled必须设为true(默认),否则会导致分页时数据被加载两次;
  • 相关内容推荐