ASP.NET MVC分页的兑现

在ASP.NET中,GridView控件本身就是包含分页的职能,只要将当前页面的索引值赋给GridView的PageIndex就可兑现了分页,至于数目怎么分页,全都由GridView封装起来了。

在ASP.NET
MVC中分页的贯彻就不得不拄自己来计划了。首先来说一下分页的法则。现在时有发生一个张news表,中间有那么些音讯,我们借而同一页显示5漫长记下,这样,页面数量=总记录数/5;这里,如果出现小数,得进位取整。如比较总记录和累也51,那么分的页面数量是11,最后一页才发平等长记下。好,有这么一个思路后,现在就算来做ASP.NET
MVC中之分页了。

1、 数据库和阐发

缔造一个Data_Company的数据库,建平摆news表,表结构要下图:

Ajax 1

ID是主键,并助是电动增长列。

2、 现在,我们就此O/R Designer来创建news表的LINQ To SQL的实体类。

创一个誉为吧MvcCompany的ASP.NET MVC Web
Application项目,然后选中Models,右键,“添加”,“新建起”,选中C#中的“数据”,如下图:

Ajax 2

选料“LINQ to SQL类”,名称设为“CompanyData.dbml”,然后“添加”。

打开“服务器资源管理器”,创建连接,展开表,找到news表,拖到CompanyData.dbml的左边表视图区(注:.dbml视图左是SQL表和SQL视图区,右边是SQL存储过程与SQL函数区),效果使下图:

Ajax 3

当“解决方案资源管理器”下之,“Models”多了三独公文,CompanyData.dbml,展开它,会生CompanyData.dbml.layout和CompanyData.designer.cs,前者是CompanyData.dbml视图的片信(比如news表在的坐标等信息),后者是news实体类及Data_Company数据库的好像,在数量库类中集合了news实体类。

3、
添加news列表类。因为一个news实体类,一软只能表示无异漫漫记下,如果表现一个news表中的数量,最好定义一个集合类来抱临时来存放news记录之汇。

好像的实现如下:

Ajax 4Ajax 5Code
 1Ajax 6using System;
 2Ajax 7
 3Ajax 8using System.Collections.Generic;
 4Ajax 9
 5Ajax 10using System.Linq;
 6Ajax 11
 7Ajax 12using System.Web;
 8Ajax 13
 9Ajax 14namespace MvcCompany.Models
10Ajax 15
11Ajax 16Ajax 17Ajax 18{
12Ajax 19
13Ajax 20public class NewList<T> : List<T>
14Ajax 21
15Ajax 22Ajax 23Ajax 24{
16Ajax 25
17Ajax 26Ajax 27/**//// <summary>
18Ajax 28
19Ajax 29/// 页面索引值
20Ajax 30
21Ajax 31/// </summary>
22Ajax 32
23Ajax 33Ajax 34public int PageIndex Ajax 35{ get; private set; }
24Ajax 36
25Ajax 37Ajax 38/**//// <summary>
26Ajax 39
27Ajax 40/// 每页记录之多寡
28Ajax 41
29Ajax 42/// </summary>
30Ajax 43
31Ajax 44Ajax 45public int PageSize Ajax 46{ get; private set; }
32Ajax 47
33Ajax 48Ajax 49/**//// <summary>
34Ajax 50
35Ajax 51/// 记录总条数
36Ajax 52
37Ajax 53/// </summary>
38Ajax 54
39Ajax 55Ajax 56public int TotalCount Ajax 57{ get; private set; }
40Ajax 58
41Ajax 59Ajax 60/**//// <summary>
42Ajax 61
43Ajax 62/// 共有的页数和
44Ajax 63
45Ajax 64/// </summary>
46Ajax 65
47Ajax 66Ajax 67public int TotalPages Ajax 68{ get; private set; }
48Ajax 69
49Ajax 70public NewList(IQueryable<T> source, int pageIndex, int pageSize)
50Ajax 71
51Ajax 72Ajax 73Ajax 74{
52Ajax 75
53Ajax 76PageIndex = pageIndex;
54Ajax 77
55Ajax 78PageSize = pageSize;
56Ajax 79
57Ajax 80TotalCount = source.Count();
58Ajax 81
59Ajax 82// 进上取整( 总记录条数/一面记录之条数)
60Ajax 83
61Ajax 84TotalPages = (int)Math.Ceiling(TotalCount / (double)pageSize);
62Ajax 85
63Ajax 86this.AddRange(source.Skip(pageIndex * pageSize).Take(PageSize));
64Ajax 87
65Ajax 88}
66Ajax 89
67Ajax 90Ajax 91/**//// <summary>
68Ajax 92
69Ajax 93/// 是否留存前续页
70Ajax 94
71Ajax 95/// </summary>
72Ajax 96
73Ajax 97public bool HasPreviousPage
74Ajax 98
75Ajax 99Ajax 100Ajax 101{
76Ajax 102
77Ajax 103Ajax 104get Ajax 105{ return (PageIndex > 0); }
78Ajax 106
79Ajax 107}
80Ajax 108
81Ajax 109Ajax 110/**//// <summary>
82Ajax 111
83Ajax 112/// 是否在继续页
84Ajax 113
85Ajax 114/// </summary>
86Ajax 115
87Ajax 116public bool HasNextPage
88Ajax 117
89Ajax 118Ajax 119Ajax 120{
90Ajax 121
91Ajax 122Ajax 123get Ajax 124{ return (PageIndex + 1 < AllPages); }
92Ajax 125
93Ajax 126}
94Ajax 127
95Ajax 128}
96Ajax 129
97Ajax 130}
98Ajax 131
99Ajax 132

此间,我们实现了一个泛型的联谊列表NewList(当然,这里的面目上得以当其他实体类的成团列表),在斯近乎中,有四只字段,访问修饰符都是public的,分另为:

PageIndex:当前页面的索引值

PageSize:每个页面的笔录的条数

AllCount:记录之毕竟条数

AllPages:共有的页面总数

当NewList 构造函数中,有如下代码:

 

 

Ajax 133Ajax 134Code
 1Ajax 135public NewList(IQueryable<T> list, int pageIndex, int pageSize)
 2Ajax 136
 3Ajax 137Ajax 138Ajax 139{
 4Ajax 140
 5Ajax 141PageIndex = pageIndex; 
 6Ajax 142PageSize = pageSize;
 7Ajax 143
 8Ajax 144AllCount = source.Count(); 
 9Ajax 145
10Ajax 146AllPages = (int)Math.Ceiling(AllCount / (double)pageSize);
11Ajax 147
12Ajax 148this.AddRange(list.Skip(PageIndex * PageSize).Take(PageSize));
13Ajax 149
14Ajax 150}
15Ajax 151

组织函的参数有三单,一个凡是list,就是实体类的一个集合,还有即使是页面索引值和每个页面的记录条数。

第1、2代码很轻理角,第3执代码是抱列表的到底记录条数,第4行代码,就完成了咱们当开头时解析的分页实现的公式:页面数量=总记录数/每页记录数,其中Math.Ceiling就是管小数部分进至整数的函数。

顶根本之是第5执代码,首先看Skip(PageIndex*PageSize),页面索引值乘及每页记录数,得到是目前页面以前的持有记录数,Skip是超过了这些记录,而落后面的有着记录,Take(PageSize)是沾PageSize条数的笔录,比如,我们怀念使第三页的笔录,这个页面的索引值为2(因为索引值从0开始)PageIndex=2,每页显示5久记下,PageSize=5,就是如果逾了list中之眼前10长条记下,然后还获前5长记下,即获取list中的第11漫漫及第15漫漫记下,也不怕是第3页的笔录了。

当此间,微软提供了Skip和Tabke函数,让咱举行打分页来,得心应手。

连通下是this.AddRange()函数,可以把批量的数放到当前凑中(因为NewList本身就是一个集结)。

代码的继半片凡片只属性:

public bool HasPreviousPage

{

get { return (PageIndex > 0); }

}

public bool HasNextPage

{

get { return (PageIndex + 1 < AllPages); }

}

立有限只属性是为页面显示“上一样页”和“下一样页”,因为当我们展示第一页的时节,“上平等页”是休待出示的,如果最后一页,是从未“下一样页“的,所以当此地定义了零星个属性,来判断是否出上等同页与生一致页。

先期看HasPreviousPage属性,如果PageIndex是大于0的,说明不是当率先页,所以就是倒回true,如果低于等于0(在这边小于0凡尚未意思义的,因为页面的索引值最小是0),说明是首先页,所以回来是false。

重新拘留HasNextPage属性,因为页面索引值的太酷屡屡,与页面的极其特别累差1(索引从0开始之因),所以当PageIndex+1小于AllPages时,说没有没有到最后一页,返回值是true,如果PageIndex+1大于等于AllPages时(大于也从未意义),说明是终极一页,返回值为false。

4、 添加NewsController。选中Controller,右键添加一个NewsController
的Controller。

代码如下:

Ajax 152Ajax 153Code
 1Ajax 154using System;
 2Ajax 155
 3Ajax 156using System.Collections.Generic;
 4Ajax 157
 5Ajax 158using System.Linq;
 6Ajax 159
 7Ajax 160using System.Web;
 8Ajax 161
 9Ajax 162using System.Web.Mvc;
10Ajax 163
11Ajax 164using System.Web.Mvc.Ajax;
12Ajax 165
13Ajax 166using MvcCompany.Models;
14Ajax 167
15Ajax 168using System.Configuration;
16Ajax 169
17Ajax 170namespace MvcCompany.Controllers
18Ajax 171
19Ajax 172Ajax 173Ajax 174{
20Ajax 175
21Ajax 176public class NewsController : Controller
22Ajax 177
23Ajax 178Ajax 179Ajax 180{
24Ajax 181
25Ajax 182DataClassesDataContext DCDC;
26Ajax 183
27Ajax 184int pageSize;
28Ajax 185
29Ajax 186public NewsController()
30Ajax 187
31Ajax 188Ajax 189Ajax 190{
32Ajax 191
33Ajax 192DCDC = new DataClassesDataContext();
34Ajax 193
35Ajax 194pageSize = Convert.ToInt32(ConfigurationManager.AppSettings[“pagesize”]); //每个页面的数码存放于web.config的appsetting里的pagesize节中,值为5
36Ajax 195
37Ajax 196}
38Ajax 197
39Ajax 198public ActionResult Index(int? page)
40Ajax 199
41Ajax 200Ajax 201Ajax 202{
42Ajax 203
43Ajax 204var NewsList = DCDC.news.Select(newss=>newss);
44Ajax 205
45Ajax 206var paginatedNews = new NewList<news>(NewsList, page ?? 0, pageSize); //实现分页功能
46Ajax 207
47Ajax 208return View(paginatedNews);
48Ajax 209
49Ajax 210}
50Ajax 211
51Ajax 212[AcceptVerbs(HttpVerbs.Post)]
52Ajax 213
53Ajax 214public ActionResult Index(FormCollection formValues)
54Ajax 215
55Ajax 216Ajax 217Ajax 218{
56Ajax 219
57Ajax 220int? index = int.Parse(formValues.GetValue(“pageindex”).AttemptedValue);
58Ajax 221
59Ajax 222int page = index ??0 ;
60Ajax 223
61Ajax 224var NewsList = DCDC.news.Select(newss => newss);
62Ajax 225
63Ajax 226var paginatedNews = new NewList<news>(NewsList, page, pageSize); //实现分页功能
64Ajax 227
65Ajax 228return View(paginatedNews);
66Ajax 229
67Ajax 230}
68Ajax 231
69Ajax 232}
70Ajax 233
71Ajax 234}
72Ajax 235
73Ajax 236

有关个别个Index重载,我们在统筹完Views再议论。

5、 添加View。选中NewsController,右键,添加View,会弹有如下图:

Ajax 237

以此地,我们选中MvcCompany.Models.news,在View
content下拉列表中选取List(因为一旦兑现列表分页)。

Index.aspx页面代码如下:

Ajax 238Ajax 239Code
  1Ajax 240Ajax 241<%Ajax 242@ Page Title=”” Language=”C#” MasterPageFile=”~/Views/Shared/Site.Master” Inherits=”System.Web.Mvc.ViewPage<MvcCompany.Models.NewList<MvcCompany.Models.news>>” %>
  2Ajax 243
  3Ajax 244<asp:Content ID=”Content1″ ContentPlaceHolderID=”TitleContent” runat=”server”>
  4Ajax 245
  5Ajax 246新闻
  6Ajax 247
  7Ajax 248</asp:Content>
  8Ajax 249
  9Ajax 250<asp:Content ID=”Content2″ ContentPlaceHolderID=”MainContent” runat=”server”>
 10Ajax 251
 11Ajax 252<!–前半组成部分–>
 12Ajax 253
 13Ajax 254Ajax 255<%Ajax 256using (Html.BeginForm())
 14Ajax 257
 15Ajax 258{ %>
 16Ajax 259
 17Ajax 260<h2>
 18Ajax 261
 19Ajax 262情报列表</h2>
 20Ajax 263
 21Ajax 264<table>
 22Ajax 265
 23Ajax 266<tr>
 24Ajax 267
 25Ajax 268<th>
 26Ajax 269
 27Ajax 270编号
 28Ajax 271
 29Ajax 272</th>
 30Ajax 273
 31Ajax 274<th>
 32Ajax 275
 33Ajax 276题目
 34Ajax 277
 35Ajax 278</th>
 36Ajax 279
 37Ajax 280<th>
 38Ajax 281
 39Ajax 282时间
 40Ajax 283
 41Ajax 284</th>
 42Ajax 285
 43Ajax 286<th>
 44Ajax 287
 45Ajax 288内容
 46Ajax 289
 47Ajax 290</th>
 48Ajax 291
 49Ajax 292</tr>
 50Ajax 293
 51Ajax 294Ajax 295<%Ajax 296 foreach (var item in Model)
 52Ajax 297
 53Ajax 298{ %>
 54Ajax 299
 55Ajax 300<tr>
 56Ajax 301
 57Ajax 302<td>
 58Ajax 303
 59Ajax 304<%= Html.Encode(item.ID)%>
 60Ajax 305
 61Ajax 306</td>
 62Ajax 307
 63Ajax 308<td>
 64Ajax 309
 65Ajax 310<%= Html.Encode(item.title)%>
 66Ajax 311
 67Ajax 312</td>
 68Ajax 313
 69Ajax 314<td>
 70Ajax 315
 71Ajax 316<%= Html.Encode(String.Format(“{0:g}”, item.datetimes))%>
 72Ajax 317
 73Ajax 318</td>
 74Ajax 319
 75Ajax 320<td>
 76Ajax 321
 77Ajax 322<%= Html.Encode(item.contents)%>
 78Ajax 323
 79Ajax 324</td>
 80Ajax 325
 81Ajax 326</tr>
 82Ajax 327
 83Ajax 328Ajax 329<%Ajax 330 } %>
 84Ajax 331
 85Ajax 332</table>
 86Ajax 333
 87Ajax 334<hr />
 88Ajax 335
 89Ajax 336<!–后半有的–>
 90Ajax 337
 91Ajax 338Ajax 339<%Ajax 340 =Html.RouteLink(“首页”, “UpcomingNews”, new { page = 0 })%>|
 92Ajax 341
 93Ajax 342Ajax 343<%Ajax 344 if (Model.HasPreviousPage)
 94Ajax 345
 95Ajax 346{%>
 96Ajax 347
 97Ajax 348Ajax 349<%Ajax 350 =Html.RouteLink(“上一页”, “UpcomingNews”, new { page = (Model.PageIndex – 1) })%>|
 98Ajax 351
 99Ajax 352Ajax 353<%Ajax 354} %>
100Ajax 355
101Ajax 356Ajax 357<%Ajax 358 if (Model.HasNextPage)
102Ajax 359
103Ajax 360{%>
104Ajax 361
105Ajax 362Ajax 363<%Ajax 364 =Html.RouteLink(“下一页”, “UpcomingNews”, new { page = (Model.PageIndex + 1) })%>|
106Ajax 365
107Ajax 366Ajax 367<%Ajax 368} %>
108Ajax 369
109Ajax 370Ajax 371<%Ajax 372 =Html.RouteLink(“尾页”, “UpcomingNews”, new { page = Model.PageSize – 1 })%>         
110Ajax 373
111Ajax 374
112Ajax 375
113Ajax 376<%=Html.TextBox(“pageindex”, Model.PageIndex, new {style=”width:30px;”})%>页<input
114Ajax 377
115Ajax 378type=”submit” value=”转到” id=”sub” />
116Ajax 379
117Ajax 380Ajax 381<%Ajax 382} %>
118Ajax 383
119Ajax 384</asp:Content>
120Ajax 385
121Ajax 386

代码的前头半局部,很好理解。

代码的晚半片段,我们来分析一下,首页,是使

Html.RouteLink(“首页”,”UpcomingNews”,new{
page=0}),是要稳及名称为”UpcomingNews”的路由,这个路由于在Global.asax中,代码如下:

routes.MapRoute(

“UpcomingNews”,

“News/page/{page}”,

new { controller = “News”, action = “Index” });

路由的名目是”UpcominNews”,Url格式是News/page/{page},News和page是url的如出一辙种格式,后面{page}是参数,这个参数的称要与View中,后半组成部分的new{page=0}的page,以及NewsController中之方法Index(int?
page)中的page都少不了统一。如果起要

News/page/2的url,实际上要的是 news?page=2的页网(路由于以ASP.NET
MVC官上有说明)。

首页为受的page=0,最终见面化NesController中Index(int?
page)方法,的实参,返回首页数据(及数量库表的前面5修数据)。

齐平等页,在现阶段页数PageIndex的底子及减1。

生一样页,在当前页数PageIndex的底蕴及加1

(注:上面的加减1还无见面越界,因为当显第一页时,“上同页”的超连接就非会见显。当最后一页时,“下一致页”的超连接就不见面来得)

尾页同首页。

而今的一个题材是“转到”第几页的兑现,我们解,转到第几页的“几”,得用户输入,所以这里用一个Html.TextBox来兑现,完全代码是

<%=Html.TextBox(“pageindex”, Model.PageIndex, new
{style=”width:30px;”})%>

末段会变一个名称为pageindex的intup,类型也Text,它的值老为眼前的目页值Model.PageIndex,其中起一个幅的性能new
{style=”width:30px;”}。

再者还发出一个<input type=”submit” value=”转至” id=”sub”
/>用来为后参提交。因为代码中有<form>表单,所以可以于NewsController中吸收这提交。

Index(FormCollection
formValues)方法用来处理这提交。这里见面从formValues.GetValue(“pageindex”).AttemptedValue中午届客户端用户输入“pageindex”文本框中的值。从而来完成定向。

至此,我们虽因故ASP.NET
MVC实现了一个分页功能,相比之下要难ASP.NET的GridView自动分页好多。

当此事例中,我们于Models层中提供了实体类及news表的集合类。在Controller层增加了NewsController类。在View层增加了News的view,从M-V-C角度,分别就了针对性分页的职能。

相关文章