[asp.net] jqury easyui form方式实现数据的增删改查

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');    //重新加载数据
                        }
                    }