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

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

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

创建ASP.NET MVC项目

基于ASP.NET、Entity Framework、Bootstrap的分页_第1张图片
我这里用的是Visual Studio 2019。
创建项目时选择ASP.NET Web应用程序,点击下一步,对项目命名,再点击创建,勾选MVC,点击创建。

创建EF实体框架

基于ASP.NET、Entity Framework、Bootstrap的分页_第2张图片
右击Models,选择添加->新建项。
基于ASP.NET、Entity Framework、Bootstrap的分页_第3张图片
选择数据->ADO.NET实体数据模型
基于ASP.NET、Entity Framework、Bootstrap的分页_第4张图片
选择“来自数据库的EF设计器”,下一步。
基于ASP.NET、Entity Framework、Bootstrap的分页_第5张图片
点击新建连接。
基于ASP.NET、Entity Framework、Bootstrap的分页_第6张图片
输入服务器名(我这里用的是SQL Server数据库),再选择数据库,点击确定,再点击下一步。
基于ASP.NET、Entity Framework、Bootstrap的分页_第7张图片
这里你可以任意选择版本,建议选择6.x,点击下一步。
基于ASP.NET、Entity Framework、Bootstrap的分页_第8张图片
选择表(可全选),点击完成。创建EF到这里就结束了。
基于ASP.NET、Entity Framework、Bootstrap的分页_第9张图片
这就是我所选的表中的字段。

创建一个控制器

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

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

基于ASP.NET、Entity Framework、Bootstrap的分页_第10张图片

2.设置table静态数据

基于ASP.NET、Entity Framework、Bootstrap的分页_第11张图片
如果看不懂我写的,建议先去学习一下HTML5哦!
下面贴代码:

编号 书名 备注
1 红楼梦 好看

3.分页按钮基本布局

基于ASP.NET、Entity Framework、Bootstrap的分页_第12张图片

首页
上一页
当前页
下一页
末页
共多少页



4.写控制器部分代码

基于ASP.NET、Entity Framework、Bootstrap的分页_第13张图片
首先定义两个形参,pageIndex当前页,pageSize每页显示数据行数。
基于ASP.NET、Entity Framework、Bootstrap的分页_第14张图片
第二步查询所有数据并给入视图,别忘了引用哦。
基于ASP.NET、Entity Framework、Bootstrap的分页_第15张图片
将所有数据查询出来传入视图
基于ASP.NET、Entity Framework、Bootstrap的分页_第16张图片
再将传给视图的值转换为List集合,顺便将table里的静态数据变为数据库里的数据。
基于ASP.NET、Entity Framework、Bootstrap的分页_第17张图片
运行之后的网页如下:
基于ASP.NET、Entity Framework、Bootstrap的分页_第18张图片

5.稍稍修改分页按钮

我们稍稍修改一下(狗头保命)
基于ASP.NET、Entity Framework、Bootstrap的分页_第19张图片

首页@*第一页的超链接*@
    上一页
    @(ViewBag.pageIndex)
    下一页
    末页
    共@(ViewBag.pageMax)页
    
    

    

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

基于ASP.NET、Entity Framework、Bootstrap的分页_第20张图片
别打我~~
基于ASP.NET、Entity Framework、Bootstrap的分页_第21张图片

			//分页,每页十条
            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.看看最后效果

第一页:
基于ASP.NET、Entity Framework、Bootstrap的分页_第22张图片
第二页:
基于ASP.NET、Entity Framework、Bootstrap的分页_第23张图片
让我们来看看细节:
基于ASP.NET、Entity Framework、Bootstrap的分页_第24张图片

完整代码

控制器:

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
@* 下面的表我只展示三个字段 *@

        @foreach (var item in Model)
        {
            
        }
    
编号 书名 备注
@item.ID @item.Name @item.Remark
首页@*第一页的超链接*@ 上一页 @(ViewBag.pageIndex) 下一页 末页 共@(ViewBag.pageMax)页

稍微改改代码的事,我下次不敢了 还敢!
基于ASP.NET、Entity Framework、Bootstrap的分页_第25张图片

你可能感兴趣的:(基于ASP.NET、Entity Framework、Bootstrap的分页)