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

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

先看效果吧：

AJAX异步请求

ASP.NET中AJAX异步请求刷新用户实现table的拼接以及用户属性更改和账号禁用
1、创建页面结构
2、添加实体数据模型
3、安装Json包
4、添加一般处理程序，对数据进行更改和查询
5、定义ajax，实现刷新、修改和禁用效果

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，实现刷新、修改和禁用效果

//一般处理程序的路径urlvar 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沟通。