基于ASP.NET、Entity Framework、Bootstrap的分页

• 创建ASP.NET MVC项目
• 创建EF实体框架
• 创建一个控制器
• 1.先删除它的默认代码。
• 2.设置table静态数据
• 3.分页按钮基本布局
• 4.写控制器部分代码
• 5.稍稍修改分页按钮
• 6.稍微改一下控制器代码
• 7.看看最后效果

创建ASP.NET MVC项目

我这里用的是Visual Studio 2019。
创建项目时选择ASP.NET Web应用程序，点击下一步，对项目命名，再点击创建，勾选MVC，点击创建。

创建EF实体框架

右击Models，选择添加->新建项。

选择数据->ADO.NET实体数据模型

选择“来自数据库的EF设计器”，下一步。

点击新建连接。

输入服务器名（我这里用的是SQL Server数据库），再选择数据库，点击确定，再点击下一步。

这里你可以任意选择版本，建议选择6.x，点击下一步。

选择表（可全选），点击完成。创建EF到这里就结束了。

这就是我所选的表中的字段。

创建一个控制器

我偷个懒就不创建了，用默认的Home控制器，下面例子使用Home里面的Index页面进行展示。

1.先删除它的默认代码。

2.设置table静态数据

如果看不懂我写的，建议先去学习一下HTML5哦！
下面贴代码：

<table class=\"table table-hover\"><thead><tr><th>编号</th><th>书名</th><th>备注</th></tr></thead><tbody><tr><td>1</td><td>红楼梦</td><td>好看</td></tr></tbody></table>

3.分页按钮基本布局

<a href=\"\" class=\"btn btn-info\">首页</a><a href=\"\" class=\"btn btn-info\">上一页</a><span class=\"btn btn-default\">当前页</span><a href=\"\" class=\"btn btn-info\">下一页</a><a href=\"\" class=\"btn btn-info\">末页</a><span class=\"btn btn-default\">共多少页</span><select class=\"btn btn-default\" id=\"pagenums\"><option value=\"1\">1</option></select><button class=\"btn btn-info\">GO</button>

4.写控制器部分代码

首先定义两个形参，pageIndex当前页，pageSize每页显示数据行数。

第二步查询所有数据并给入视图，别忘了引用哦。

将所有数据查询出来传入视图

再将传给视图的值转换为List集合，顺便将table里的静态数据变为数据库里的数据。

运行之后的网页如下：

5.稍稍修改分页按钮

我们稍稍修改一下（狗头保命）

<a href=\"/Home/index?pageIndex=1&pageSize=10\" class=\"btn btn-info\">首页</a>@*第一页的超链接*@<a href=\"/Home/index?pageIndex=@(ViewBag.pageIndex==1?ViewBag.pageIndex:ViewBag.pageIndex-1)&pageSize=10\" class=\"btn btn-info\">上一页</a><span class=\"btn btn-default\">@(ViewBag.pageIndex)</span><a href=\"/Home/index?pageIndex=@(ViewBag.pageIndex==ViewBag.pageMax?ViewBag.pageIndex:ViewBag.pageIndex+1)&pageSize=10\" class=\"btn btn-info\">下一页</a><a href=\"/Home/index?pageIndex=@(ViewBag.pageMax)&pageSize=10\" class=\"btn btn-info\">末页</a><span class=\"btn btn-default\">共@(ViewBag.pageMax)页</span><select class=\"btn btn-default\" id=\"pagenums\">@foreach (var item in ViewBag.pageNums){<option value=\"@item\">@item</option>}</select><button onclick=\"sub()\" class=\"btn btn-info\">GO</button><script type=\"text/javascript\">function sub() {var num = $(\"#pagenums\").val();location.href = \"/Home/index?pageIndex=\" + num + \"&pageSize=10\";}</script>

6.稍微改一下控制器代码

别打我~~

//分页，每页十条ViewBag.pageIndex = pageIndex;//当前页var max = Math.Ceiling(db.Books.Count() / pageSize * 1.0);ViewBag.pageMax = max >= max + 0.5 ? max : max + 1;var all = db.Books.OrderBy(p => p.ID).Skip((pageIndex - 1) * pageSize).Take(pageSize).ToList();int[] nums = new int[int.Parse((max+1).ToString())];//页数for (int i = 0; i < max + 1; i++){nums[i] = i + 1;}ViewBag.pageNums = nums;return View(all);

7.看看最后效果

第一页：

第二页：

让我们来看看细节：

完整代码

控制器：

using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mvc;using WebApplication1.Models;namespace WebApplication1.Controllers{public class HomeController : Controller{BookDBEntities db = new BookDBEntities();public ActionResult Index(int pageIndex = 1, int pageSize = 10){//分页，每页十条ViewBag.pageIndex = pageIndex;//当前页var max = Math.Ceiling(db.Books.Count() / pageSize * 1.0);ViewBag.pageMax = max >= max + 0.5 ? max : max + 1;var all = db.Books.OrderBy(p => p.ID).Skip((pageIndex - 1) * pageSize).Take(pageSize).ToList();int[] nums = new int[int.Parse((max+1).ToString())];//页数for (int i = 0; i < max + 1; i++){nums[i] = i + 1;}ViewBag.pageNums = nums;return View(all);}}

网页：

@{ViewBag.Title = \"Home Page\";}@model List<WebApplication1.Models.Book>@* 下面的表我只展示三个字段 *@<table class=\"table table-hover\"><thead><tr><th>编号</th><th>书名</th><th>备注</th></tr></thead><tbody>@foreach (var item in Model){<tr><td>@item.ID</td><td>@item.Name</td><td>@item.Remark</td></tr>}</tbody></table><a href=\"/Home/index?pageIndex=1&pageSize=10\" class=\"btn btn-info\">首页</a>@*第一页的超链接*@<a href=\"/Home/index?pageIndex=@(ViewBag.pageIndex==1?ViewBag.pageIndex:ViewBag.pageIndex-1)&pageSize=10\" class=\"btn btn-info\">上一页</a><span class=\"btn btn-default\">@(ViewBag.pageIndex)</span><a href=\"/Home/index?pageIndex=@(ViewBag.pageIndex==ViewBag.pageMax?ViewBag.pageIndex:ViewBag.pageIndex+1)&pageSize=10\" class=\"btn btn-info\">下一页</a><a href=\"/Home/index?pageIndex=@(ViewBag.pageMax)&pageSize=10\" class=\"btn btn-info\">末页</a><span class=\"btn btn-default\">共@(ViewBag.pageMax)页</span><select class=\"btn btn-default\" id=\"pagenums\">@foreach (var item in ViewBag.pageNums){<option value=\"@item\">@item</option>}</select><button onclick=\"sub()\" class=\"btn btn-info\">GO</button><script type=\"text/javascript\">function sub() {var num = $(\"#pagenums\").val();location.href = \"/Home/index?pageIndex=\" + num + \"&pageSize=10\";}</script>

稍微改改代码的事，我下次不敢了 还敢！