MVC学习笔记八:WebGrid控件的高级使用「建议收藏」

MVC学习笔记八:WebGrid控件的高级使用「建议收藏」WebGrid控件的高级使用在笔记三中记录了WebGrid的简单使用,但实际工作中并不能满足开发要求,比如:考虑到性能,要求服务器端分页,而不是查出所有数据来进行简单的客户端页面分页;要在排序时,给列标题显示不同图像等等,都不是直接就能满足的,这里记录下对WebGrid进行的较高层次的使用。一.服务器端分页处理在演示服务端分页之前,先做一些简单的准备工作:

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

WebGrid控件的高级使用

在笔记三中记录了WebGrid的简单使用,但实际工作中并不能满足开发要求,比如:考虑到性能,要求服务器端分页,而不是查出所有数据来进行简单的客户端页面分页;要在排序时,给列标题显示不同图像等等,都不是直接就能满足的,这里记录下对WebGrid进行的较高层次的使用。

一.服务器端分页处理

在演示服务端分页之前,先做一些简单的准备工作:

1.新建一个空的MVC 3项目,添加一个名为“GridController”的控制器;

2.在Model中增加一个“Movie”类;
代码如下:
   public class Movie
    {
        //主键
        public int Id { get; set; }

        //电影名称
        public string MovieName { get; set; }

        //票价
        public decimal TicketPrice { get; set; }

        //演播厅
        public string ShowAddress { get; set; }

        //上线日期
        public DateTime ShowTime { get; set; }

        //领衔主演
        public string Starring { get; set; }
    }
3.给控制器“GridController”的默认Index方法添加一个基于“Movie”的强类型视图,支架模板选择List;
为方便测试,修改Index方法为:

        public ActionResult Index()
        {
            List<Movie> movies = new List<Movie>()
            {
                new Movie(){ Id=1, MovieName="晚秋", Starring="汤唯", ShowAddress="苏州科文中心", ShowTime=DateTime.Parse("2014-4-10 15:00:00"), TicketPrice=25.5M},
                new Movie(){ Id=2, MovieName="神偷奶爸", Starring="XXX1", ShowAddress="观前街影城", ShowTime=DateTime.Parse("2014-5-1 14:30:00"), TicketPrice=20.5M},
                new Movie(){ Id=3, MovieName="Yes Man", Starring="XXX2", ShowAddress="苏州印象城", ShowTime=DateTime.Parse("2014-5-2 14:25:00"), TicketPrice=21.5M},
                new Movie(){ Id=4, MovieName="里约大冒险", Starring="未知", ShowAddress="苏州石路", ShowTime=DateTime.Parse("2014-5-3 14:40:00"), TicketPrice=22.5M},
                new Movie(){ Id=5, MovieName="疯狂原始人", Starring="未知1", ShowAddress="观前街影城", ShowTime=DateTime.Parse("2014-5-4 14:00:00"), TicketPrice=23.5M},
                new Movie(){ Id=6, MovieName="活着", Starring="葛优、巩俐", ShowAddress="观前街影城", ShowTime=DateTime.Parse("2014-5-5 14:00:00"), TicketPrice=24.5M},
                new Movie(){ Id=7, MovieName="北京遇上西雅图", Starring="汤唯", ShowAddress="观前街影城", ShowTime=DateTime.Parse("2014-5-6 14:00:00"), TicketPrice=26.5M},
                new Movie(){ Id=8, MovieName="人在囧途", Starring="徐峥", ShowAddress="XXX街影城", ShowTime=DateTime.Parse("2014-5-7 14:00:00"), TicketPrice=27.5M},
                new Movie(){ Id=9, MovieName="神探狄仁杰", Starring="未知", ShowAddress="观前街影城", ShowTime=DateTime.Parse("2014-5-8 14:00:00"), TicketPrice=28.5M},
                new Movie(){ Id=10, MovieName="里约大冒险2", Starring="未知", ShowAddress="观前街影城", ShowTime=DateTime.Parse("2014-5-9 14:00:00"), TicketPrice=29.5M},
            };

            return View(movies);
        }
4.为了使WebGrid界面美观一些,再添加一个CSS文件,代码如下:

body {
}
table {  
    border: solid 1px #e8eef4;  
    border-collapse: collapse;  
}  
  
table td {  
    padding: 5px;  
    border: solid 1px #e8eef4;  
    width:100px;  
    text-align:center ;
    background-color:orange;
}  
  
table th {  
    padding: 6px 5px;  
    text-align:center;  
    background-color:#CC99CC;  
    border: solid 1px #e8eef4;  
}  

.rowStyle  
{  
    background-color: #E8E8E8;  
    color: #000;  
}  
  
.gridhead {  
        background-color:yellow;  
    font-weight:bold;  
    text-align:center;  
} 

按照原先的简单做法,修改视图文件代码为:

@model IEnumerable<MvcWebGrid.Models.Movie>
@{
    ViewBag.Title = "我的WebGrid";
}

<h2>我的WebGrid示例</h2>

@{
    var grid = new WebGrid(

        source: Model,
        
        rowsPerPage: 4

        );
        
        
}

@grid.GetHtml(
tableStyle: "table",
headerStyle: "gridhead",
mode:WebGridPagerModes.All,
firstText:"首页",
lastText:"尾页",
previousText:"上一页",
nextText:"下一页",

columns:
grid.Columns(
    grid.Column("Id", "序号"),
    grid.Column("MovieName", "电影名"),
    grid.Column("Starring", "影院地址"),
    grid.Column("TicketPrice", "票价"),
    grid.Column("ShowAddress", "影院地址"),
    grid.Column("ShowTime", "上映日期")
)
)
运行网页,URL后加上:/grid
效果如下:
MVC学习笔记八:WebGrid控件的高级使用「建议收藏」
到此为止,是以前的做法,可以在页面进行分页,也可以排序,但是问题来了:

如果我后台数据量很大,假如有100万条,在每次重新运行该网页时,都会从数据库中查询出100W条数据,上面的做法只不过在客户端页面分页了一下,显示了4条,实际上我后台却作了查询100W条数据的工作量,而我们也许仅仅只要看某一页而已…

所以上面的分页做法肯定是不能满足性能要求的,这就要考虑使用服务端分页。

做法很简单,就是利用WebGrid页(如:第n页)和每页需要显示的行数(如:4行)来取数据:

举个简单的例子:如果我要看第1页,那么我只需要从数据库中查出前1~4条数据即可;要看第2页,只需要从数据库中查出从5~8条数据即可,依此类推,
要看第n页,只要从数据库中查出第(n-1)*4+1~4*n条数据即可。

接下来的问题就是考虑:如何让数据库去执行查询指定行的命令
,其实很简单,不管用的是LINQ to Sql还是其它形式,无非就是
在前台查询指令,获得了WebGrid页和每页需要显示的行数的前提下,将指令转化成查询指定行的SQL

SqlServer查询指定行的SQL大家应该都知道的,如:

SELECT * FROM
(
  SELECT ROW_NUMBER() OVER( ORDER BY 排序的字段 ) AS 序号,表.* FROM 表
) tmp
WHERE tmp.序号 between xxx to xxxx
这里不用管它,只要知道最终是转化成这样的SQL即可。

现在的问题就是:我要在模型绑定时,知道WebGrid页—即用户点击了分页中的哪一页!这个十分简单,可以利用户点击下一页或上一页时,借助模型绑定,将webgrid页以参数形式传给action方法,即本例的Index方法,首先我得添加一个int型的参数:

        public ActionResult Index(int page=1)
        {
           //...
        }

其次,有了这个参数之后,后台就知道用户选了第几页,我后台就可以根据前面的算法,算出要查询第m~n行数据;

最后,后台查出数据之后,返回给页面数据,即Model,得借助webgrid的Bind方法动态绑定数据,由于分页还需要知道数据总行数来确定按钮个数,所以Model里必须要包含一个从后台查出数据的总行数,综上所述,我的Index视图就不能再是绑定原先的了,以下是做法:

1)在Model文件夹增加一个类,名称为“SelectMovies”:

    public class SelectMovies
    {
        //根据第n页查出的数据
        public List<Movie> selectMovies { get; set; }

        //数据总量
        public int totalCount { get; set; }

    }

2)修改Index方法为:

     public ActionResult Index(int page=1)
        {
            const int totalCount = 10;
            const int rowsPerPage = 4;

            List<Movie> movies = new List<Movie>()
            {
                new Movie(){ Id=1, MovieName="晚秋", Starring="汤唯", ShowAddress="苏州科文中心", ShowTime=DateTime.Parse("2014-4-10 15:00:00"), TicketPrice=25.5M},
                new Movie(){ Id=2, MovieName="神偷奶爸", Starring="XXX1", ShowAddress="观前街影城", ShowTime=DateTime.Parse("2014-5-1 14:30:00"), TicketPrice=20.5M},
                new Movie(){ Id=3, MovieName="Yes Man", Starring="XXX2", ShowAddress="苏州印象城", ShowTime=DateTime.Parse("2014-5-2 14:25:00"), TicketPrice=21.5M},
                new Movie(){ Id=4, MovieName="里约大冒险", Starring="未知", ShowAddress="苏州石路", ShowTime=DateTime.Parse("2014-5-3 14:40:00"), TicketPrice=22.5M},
                new Movie(){ Id=5, MovieName="疯狂原始人", Starring="未知1", ShowAddress="观前街影城", ShowTime=DateTime.Parse("2014-5-4 14:00:00"), TicketPrice=23.5M},
                new Movie(){ Id=6, MovieName="活着", Starring="葛优、巩俐", ShowAddress="观前街影城", ShowTime=DateTime.Parse("2014-5-5 14:00:00"), TicketPrice=24.5M},
                new Movie(){ Id=7, MovieName="北京遇上西雅图", Starring="汤唯", ShowAddress="观前街影城", ShowTime=DateTime.Parse("2014-5-6 14:00:00"), TicketPrice=26.5M},
                new Movie(){ Id=8, MovieName="人在囧途", Starring="徐峥", ShowAddress="XXX街影城", ShowTime=DateTime.Parse("2014-5-7 14:00:00"), TicketPrice=27.5M},
                new Movie(){ Id=9, MovieName="神探狄仁杰", Starring="未知", ShowAddress="观前街影城", ShowTime=DateTime.Parse("2014-5-8 14:00:00"), TicketPrice=28.5M},
                new Movie(){ Id=10, MovieName="里约大冒险2", Starring="未知", ShowAddress="观前街影城", ShowTime=DateTime.Parse("2014-5-9 14:00:00"), TicketPrice=29.5M},
            };

            var result = (from ms in movies select ms).Skip((page - 1) * rowsPerPage).Take(rowsPerPage);

            SelectMovies sm = new SelectMovies()
            {
                selectMovies = result.ToList(),
                totalCount=totalCount
            };

            return View(sm);
        }

3)修改Index视图:

@model MvcWebGrid.Models.SelectMovies

@{
    ViewBag.Title = "我的WebGrid";
}

<h2>我的WebGrid示例</h2>

@{
    var grid = new WebGrid(

        source: null,
        
        rowsPerPage: 4

        );

    grid.Bind(Model.selectMovies, rowCount: Model.totalCount, autoSortAndPage: false);
}

@grid.GetHtml(
tableStyle: "table",
headerStyle: "gridhead",
mode:WebGridPagerModes.All,
firstText:"首页",
lastText:"尾页",
previousText:"上一页",
nextText:"下一页",

columns:
grid.Columns(
    grid.Column("Id", "序号"),
    grid.Column("MovieName", "电影名"),
    grid.Column("Starring", "影院地址"),
    grid.Column("TicketPrice", "票价"),
    grid.Column("ShowAddress", "影院地址"),
    grid.Column("ShowTime", "上映日期")
)
)
编译运行,在Index方法中加个断点,可以看到每次供视图绑定的新模型中,仅仅只有4条数据,而不是起初的10条:
MVC学习笔记八:WebGrid控件的高级使用「建议收藏」
到目前为止,基本实现了服务端分页,但是又存在另一个问题,那就是排序被禁用了,如果还原那将不能实现服务端分页,接下来介绍如何在使用服务端分页的同时还能排序。

很简单,只要模型绑定时,给action方法提供两个参数:一个是排序字段,一个是排序方向(正/反排序)

这里只要修改Index方法的参数及代码实现,不过需要通过反射实现动态排序:

      public ActionResult Index(int page=1,string sort="Id",string sortDir="ASC")
        {
            const int totalCount = 10;
            const int rowsPerPage = 4;

            List<Movie> movies = new List<Movie>()
            {
                new Movie(){ Id=1, MovieName="晚秋", Starring="汤唯", ShowAddress="苏州科文中心", ShowTime=DateTime.Parse("2014-4-10 15:00:00"), TicketPrice=25.5M},
                new Movie(){ Id=2, MovieName="神偷奶爸", Starring="XXX1", ShowAddress="观前街影城", ShowTime=DateTime.Parse("2014-5-1 14:30:00"), TicketPrice=20.5M},
                new Movie(){ Id=3, MovieName="Yes Man", Starring="XXX2", ShowAddress="苏州印象城", ShowTime=DateTime.Parse("2014-5-2 14:25:00"), TicketPrice=21.5M},
                new Movie(){ Id=4, MovieName="里约大冒险", Starring="未知", ShowAddress="苏州石路", ShowTime=DateTime.Parse("2014-5-3 14:40:00"), TicketPrice=22.5M},
                new Movie(){ Id=5, MovieName="疯狂原始人", Starring="未知1", ShowAddress="观前街影城", ShowTime=DateTime.Parse("2014-5-4 14:00:00"), TicketPrice=23.5M},
                new Movie(){ Id=6, MovieName="活着", Starring="葛优、巩俐", ShowAddress="观前街影城", ShowTime=DateTime.Parse("2014-5-5 14:00:00"), TicketPrice=24.5M},
                new Movie(){ Id=7, MovieName="北京遇上西雅图", Starring="汤唯", ShowAddress="观前街影城", ShowTime=DateTime.Parse("2014-5-6 14:00:00"), TicketPrice=26.5M},
                new Movie(){ Id=8, MovieName="人在囧途", Starring="徐峥", ShowAddress="XXX街影城", ShowTime=DateTime.Parse("2014-5-7 14:00:00"), TicketPrice=27.5M},
                new Movie(){ Id=9, MovieName="神探狄仁杰", Starring="未知", ShowAddress="观前街影城", ShowTime=DateTime.Parse("2014-5-8 14:00:00"), TicketPrice=28.5M},
                new Movie(){ Id=10, MovieName="里约大冒险2", Starring="未知", ShowAddress="观前街影城", ShowTime=DateTime.Parse("2014-5-9 14:00:00"), TicketPrice=29.5M},
            };

            IEnumerable<Movie> result;

            if (sortDir=="ASC")
            {
                 result = (from ms in movies orderby GetMovieProperty(ms, sort) ascending select ms).Skip((page - 1) * rowsPerPage).Take(rowsPerPage);
            }
            else
            {
                 result = (from ms in movies orderby GetMovieProperty(ms, sort) descending select ms).Skip((page - 1) * rowsPerPage).Take(rowsPerPage);
            }

            SelectMovies sm = new SelectMovies()
            {
                selectMovies = result.ToList(),
                totalCount=totalCount
            };

            return View(sm);
        }

        public object GetMovieProperty(object obj, string attrName)
        {
            var property = obj.GetType().GetProperty(attrName);
            object value = property.GetValue(obj, null);
            return value;
        }

以上,关于服务器分页及排序记录到此。



版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/185348.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 怎么样CSDN Blog投机和增加流量?

    怎么样CSDN Blog投机和增加流量?

  • Java 输出 九九乘法表的代码

    Java 输出 九九乘法表的代码敲成功代码后,超级有成就感。publicclass九九乘法表{publicstaticvoidmain(String[]args){intj=1;for(inti=1;i<10;i++,j=1){for(j=1;j<i+1;j++){System.out.print(j+”×”+i+”=”+i*j+”\t”);

  • Spring Boot 配置ContextPath「建议收藏」

    Spring Boot 配置ContextPath「建议收藏」Springboot默认是/ ,这样直接通过http://ip:port/就可以访问到index页面,如果要修改为http://ip:port/path/ 访问的话,那么需要在Application.properties文件中加入server.context-path=/你的path,比如:spring-boot,那么访问地址就是http://ip:port/spring-boot路径。

  • Java Set集合的详解

    Java Set集合的详解一,SetSet:注重独一无二的性质,该体系集合可以知道某物是否已近存在于集合中,不会存储重复的元素用于存储无序(存入和取出的顺序不一定相同)元素,值不能重复。对象的相等性  引用到堆上同一个对象的两个引用是相等的。如果对两个引用调用hashCode方法,会得到相同的结果,如果对象所属的类没有覆盖Object的hashCode方法的话,hashCode会返回每个对象特有的序号(j

  • 定制office2007静默安装版

    定制office2007静默安装版现在开始打造你的office20071.    全自动安装:a)    在每个.ww里面有一个名为Config.XML的配置文件来实现的。专业增强版本位于光盘根目录下的ProPlus.ww目录下,企业版则位于Enterprise.WW目录下b)    用记事本打开目录下的Config.xml,我们只需要修改里面的相应行就可以实现免输序列号、自动输入用户名、单

  • 情人节来了,教你个用 Python 表白的技巧「建议收藏」

    情人节来了,教你个用 Python 表白的技巧「建议收藏」作者:@明哥公众号:Python编程时光2020年,这个看起来如此浪漫的年份,你还是一个人吗?难不成我还能是一条狗?18年的时候,写过一篇介绍如何使用Python来表白的文章。虽然创意和使用效果都不错,但有一缺点,这是那个exe文件,女神需要打开电脑,才有可能参与进来,进而被你成功”调戏”。由于是很早期的文章了,应该有很多人没有看过。没有看过的,你可以点击这里查看:用Python写一个表白神器让你脱离单身提醒你一下,后天就是2月14日了。什么?还是一条狗呢?行吧,那你赶上了,今

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号