用mvc技术实现分页

分页的原理

“分页,是一种将所有数据分段展示给用户的技术.用户每次看到的不是全部数据,而是其中的一部分,如果在其中没有找到自习自己想要的内容,用户可以通过制定页码或是翻页的方式转换可见内容,直到找到自己想要的内容为止.其实这和我们阅读书籍很类似”、

下面是代码

@{
    ViewBag.Title = "Index";
}

<div style="display:flex;justify-content:space-between">
    <div class="btn-group">
        <button type="button" class="btn btn-default">新增</button>
        <button type="button" class="btn btn-default">删除</button>
    </div>
    <div class="input-group">
        <label>名称</label>
        <input type="text" id="txtCondName" value="@ViewBag.name" />
        <input type="button" value="搜索" id="btnSearch" />

    </div>
</div>
<table class="table table-bordered">
    <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>
<nav aria-label="Page navigation" style="display:flex;justify-content:space-between">
    <ul class="pagination">

        <li>共 @ViewBag.totpage 页，第
            <input type="text" id=""value="1" />
            页，每页显示
            <select id="pagesize">
                @{
                    var pagesize = new List<int> { 5, 10, 20, 50, 100 };
                }
                @foreach (var item in pagesize)
                {
                    if (ViewBag.pagesize == item)
                    {
                        <option value="@item" selected="selected">@item</option>
                    }
                    else
                    {
                        <option value="@item">@item</option>

                    }
                }

            </select>
            条</li>

    </ul>
    <ul class="pagination">

        <li><a href="javascript:page(1);">首页</a></li>
        @if (ViewBag.pageinex > 1)
        {
            <li><a href="javascript:page(@ViewBag.pageindex-1);">上页</a></li>
        }
        else
        {
            <li class="disabled"><a href="javascript:page(@ViewBag.pageindex-1);">上页</a></li>

        }
        @if (ViewBag.pageinex < ViewBag.totpage)
        {
            <li><a href="javascript:page(@ViewBag.pageindex+1);">下页</a></li>
        }
        else
        {
            <li class="disabled"><a href="javascript:page(@ViewBag.pageindex+1);">下页</a></li>
        }
        <li><a href="/role/index?pageindex=@ViewBag.pageindex">末页</a></li>
        <li><input type="button" value="go" onclick="page(3);" /></li>

    </ul>
</nav>

@section scripts
    {
    <script>
        function page(pageindex)
        {
            var pagesize = $("#pagesize").val();
            var name = $("#txtCondName").val();
            window.location.href = "/role/index?pageindex=" + pageindex +"&pageSize"+ pagesize + "&name=" + name;
        }
    </script>
    }

using fenye.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace fenye.Controllers
{
   
    public class RoleController : Controller
    {
        RbacDBEntities db = new RbacDBEntities();
        // GET: Role
        public ActionResult Index(int pageindex=1,int pageSize=10,string name="")
        {
            //总记录数满足条件
            var count = db.Roles.Where(p => p.Name.Contains(name)).Count();
            var totapage = Math.Ceiling(count * 1.00 / pageSize);

            //分页查询704
            var role = db.Roles.Where(p => p.Name.Contains(name))//条件
                .OrderBy(p => p.ID)//排序
                .Skip(pageSize * (pageindex - 1))//跳过前多少条
                .Take(pageSize).ToList();//取多少条
            ViewBag.pageindex = pageindex;
            ViewBag.totpage = totapage;
            ViewBag.name = name;
            ViewBag.pageSize = pageSize;
            return View(role);
        }
    }
}