Asp.Net+Easyui实现重大CRUD

2022-05-11 02:17:21

今天周四称，这应该给自己一个休息，好好休息休息，但无奈自己IT这是痴迷。甘心的想加加班把目标功能实现，功夫不负有心人。经过6个小时的鏖战，我最终成功了。

在此和大家分享下成果，希望大家给个赞。

我的目标效果：在页面载入时。table表显示后台数据表中的学生的信息；点击加入button。出现弹框，能够加入学生信息；选中某一学生记录后，点击改动button。出现弹框。能够对学生信息进行改动。选中某一学生记录后。点击删除button，便可删除该学生信息。效果图例如以下所看到的：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXV3ZW56aGU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

目标效果有了，说说实现思路吧。

1.须要引入Easyui类库和相关的js：

<head>

    <title></title>

    <link href="css/easyui.css" rel="stylesheet" type="text/css" />

    <link href="css/icon.css" rel="stylesheet" type="text/css" />

    <link href="css/demo.css" rel="stylesheet" type="text/css" />

    <script src="js/jquery.min.js" type="text/javascript"></script>

    <script src="js/jquery.easyui.min.js" type="text/javascript"></script>

    <script src="js/test.js" type="text/javascript"></script>

</head>

2.画出显示数据的table表

//用于传递用户须要运行的操作

<input id="test" name="test"  type="hidden">

   <!--表格显示区-->

    <table id="tt" " title="管理学生信息" class="easyui-datagrid" style="width: auto; height: 400px;" idfield="itemid" pagination="true" iconcls="icon-save" remoteSort="false" data-options="rownumbers:true,

        url:'JSONData.ashx/ProcessRequest',pageSize:5,pageList:[5,10,15,20],

        method:'get',toolbar:'#tb' ," fitcolumns= "true" striped="true" singleselect="true">

        <thead>

            <tr>

               <th  data-options="field:'serial',width:0" hidden="hidden"> 序号</th>

               <th  data-options="field:'id',width:100",sortable:"true">学号</th>

               <th  data-options="field:'name',width:100",sortable:"true">姓名</th>

            </tr>

        </thead>

    </table>

3.画出加入、改动、删除三个button

 <!--加入、改动、删除按钮-->

    <div id="tb">

        <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>

4.画出点击加入、改动按钮后出现的弹框

<!--弹框-->

    <div id="dlg" class="easyui-dialog" style="width: 400px; height: 280px; padding: 10px 20px"

        closed="true" buttons="#dlg-buttons">

        <div class="ftitle">

            User Information</div>

        <form id="fm" method="post" novalidate>

        <div class="fitem">

            <label>学号:</label>

            <input id="id" class="easyui-validatebox" required="true">

        </div>

        <div class="fitem">

            <label>姓名:</label>

            <input id="name" class="easyui-validatebox" required="true">

        </div>

        </form>

    </div>

到此页面的显示部分完毕，以下须要用Ajax建立Web页面和一般处理程序之间的交互

var url = "JSONData.ashx / ProcessRequest ";

//打开加入学生弹框

function newUser() {

    $('#dlg').dialog('open').dialog('setTitle', '加入学生'); //设定表头

    $('#fm').form('clear'); //清空窗口数据

    document.getElementById("test").value = "add"; //设定表示为后台调不同方法数据提供接口

}

//打开改动学生弹框

function editUser() {

    $('#fm').form('clear');

    var row = $('#tt').datagrid('getSelected');

    if (row) {

        $('#dlg').dialog('open').dialog('setTitle', '改动学生');

        //绑定数据列表

        $('#id').val(row.id);

        $('#name').val(row.name);

        document.getElementById("test").value = "modify"; //设定表示为后台调不同方法数据提供接口

        $('#fm').form('load', row);

    }

}

//保存信息

function saveUser() {

    //获取页面中输入的值

    var serial;

    var id = document.getElementById("id").value;

    var name = document.getElementById("name").value;

    var test = document.getElementById("test").value;

    var row = $('#tt').datagrid('getSelected');

    if (test == "modify") {

        serial = row.serial;

    } else {

    serial == "";

    }

    $('#fm').form('submit', {

        //设定地址与传递參数到后台

        url: "JSONData.ashx?id=" + id + "&name=" + name + "&test=" + test + "&serial=" + serial,

        onSubmit: function () {

            return $(this).form('validate');

        },

        //推断结果是否正确

        success: function (result) {

            if (result.indexOf("T") == 0) {

                alert('恭喜您。信息保存成功！

')

                $('#dlg').dialog('close');      // 关闭窗口

                $('#tt').datagrid('reload');

            }

            else {

                alert('保存失败，请您核对！')

            }

            var result = eval('(' + result + ')');

            if (result.success) {

                $('#dlg').dialog('close');      // close the dialog

                $('#tt').datagrid('reload');

                $.message.alert('提示', '保存成功！', 'info');

                // reload the user data

            } else {

                //$.messager.show({

                //    title: 'Error',

                //    msg: result.msg

                //});

            }

        }

    });

}

//删除学生

function destroyUser() {

    document.getElementById("test").value = "delete"; //设定表示为后台调不同方法数据提供接口

    var test = document.getElementById("test").value;

    var row = $('#tt').datagrid('getSelected');

    if (row) {

        $.messager.confirm('提示', '你确定要删除这条信息吗？', function (r) {

            if (r) {

                $('#fm').form('submit', {

                    url: "JSONData.ashx?serial=" + row.serial + "&test=" + test,

                    onSubmit: function () {

                    },

                    //推断结果是否正确

                    success: function (result) {

                        if (result.indexOf("T") == 0) {

                            $('#dlg').dialog('close');

                            alert('恭喜您，信息删除成功！

')

                            $('#tt').datagrid('reload');

                        }

                        else {

                            alert('加入失败，请又一次操作。')

                        }

                        var result = eval('(' + result + ')');

                    }

                });

            }

        });

    }

}

通过JS代码。我们能够发现。Ajax获取用户的数据，将其提交到一般处理程序JSONData.ashx中进行处理。并用回调函数获取一般处理程序的运行结果，JSONData.ashx代码例如以下：

  StudentDAL studentDAL = new StudentDAL();

        public void ProcessRequest(HttpContext context)//context中包括前台与后台来回传递的值

        {

            //推断前台请求的是增删改查的哪一个

            string command = context.Request.QueryString["test"];//前台传的标示值

            if (command == "add")

            {

                //调用加入方法

                Add(context);

            }

            else if (command == "delete")

            {//调用删除方法

                Delete(context);

            }

            else if (command == "modify")

            {//调用改动方法

                Modify(context);

            }

            else

            {//调用查询方法

                Query(context);

            }

        }

        #region 加入记录

        /// <summary>

        /// 加入记录

        /// </summary>

        /// <param name="context"></param>

        public void Add(HttpContext context)

        {

            StudentEntity student = new StudentEntity();

            student.id = context.Server.UrlDecode(context.Request.QueryString["id"]);

            student.name = context.Server.UrlDecode(context.Request.QueryString["name"]);

            try

            {

                if (studentDAL.Add(student))

                {

                    context.Response.Write("T");

                }

                else

                {

                    context.Response.Write("F");

                }

            }

            catch (Exception ex)

            {

            }

        }

        #endregion

        #region 改动记录

        /// <summary>

        /// 改动记录

        /// </summary>

        /// <param name="context"></param>

        public void Modify(HttpContext context)

        {

            StudentEntity student = new StudentEntity();

            student.serial = context.Server.UrlDecode(context.Request.QueryString["serial"]);

            student.id = context.Server.UrlDecode(context.Request.QueryString["id"]);

            student.name = context.Server.UrlDecode(context.Request.QueryString["name"]);

            try

            {

                if (studentDAL.Update(student))

                {

                    context.Response.Write("T");

                }

                else

                {

                    context.Response.Write("F");

                }

            }

            catch (Exception ex)

            {

            }

        }

        #endregion

        #region 删除记录

        /// <summary>

        /// 删除记录

        /// </summary>

        /// <param name="context"></param>

        public void Delete(HttpContext context)

        {

            StudentEntity student = new StudentEntity();

            student.serial = context.Server.UrlDecode(context.Request.QueryString["serial"]);

            try

            {

                if (studentDAL.Delete(student))

                {

                    context.Response.Write("T");

                }

                else

                {

                    context.Response.Write("F");

                }

            }

            catch (Exception ex)

            {

            }

        }

        #endregion

        #region 查询记录

        /// <summary>

        ///  查询记录

        /// </summary>

        /// <param name="context"></param>

        public void Query(HttpContext context)

        {

            context.Response.ContentType = "text/plain";

            //调用分页的GetList方法

            DataSet ds = studentDAL.Query();

            string strJson = ToJson.Dataset2Json(ds, -1);//DataSet数据转化为Json数据

            context.Response.Write(strJson);//返回给前台页面

            context.Response.End();

        }

        #endregion

在将数据表中的数据绑定到页面中的table时，因为后台返回的结果是DataSet或DataTable类型，所以须要一个方法将DataSet或DataTable转换为JSON类型，强大的ToJson类就完毕了上述任务：

public class ToJson

    {

        #region DataSet转换成Json格式

        /// <summary>

        /// DataSet转换成Json格式

        /// </summary>

        /// <param name="ds">DataSet</param>

        /// <returns></returns>

        public static string Dataset2Json(DataSet ds, int total = -1)

        {

            StringBuilder json = new StringBuilder();

            foreach (DataTable dt in ds.Tables)

            {

                //{"total":5,"rows":[

                json.Append("{\"total\":");

                if (total == -1)

                {

                    json.Append(dt.Rows.Count);

                }

                else

                {

                    json.Append(total);

                }

                json.Append(",\"rows\":[");

                json.Append(DataTable2Json(dt));

                json.Append("]}");

            } return json.ToString();

        }

        #endregion

        #region dataTable转换成Json格式

        /// <summary>

        /// dataTable转换成Json格式

        /// </summary>

        /// <param name="dt"></param>

        /// <returns></returns>

        public static string DataTable2Json(DataTable dt)

        {

            StringBuilder jsonBuilder = new StringBuilder();

            for (int i = 0; i < dt.Rows.Count; i++)

            {

                jsonBuilder.Append("{");

                for (int j = 0; j < dt.Columns.Count; j++)

                {

                    jsonBuilder.Append("\"");

                    jsonBuilder.Append(dt.Columns[j].ColumnName);

                    jsonBuilder.Append("\":\"");

                    jsonBuilder.Append(dt.Rows[i][j].ToString());

                    jsonBuilder.Append("\",");

                }

                if (dt.Columns.Count > 0)

                {

                    jsonBuilder.Remove(jsonBuilder.Length - 1, 1);

                }

                jsonBuilder.Append("},");

            }

            if (dt.Rows.Count > 0)

            {

                jsonBuilder.Remove(jsonBuilder.Length - 1, 1);

            }

            return jsonBuilder.ToString();

        }

        #endregion dataTable转换成Json格式

    }

至此，核心代码都已经实现，剩下的就是一个学生实体--StudentEntity。一个訪问T_Student表的StudentDAL类，它们和我们平时訪问数据库的方法一样，在此不再赘述。

这样。我们轻松的完毕了对数据表T_Studnet进行CRUD的操作。基本功能尽管已经实现，但Easyui的好多扩展功能还需继续了解，比方在数据显示时，能够设置每页有多少条数据。数据按什么方式进行排序、组合查询等功能。

这个Demo大大添加了我学习Easyui的信心，本以为得一周才干完毕的功能，没想到两天搞定，小小得瑟一下。

和Easyui类似的还有extjs。它们都能画出非常妙的页面图。仅仅只是Easyui是JQuery的框架。extjs是Ajax的框架。

假设大家想练练手，能够把我做好的Demo下载下来，看看我的代码有什么不知之处，欢迎大神拍砖，源代码下载地址：http://pan.baidu.com/s/1o6Cz4Qe。

好了。今天先到这吧，韩义打电话来让我们回家包饺子去了，关于Easyui的学习，咱们改日再谈。

码农公寓

相关文章