Mvc分页组件MvcSimplePager代码重构

Mvc分页组件MvcSimplePager代码重构

Mvc分页组件MvcSimplePager代码重构
1.1 Intro
1.2 MvcSimplePager 代码优化
1.3 MvcSimplePager 使用
1.4 End

Intro

MvcSimplePager 是为解决分页的而做的一个通用、扩展性良好的轻量级分页扩展,可以自定义分页时调用的方法,自定义分页所用的样式,样式与代码分离,维护方便。

网上有许多分页都是查询所有数据再从中查询某一页的数据,但是个人感觉数据很少时还可以,如果数据比较多这样根本是不可行的,需要哪一页数据再查询哪一页的数据才是正确的做法,才能一定程度上提高查询的效率。

在网上看了几个分页组件,感觉分页的 html 代码和 CSharp 代码都有不同程度上的耦合,都不是特别满意, 于是自己封装了一个分页组件,基本可以实现 html 代码与 CSharp 代码的完全分离。

MvcSimplePager 代码优化

MvcSimplePager 是这样开始的 http://www.cnblogs.com/weihanli/p/5913797.html

从开始的把分页的样式和翻页事件耦合在代码中到把翻页事件分离出来再到最后把分页样式也分离开来,MvcSimplePager 才算开始了。

之后是BUG修改和思考代码的优化和重构

在开始在视图上展示数据 使用 foreach遍历数据时是需要 Model.Data 才能够遍历的,之后优化成为只需要Model就可以了,像下面这样:

@foreach(var item in Model)

V1.0的时候是没有 GroupSize 的,为了使用起来更方便加入了一个 GroupSize ,帮助更好的实现更优美的分页,
刚加的时候不知道当前为什么加了一个验证 GroupSize 不能大于8的限制【捂脸…】,上个版本已经去掉

总之,希望这个分页组件能够解决大家的分页问题,也希望能够它越来越好用,使用起来越来越简单,编码越来越优美。

下面介绍一下具体使用

MvcSimplePager 使用

  1. 引用 MvcSimplePager 包

    在 nuget 包管理器中搜索 “MvcSimplePager”

    《Mvc分页组件MvcSimplePager代码重构》 mvcSimplePager

  2. 自定义 分页分部视图

    创建自己项目的分页分布视图,放在 Views目录下的 Shared 目录下

    《Mvc分页组件MvcSimplePager代码重构》 pager_location

    可参考 demo 项目中的 两个示例修改为自己想用的Pager:

  3. 后台代码中设置页面数据

    控制器代码只需要三行代码:

    • 从数据库或自己封装的服务层获取所需数据
    • 根据查询的数据生成 IPagerListModel<T> 数据
    • 将 IPagerListModel<T> 数据传递到 view

    《Mvc分页组件MvcSimplePager代码重构》 pagerInCode.png

  4. 设置所需设置分页的页面

    • 在页面上展示数据

      MvcSimplePager 已经对Model进行了处理,在页面上展示数据,可以直接 foreach Model

      《Mvc分页组件MvcSimplePager代码重构》 show-data

    • 分页

      MvcSimplePager 定义了为 HtmlHelper定义了一个 Pager的扩展方法,用法如下:

      《Mvc分页组件MvcSimplePager代码重构》 pagerInView2.png

    * 第一个参数是 Model 里封装的一个分页信息
    * 第二个参数是分页事件,默认是超链接,这里我是调用的一个进行分页的 js 方法
    * 第三个参数是 分页分部视图的名称
    * 第四个参数是 分页信息展示选项,现在有两种,总是展示和需要翻页时才展示

End

现在已经将这个项目 MvcSimplePager 打包到 Nuget http://www.nuget.org/packages/MvcSimplePager/,你可以在VS中 nuget 包管理器中搜索 MvcSimplePager 进行使用 。

自定义 MvcSimplePager 项目和示例代码:https://github.com/WeihanLi/MvcSimplePager ,你可以根据需要再进行自己的定制。

如果 MvcSimplePager 还有什么不能满足你的需要,欢迎与我联系,期待您的建议和反馈 weihanli@outlook.com

    原文作者:天天向上卡索
    原文地址: https://www.jianshu.com/p/41922d11f20c
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞