其他分享
首页 > 其他分享> > .net5 core Razor项目实战系列之八:用户管理功能的实现 (用户列表分页显示)

.net5 core Razor项目实战系列之八:用户管理功能的实现 (用户列表分页显示)

作者:互联网

用户列表的实现和部门列表是相似的,但我们要根据这个业务对象的特点增加3个功能点:

1. 增加一个分页的功能。

一个企业的员工数可能有很多,所以我们对用户列表做一下分页,

另外我们在设计用户表的时候将部门名称也包含进去了的,这样的设计和数据库的设计范式相违背,

但好处是取用户的部门名称的时候不用再去关联部门表,提高了查询效率。

当表的数据量很大而业务对象的改动比较小的时候可以适当的使用这种设计方式,利大于弊的。

2. 增加一个查询功能。

可以按部门和用户名查询,部门是一个下拉列表,用户名是输入框接受用户输入名称。

3. 增加删除功能。

将该用户信息从数据库物理删除。

 

接下来我们实现用户列表显示的功能,在 Auth 文件夹下添加Razor页 UserList.cshtml ,

然后在菜单中加入【用户管理】链接,地址指向 UserList.cshtml,代码如下:

<ul class="navbar-nav flex-grow-1">
    <li class="nav-item">
        <a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
    </li>

    <li class="nav-item">
        <a class="nav-link text-dark" asp-area="" asp-page="/Auth/DeptList">【部门管理】</a>
    </li>
    <li class="nav-item">
        <a class="nav-link text-dark" asp-area="" asp-page="/Auth/UserList">【用户管理】</a>
    </li>

    <li class="nav-item">
        <a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
    </li>
    <li class="nav-item">
        @if (Context.User.Identity.IsAuthenticated)
        {
            <a class="nav-link text-dark" asp-area="" asp-page="/Auth/Signout">[登出]</a>
        }
        else
        {
            <a class="nav-link text-dark" asp-area="" asp-page="/Auth/Signin">[登录]</a>
        }
    </li>
</ul>

UserList.cshtml 代码如下:

@page
@model AuthManagement.Pages.Auth.UserListModel
@using AuthManagement.DbUtil.Entity
@{
    ViewData["Title"] = "用户管理";
}


<form id="form1" method="get">
    部门:<select name="did">
        <option value="0"> </option>
        @foreach (TDept item in Model.DeptList)
        {
            if (item.DeptId.ToString() == Request.Query["did"])
            {
                <option value="@item.DeptId" selected>@item.DeptName</option>
            }
            else
            {
                <option value="@item.DeptId">@item.DeptName</option>
            }
        }
    </select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    姓名:<input type="text" name="name" style="width:120px;" value="@Request.Query["name"]" />&nbsp;
    <!--将分页的参数放在form中和查询条件一起提交,分页本质也是对数据的一种过滤-->
    <input type="hidden" id="page" name="page" value="@Model.PageIndex" />
    <button type="submit">查询</button>
</form>
<table border="1" width="60%" style="margin-top:4px;">
    <tr style="background-color:antiquewhite;height:40px;">
        <td>编号</td>
        <td>姓名</td>
        <td>手机</td>
        <td>部门</td>
        <td>账号</td>
        <td>创建时间</td>
        <td><a href="/Auth/UserEdit?userid=0" target="_blank">新增用户</a></td>
    </tr>
    @foreach (TUser item in Model.UserList) //遍历输出部门信息
    {
        <tr style="height:30px;">
            <td>@item.UserId</td>
            <td>@item.UserName</td>
            <td>@item.Mobile</td>
            <td>@item.DeptName</td>
            <td>@item.SigninAcc</td>
            <td>@item.CreateTime</td>
            <td>
                <a href="/Auth/UserEdit?userid=@item.UserId" target="_blank">修改</a>&nbsp;&nbsp;
                <!--注:按约定 asp-page-handler 属性后的值对应的后台方法是 OnGet+Value,这里是OnGetCancel和OnGetDelete-->
                <a target="_self" asp-page-handler="Cancel" asp-route-uid="@item.UserId" onclick="return confirm('锁定后用户不能登录,确定要锁定吗?');">锁定</a>&nbsp;&nbsp;
                <a target="_self" asp-page-handler="Delete" asp-route-uid="@item.UserId" onclick="return confirm('确定要删除吗?');">删除</a>
            </td>
        </tr>
    }
    @if (Model.UserList.Count == 0)
    {
        <tr style="height:30px;">
            <td colspan="7" align="center">没有查询到用户信息!</td>
        </tr>
    }
</table>
<span>第 @Model.PageIndex 页 / 共 @Model.PageCount 页 &nbsp;&nbsp; 每页 @Model.PageSize 笔 / 共 @Model.RecordCount 笔</span>
@if (Model.RecordCount > Model.PageSize) //如果记录数大于分页大小就启用分页显示
{
    <a href="javascript:document.getElementById('page').value=1;document.getElementById('form1').submit();">首页</a>
    <!--因为分页参数page放在form中,所以这里用javascript做加减操作后提交form就可以了-->
    <a href="javascript:var obj=document.getElementById('page');obj.value=parseInt(obj.value)+1;if(obj.value>@Model.PageCount){obj.value=@Model.PageCount};document.getElementById('form1').submit();">下一页</a>
    <a href="javascript:var obj=document.getElementById('page');obj.value=parseInt(obj.value)-1;if(obj.value<1){obj.value=1};document.getElementById('form1').submit();">上一页</a>
    <a href="javascript:document.getElementById('page').value=@Model.PageCount;document.getElementById('form1').submit();">尾页</a>
}

UserList.cshtml.cs 代码如下:

using System;
using System.Collections.Generic;
using System.Linq; 
using AuthManagement.DbUtil.Entity; 
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace AuthManagement.Pages.Auth
{
    public class UserListModel : PageModel
    {
        private readonly AuthDbContext _context;

        //在构造函数中对 AuthDbContext 做依赖注入
        public UserListModel(AuthDbContext context)
        {
            _context = context;
        }

        //定义用户列表属性,用于传递给.cshtml页面使用(在OnGet()方法中赋值)
        public IList<TUser> UserList { get; set; }

        //初始化查询条件中的部门下拉列表
        public IList<TDept> DeptList { get; set; }

        public readonly int PageSize=3; //定义分页大小
        public int RecordCount = 0;//记录总数,在InitUser()中根据查询结果赋具体的值
        public int PageCount = 0;//分页总数,在InitUser()中根据查询结果赋具体的值
        public int PageIndex = 1;//当前页,在InitUser()中根据查询结果赋具体的值

        public void OnGet()
        {
            InitPageIndex();
            InitDept();
            InitUser();
        }

        private void InitPageIndex()
        {
            string page = Request.Query["page"];
            int pageIndex = 1;
            if (int.TryParse(page, out int idx))
            {
                pageIndex = idx;
                if (pageIndex < 1) { pageIndex = 1; }
                this.PageIndex = pageIndex;
            }
        }


        private void InitDept()
        {
            //初始化查询条件中的部门
            DeptList = _context.TDepts.Where<TDept>(dept => dept.IsValid == 1).ToList<TDept>();
        }

        
        private void InitUser()
        { 
            //用户点查询时Get方式传递查询条件
            string did = Request.Query["did"];
            string userName = Request.Query["name"];
             
            //初始化查询条件 
            IQueryable<TUser> userList = _context.TUsers.Where<TUser>(user => user.UserId > 0);
            //加上用户名称的过滤条件
            if (!string.IsNullOrWhiteSpace(userName))
            {
                //模糊查询,Contains() 相当于 like '%张%';
                //StartsWith()相当于 like '张%',EndsWith()相当于 like '%张'
                userList = userList.Where<TUser>(user => user.UserName.Contains(userName));
            }
            //加上部门的过滤条件
            if (int.TryParse(did, out int deptId))
            {
                if (deptId > 0)
                {
                    userList = userList.Where<TUser>(user => user.DeptId == deptId);
                }
            }

            //根据查询结果统计数据
            this.RecordCount = userList.Count();//初始化记录总数 
            this.PageCount = (int)Math.Ceiling((double)RecordCount / PageSize); //获取分页数(取最小整数用 Math.Floor())
            if (this.PageIndex > this.PageCount) { this.PageIndex = this.PageCount; } //当前页不能大于总页数

            //用 Skip() 结合 Take() 实现分页
            //Skip(n):跳过集合中的前n条数据取剩下所有的
            //Take(n):取集合中的前n条数据
            //比如 [1、2、3、4、5、6、7、8、9、10、11、12] 这样一个集合
            //Skip(5)=[6、7、8、9、10、11、12]; Take(5)=[1、2、3、4、5]
            //Skip(5).Take(5)=[6、7、8、9、10] 即从集合的第6条数据开始取5条数据
            this.UserList = userList.Skip<TUser>((this.PageIndex - 1) * this.PageSize).Take<TUser>(this.PageSize).ToList<TUser>();
        }


        //注:前端页面如果设置了handler属性:asp-page-handler="Cancel",
        //则对应的方法是 OnGetCancel, 即 OnGet + Cancel
        public void OnGetCancel()
        {
            string uid = Request.Query["uid"];
            if (int.TryParse(uid, out int userId))
            {
                TUser user = _context.TUsers.Find(userId);
                user.IsValid = 0;
                _context.SaveChanges();
            }

            //锁定后要重新加载数据,否则前端页面取不到值。
            OnGet();
            Response.Redirect(Request.Path);
        }


        //注:前端页面如果设置了handler属性:asp-page-handler="Delete",
        //则对应的方法是 OnGetDelete, 即 OnGet + Delete
        public void OnGetDelete()
        {
            string uid = Request.Query["uid"];
            if (int.TryParse(uid, out int userId))
            {
                TUser user = _context.TUsers.Find(userId);
                _context.TUsers.Remove(user);
                _context.SaveChanges();
            }

            //作废后要重新加载数据,否则前端页面取不到值。
            OnGet();
            Response.Redirect(Request.Path);
        }

    }
}

 

标签:core,item,之八,用户,int,nbsp,context,Model,public
来源: https://www.cnblogs.com/pfm33/p/14742654.html