使用局部加载(Partial Loading)功能的Ajax分页模式开发简单但效率较低,页面内容较多时不建议使用。
![Fork me on GitHub](/images/redforkme.png)
- Url路由分页
- Ajax分页
- Ajax搜索分页
- 外观样式
- 分页数据相关
- Javascrip API
- AjaxPager 类
- AjaxHelper.Pager 扩展方法
- HtmlPager 类
- HtmlHelper.Pager 扩展方法
- IPagedList 接口
- IPagedList<T> 接口
- MvcAjaxOptions 类
- MvcAjaxOptionsBuilder 类
- PagedList<T> 类
- PageLinqExtensions 类
-
PagerOptions 类
- ActionName属性
- AlwaysShowFirstLastPageNumber属性
- AutoHide属性
- ContainerTagName属性
- ControllerName属性
- CssClass属性
- CurrentPageNumberFormatString属性
- CurrentPagerItemTemplate属性
- DisabledPagerItemTemplate属性
- FirstPageRouteName属性
- FirstPageText属性
- GoToButtonId属性
- HidePagerItems属性
- HorizontalAlign属性
- HtmlAttributes属性
- Id属性
- InvalidPageIndexErrorMessage属性
- LastPageText属性
- MaximumPageIndexItems属性
- MaximumPageNumber属性
- MorePagerItemTemplate属性
- MorePageText属性
- NavigationPagerItemsPosition属性
- NavigationPagerItemTemplate属性
- NextPageText属性
- NumericPagerItemCount属性
- NumericPagerItemTemplate属性
- OnPageIndexError属性
- PageIndexBoxId属性
- PageIndexOutOfRangeErrorMessage属性
- PageIndexParameterName属性
- PageNumberFormatString属性
- PagerItemTemplate属性
- PrevPageText属性
- RouteName属性
- RouteValues属性
- ShowDisabledPagerItems属性
- ShowFirstLast属性
- ShowMorePagerItems属性
- ShowNumericPagerItems属性
- ShowPrevNext属性
- PagerItemsPosition 枚举
- PagerOptionsBuilder 类
- ScriptResourceExtensions 类
- Javascript API
- AjaxPager.cs
- AjaxPagerTest.cs
- DataLoaderBuilder.cs
- DisplayNameExtensions.cs
- HtmlPager.cs
- HtmlPagerTest.cs
- IPagedList.cs
- MvcAjaxOptions.cs
- MvcAjaxOptionsBuilder.cs
- MvcPager.js
- PagedList.cs
- PagedListTest.cs
- PageLinqExtensions.cs
- PagerBuilder.cs
- PagerExtensions.cs
- PagerItem.cs
- PagerItemsPosition.cs
- PagerOptions.cs
- PagerOptionsBuilder.cs
- ScriptResourceExtensions.cs
- TestHelper.cs
MvcPager 分页示例 — 多个AjaxPager(局部加载)
本示例演示同一个页面上使用多个MvcPager为不同的数据实现Ajax分页(使用局部加载(Partial Loading)功能)。
序号 | 文章标题 | 作者 | 文章来源 |
---|---|---|---|
21 | 吴起:现代农业蓬勃发展 | Webdiyer | 吴起热线 |
22 | 吴起打造“绿色革命”圣地 | Webdiyer | 吴起热线 |
23 | 吴华路二级公路施工期间实行交通管制的通告 | Webdiyer | 吴起热线 |
24 | 吴起县:加快发展旅游业 打造经济发展新引擎 | 杨涛 | 吴起政府网 |
25 | 吴起将举办四国男篮赛 国奥男篮“牵手”残疾儿童 | Webdiyer | 吴起热线 |
View:
@model CompositeArticles <div id="articles1"> @{Html.RenderPartial("_ArticleTable", Model.ArticleList1);} @Ajax.Pager(Model.ArticleList1).Options(o=>o.SetPagerItemTemplate("{0} ")).AjaxOptions(a => a.SetUpdateTargetId("articles1").EnablePartialLoading()) </div> <hr /> <div id="articles2"> @{Html.RenderPartial("_ArticleTable",Model.ArticleList2);} @Ajax.Pager(Model.ArticleList2, new PagerOptions { PageIndexParameterName = "id" ,PagerItemTemplate = "{0} "}, new MvcAjaxOptions { UpdateTargetId = "articles2", EnablePartialLoading = true }) </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 MultipleAjaxPagers(int id = 1,int pageIndex=1) { using (var db = new DataContext()) { var pageSize = 5; var model = new CompositeArticles(); model.ArticleList1 = db.Articles.OrderByDescending(a => a.PubDate).ToPagedList(pageIndex, pageSize); model.ArticleList2 = db.Articles.OrderByDescending(a => a.PubDate).ToPagedList(id, pageSize); return View(model); } }