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

//一般处理程序的路径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
如果你觉得有用的话，就留个赞吧！蟹蟹