ASP.NET使用EasyUI-DataGrid + ashx + JQuery Ajax：实现数据的增删查改，查询和分页！

2024-04-11 00:18
文章标签 javascript 数据 实现 使用 查询 分页 jquery frontend asp net ajax 增删 datagrid easyui 查改 ashx

本文主要是介绍ASP.NET使用EasyUI-DataGrid + ashx + JQuery Ajax：实现数据的增删查改，查询和分页！，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

转自：http://www.cnblogs.com/lt-style/p/3457399.html

数据表：

学生表：学生编号、姓名、性别、班级编号、年龄

班级表：班级编号、班级名称

开发过程：

1.下载EasyUI的开发包

2.引用相关文件：

复制代码
复制代码 
<link href="/CSS/easyui.css" rel="stylesheet" type="text/css" /><link href="/CSS/demo.css" rel="stylesheet" type="text/css" /><link href="/CSS/icon.css" rel="stylesheet" type="text/css" /><script src="/Packages/jquery-1.6.4.min.js" type="text/javascript"></script><script src="/Packages/jquery.easyui.min.js" type="text/javascript"></script><script src="/Packages/EditStuInfo.js" type="text/javascript"></script><script src="/Packages/easyui-lang-zh_CN.js" type="text/javascript"></script>
复制代码
复制代码

3.引用相关图片文件：

image

要注意的是Css文件中的图片路路径，如果是使用默认的路径，那么图片文件应该放在css所在文件的同级目录，如果是其它目录，则要修改css中的图片路径

4.建立表格、对话框、及按钮：

复制代码
复制代码 
<!--Search Begin-->根据班级查询学生信息：<select id="classNum_Search"></select>&nbsp;&nbsp;<a href="#" class="easyui-linkbutton" onclick="searchStuByClassNum()">查询</a><br /><!--Search End--><!--StuInfo_Table Begin--><table id="dg" title="学生信息管理" class="easyui-datagrid" style="width:700px;height:365px"url="/ashx/StudentInfo.ashx?Action=Load"toolbar="#toolbar" pagination="true"rownumbers="true" fitColumns="true" singleSelect="true"><thead><tr><th field="Id" width="50">ID</th><th field="StuNum" width="50">学生编号</th><th field="StuName" width="50">姓名</th><th field="ClasName" width="50">班级</th><th field="StuGender" width="50">性别</th><th field="StuAge" width="50">年龄</th></tr></thead></table><div id="toolbar"><a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">添加</a><a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">编辑</a><a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">删除</a></div><!--StuInfo_Table End--><!--StuInfo_Dialog Begin--><div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"closed="true" buttons="#dlg-buttons"><div class="ftitle">学生信息</div><form id="fm" method="post" novalidate action=""><div class="fitem"><label>学生编号:</label><input name="StuNum" class="easyui-validatebox"/></div><div class="fitem"><label>姓名:</label><input name="StuName" class="easyui-validatebox" required="true"/></div><div class="fitem"><label>班级:</label><select name="ClassNum" id="ClassNum" ></select></div><div class="fitem"><label>性别:</label><input id="rdoMan" name="StuGender" type="radio" value="1" />男<input id="rdoWuman" name="StuGender" type="radio" value="0" />女</div><div class="fitem"><label>年龄:</label><input name="StuAge" class="easyui-validatebox" required="true" /></div></form></div><!--StuInfo_Dialog End--><div id="dlg-buttons"><a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">保存</a><a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">取消</a></div>
</div>
复制代码
复制代码

5.对数据操作的JS代码：

复制代码
复制代码 
var url;//添加
function newUser() {$('#dlg').dialog('open').dialog('setTitle', '添加学生信息');$('#fm').form('clear');//获取最大的学生ID并加1$.get("/ashx/StudentInfo.ashx?Action=GetMaxNum", function (data) {$("#fm input[name='StuNum']").val(data).attr("readonly", "readonly");});//获取班级信息$.get("/ashx/StudentInfo.ashx?Action=GetClassInfo", function (data) {$("#ClassNum").html("").append(data);$("#ClassNum").eq(0).attr("selected", "selected");});//默认性别男被选中$("#fm input[name='StuGender']").eq(0).attr("checked", "checked");url = '/ashx/StudentInfo.ashx?Action=Save';
}//更新
function editUser() {var row = $('#dg').datagrid('getSelected');if (row) {$('#dlg').dialog('open').dialog('setTitle', '编辑学生信息');$('#fm').form('load', row);//获取和设置班级的状态$.get("/ashx/StudentInfo.ashx?Action=GetClassInfo", function (data) {$("#ClassNum").html("").append(data);$("#ClassNum option").each(function () {if ($(this).text() == row.ClasName) {$(this).attr("selected", "selected");}});//.eq(0).attr("selected", "selected");});//获取和设置性别的选中状态if (row.StuGender == "男") {$("#fm input[name='StuGender']").eq(0).attr("checked", "checked");}else {$("#fm input[name='StuGender']").eq(1).attr("checked", "checked");}url = '/ashx/StudentInfo.ashx?Action=Update&id=' + row.Id;}
}//保存
function saveUser() {$('#fm').form('submit', {url: url,onSubmit: function () {return $(this).form('validate');},success: function (result) {if (result == "False") {$.messager.show({title: '友情提示',msg: 'Sorry, 出错了,请重试 :('});} else {$('#dlg').dialog('close');        // close the dialog$('#dg').datagrid('reload');    // reload the user data}}});
}//删除
function destroyUser() {var row = $('#dg').datagrid('getSelected');if (row) {$.messager.confirm('友情提示', '确定要删除数据吗，删除后将无法找回?', function (r) {if (r) {$.post('/ashx/StudentInfo.ashx', { "Action": "Delete", "id": row.Id }, function (result) {if (result == "True") {$('#dg').datagrid('reload');    // reload the user data} else {$.messager.show({    // show error messagetitle: '错误提示！',msg: "服务器错误，请刷新重试 :("});}});}});}
}//根据班级查询学生信息
function searchStuByClassNum() {var classNum = $("#classNum_Search").val();$('#dg').datagrid({url: "/ashx/StudentInfo.ashx?Action=SearchStu",queryParams: { "classNum": classNum }})
};//加载班级信息到查询列表中
$(function () {$.get("/ashx/StudentInfo.ashx?Action=GetClassInfo", function (data) {$("#classNum_Search").html("").append(data);$("#classNum_Search option").eq(0).attr("selected", "selected");});
})
复制代码
复制代码

6.后台数据处理文件 ashx

复制代码
复制代码 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Configuration;
using System.Text;namespace TestStuMS.Ashx
{/// <summary>/// StudentInfo 的摘要说明/// </summary>public class StudentInfo : IHttpHandler{public BLL.Students bllStu = new BLL.Students();public BLL.StuClass bllClass = new BLL.StuClass();public void ProcessRequest(HttpContext context){context.Response.ContentType = "text/plain";//获取请求的动作string action = context.Request["Action"];if (string.IsNullOrEmpty(action)) return;switch (action){case "Save"://添加context.Response.Write(AddStuInfo(context));break;case "Delete"://删除context.Response.Write(DeleteStuInfo(context));break;case "Update"://更新context.Response.Write(UpdateStuInfo(context));break;case "Load"://加载与分页context.Response.Write(BuildPager(context));break;case "GetMaxNum"://获取新学生编号context.Response.Write(GetMaxNum()+1);break;case "GetClassInfo"://获取班级信息context.Response.Write(GetClassInfo(context));break;case "SearchStu"://根据班级获取学生信息context.Response.Write(GetStuInfoByClassNum(context));break;}}#region 方法//添加private bool AddStuInfo(HttpContext context){//stuNum:1201009//stuName:星期三//classNum:1201//stuGender:男//stuAge:20Model.Students model= new Model.Students();model.StuNum = int.Parse(context.Request["StuNum"]);model.ClassNum = int.Parse(context.Request["ClassNum"]);model.StuName = context.Request["StuName"];model.StuGender = context.Request["StuGender"]=="1"?true:false;model.StuAge = int.Parse(context.Request["StuAge"]);return bllStu.Add(model);//如果是成功则返回True否则返回False}//更新private bool UpdateStuInfo(HttpContext context){Model.Students model = new Model.Students();model.Id = int.Parse(context.Request["id"]);model.StuNum = int.Parse(context.Request["StuNum"]);model.ClassNum = int.Parse(context.Request["ClassNum"]);model.StuName = context.Request["StuName"];model.StuGender = context.Request["StuGender"] == "1" ? true : false;model.StuAge = int.Parse(context.Request["StuAge"]);return bllStu.Update(model);}//删除private bool DeleteStuInfo(HttpContext context){int Id = int.Parse(context.Request["id"]);return bllStu.Delete(Id);}//分页private string BuildPager(HttpContext context){int pageIndex = int.Parse(context.Request["page"]);int pageSize = int.Parse(context.Request["rows"]);List<Model.Students> stuList = bllStu.GetModelList("");List<Model.StuClass> classList = bllClass.GetModelList("");//获取学生信息var stuInfo = stuList.Join(classList,s => s.ClassNum,c => c.ClassNum,(s, c) => new { s.Id, s.StuNum, s.StuName, c.ClasName, StuGender = s.StuGender == true ? "男" : "女", s.StuAge });//查询分页数据var pageData = stuInfo.Where(s => s.Id > 0).OrderByDescending(s => s.Id).Skip((pageIndex-1) * pageSize).Take(pageSize).ToList();var data = new { total = stuInfo.Count(), rows = pageData };//序列化成JSON格式数据System.Web.Script.Serialization.JavaScriptSerializer jss = new System.Web.Script.Serialization.JavaScriptSerializer();return jss.Serialize(data);}//获取班级信息private string GetClassInfo(HttpContext context){List< Model.StuClass> classList =  bllClass.GetModelList("");StringBuilder sb = new StringBuilder();foreach (var stuClass in classList){sb.Append("<option value='" + stuClass.ClassNum + "'>" + stuClass.ClasName + "</option>");}return sb.ToString();}//获取学生最大ID(以便新添加的ID保持唯一)private int GetMaxNum(){return bllStu.GetMaxStuNum();}//根据班级获取学生信息private string GetStuInfoByClassNum(HttpContext context){ int classNum = int.Parse(context.Request["classNum"]);List<Model.Students> stuList = bllStu.GetModelList("ClassNum=" + classNum);List<Model.StuClass> classList = bllClass.GetModelList("");//根据班级获取学生信息var stuInfo = stuList.Join(classList,s => s.ClassNum,c => c.ClassNum,(s, c) => new {s.ClassNum, s.Id, s.StuNum, s.StuName, c.ClasName, StuGender = s.StuGender == true ? "男" : "女", s.StuAge }).Where(i=>i.ClassNum==classNum);//序列化成JSON格式数据System.Web.Script.Serialization.JavaScriptSerializer jss = new System.Web.Script.Serialization.JavaScriptSerializer();return jss.Serialize(stuInfo.ToList());}#endregionpublic bool IsReusable{get{return false;}}}
}
复制代码
复制代码

7.效果图：

image

 

这篇关于ASP.NET使用EasyUI-DataGrid + ashx + JQuery Ajax：实现数据的增删查改，查询和分页！的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/892557。

相关文章

Spring IoC 容器的使用详解(最新整理)

Spring IoC 容器的使用详解(最新整理)

《SpringIoC容器的使用详解(最新整理)》文章介绍了Spring框架中的应用分层思想与IoC容器原理,通过分层解耦业务逻辑、数据访问等模块,IoC容器利用@Component注解管理Bean... 目录1. 应用分层2. IoC 的介绍3. IoC 容器的使用3.1. bean 的存储3.2. 方法注
阅读更多...
MySQL 删除数据详解(最新整理)

MySQL 删除数据详解(最新整理)

《MySQL删除数据详解(最新整理)》：本文主要介绍MySQL删除数据的相关知识,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录一、前言二、mysql 中的三种删除方式1.DELETE语句✅ 基本语法： 示例：2.TRUNCATE语句✅ 基本语
阅读更多...
MySQL中查找重复值的实现

MySQL中查找重复值的实现

《MySQL中查找重复值的实现》查找重复值是一项常见需求,比如在数据清理、数据分析、数据质量检查等场景下,我们常常需要找出表中某列或多列的重复值,具有一定的参考价值,感兴趣的可以了解一下... 目录技术背景实现步骤方法一：使用GROUP BY和HAVING子句方法二：仅返回重复值方法三：返回完整记录方法四：
阅读更多...
Python内置函数之classmethod函数使用详解

Python内置函数之classmethod函数使用详解

《Python内置函数之classmethod函数使用详解》：本文主要介绍Python内置函数之classmethod函数使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录1. 类方法定义与基本语法2. 类方法 vs 实例方法 vs 静态方法3. 核心特性与用法(1编程客
阅读更多...
IDEA中新建/切换Git分支的实现步骤

IDEA中新建/切换Git分支的实现步骤

《IDEA中新建/切换Git分支的实现步骤》本文主要介绍了IDEA中新建/切换Git分支的实现步骤,通过菜单创建新分支并选择是否切换,创建后在Git详情或右键Checkout中切换分支,感兴趣的可以了... 前提：项目已被Git托管1、点击上方栏Git->NewBrancjsh...2、输入新的分支的
阅读更多...
从入门到精通MySQL联合查询

从入门到精通MySQL联合查询

《从入门到精通MySQL联合查询》：本文主要介绍从入门到精通MySQL联合查询,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下... 目录摘要1. 多表联合查询时mysql内部原理2. 内连接3. 外连接4. 自连接5. 子查询6. 合并查询7. 插入查询结果摘要前面我们学习了数据库设计时要满
阅读更多...
Linux中压缩、网络传输与系统监控工具的使用完整指南

Linux中压缩、网络传输与系统监控工具的使用完整指南

《Linux中压缩、网络传输与系统监控工具的使用完整指南》在Linux系统管理中,压缩与传输工具是数据备份和远程协作的桥梁,而系统监控工具则是保障服务器稳定运行的眼睛,下面小编就来和大家详细介绍一下它... 目录引言一、压缩与解压：数据存储与传输的优化核心1. zip/unzip：通用压缩格式的便捷操作2.
阅读更多...
Python实现对阿里云OSS对象存储的操作详解

Python实现对阿里云OSS对象存储的操作详解

《Python实现对阿里云OSS对象存储的操作详解》这篇文章主要为大家详细介绍了Python实现对阿里云OSS对象存储的操作相关知识,包括连接,上传,下载,列举等功能,感兴趣的小伙伴可以了解下... 目录一、直接使用代码二、详细使用1. 环境准备2. 初始化配置3. bucket配置创建4. 文件上传到os
阅读更多...
MySQL查询JSON数组字段包含特定字符串的方法

MySQL查询JSON数组字段包含特定字符串的方法

《MySQL查询JSON数组字段包含特定字符串的方法》在MySQL数据库中,当某个字段存储的是JSON数组,需要查询数组中包含特定字符串的记录时传统的LIKE语句无法直接使用,下面小编就为大家介绍两种... 目录问题背景解决方案对比1. 精确匹配方案（推荐）2. 模糊匹配方案参数化查询示例使用场景建议性能优
阅读更多...
关于集合与数组转换实现方法

关于集合与数组转换实现方法

《关于集合与数组转换实现方法》：本文主要介绍关于集合与数组转换实现方法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1、Arrays.asList()1.1、方法作用1.2、内部实现1.3、修改元素的影响1.4、注意事项2、list.toArray()2.1、方
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2