使用MVCPager进行博客园首页列表数据的分页显示功能

简介: 在前一篇博客中使用正则表达式抓取博客园列表数据,我通过正则表达式抓取了博客园的部分数据作为测试数据,现在测试数据也有了,就应该进行数据的分页显示了。 但是如何分页这倒是让我犹豫了好几分钟,是自己写javascript来自定义分页显示,还是通过现成的控件来进行分页,通过自定义分页可以完全的对分页进行控制,但是会很耗费时间,这对于js功能很差的我就是个难题,但是为了尽快的能实现这个分页功能,我依然采用了分页控件进行分页,如果以后有机会我再手动写一个分页js来进行分页。

在前一篇博客中使用正则表达式抓取博客园列表数据,我通过正则表达式抓取了博客园的部分数据作为测试数据,现在测试数据也有了,就应该进行数据的分页显示了。

但是如何分页这倒是让我犹豫了好几分钟,是自己写javascript来自定义分页显示,还是通过现成的控件来进行分页,通过自定义分页可以完全的对分页进行控制,但是会很耗费时间,这对于js功能很差的我就是个难题,但是为了尽快的能实现这个分页功能,我依然采用了分页控件进行分页,如果以后有机会我再手动写一个分页js来进行分页。

因为我使用的是MVC 3 Razor引擎,所以我找了一个我在web form时代使用的aspNetPager同一个作者的MvcPager控件。不得不说这个控件确实挺强大的,我也慢慢的探索着在我的Mvc系统中实现了分页功能。

作为MvcPager的使用者,虽然作者的官网有很多实例,但是那都是单独的实例,不具有完整性,所以我来介绍一下我在系统中使用MvcPager的过程,如果有什么说的不对的地方,还请大家指点。

首先,我们应该获取MvcPager控件的程序集,但是我们最好不要直接获取程序集,而是要获取MvcPager的源代码,因为我们要对他的源代码进行部分的修改,以更合适的使用它。

下载好了MVcPager源代码以后,我们就先来修改一下那个分页使用的类PagedList。

 1 public class PagedList<T> : List<T>,IPagedList
 2     {
 3         public PagedList(IList<T> items, int pageIndex, int pageSize)//这是IList类型
 4         {
 5             PageSize = pageSize;
 6             TotalItemCount = items.Count;
 7             CurrentPageIndex = pageIndex;
 8             for (int i = StartRecordIndex - 1; i < EndRecordIndex; i++)
 9             {
10                 Add(items[i]);
11             }
12         }
13 
14         public PagedList(IEnumerable<T> items, int pageIndex, int pageSize, int totalItemCount)//这是IEnumerable类型,
//我们使用C#语言,所以要多添加这么一个类型
15 { 16 AddRange(items); 17 TotalItemCount = totalItemCount; 18 CurrentPageIndex = pageIndex; 19 PageSize = pageSize; 20 } 21 22 public int CurrentPageIndex { get; set; } 23 public int PageSize { get; set; } 24 public int TotalItemCount { get; set; } 25 public int TotalPageCount { get { return (int)Math.Ceiling(TotalItemCount / (double)PageSize); } } 26 public int StartRecordIndex { get { return (CurrentPageIndex - 1) * PageSize + 1; } } 27 public int EndRecordIndex { get { return TotalItemCount > CurrentPageIndex * PageSize ? CurrentPageIndex * PageSize : TotalItemCount; } } 28 }

2.在我们修改了PagedList类以后,还要修改哪些地方呢?还有一个扩展方法,用来扩展PagedList

 1 public static class PageLinqExtensions
 2     {
 3         public static PagedList<T> ToPagedList<T>
 4             (
 5                 this IEnumerable<T> allItems,
 6                 int pageIndex,
 7                 int pageSize
 8             )
 9         {
10             if (pageIndex < 1)
11                 pageIndex = 1;
12             var itemIndex = (pageIndex-1) * pageSize;
13             var pageOfItems = allItems.Skip(itemIndex).Take(pageSize);
14             var totalItemCount = allItems.Count();
15             return new PagedList<T>(pageOfItems, pageIndex, pageSize, totalItemCount);
16         }
17     }

3.在我们修改了扩展方法以后,就可以在IEnumerable以后进行.ToPagedList<T>转换成PagedList 分页类

将获取到的分页列表数据转换为PagedList类型以后,我们就要使用MvcPager来进行分页显示

我们定义了博客列表显示Controller,将从数据库中获取到的列表数据通过MvcPager分页

 1 @{
 2     Layout = null;
 3 }
 4 @using Webdiyer.WebControls.Mvc
 5 @model PagedList<Models.BlogInfo>
 6 @{
 7     foreach (Models.BlogInfo blogInfo in Model)
 8     {
 9     <div class="post_item">
10         <div class="digg">
11             <div class="diggit">
12                 <span class="diggnum">0</span>
13             </div>
14             <div class="clear">
15             </div>
16             <div class="digg_tip">
17             </div>
18         </div>
19         <div class="post_item_body">
20             <h3>
21                 <a href="@blogInfo.LinkUrl" target="_blank" class="titlelink">@blogInfo.Title</a>
22             </h3>
23             <p class="post_iteme_summary">
24                 @blogInfo.BlogContent ...
25             </p>
26             <div class="post_item_foot">
27                 <a class="lightblue" href="@blogInfo.LinkUrl">@blogInfo.AuthorID</a>
28                 @blogInfo.PublishTime.ToString()
29                 <span class="article_comment"><a class="gray" title="">评论(0)</a> </span><span class="article_view">
30                     <a class="gray">阅读(1)</a> </span>
31             </div>
32         </div>
33         <div class="clear">
34         </div>
35     </div>
36     }
37     
38     @Html.AjaxPager(Model, new PagerOptions()
39        {
40            PageIndexParameterName = "id",
41            ShowDisabledPagerItems = false,
42            ShowPageIndexBox = true
43        },
44     new AjaxOptions() { UpdateTargetId = "post_list", OnBegin = "function(){alert('Ajax OnBegin 事件被引发');}", OnComplete = "AjaxStop" })
45 }

5.Html.AjaxPager()方法就是MvcPager的一个扩展方法,扩展了HtmlHelper。对于其中的几个参数我就不介绍了,也很容易理解。

6.有图有证据 下面我来展示一下我的系统分页显示

 

3.使用MVCPager进行分页显示,更详细的教程信息还是在官网,里面有这个控件可以实现的各种方法。我在这里只是介绍了一下我的分页设计

顺便说一句,我们程序员最忌讳的就是手高眼低,只有我们亲手敲进去了以后,才能知道会遇到什么问题?千万不要眼高手低!

索引:

使用正则表达式抓取博客园列表数据 (2012-12-15 22:16)            
Lucene.net 原理介绍以及使用方法 (2012-12-13 23:49)            
Asp.net MVC 使用Autofac的简单使用 IOC (2012-12-12 13:16)            
Asp.net MVC 仿照博客园的简单网站首页 列表设计 (2012-12-11 22:21)            
为什么要从Web form过渡到MVC中 (2012-12-09 22:43)            
Asp.net MVC3 企业网站系统高仿博客园 首页左侧列表页面 实现效果 (2012-12-08 19:11)            
Asp.net MVC 3 开发企业网站系统仿照博客园部分功能--总体设计 (2012-12-05 23:41)            
Asp.net MVC 3 开发简单的企业系统开篇--数据库 (2012-12-03 21:03)            
Asp.net MVC 3 开发一个简单的企业网站系统 (2012-12-02 21:09)
我又回来了,回到了技术最前线,
相关文章
|
4月前
|
前端开发 JavaScript 数据库
分页,快捷链接表单,分页表单,常用软件开发之分页,快捷链接分页表单添加显示,可以做的分页统计,一个简单的添加页面,数据条理清晰呈现如何设计,如何修改成自己想要的,要会编写接口文档,一边写接口
分页,快捷链接表单,分页表单,常用软件开发之分页,快捷链接分页表单添加显示,可以做的分页统计,一个简单的添加页面,数据条理清晰呈现如何设计,如何修改成自己想要的,要会编写接口文档,一边写接口
|
JavaScript 测试技术
Easyui datagrid 修改分页组件的分页提示信息为中文
Easyui datagrid 修改分页组件的分页提示信息为中文
93 0
|
JavaScript 测试技术
Easyui 实现点击不同树节点打开不同tab页展示不同datagrid表数据设计
Easyui 实现点击不同树节点打开不同tab页展示不同datagrid表数据设计
113 0
|
前端开发
Element ui 表格(Table)组件中前端实现数据分页和模糊查询
Element ui 表格(Table)组件中前端实现数据分页和模糊查询
574 0
Element ui 表格(Table)组件中前端实现数据分页和模糊查询
|
JavaScript 搜索推荐 前端开发
【自然框架】QuickPager分页控件,新增一种分页方式——伪URL分页(Postback版)
适用场景   先说一下伪URL分页的适用场景。在网站的网页里实现查询功能,如果查询条件比较少的话,还比较好办,把查询条件放到URL里面传递即可。但是如果查询条件过多,就会照成URL的长度过长。既不好看,编写起来也很麻烦。
1162 0
|
SQL
分页解决方案 之 QuickPager的使用方法(PostBack分页、自定义获取数据)
        适用范围:网站后台管理、OA、CRM、CMS等,从关系型数据库里提取数据,或者XML等获取数据,不愿意使用Pager_SQL、DataAccessLibrary的情况。       优点:可以使用自己喜欢的方式获取数据,不仅仅限于关系型数据库,其他的也都可以。
859 0
|
SQL 数据库
分页解决方案 之 QuickPager的使用方法(PostBack分页、自动获取数据)
      适用范围:网站后台管理、OA、CRM、CMS等,从关系型数据库里提取数据,愿意使用Pager_SQL、DataAccessLibrary的情况。       最佳数据库:MS SQL。
814 0
|
前端开发 JavaScript 索引
【开源】QuickPager ASP.NET2.0分页控件V2.0.0.7 增加了一个js函数的分页方式。
     昨天在csdn上看到一个人提出来了一种分页的需求,大致是分页控件只负责绘制总页数、上一页、下一页等信息,然后在用户翻页的时候可以触发一个js函数,然后自己实现这个js函数。并不需要提交表单,他想用ajax的方式来获取数据,但是又不想使用微软的ajax。
898 0
【自然框架】QuickPager分页控件的单独的源码 V2.0.4.2。
   QuickPager的源码分离出来之后由两个项目组成,一个是QuickPager、另一个是QuickPagerSQL。分页控件的演示也独立了出来。   如图1 。    QuickPager是分页控件的项目,负责UI的绘制,即上一页、下一页、页号导航等的绘制,还有事件的触发,控件绑定等功能。
889 0