在mvc与EF框架环境下实现的分业查询笔记

分页查询

我们在浏览很多网页的时候，由于数据太多，很多时候不能放在一个页面上，此时就需要分页功能。

效果如下：

环境

一库

一表

实现方法

函数Math.Ceiling，求大于该值的最小整数
控制器代码

        RbacDBEntities db = new RbacDBEntities();
        // GET: Role
        public ActionResult Index(string name="",int pageIndex=1,int pageSize=5)
        {
            //总记录数满足条件
            var count = db.Roles.Where(p => p.Name.Contains(name)).Count();
            var totalPage = Math.Ceiling(count * 1.00 / pageSize);
            //根据页码每页的条数名称查询
            var role = db.Roles.Where(p => p.Name.Contains(name))
                .OrderBy(p => p.ID)//排序
                .Skip((pageIndex - 1) * pageSize)//跳过
                .Take(pageSize)//取
                .ToList();//转化为集合
            ViewBag.pageIndex = pageIndex;
            ViewBag.totalPage = totalPage;
            ViewBag.name = name;
            ViewBag.pageSize = pageSize;
            return View(role);
        }

控制器向视图传值
return View(role);
ViewBag

@using WebApplication2.Models
@model List
循环Model
视图代码

@using WebApplication2.Models
@model List<Role>
<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" class="btn btn-primary" value="搜索" id="btnSearch" onclick="page(1)" />
    </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>共<label>@ViewBag.totalPage</label>页，第
        <input type="text" value="@ViewBag.pageIndex" id="pageIndex"/>
        页，每页显示
        <select id="pageSize" onchange="page(1);">
            @{
                var pageIndexs = new List<int> { 5, 20, 50, 100 };
            }
            @foreach (var item in pageIndexs)
            {
                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.pageIndex > 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.pageIndex < ViewBag.totalPage)
        {
            <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="javascript:page(@ViewBag.totalPage)">末页</a></li>
        <li><input type="button" value="go" onclick="go();" /></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
        }
        function go() {
            //获取pageindex
            var pageindex = $("#pageIndex").val();
            page(pageindex);
        }
    </script>
    
    }

向控制器传值
window.location.href = “/role/index?pageIndex=” + pageIndex + “&pageSize=” + pageSize +"&name="+name
?+值

调用js方法
οnclick="go()“

function go() {
//获取pageindex
var pageindex = $("#pageIndex").val();
page(pageindex);
}

禁用属性
class=“disabled”