ASP.NET中AJAX异步请求刷新用户实现table的拼接以及用户属性更改禁用使用EF实体数据模型（源码附项目）

ASP.NET中AJAX异步请求刷新用户实现table的拼接以及用户属性更改和账号禁用

先看效果吧：

1、创建页面结构

注意引入jquery和js文件

<div>
    <table class="pure-table pure-table-striped pure-table-bordered">
         <thead>
             <tr>
               <th>编号</th>
               <th>登录账号</th>
               <th>用户姓名</th>
               <th>联系电话</th>
               <th>用户状态</th>
               <th>注册日期</th>
               <th>所属角色</th>
               <th>操作</th>
             </tr>
         </thead>
         <tbody>
             
         </tbody>
     </table>
 </div>
 <script src="../Assets/js/jquery-3.4.1.min.js"></script>
 <script src="js/userManager.js"></script>

2、添加实体数据模型

在这里我用的是EF数据模型，也可以用DBHelper实现
点击新建项->数据->ADO.NET实体数据模型

来自数据库的EF设计器

选择新建连接，选择服务器名和数据库名

选择要添加的表、视图、存储过程和函数

3、安装Json包

4、添加一般处理程序，对数据进行更改和查询

using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using zonghexiangmu.BLL;
using zonghexiangmu.DAL;

namespace zonghexiangmu.admin.handlers
{
    /// <summary>
    /// userManagerHandler
    /// </summary>
    public class userManagerHandler : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            string json = "";
            if (context.Request["rl"] != null)
            {
                //做投影操作
                var list = RolesService.SelectAll().Select(u => new {
                    RoleId = u.RoleId,
                    Name = u.Name
                }).ToList();
                //安装Newtonsoft.Json包,转换数据
                json = JsonConvert.SerializeObject(list);
            }
            else
            {
                string rid = context.Request["rid"];
                string uid = context.Request["uid"];
                if (rid != null && uid != null)
                {
                    //更改用户角色
                    int roleId = Convert.ToInt32(rid);
                    int userId = Convert.ToInt32(uid);
                    bool jg=BLL.UserService.ChangeRole(userId, roleId);
                }
                else if (uid != null)
                {
                    //启用或禁用用户
                    int userid = Convert.ToInt32(uid);
                    bool jg=BLL.UserService.RemoveUser(userid);
                }
                var list = UserService.QueryAllUsers().Select(u => new
                {
                    UserId = u.UserId,
                    LoginId = u.LoginId,
                    LoginPwd = u.LoginPwd,
                    UserName = u.UserName,
                    RoleId = u.RoleId,
                    Phone = u.Phone,
                    UserStatus = u.UserStatus==0?"禁用":"启用",
                    DateCreated = string.Format("{0:D}", u.DateCreated)
                }).ToList();
                json = JsonConvert.SerializeObject(list);
            }
            

            context.Response.ContentType = "application/json";
            context.Response.Write(json);
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

5、定义ajax，实现刷新、修改和禁用效果

//一般处理程序的路径url
var url = "handlers/userManagerHandler.ashx";
$(function () {
    var r = Math.random();
    $.post(url + "?" + r, function (jsonData) {
        loadData(jsonData)
    }, "json");
});
//获取用户信息并生成表格数据
function loadData(data) {
    var r = Math.random();
    //查询角色数据
    $.post(url + "?" + r, { rl: 0 }, function (jsonData) {
        $("tbody").empty();
        //生成表格数据
        for (var i = 0; i < data.length; i++) {
            var user = data[i];
            var status = user.UserStatus == '禁用' ? '启用' : '禁用';
            var $tr = $("<tr></tr>");
            $tr.append("<td>" + user.UserId + "</td>");
            $tr.append("<td>" + user.LoginId + "</td>");
            $tr.append("<td>" + user.UserName + "</td>");
            $tr.append("<td>" + user.Phone + "</td>");
            $tr.append("<td>" + user.UserStatus + "</td>");
            $tr.append("<td>" + user.DateCreated + "</td>");
            //生成角色信息下拉列表框
            var $rolesTd = $("<td></td>");
            var $roles = $("<select id='ddlRoles" + user.UserId + "'></select>");
            for (var j = 0; j < jsonData.length; j++) {
                var role = jsonData[j];
                if (role.RoleId == user.RoleId) {
                    $roles.append("<option value='" + role.RoleId + "' selected='true'>" + role.Name + "</option>");
                } else {
                    $roles.append("<option value='" + role.RoleId + "'>" + role.Name + "</option>");
                }
            }
            $rolesTd.append($roles);
            $rolesTd.append("<input type='button' class='bt button-default pure-button pure-button-primary' οnclick='btnChange_click(\"#ddlRoles" + user.UserId + "\"," + user.UserId + ")' value='更改' />");
            $tr.append($rolesTd);
            if (user.RoleId != 1) {
                $tr.append("<td><input  type='button' class='button-default pure-button tools-button' οnclick='btnRemove_click(this," + user.UserId + ")' value='" + status + "' /></td>");
            }
            else {
                $tr.append("<td> - </td>");
            }

            $("tbody").append($tr);
        }
    }, "json");
}
//更改用户角色
function btnChange_click(ddl, userId) {
    var roleId = $(ddl).val();
    var r = Math.random();
    $.post(url + "?" + r, { uid: userId, rid: roleId }, function (jsonData) {
        if (jsonData != "") {
            alert('修改成功');
            loadData(jsonData);
        }
    }, "json");
}
//启用或禁用用户
function btnRemove_click(btn, userId) {
    var r = Math.random();
    var lbl = ($(btn).val() == "禁用" ? "启用" : "禁用");
    $(btn).val(lbl);
    $.post(url + "?" + r, { uid: userId }, function (jsonData) {
        if (jsonData!="") {
            alert('修改成功');
            loadData(jsonData);
        }
    }, "json");
}

到此就结束啦，快去练习一下吧！欢迎大佬和小Monkey沟通。

感谢大佬指正 小Monkey
如果你觉得有用的话，就留个赞吧！蟹蟹