学海无涯

导航

EF Core 分页查询 页码导航 

  1 namespace MvcMovie.Utility
  2 {
  3     /// <summary>
  4     /// 分页帮助类
  5     /// </summary>
  6     public class PageHelper
  7     {
  8         public PageHelper(int pageSize, int pageIndex)
  9         {
 10             this.PageSize = pageSize;
 11             this.PageIndex = pageIndex;
 12         }
 13         private long _count = 0;
 14         /// <summary>
 15         /// 总记录数
 16         /// </summary>
 17         public long Count
 18         {
 19             get
 20             {
 21                 return _count;
 22             }
 23             set
 24             {
 25                 _count = value;
 26                 TotalPage = CalacTotalPage(value);
 27             }
 28         }
 29         /// <summary>
 30         /// 总页数
 31         /// </summary>
 32         public int TotalPage { get; private set; } = 1;
 33         /// <summary>
 34         /// 当前页
 35         /// </summary>
 36         public int PageIndex { get; set; } = 1;
 37         /// <summary>
 38         /// 页大小(一页显示的记录条数)
 39         /// </summary>
 40         public int PageSize { get; set; } = 10;
 41         /// <summary>
 42         /// 计算总页数
 43         /// </summary>
 44         /// <param name="count">总记录数</param>
 45         /// <returns></returns>
 46         public int CalacTotalPage(long count)
 47         {
 48             return (int)Math.Ceiling(count * 1.0 / PageSize);
 49         }
 50         /// <summary>
 51         /// 页开始记录位置
 52         /// </summary>
 53         public int StartIndex
 54         {
 55             get
 56             {
 57                 return (int)(PageIndex - 1) * PageSize;
 58             }
 59         }
 60         /// <summary>
 61         /// 是否有上一页
 62         /// </summary>
 63         /// <returns></returns>
 64         public bool HasPrevious
 65         {
 66             get
 67             {
 68                 return PageIndex > 1;
 69             }
 70         }
 71         /// <summary>
 72         /// 是否有下一页
 73         /// </summary>
 74         /// <returns></returns>
 75         public bool HasNext
 76         {
 77             get
 78             {
 79                 return PageIndex < TotalPage;
 80             }
 81         }
 82         /// <summary>
 83         /// 上一页页码
 84         /// </summary>
 85         public int PreviousPageIndex
 86         {
 87             get
 88             {
 89                 int index = PageIndex - 1;
 90                 if (index > 0)
 91                 {
 92                     return index;
 93                 }
 94                 return 1;
 95             }
 96         }
 97         /// <summary>
 98         /// 下一页页码
 99         /// </summary>
100         public int NextPageIndex
101         {
102             get
103             {
104                 int index = PageIndex + 1;
105                 if (index <= TotalPage)
106                 {
107                     return index;
108                 }
109                 return TotalPage;
110             }
111         }
112 
113     }
114 }
 public class EmployeeViewModel
    {

        public List<Employee>? Employees { get; set; }
        public Employee Employee { get; set; }=new Employee();

        public PageHelper PageHelper { get; set; }
    }

　

public class EmployeeController : Controller
    {
        MvcMovieContext _dbContext;
        IConfiguration _config;
        int _pageSize = 5;
        public EmployeeController(MvcMovieContext dbContext, IConfiguration config)
        {
            _dbContext = dbContext;
            _config = config;
            _pageSize = Convert.ToInt32(config["PageSize"]);
        }
        public async Task<IActionResult> Index(int pageIndex = 1)
        {
            return View(await GetViewModel(pageIndex));
        }
 private async Task<EmployeeViewModel> GetViewModel(int pageIndex = 1)
        {//分页查询
            EmployeeViewModel viewModel = new EmployeeViewModel();
            viewModel.PageHelper = new Utility.PageHelper(_pageSize, pageIndex);
            viewModel.PageHelper.Count = await _dbContext.Employees.LongCountAsync();

            var query = _dbContext.Employees.Skip(viewModel.PageHelper.StartIndex).Take(_pageSize);
            viewModel.Employees = await query.ToListAsync();
            return viewModel;
        }

    }
@model EmployeeViewModel

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
    新添员工
</button>

<!-- 新添员工 -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div id="saveForm" class="modal-content">
            <form id="saveForm" asp-action="Create" method="post">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel">新添员工</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label asp-for="Employee.Name" class="control-lable"></label>
                        <input asp-for="Employee.Name" class="form-control" autofocus />
                        <span asp-validation-for="Employee.Name" class="text-danger"></span>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary btnCancel" data-bs-dismiss="modal">Close</button>
                    <button id="btnSave" type="submit" class="btn btn-primary">保存</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!--删除员工-->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="saveForm" method="post">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel">删除员工</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <h2>你真的想删除这个员工吗？</h2>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary btnCancel" data-bs-dismiss="modal">Close</button>
                    <button id="btnDelete" type="button" class="btn btn-primary">删除</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!--编辑-->
<div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form asp-action="Update" id="EditForm" method="post">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel">修改员工</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <input class="updateId" type="hidden" asp-for="Employee.Id" />
                        <label asp-for="Employee.Name" class="control-lable"></label>
                        <input id="empName" asp-for="Employee.Name" class="form-control" />
                        <span asp-validation-for="Employee.Name" class="text-danger"></span>

                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary btnCancel" data-bs-dismiss="modal">Close</button>
                    <button id="btnSave" type="submit" class="btn btn-primary">修改</button>
                </div>
            </form>
        </div>
    </div>
</div>

<input type="hidden" id="EmpId" />

<table class="table">
    <thead class="thead-dark">
        <tr>
            <th scope="col">#</th>
            <th scope="col">Name</th>
            <th scope="col">Actions</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model.Employees)
        {
            <tr>
                <th scope="row">@item.Id</th>
                <td>@item.Name</td>
                <td>
                    <a class="btn btn-danger" onclick="EditForm(@item.Id)" id="EditForm">编辑</a>|
                    <a class="btn btn-danger" onclick="DeleteForm(@item.Id)" id="showModal">删除</a>
                </td>
            </tr>
        }
    </tbody>
</table>

<nav aria-label="分页页码">
    <ul class="pagination">
        @if (Model.PageHelper.HasPrevious)
        {
            string url = $"/Employee/?pageindex={Model.PageHelper.PreviousPageIndex}";
            <li class="page-item"><a class="page-link" href=@url>上一页</a></li>
        }
        else
        {
            <li class="page-item disabled"><a class="page-link" href="#">上一页</a></li>
        }
        @for (int i = 1; i <= Model.PageHelper.TotalPage; i++)
        {
            string url = $"/Employee/?pageindex={@i}";
            <li class="page-item"><a class="page-link" href=@url>@i</a></li>
        }
        @if (Model.PageHelper.HasNext)
        {
            string url = $"/Employee/?pageindex={Model.PageHelper.NextPageIndex}";
            <li class="page-item"><a class="page-link" href=@url>下一页</a></li>
        }
        else
        {
            <li class="page-item disabled"><a class="page-link" href="#">下一页</a></li>
        }
    </ul>
</nav>

@section Scripts {
    @{
        await Html.RenderPartialAsync("_ValidationScriptsPartial");
    }
    <script>
        //保存当前Id到 EmpId 文本控件
        var DeleteForm = function (id) {
            $("#EmpId").val(id);
            $("#deleteModal").modal('show');
        }
        //打开对话框并初始化控件
        var EditForm = function (id) {
            $.ajax({
                type: "GET",
                url: "/Employee/GetEmployee",
                data: { id: id },
                success: function (employee) {
                    $("#editModal").modal('show');
                    $("#empName").val(employee.name);
                    $(".updateId").val(employee.id);
                }
            })
        }
        $(document).ready(function () {
            //$("#btnSave").click(function()
            //{
            //    var empForm=$("#saveForm").serialize();
            //    $.ajax({
            //        type:"POST",
            //        url:"/Employee/Create",
            //        data:empForm,
            //        success:function(){
            //            window.location.href="/Employee/Index";
            //        }
            //    })
            //})
            //当点取消按钮时，导航到首页
            $(".btnCancel").click(function () {
                window.location.href = "/Employee/Index";
            })

            $("#btnDelete").click(function () {
                var currentId = $("#EmpId").val();
                $.ajax({
                    type: "POST",
                    url: "/Employee/Delete",
                    data: { id: currentId },
                    success: function (result) {
                        if (result) {
                            $("#EmpId").val(null);
                            window.location.href = "/Employee/Index";
                        }
                        else {
                            alert("删除失败");
                        }
                    }
                })
            })


        })
    </script>
}

　　

　

posted on 2022-10-01 11:25  宁静致远.  阅读(214)  评论(0)    收藏  举报