ASP.NET中如何使用EF框架+MVC進行分頁操作

使用EF框架和MVC進行分頁的好處

方便快捷，代碼量少。

案例演示

話不多說，直接上效果圖

我們以Roles表爲例，先看看錶裏的數據

控制器代碼：

public ActionResult Index(int pageIndex=1,int pageSize=10,string name="")
        {
            //獲取總記錄數
            var totalRows = db.Roles.Count();
            //計算總頁數
            var totalPages = Math.Ceiling(totalRows * 1.00 / pageSize);
            ViewBag.totalPages = totalPages;

            var roles = db.Roles.Where(p=>p.Name.Contains(name))
                .OrderBy(p=>p.ID)  //排序
                .Skip((pageIndex-1) * pageSize)    //跳過
                .Take(pageSize)   //取
                .ToList();
            ViewBag.pageIndex = pageIndex;
            ViewBag.name = name;
            ViewBag.pageSize = pageSize;
            return View(roles);
        }

視圖代碼：

@{
    ViewBag.Title = "Index";
}

<h2>角色列表</h2>
<div class="input-group">
    <label>名稱：</label>
    <input type="text" class="form-control" id="txtCondName" value="@ViewBag.name"/>
    <input type="button" id="btnSearch" value="搜索" οnclick="page(1);" />
</div>
<table class="table table-bordered">
    <thead>
        <tr>
            <th>編號</th>
            <th>名稱</th>
            <th>備註</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <th>@item.ID</th>
                <th>@item.Name</th>
                <th>@item.Remark</th>
            </tr>
        }
    </tbody>

</table>

<nav aria-label="...">
    <ul class="pagination">
        <li class="page-item ">
            共 @ViewBag.totalPages 頁，第
            <input type="number" min="1" max="@ViewBag.totalPages" id="pageIndex" value="@ViewBag.pageIndex" />
            頁，每頁顯示          
            <select id="pageSize" οnchange="page(1);">
                @{
                    var listPageSize = new List<int> { 5, 10, 20, 50, 100 };
                }
                @foreach (var item in listPageSize)
                {
                    if (@ViewBag.pageSize == @item)
                    {
                        <option value="@item" selected="selected">@item</option>
                    }
                    else
                    {
                        <option value="@item">@item</option>
                    }
                }
            </select>
            條
        </li>
    </ul>
    <ul class="pagination">
        <li class="page-item ">
            <a class="page-link" href="javascript:page(1);" tabindex="-1" aria-disabled="true">首頁</a>
        </li>
        @if (@ViewBag.pageIndex > 1)
        {
            <li class="page-item"><a class="page-link" href="javascript:page(@ViewBag.pageIndex-1);">上頁</a></li>
        }
        else
        {
            <li class="page-item disabled"><a class="page-link" href="javascript:page(@ViewBag.pageIndex-1);">上頁</a></li>
        }


        <li class="page-item " aria-current="page">
            <span class="page-link"> @ViewBag.pageIndex</span>
        </li>

        @if (@ViewBag.pageIndex < @ViewBag.totalPages)
        {
            <li class="page-item " aria-current="page">
                <a class="page-link" href="javascript:page(@ViewBag.pageIndex+1);">下頁 </a>
            </li>
        }
        else
        {
            <li class="page-item disabled" aria-current="page">
                <a class="page-link" href="javascript:page(@ViewBag.pageIndex+1);">下頁 </a>
            </li>
        }

        <li class="page-item">
            <a class="page-link" href="javascript:page(@ViewBag.totalPages);">末頁</a>
        </li>
        <li class="page-item">
            <input type="button" class="page-link" value="GO" οnclick="go()" />
        </li>
    </ul>
</nav>

@section scripts{
    <script>
        function page(pageIndex) {
            var name = $("#txtCondName").val(); //獲取搜索框的值
            var pageSize = $("#pageSize").val(); //獲取下拉框的值
            window.location.href = "/role/index?pageindex=" + pageIndex
                + "&pageSize=" + pageSize + "&name=" + name;
        }
        function go() {
            //獲取輸入的頁碼的值
            var pageIndex = $("#pageIndex").val();
            page(pageIndex);
        }
    </script>
}