Ajax的CRUD全套已测试
Jquery部分(需要引入到具体用得着这些脚本的界面)
jquery-1.7.1.js
jquery.easyui.min.js
easyui-lang-zh_CN.js
CSS部分
D:\VS2019\Asp.Net.WebApp2019\WebApp2019ASPX\CSS\themes\default\easyui.css
三层基本架构
UI(应用程序或网站)+BLL类库+DAL类库+Model类库+Common 类库
功能(一)用户列表
html部分 定义一个只含表头的空白表格 其它取自数据库的数据通过js拼接串.appendTo(tabId);来实现
取数据向服务端发送一个异步请求,返回Json格式的js格式的数组,回调函数得到该json到前端并转为Json对象
前端循环该Json对象拼接追加到空白表格体 其中详细/删除/编辑的超链接建类(标识单击事件)和id属性(取值)
为什么不直接用id选择器呢?因为Id选择器必须唯一,而每条的Id值是不一样的, 这样就没法用Id选择器给列表加单击事件了, 只能用类选择器给所有列表项加选择器的单击事件,且必须所有数据在表格上加载(循环)完了,才给详细单击事件加上,其它 删除/编辑也加到循环完了才加单击事件 而增加不是,是窗体加载完绑定增加单击事件.
全部Ajax+Jquery异步请求CRUD
需要的Jquery及CSS
https://files.cnblogs.com/files/noteTech/AjaxJquery%E9%9C%80%E8%A6%81%E7%9A%84CssJs.rar?t=1780479742&download=true
(1)UserInfoList.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="../CSS/themes/default/easyui.css" rel="stylesheet" />
<script src="../JS/jquery-1.7.1.js"></script>
<script src="../JS/jquery.easyui.min.js"></script>
<script src="../JS/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
$(function () {//页面加载做一件事儿
$("#detailDiv").css("display", "none");//隐藏功能层
$("#addUserDiv").css("display", "none");
$("#editUserDiv").css("display", "none");
loadUserInfo();//加载列表事件(方法代码见下)
$("#addUserInfo").click(function () {//只有单击才发生 添加用户
addUserFormShow();
});
});
//展示 添加用户 表单
function addUserFormShow() {
$("#addUserDiv").css("display", "block");//展示添加div
$('#addUserDiv').dialog({//展示放在此窗口,此内参数是Json格式
title: "添加用户",
width: 300,
height: 200,
modal: true,//模态窗口
collapsible: true,//可折叠
maximizable: true,
resizable: true,//可拖调窗口大小
buttons: [{
text: 'Ok',
iconCls: 'icon-ok',
handler: function () {
//alert('ok');
addUser()//点击窗口OK 执行方法()代码见下函数 方法要去后端ashx执行 插入操作 并异步返回结果(用data字符串标识)
}
}, {
text: 'Cancel',
handler: function () {
$('#addUserDiv').dialog('close');//点击取消关闭增加窗口
}
}]
});
}
//完成用户添加用一般处理程序 一个异步Ajax Post请求
function addUser() {
var jsonObjDatas = $("#addUserForm").serializeArray();//用方法 得到对所有表单元素封装的Json对象 是对象 多键值 一定要记住这个方法 总用 不这样取数就是用Id一个个取了 当表单元素多时非常麻烦
//alert(jsonDatas[0].name + "--->" + jsonDatas[0].value);//txtUserName--->aaa
$.post("AddUserInfo.ashx", jsonObjDatas, function (data) {//传到后端ashx用post异步 参数为jsonObjDatas对象(封装了要插入的表单数据) 接收当然用request.form[]因为Post
if (data == "ok") {// 清空表格 加载新表格 关闭表单窗口 清空表单元素输入值
$("#addUserForm input").val("");//清空表单 表单元素清空值用val 文本类如span用text
$('#addUserDiv').dialog('close');//关闭表单窗口所在层 即关掉表单窗口
$("#tbList tr:gt(0)").remove();//清旧列表 否则在原表基础上再插
loadUserInfo();//重新加载新列表
}
else {
$.messager("提示", "插入数据失败", "error");
}
});
}
//加载用户列表 方法
function loadUserInfo() {//用$.post请求也可
$.get("UserInfoListJson.ashx", {}, function (serverJsonStr) {//得到一个字符串类型Json格式的数组 一个元素是一条Json串
//alert(serverDataJson);//是可以弹出 看得懂的Json格式的字符串
//console.log(serverDataJson);//也可以用alert(serverDataJson)测试 这个是在检查功能的请求响应下看
var jsonsObj = $.parseJSON(serverJsonStr);//由服务端的Json字符串转成Json对象供js使用
//alert(jsonsObj);//由字符串转成的Json对象,看不懂了
var datasLength = jsonsObj.length;
for (var i = 0; i < datasLength; i++) {//长串后用\可回车断行, 好读好看 另在家总不出数据是因为<tr><td></td>中间有空格了
//建一行<tr>并追加到table中
$("<tr>\
<td>" + jsonsObj[i].Id + "</td>\
<td>" + jsonsObj[i].UserName + "</td>\
<td>" + jsonsObj[i].UserPwd + "</td>\
<td>" + changeDateFormat(jsonsObj[i].RegTime) + "</td>\
<td><a href='javascript:void(0)' class='details' nid='"+ jsonsObj[i].Id + "'>详细</a></td>\
<td><a href='javascript:void(0)' class='deletes' did='"+ jsonsObj[i].Id + "'>删除</a></td>\
<td><a href='javascript:void(0)' class='edits' eid='"+ jsonsObj[i].Id + "'>编辑</a></td>\
</tr>").appendTo("#tbList");//创建tr td 长字符串后用\ 回车多行是一行 由于JsonsObj来源于服务器端从数据库里查的集合,则其键名为字段名或类属性名 注意也增加和编辑里从表单里生成的JsonObj里用的是表单元素的Name名
}
bindDetailClick();//注意一定是把表格中的所有数据加载完成了 才能给表格中的超链接加单击事件
bindDeleteClick();
bindEditClickShowForm();//绑定单击编辑的事件
});
}
//展示要修改的数据
function bindEditClickShowForm() {
$(".edits").click(function () {//类选择器 的单击事件
var id = $(this).attr("eid");//通过属性eid 拿到列表某行Id
$.post("ShowDetail.ashx", { "id": id }, function (data) {//Ajax异步post请求 用request接收 也可用get请求 Json格式的id发送到服务端 响应回来的是Json格式的UserInfo类的字符串
var serverData = $.parseJSON(data);//将返回的Json字符串data转为Json对象 必须转对象 才能被js用
$("#editIdId").val(serverData.Id);//将得到的Json对象的值填充到编辑表单元素的值 由于是编辑 id是隐藏域
$("#editUserNameId").val(serverData.UserName);//此及其它为文本框 且由于数据取自类属性或数据库 Json对象的键为字段名或UserInfo类属性名
$("#editUserPwdId").val(serverData.UserPwd);
$("#editRegTimeId").val(serverData.RegTime);//文本框写值用val(), 标签如span用text()
});
$("#editUserDiv").css("display", "block");//弹出显示
$('#editUserDiv').dialog({//用easyUI展示弹出的显示 否则在原位置显示 难看不实用 不专业 依赖easyui.css样式
title: "用户详细信息",
width: 300,
height: 200,
modal: true,//模态 其在前 后列表点无效
collapsible: true,
maximizable: true,
resizable: true,
buttons: [{
text: 'Ok',
iconCls: 'icon-ok',
handler: function () {
//alert('ok');
editUserInfo();//点OK执行这个方法,方法代码见下函数
}
}, {
text: 'Cancel',
handler: function () {
$('#editUserDiv').dialog('close');//关闭编辑表单所在层
}
}]
});
});
}
//执行数据更新 点击上面显示的编辑表单的ok按钮时 执行如下函数代码
function editUserInfo() {
var jsonObj = $("#editUserForm").serializeArray();//通过js方法拿到编辑表单元素值封装的Json对象,注意我的描述,Josn对象与Json字符串不一回事儿,记住这个方法
$.post("EditUserInfo.ashx", jsonObj, function (data) {//注意jsonObj来源于编辑表单,服务端取时用表单name属性接收
if (data == "ok") {
$('#editUserDiv').dialog('close');//关闭编辑表单窗口 不用val()清除编辑表单元素值了,因为编辑前点某行编辑根据查找自动填充新值
$("#tbList tr:gt(0)").remove();//清列表旧数据
loadUserInfo();//重新加载列表新数据
}
else {
$.messager.alert("提示", "更新失败", "error");
}
});
}
//展示详细信息
function bindDetailClick() {
$(".details").click(function () {//类选择器 单击事件
var id = $(this).attr("nid");
//var id = $(this).data("nid");//更推荐的 .data("nid") 获取
//var id = this.getAttribute("nid");//原生 JS 等价写法,非jQuery
$.post("ShowDetail.ashx", { "id": id }, function (data) {//{ "id": id }这个参数就是Json对象 不是string,所以此处参数要求是Json对象
var serverData = $.parseJSON(data);//而从服务端传回来的data是Json格式的string,所以需要此转换成Json对象才能被js使用
$("#userName").text(serverData.UserName);//看没,span等就是text()方法赋值,表单文本框等表单元素用val()赋值
$("#userPwd").text(serverData.UserPwd);
$("#regTime").text(serverData.RegTime);
});
$("#detailDiv").css("display", "block");//显示详细
//美化开始
$('#detailDiv').dialog({//显示详细的美化 依赖easyui.css样式
title: "用户详细信息",
width: 300,
height: 200,
modal: true,
collapsible: true,
maximizable: true,
resizable: true,
buttons: [{
text: 'Ok',
iconCls: 'icon-ok',
handler: function () {
alert('ok');
//$('#detailDiv').dialog('close');
}
}, {
text: 'Cancel',
handler: function () {
$('#detailDiv').dialog('close');
}
}]
});
//美化结束
});
}
//删除用户
function bindDeleteClick() {
$(".deletes").click(function () {//类选择器 的删除超链接 单击事件
var id = $(this).attr("did");
//删除提示 可直接用confirm
$.messager.confirm("删除提示", "确定要删除么?", function (r) {
//alert(r);
if (r) {
$.post("DeleteUser.ashx", { "id": id }, function (data) {
//alert(data);
if (data == "ok") {//删除成功
$("#tbList tr:gt(0)").remove();//先清空表格数据行 否则在原来基础上又添加一遍删除后的 标签选择器 行 gt>0行的移除 0行为标题行
loadUserInfo();//在空白表格(只有标题行)再重新加载删除后的表格行
$.messager.show({
title: '提示',
msg: '删除成功',
showType: 'show'
});//查帮助 show可用solid
}
else {
$.messager.alert("提示", "删除失败", "error");
}
});
}
else {
//alert(r);//false
}
});
});
}
//从毫秒数日期 转化为直接日期
function changeDateFormat(cellval) {
var date = new Date(parseInt(cellval.replace("/Date(", "").replace(")/", ""), 10));//替换 剩余纯数字(毫秒时间戳)转日期
var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;//+1是因为得到的月是从0月开始
var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();//我靠 getDate写成了getdate
return date.getFullYear() + "-" + month + "-" + day;//这时day前面+缺失 都导致数据无法读出
//var date = new Date(parseInt(cellval.replace("/Date(", "").replace(")/", ""), 10));
//var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
//var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
//return date.getFullYear() + "-" + month + "-" + currentDate;
}
</script>
</head>
<body>
<a href="javascript:void(0)" id="addUserInfo">添加用户</a><br />
<!--列表 只列表头 开始-->
<table id="tbList">
<tr>
<th>Id</th>
<th>UserName</th>
<th>UserPwd</th>
<th>RegTime</th>
<th>详细</th>
<th>删除</th>
<th>编辑</th>
</tr>
</table>
<!--列表 结束-->
<!------------详细信息 一个层------------------>
<div id="detailDiv">
<table>
<tr>
<td>用户名</td>
<td><span id="userName"></span></td>
</tr>
<tr>
<td>密码</td>
<td><span id="userPwd"></span></td>
</tr>
<tr>
<td>注册时间</td>
<td><span id="regTime"></span></td>
</tr>
</table>
</div>
<!------------详细信息结束------------------>
<!---添加用户开始 一个层-->
<div id="addUserDiv">
<form id="addUserForm">
<table>
<tr>
<td>用户名</td>
<td><input type="text" name="txtUserName" id="txtName" /></td>
</tr>
<tr>
<td>密码</td>
<td><input type="text" name="txtUserPwd" /></td>
</tr>
</table>
</form>
</div>
<!---添加用户结束-->
<!---编辑用户开始 作为编辑条件的Id的隐藏域别忘了 一个层-->
<div id="editUserDiv">
<form id="editUserForm">
<input type="hidden" name="txtEditId" id="editIdId" />
<table>
<tr>
<td>用户名</td>
<td><input type="text" name="txtEditUserName" id="editUserNameId" /></td>
</tr>
<tr>
<td>密码</td>
<td><input type="text" name="txtEditUserPwd" id="editUserPwdId" /></td>
</tr>
</table>
</form>
</div>
<!---编辑用户结束-->
</body>
</html>
//UserInfoListJson.ashx得到全部列表数据 并序列化成Json格式的字符串,但由于多条数据,是一个Json格式的字符串JS(非C#)数组
using BLL;
using Model;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace WebApp2019ASPX._14AjaxUserInfoList
{
/// <summary>
/// UserInfoListJson 的摘要说明
/// </summary>
public class UserInfoListJson : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
UserInfoBLL bll = new UserInfoBLL();
List<UserInfo> list= bll.GetUserInfoList();
System.Web.Script.Serialization.JavaScriptSerializer js = new System.Web.Script.Serialization.JavaScriptSerializer();
string str= js.Serialize(list);//将List数据序列化成一个Json字符串,是一个javascript格式的数组,样式[..,..,..],每个元素是Json格式字符串
context.Response.Write(str);//返回给前端的jquery回调函数的data参数
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
//ShowDetail.ashx根据Id得到一个UserInfo对象的Json格式字符串 并返回 注意是Json字符串
using BLL;
using Model;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Script.Serialization;
namespace WebApp2019ASPX._14AjaxUserInfoList
{
/// <summary>
/// ShowDetail 的摘要说明
/// </summary>
public class ShowDetail : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
int id = Convert.ToInt32(context.Request.Form["id"]);//前端js用异步post过来的, 如果get异步则用.queryString,当然最好都省,只保留request,让系统判断是post还是get
UserInfoBLL bll = new UserInfoBLL();
UserInfo userInfo= bll.GetUserInfoBLL(id);//拿到对象
JavaScriptSerializer js = new JavaScriptSerializer();
string strJson= js.Serialize(userInfo);//转Json格式的string
context.Response.Write(strJson);//响应给回调函数的data
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
//EditUserInfo.ashx根据userInfo对象(含Id)执行更新用户信息 返回字符串标识值ok/no
using BLL;
using Model;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace WebApp2019ASPX._14AjaxUserInfoList
{
/// <summary>
/// EditUserInfo 的摘要说明
/// </summary>
public class EditUserInfo : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
UserInfo userInfo = new UserInfo();
userInfo.Id = Convert.ToInt32(context.Request["txtEditId"]);//前端是隐藏域hidden 由于是编辑
userInfo.UserName = context.Request["txtEditUserName"];//正常的text
userInfo.UserPwd = context.Request["txtEditUserPwd"];
userInfo.RegTime = DateTime.Now;
UserInfoBLL bll = new UserInfoBLL();
if (bll.EditUserInfoBLL(userInfo))
{
context.Response.Write("ok");
}
else
{
context.Response.Write("no");
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
//DeleteUser.ashx根据Id删除用户信息 返回ok/no字符串
using BLL;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace WebApp2019ASPX._14AjaxUserInfoList
{
/// <summary>
/// DeleteUser 的摘要说明
/// </summary>
public class DeleteUser : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
int id = Convert.ToInt32(context.Request["id"]);
UserInfoBLL bll = new UserInfoBLL();
if (bll.DeleteUserInfoBLL(id))
{
context.Response.Write("ok");
}
else
{
context.Response.Write("no");
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
//AddUserInfo.ashx添加用户信息 返回String标识值ok/no
using BLL;
using Model;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace WebApp2019ASPX._14AjaxUserInfoList
{
/// <summary>
/// AddUserInfo 的摘要说明
/// </summary>
public class AddUserInfo : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
UserInfo userInfo = new UserInfo();
//由于前端是把增加表单元素的值封装JsonObj传过来的,在用request接收时,用表单元素的name属性接收
userInfo.UserName = context.Request.Form["txtUserName"];
userInfo.UserPwd = context.Request["txtUserPwd"];
userInfo.RegTime = DateTime.Now;
UserInfoBLL bll = new UserInfoBLL();
if (bll.AddUserInfoBLL(userInfo))
{
context.Response.Write("ok");
}
else
{
context.Response.Write("no");
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
Ajax分页
PageBarAjaxHelper.cs分页类在Common类库中
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace Common
{
public class PageBarAjaxHelper
{
public static string GetPageBar(int pageIndex, int pageCount)
{
if (pageCount == 1)
{
return string.Empty;
}
int start = pageIndex - 5;//数字页码条的起始数字
if (start < 1)
{
start = 1;
}
int end = start + 9;
if (end > pageCount)
{
end = pageCount;
//最后不够10页 重新计算start值
start = end - 9 < 1 ? 1 : end - 9;
}
StringBuilder sb = new StringBuilder();
if (pageIndex > 1)
{
//sb.AppendFormat("<a href='UserInfoListPage.aspx?pageIndex={0}'>上一页</a>", pageIndex - 1);
sb.AppendFormat("<a href='?pageIndex={0}' class='myPageBar'>上一页</a>", pageIndex - 1);
}
for (int i = start; i <= end; i++)
{
if (i == pageIndex)
{
sb.Append(i);//当前URL页码=当前数字 不展示成超链接
}
else
{
//sb.AppendFormat("<a href='UserInfoListPage.aspx?pageIndex={0}'>{0}</a>", i);
sb.AppendFormat("<a href='?pageIndex={0}' class='myPageBar'>{0}</a>", i);
}
}
if (pageIndex<pageCount)
{
//sb.AppendFormat("<a href='UserInfoListPage.aspx?pageIndex={0}'>下一页</a>", pageIndex + 1);
sb.AppendFormat("<a href='?pageIndex={0}' class='myPageBar'>下一页</a>", pageIndex + 1);
}
string str = sb.ToString();
return sb.ToString();
}
}
}
UserInfoListPage.html列表页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="../CSS/pageBarStyle.css" rel="stylesheet" />
<link href="../CSS/themes/default/easyui.css" rel="stylesheet" />
<script src="../JS/jquery-1.7.1.js"></script>
<script src="../JS/jquery.easyui.min.js"></script>
<script src="../JS/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
//加载网页要干啥
$(function () {//jq开头必写
$("#divDetail").css("display", "none");//第一件事 隐藏 html的增改查三个div层 列表框架不在层中不隐藏
$("#addUserDiv").css("display", "none");
$("#editUserDiv").css("display", "none");
loadUserInfoList(1);//为在此加载页面的方法时少写代码 定义一个方法(函数) 代码见下 测试分页的第一页写个1 分页***
$("#addUserHref").click(function () {//添加用户超链接的单击事件
showAddUserForm();//此方法(函数)代码如下
});
});
//显示添加用户层及层内Form
function showAddUserForm() {
$("#addUserDiv").css("display", "block");//显示层
$('#addUserDiv').dialog({//规划层的位置 通过easyUI.js 看没,下面都是关于dialog方法的参数,为json格式的参数 且json套json
width: 300,
height: 200,
title: "添加用户",
collapsible: true,
maximizable: true,
resizable: true,
modal: true,//模态窗口 它在前 别的无法点 只能点它
buttons: [{
text: 'Ok',
iconCls: 'icon-ok',
handler: function () {
addUser();//点击ok了 用方法一次性获取表单数据 Ajax异步执行添加操作 这里写一个方法 代码见后 逻辑清楚 更专业
}
}, {
text: 'Cancel',
handler: function () {
$('#addUserDiv').dialog('close');
}
}]
});
}
//执行添加用户
function addUser() {
var jsonDatas = $("#addUserForm").serializeArray();//一次性拿到表单元素的数据并封装到可被JS识别的Json对象中 通过下面alert测试知道是封装到对象中了
//alert(jsonDatas[0].name + "--->" + jsonDatas[0].value);//txtName=ccc
//for (var key in jsonDatas) {
// alert(jsonDatas[key].name + "--->" + jsonDatas[key].value);}
$.post("AddUser.ashx", jsonDatas, function (data) {//一个异步请求 服务端给回调函数参数data返回一个String类型的值
if (data == "ok") {
$("#addUserForm input").val("");//清空表单元素值 关闭层显示 清除表格旧数据 加载新数据
$("#addUserDiv").dialog('close');//写了个closed
$("#tabList tr:gt(0)").remove();
loadUserInfoList();
}
else {
$.messager.alert("提示", "添加失败", "error");
}
});
}
//用户列表 加载
function loadUserInfoList(pageIndex) {//学会alert调试js 分页***
//alert(pageIndex);
$.post("UserInfoListPage.ashx", { "pageIndex": pageIndex }, function (data) {// 分页***原无参post请求 向服务器发送异步post请求 无参,回调函数参数data接收服务器响应的string类型的Json数组
//alert(data);//..........................调试,能看懂是个串 分页后2部分了 前部分key=pageList,后部分key=pageBar
var jsonsObj = $.parseJSON(data);// 分页***和不分页代码没变,但回调的data承载的内容除列表Json串外还有页码条,ashx用了匿名类把列表及页码条加到了data中,使用时要区分,可监测data值指导使用 string的Json数组转JS认识的Json对象 分页后2部分了
//alert(jsonsObjs);
var jsonsObjLength = jsonsObj.pageList.length;// 分页***
//alert(jsonsObjLength);
for (var i = 0; i < jsonsObjLength; i++) {//由于Json数组对象来自服务端的List<UserInfo>,所以其键为UserInfo类属性名或数据库字段名
//alert(jsonsObj[i].UserName);//.........不同点位的调试 此次不出为<td>整成 < td >了 多空格了,其它早调试早解决了
$("<tr>\
<td>" + jsonsObj.pageList[i].Id + "</td>\
<td>" + jsonsObj.pageList[i].UserName + "</td>\
<td>" + jsonsObj.pageList[i].UserPwd + "</td>\
<td>" + jsonsObj.pageList[i].RegTime + "</td>\
<td><a href='javascript:void(0)' class='details' nid='" + jsonsObj.pageList[i].Id + "'>详细</a></td>\
<td><a href='javascript:void(0)' class='deletes' did='" + jsonsObj.pageList[i].Id + "'>删除</a></td>\
<td><a href='javascript:void(0)' class='edits' eid='" + jsonsObj.pageList[i].Id + "'>编辑</a></td>\
</tr>").appendTo("#tabList");//太长可串部分后接\+回车来断行 代码阅读性更强
}
$("#pageBarDiv").html(jsonsObj.pageBar);// 分页*** .text(jsonsObj.pageBar);//加页码条
bindPageBarClick();//这就不要加单击页码再执行这个了 在下面方法开始定义单击干什么
bindUserInfoDetailClick();//绑定用户详细信息事件(函数)
bindUserInfoDeleteClick();
bindUserInfoEditClick();
});
}
//绑定分页单击事件
function bindPageBarClick() {
$(".myPageBar").click(function () {//<a href='?pageIndex={0}' class='myPageBar'>下一页</a>
var pageIndex = $(this).attr('href').split('=')[1];//this为<a...标签 href为a标签的href属性?pageIndex={0},分割后拿到数组第2个值即{0}即页码
alert(pageIndex);
//拿到页码, 再用此pageIndex去调用LoadUserInfoList(pageIndex)方法就OK了
$("#tabList tr:gt(0)").remove();
loadUserInfoList(pageIndex);
return false;//如果不用这个,当拿到a标签里的页码后浏览器还要渲染那个a标签,至URL有?pageIndex=3这样的情况,而加了return false就截止了后续的渲染
});
}
//绑定用户详细信息事件(函数)
function bindUserInfoDetailClick() {
$(".details").click(function () {//类选择器 必须有, 否则直接出现了详情div层 只有点击了详细才显示层
//alert("detail");
var id = $(this).attr("nid");//nid引号别落
//alert(id);
$.post("UserInfoDetail.ashx", { "id": id }, function (data) {//data为服务端返回的Json格式的字符串(非js认识的json对象,js使用要转)
var serverData = $.parseJSON(data);//Json格式字符串转为Json对象
//alert(serverData);
$("#userName").text(serverData.UserName);//span非表单元素展示类Html标签 显示数据用text方法,通过id赋显示内容
$("#userPwd").text(serverData.UserPwd);
$("#regTime").text(serverData.RegTime);
});
$("#divDetail").css("display", "block");//显示
$("#divDetail").dialog({//规划层显示的更专业用easyUI
title: "用户详细",
width: 300,
height: 200,
modal: true,//模态窗口
collapsible: true,
maximizable: true,
resizable: true,
buttons: [{//Json格式的参数
text: 'Ok',
iconCls: 'icon-ok',
handler: function () {
//alert('ok');
$('#divDetail').dialog('close');
}
}, {
text: 'Cancel',
handler: function () {
$('#divDetail').dialog('close');
}
}]
});
});
}
//绑定用户删除事件(函数)
function bindUserInfoDeleteClick() {
$(".deletes").click(function () {//类选择器 单击事件
var id = $(this).attr("did");//取id还不能放到点击OK删除时再取,一点删除就得取 否则是undefined
//alert(id);
//提示删除 取id 发异步post请求用ashx删除 回调参数值 删除 删除表格内容并重载加载表格新内容
$.messager.confirm("对话框标题", "正文提示删除", function (r) {//r=True或False
//alert(r);
if (r) {
//取id不能放在这里 必须点击删除就取 而不是点击确定删除了取 因为id是那个单击删除产生的事儿 点击此处确定删除与id无关了
$.post("DeleteUser.ashx", { "id": id }, function (data) {//异步Ajax post请求
if (data == "ok") {
$("#tabList tr:gt(0)").remove();//清表旧数据
loadUserInfoList();//加载新数据
$.messager.show({//右下角弹出提示 值此:$.messager.show/alert/dialog有此三种
title: '提示',
msg: '删除成功',
timeout: 5000,
showType: 'slide'//或show 学会看demo 引用demo里的js
});
}
else {
$.messager.alert("提示", "删除失败", "error");
}
});
}
else {
alert("不删了");
}
});
});
}
//编辑展示
function bindUserInfoEditClick() {
$(".edits").click(function myfunction() {//类选择器的单击事件
var id = $(this).attr("eid");//自定义属性 拿Id
$.post("UserInfoDetail.ashx", { "id": id }, function (data) {//Ajax异步post请求拿Json格式的string数据
var serverJsonObj = $.parseJSON(data);//string Json转Json对象
$("#txtIdId").val(serverJsonObj.Id);//给表单元素填值 注意非表单元素用.text,比如<span id='name'时 而表单元素input id=txtName 要用.val()
$("#txtUserNameId").val(serverJsonObj.UserName);
$("#txtUserPwdId").val(serverJsonObj.UserPwd);
});
$("#editUserDiv").css("display", "block");//显
$("#editUserDiv").dialog({ //easyUI显
title: "用户编辑",
width: 300,
height: 200,
modal: true,
collapsible: true,
maximizable: true,
resizable: true,
buttons: [{
text: 'Ok',
iconCls: 'icon-ok',
handler: function () {
//alert('ok');
editUser();
}
}, {
text: 'Cancel',
handler: function () {
$('#editUserDiv').dialog('close');
}
}]
});
});
}
//执行编辑
function editUser() {
var jsonDatas = $("#editUserForm").serializeArray();//一个方法把表单全部元素的值读取并封装到Json对象中(不用转了,串才转)
$.post("EditUser.ashx", jsonDatas, function (data) {
if (data == "ok") {
//$("#editUserForm input").val("");//不用清
$("#editUserDiv").dialog('close');//写了个closed
$("#tabList tr:gt(0)").remove();
loadUserInfoList();
} else {
$.messager.alert("提法", "编辑失败", "error");
}
});
}
</script>
</head>
<body>
<a href="#" id="addUserHref">添加用户-也可用javascript:void(0)代替#</a><hr />
<!---列表-->
<table id="tabList">
<tr>
<th>Id</th>
<th>UserName</th>
<th>UserPwd</th>
<th>RegTime</th>
<th>详细</th>
<th>删除</th>
<th>编辑</th>
</tr>
</table>
<div id="pageBarDiv" class="page_nav"></div>
<!---列表结束-->
<!---用户详细层开始-->
<div id="divDetail" style="font-size:16px;">
<table>
<tr>
<td>用户名</td>
<td><span id="userName"></span></td>
<tr>
<td>密码</td>
<td><span id="userPwd"></span></td>
</tr>
<tr>
<td>注册时间</td>
<td><span id="regTime"></span></td>
</tr>
</table>
</div>
<!---用户详细层结束-->
<!---添加用户表单开始,因为异步ajax实现,无需提交按钮,也无需普通button 其提交表单元素值是通过"添加用户"超链接的异步js事件--->
<div id="addUserDiv" style="font-size:16px;">
<form id="addUserForm">
<table>
<tr>
<td>用户名</td>
<td><input type="text" name="txtName" id="txtName" /></td>
<tr>
<td>密码</td>
<td><input type="text" name="txtPwd" /></td>
</tr>
</table>
</form>
</div>
<!---添加用户表单结束--->
<!---编辑用户表单开始,别忘了编辑条件隐藏域Id 技术来源于详细与添加--->
<div id="editUserDiv" style="font-size:16px;">
<form id="editUserForm">
<input type="hidden" name="txtId" id="txtIdId" />
<table>
<tr>
<td>用户名</td>
<td><input type="text" name="txtUserName" id="txtUserNameId" /></td>
<tr>
<td>密码</td>
<td><input type="text" name="txtUserPwd" id="txtUserPwdId" /></td>
</tr>
</table>
</form>
</div>
<!---编辑用户表单结束--->
</body>
</html>
<!--
{"pageList":
[
{"Id":1,"UserName":"11111","UserPwd":"11111","RegTime":"\/Date(1780411812193)\/"},
{"Id":2,"UserName":"22222","UserPwd":"22222","RegTime":"\/Date(1780411826367)\/"},
{"Id":6,"UserName":"aaaaa","UserPwd":"aaaaa","RegTime":"\/Date(1780411844737)\/"},
{"Id":7,"UserName":"bbbbb","UserPwd":"bb","RegTime":"\/Date(1778597585350)\/"},
{"Id":9,"UserName":"555","UserPwd":"5","RegTime":"\/Date(1778319891173)\/"}
]
,
"pageBar":
"1\u003ca href=\u0027UserInfoListPage.aspx?pageIndex=2\u0027\u003e2\u003c/a\u003e\u003ca href=\u0027UserInfoListPage.aspx?pageIndex=3\u0027\u003e3\u003c/a\u003e\u003ca href=\u0027UserInfoListPage.aspx?pageIndex=4\u0027\u003e4\u003c/a\u003e\u003ca href=\u0027UserInfoListPage.aspx?pageIndex=2\u0027\u003e下一页\u003c/a\u003e"
}
{"pageList":[{"Id":1,"UserName":"11111","UserPwd":"11111","RegTime":"\/Date(1780411812193)\/"},{"Id":2,"UserName":"22222","UserPwd":"22222","RegTime":"\/Date(1780411826367)\/"},{"Id":6,"UserName":"aaaaa","UserPwd":"aaaaa","RegTime":"\/Date(1780411844737)\/"},{"Id":7,"UserName":"bbbbb","UserPwd":"bb","RegTime":"\/Date(1778597585350)\/"},{"Id":9,"UserName":"555","UserPwd":"5","RegTime":"\/Date(1778319891173)\/"}],"pageBar":"1\u003ca href=\u0027?pageIndex=2\u0027\u003e2\u003c/a\u003e\u003ca href=\u0027?pageIndex=3\u0027\u003e3\u003c/a\u003e\u003ca href=\u0027?pageIndex=4\u0027\u003e4\u003c/a\u003e\u003ca href=\u0027?pageIndex=2\u0027\u003e下一页\u003c/a\u003e"}
-->
UserInfoListPage.ashx被html列表页异步调用响应返回某页JsonListStr的一般处理程序
using BLL;
using Model;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace WebApp2019ASPX._17AjaxCRUD
{
/// <summary>
/// UserInfoListPage 的摘要说明
/// </summary>
public class UserInfoListPage : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
int pageIndex;//无论如何 都有在获取某页的List<UserInfo>有pageIndex 写上再说 分页用**
if (!int.TryParse(context.Request["pageIndex"], out pageIndex))//分页用**
{
pageIndex = 1;//得不到页码 默认赋1**
}
int pageSize = 5;//规定每页5条 分页用**
UserInfoBLL bll = new UserInfoBLL();
int pageCount = bll.GetPageCount(pageSize);//分页用**
pageIndex = pageIndex < 1 ? 1 : pageIndex;
pageIndex = pageIndex > pageCount ? pageCount : pageIndex;
List<UserInfo> list = bll.GetUserInfoListPage(pageIndex, pageSize);// bll.GetUserInfoList();
string pageBarStr = Common.PageBarAjaxHelper.GetPageBar(pageIndex, pageCount);
System.Web.Script.Serialization.JavaScriptSerializer js = new System.Web.Script.Serialization.JavaScriptSerializer();//js序列化类
string jsonStr = js.Serialize(new { pageList = list, pageBar = pageBarStr });//用匿名类把页码条和list加到一起代替-->(list);//将list集合序列化成 Json字符串 一个js数组 形如:[**:**,**:**,...]多个键值形式,
context.Response.Write(jsonStr);//响应回给前端js的回调函数的参数data 注意是Json字符串 而非Json对象
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
浙公网安备 33010602011771号