1.前端页面(jqury easyui提交表单,并且以ajax方法提交到后台处理程序,同时负责显示后台返回的结果。)
<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"
CodeBehind="Show.aspx.cs" Inherits="Web.User.Show" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<title>用户列表</title>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div id="content" region="center" title="用户列表" style="padding: 5px;">
<table id="dg" class="easyui-datagrid" url="/User/UserHandler.ashx?action=GetAll"
toolbar="#toolbar" rownumbers="true" fitcolumns="true" singleselect="true">
<thead>
<tr>
<th field="Id" width="50">
用户编号
</th>
<th field="Name" width="50">
用户名
</th>
<th field="Password" width="50">
密码
</th>
<th field="Email" width="50">
电子邮箱
</th>
<th field="Phonenumber" width="50">
电话号码
</th>
<th field="Role" width="50">
角色名称
</th>
<th field="JT" width="50">
集团名称
</th>
<th field="GC" width="50">
工厂名称
</th>
<th field="Note" width="50">
备注
</th>
</tr>
</thead>
</table>
<div id="toolbar">
<a href="#" class="easyui-linkbutton" iconcls="icon-add" plain="true" onclick="addUser()">
添加</a> <a href="#" class="easyui-linkbutton" iconcls="icon-edit" plain="true" onclick="editUser()">
编辑</a> <a href="#" class="easyui-linkbutton" iconcls="icon-remove" plain="true" onclick="deleteUser()">
删除</a>
</div>
<!--对话框-->
<div id="dlg" class="easyui-dialog" style="width: 400px; padding: 10px 20px" closed="true"
buttons="#dlg-buttons">
<form id="fm" method="post">
<div style="margin-bottom: 20px">
<input id="uid" class="easyui-textbox" name="Id" type="text" style="width: 100%"
data-options="label:'用户编号:',required:true">
</div>
<div style="margin-bottom: 20px">
<input id="uname" class="easyui-textbox" name="Name" style="width: 100%" data-options="label:'用户名:',required:true">
</div>
<div style="margin-bottom: 20px">
<input id="upassword" class="easyui-textbox" name="Password" style="width: 100%"
data-options="label:'密码:',required:true">
</div>
<div style="margin-bottom: 20px">
<input id="email" class="easyui-textbox" name="Email" style="width: 100%" data-options="label:'电子邮箱:',required:true,validType:'email'">
</div>
<div style="margin-bottom: 20px">
<input id="phonenumber" class="easyui-textbox" name="Phonenumber" style="width: 100%"
data-options="label:'电话号码:',required:true">
</div>
<div style="margin-bottom: 20px">
<input id="cc1" class="easyui-combobox" name="Role" label="角色" style="width: 100%"
data-options="valueField:'id',textField:'text',url:'/Role/RoleHandler.ashx?action=GetAll'">
</div>
<div style="margin-bottom: 20px">
<input id="cc2" class="easyui-combobox" name="JT" label="所属集团" style="width: 100%"
data-options="valueField: 'id', textField: 'text', url: '/JT/JTHandler.ashx?action=GetAll',
onSelect: function(rec){
var url = '/GC/GCHandler.ashx?action=GetGC&jt=' + rec.id;
$('#cc3').combobox('reload', url);
}" />
</div>
<div style="margin-bottom: 20px">
<input id="cc3" class="easyui-combobox" name="GC" label="所属工厂" style="width: 100%"
data-options="valueField:'id',textField:'text', url: '/GC/GCHandler.ashx?action=GetAll'">
</div>
</form>
</div>
<div id="dlg-buttons">
<a href="#" class="easyui-linkbutton" iconcls="icon-ok" onclick="saveUser()">保存</a>
<a href="#" class="easyui-linkbutton" iconcls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">
取消</a>
</div>
<script type="text/javascript">
function editUser() {
var row = $('#dg').datagrid('getSelected');
if (row) {
$('#dlg').dialog('open').dialog('setTitle', '编辑用户信息');
$('#fm').form('load', row);
url1 = '/User/UserHandler.ashx?action=Update';
} else {
$.messager.alert("操作提示", "请选中需要修改的用户所在的行!", 'info');
}
}
function addUser() {
$('#dlg').dialog('open').dialog('setTitle', '添加用户信息');
$('#fm').form('clear');
url1 = '/User/UserHandler.ashx?action=Add';
}
function saveUser() {
var row = $('#dg').datagrid('getSelected');
$('#fm').form('submit', {
url: url1,
onSubmit: function () {
//验证表单是否合法
return $(this).form('validate');
},
success: function (data) {
data = eval('(' + data + ')'); //将一个json字符串解析成js对象
$.messager.alert("操作提示", data.Message, 'info'); //显示后台信息
if (data.Success) {
$('#dlg').dialog('close'); //关闭弹出框
$('#dg').datagrid('reload'); //重新加载数据
}
}
});
}
function deleteUser() {
var row = $('#dg').datagrid('getSelected');
if (row) {
$.messager.confirm("确认删除", "您确定要删除当前用户[" + row.Name + "]的信息吗?", function (r) {
if (r) {
//用户确定删除
$.get('/User/UserHandler.ashx', { Id: row.Id, action: "Delete" }, function (res) {
res = eval('(' + res + ')'); //将一个json字符串解析成js对象
$.messager.alert("操作提示", res.Message, 'info'); //显示后台信息
if (res.Success) {
$("#dg").datagrid('reload');
}
});
}
});
} else {
$.messager.alert("操作提示", "请选中需要删除的用户所在的行!", 'info');
}
}
</script>
</div>
</asp:Content>
2.后台页面(执行增删改查,并且返回执行结果:成功/失败及失败信息)
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Model;
using Common;
using System.Data;
using DataService;
namespace Web.User
{
/// <summary>
/// UserHandler 的摘要说明
/// </summary>
public class UserHandler : IHttpHandler
{
DataAccess data = new DataAccess();
public void ProcessRequest(HttpContext context)
{
// 如果表单是以 POST 方式提交的,则服务器端必须以 context.Request.Form[name] 或者 context.Request[name] 来获取;
// 表单元素必须要有 name 属性,因为Form[] 中的索引就是 name 属性的值;
// 注意: ajax提交请求时,需要设置data属性,后台才能够接收到表单中的数据,
// 例如 data: $('#ff').serialize() 代表将form表单中的数据序列化传输。
//string userName = context.Request.Form["txt"];
//string userPwd = context.Request.Form["pwd"];
// 如果表单元素以 GET 方式提交,则服务器端必须以 Request.QueryString[] 来获取,索引仍是name属性的值。
// 以 GET 方式提交的时候,会在浏览器的地址栏显示提交的内容。
//string userName = context.Request.QueryString["txt"];
//string userPwd = context.Request.QueryString["pwd"];
string action = context.Request["action"].ToString();
context.Response.ContentType = "text/html";
ResultInfo result = new ResultInfo();
switch (action)
{
case "Add":
UserInfo user1 = new UserInfo();
user1.Id = context.Request.Form["Id"];
user1.Name = context.Request.Form["Name"];
user1.Password = context.Request.Form["Password"];
user1.Email = context.Request.Form["Email"];
user1.Phonenumber = context.Request.Form["Phonenumber"];
user1.JT = context.Request.Form["JT"];
user1.GC = context.Request.Form["GC"];
user1.Role = context.Request.Form["Role"];
result.Success = Update(user1);
result.Message = "添加用户信息" + ((result.Success == true) ? "成功" : "失败") + "!";
string jss = JsonHelper<ResultInfo>.ObjectToJsonString(result);
context.Response.Write(jss);
break;
case "GetAll":
context.Response.Write(GetAll());
break;
case "GetUser":
string name1 = context.Request["Name"];
context.Response.Write(GetUser(name1));
break;
case "Update":
UserInfo user2 = new UserInfo();
user2.Id = context.Request["Id"];
user2.Name = context.Request.Form["Name"];
user2.Password = context.Request.Form["Password"];
user2.Email = context.Request.Form["Email"];
user2.Phonenumber = context.Request.Form["Phonenumber"];
user2.JT = context.Request.Form["JT"];
user2.GC = context.Request.Form["GC"];
user2.Role = context.Request.Form["Role"];
result.Success = Update(user2);
result.Message = "更新用户信息" + ((result.Success==true)?"成功":"失败") + "!";
jss = JsonHelper<ResultInfo>.ObjectToJsonString(result);
context.Response.Write(jss);
break;
case "Delete":
string id = context.Request["Id"];
result.Success = Delete(id);
result.Message = "删除用户信息" + ((result.Success==true)?"成功":"失败") + "!";
jss = JsonHelper<ResultInfo>.ObjectToJsonString(result);
context.Response.Write(jss);
break;
default:
break;
}
}
/// <summary>
/// 保存用户的信息
/// </summary>
/// <param name="user"></param>
public bool Add(UserInfo user)
{
string sql = "INSERT INTO `web`.`用户表`(`用户编号`, `用户名`, `密码`, `电子邮箱`, `电话号码`, `角色名称`, `集团名称`, `工厂名称`, `备注`) VALUES (" +
user.Id + ", '"+
user.Name + "', '" +
user.Password + "', '" +
user.Email + "', '" +
user.Phonenumber + "', '" +
user.Role + "', '" +
user.JT + "', '" +
user.GC + "', '" +
user.Note + "')";
return data.ExecSql(sql);
}
/// <summary>
/// 获取所有用户信息
/// </summary>
/// <returns>用户信息列表的json字符串形式</returns>
public string GetAll()
{
List<UserInfo> users = new List<UserInfo>();
string sql = "SELECT * FROM `web`.`用户表`";
DataTable dTable = data.GetTable(sql);
for (int i = 0; i < dTable.Rows.Count; i++)
{
UserInfo user = new UserInfo();
user.Id = dTable.Rows[i]["用户编号"].ToString();
user.Name = dTable.Rows[i]["用户名"].ToString();
user.Password = dTable.Rows[i]["密码"].ToString();
user.Email = dTable.Rows[i]["电子邮箱"].ToString();
user.Phonenumber = dTable.Rows[i]["电话号码"].ToString();
user.Role = dTable.Rows[i]["角色名称"].ToString();
user.JT = dTable.Rows[i]["集团名称"].ToString();
user.GC = dTable.Rows[i]["工厂名称"].ToString();
user.Note = dTable.Rows[i]["备注"].ToString();
users.Add(user);
}
string result = JsonHelper<UserInfo>.ListToJsonString(users);
return result;
}
public string GetUser(string uname)
{
string sql = "SELECT * FROM `web`.`用户表` where 用户名='" + uname + "'";
DataTable dTable = data.GetTable(sql);
UserInfo user = new UserInfo();
user.Id = dTable.Rows[0]["用户编号"].ToString();
user.Name = dTable.Rows[0]["用户名"].ToString();
user.Password = dTable.Rows[0]["密码"].ToString();
user.Email = dTable.Rows[0]["电子邮箱"].ToString();
user.Phonenumber = dTable.Rows[0]["电话号码"].ToString();
user.Role = dTable.Rows[0]["角色名称"].ToString();
user.JT = dTable.Rows[0]["集团名称"].ToString();
user.GC = dTable.Rows[0]["工厂名称"].ToString();
user.Note = dTable.Rows[0]["备注"].ToString();
return JsonHelper<UserInfo>.ObjectToJsonString(user);
}
/// <summary>
/// 删除用户信息
/// </summary>
/// <param name="user">用户信息</param>
/// <returns>更新是否成功</returns>
public bool Delete(string id)
{
string sql = "Delete from `web`.`用户表` WHERE `用户编号` = " + id;
return data.ExecSql(sql);
}
/// <summary>
/// 更新用户信息
/// </summary>
/// <param name="user">用户信息</param>
/// <returns>更新是否成功</returns>
public bool Update(UserInfo user)
{
string sql = "Update `web`.`用户表` SET " +
"`用户名` = '" + user.Name + "'," +
"`密码` = '" + user.Password + "'," +
"`电子邮箱` = '" + user.Email + "'," +
"`电话号码` = '" + user.Phonenumber + "'," +
"`角色名称` = '" + user.Role + "'," +
"`集团名称` = '" + user.JT + "'," +
"`工厂名称` = '" + user.GC + "'," +
"`备注` = '" + user.Note + "' WHERE `用户编号` = " + user.Id;
return data.ExecSql(sql);
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
效果如下图:
需要特别注意的是,后台返回的只是json字符串,只有转换为js对象,才能被js所识别,因此需要下述处理:
success: function (data) {
data = eval('(' + data + ')'); //将一个json字符串解析成js对象
$.messager.alert("操作提示", data.Message, 'info'); //提示后台错误信息
if (data.Success) {
$('#dlg').dialog('close'); //关闭弹出框
$('#dg').datagrid('reload'); //重新加载数据
}
}