ASP.NET EasyUI实现增删改查


.html页面

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="EasyUI/themes/default/easyui.css" rel="stylesheet" />
    <link href="EasyUI/themes/icon.css" rel="stylesheet" />
    <link href="EasyUI/demo/demo.css" rel="stylesheet" />
    <style type="text/css">
        #fm {
            margin: 0;
            padding: 10px 30px;
        }


        .ftitle {
            font-size: 14px;
            font-weight: bold;
            color: #666;
            padding: 5px 0;
            margin-bottom: 10px;
            border-bottom: 1px solid #ccc;
        }


        .fitem {
            margin-bottom: 5px;
        }


            .fitem label {
                display: inline-block;
                width: 80px;
            }
    </style>

---------------------------------------------------------------------------------------------------------------------------------------
    <script src="EasyUI/jquery.min.js"></script>
    <script src="EasyUI/jquery-1.8.0.min.js"></script>
    <script src="EasyUI/jquery.easyui.min.js"></script>
    <script src="EasyUI/locale/easyui-lang-zh_CN.js"></script>


    <script type="text/javascript">
        $(document).ready(function () {
            $('#tt').datagrid({
                title: '学生信息管理',
                iconCls: 'icon-save',
                url: "CRUD_Datagrid.ashx",//接收一般处理程序返回来的json数据
                columns: [
                [
                { field: 'StuId', checkbox: true, width: 100, align: 'center' },
                { field: 'StuNum', title: '学号', width: 100, align: 'center' },//field后面就改为你自己的数据表字段,然后可以调整宽度什么的
                { field: 'StuName', title: '姓名', width: 100, align: 'center' },
                { field: 'Phone', title: '电话', width: 100, align: 'center' },
                { field: 'Email', title: '邮箱', width: 100, align: 'center' }
                ]]
            });
        }
    );

--------------------------------------------------------------------------------------------------------------------------------------------------------------
        //添加管理员
        function newStudent() {
            //清空内容
            $('#fm').form('clear');
            $('#dlg').dialog('open').dialog('setTitle', '添加学生');
            document.getElementById("test").value = "add";
        }
        //修改管理员
        function editUser() {


            var row = $('#tt').datagrid('getSelected');
            if (row == null) {
                $.messager.alert("提示", "请选择要修改的行!");
            }
            alert(row.StuId);
            if (row) {
                //获取要修改的字段
                $('#StuNum').val(row.StuNum);
                $('#StuName').val(row.StuName);
                $('#Phone').val(row.Phone);
                $('#Email').val(row.Email);
                $('#dlg').dialog('open').dialog('setTitle', '修改学生');
                document.getElementById("test").value = "modify";
                $('#fm').form('load', row);


            }
        }

--------------------------------------------------------------------------------------------------------------------------------------------
        //删除学生  
        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: "CRUD_Datagrid.ashx?StuId=" + row.StuId + "&test=" + test,
                            onSubmit: function () {
                            },
                            //判断结果是否正确  
                            success: function (result) {
                                if (result.indexOf("T") == 0) {
                                    $('#dlg').dialog('close');
                                    alert('恭喜您,信息删除成功!')
                                    $('#tt').datagrid('reload');
                                }
                                else {
                                    alert('添加失败,请重新操作!')
                                }
                            }
                        });
                    }
                });
            }
        }

---------------------------------------------------------------------------------------------------------------------------------------------------------
        //保存信息  
        function saveUser() {


            var test = document.getElementById("test").value;
            if (test == "add") {
                $('#fm').form('submit', {
                    url: "CRUD_Datagrid.ashx?test=" + test,
                    onSubmit: function () {
                        return $(this).form('validate');
                    },
                    data: { StuNum: $("#StuNum").val(), StuName: $("#StuName").val(), Phone: $("#Phone").val(), Email: $("#Email").val() },
                    success: function (result) {
                        if (result.indexOf("T") == 0) {
                            $('#dlg').dialog('close');
                            $.messager.alert("提示", "恭喜您,信息添加成功", "info");
                            $('#tt').datagrid('reload');
                        }
                        else {
                            $.messager.alert("提示", "添加失败,请重新操作!", "info");
                            return;
                        }
                    }
                });


            } else {
                var row = $('#tt').datagrid('getSelected');
                if (row) {
                    //获取要修改的字段  
                    var StuId = row.StuId;
                }
                $('#fm').form('submit', {
                    url: "CRUD_Datagrid.ashx?test=" + test+"&StuId="+StuId,
                    onSubmit: function () {
                        return $(this).form('validate');
                    },
                    data: { StuNum: $("#StuNum").val(), StuName: $("#StuName").val(), Phone: $("#Phone").val(), Email: $("#Email").val()},
                    success: function (result) {
                        if (result.indexOf("T") == 0) {
                            $('#dlg').dialog('close');
                            $('#tt').datagrid('clearSelections'); //清空选中的行  
                            $.messager.alert("提示", "恭喜您,信息修改成功");
                            $('#tt').datagrid('reload');


                        }
                        else {
                            $.messager.alert("提示", "修改失败,请重新操作!");
                            return;
                        }
                    }
                });
            }
        }
    </script>






</head>
<body>
    <input id="test" name="test" type="hidden">
    <table id="tt" class="easyui-datagrid" style="width: auto; height: 400px;"
           idfield="StuId" pagination="true"
           data-options="rownumbers:true,url:'CRUD_Datagrid.ashx',pageSize:5,pageList:[5,10,15,20],method:'Post',toolbar:'#tb',striped:true" fitcolumns="true"></table>
    <div id="tb">
        <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-add" plain="true" onclick="newStudent()">添加学生</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>
    <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>


            <div class="fitem">
                <label>学号:</label>
                <input id="StuNum" name="StuNum"  class="easyui-validatebox" data-options="required:true" />
            </div>
            <div class="fitem">
                <label>姓名:</label>
                <input id="StuName" name="StuName" class="easyui-validatebox" data-options="required:true" />
            </div>
            <div class="fitem">
                <label>电话:</label>
                <input id="Phone" name="Phone" />
            </div>
            <div class="fitem">
                <label>邮箱:</label>
                <input id="Email" name="Email" />
            </div>
        </form>
    </div>
    <div id="dlg-buttons">
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" onclick="saveUser()">保存</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" onclick="javascript:$('#dlg').dialog('close')">关闭</a>
    </div>
</body>
</html>

.ashx页面

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Text;
using System.Web;


namespace EasyUI
{
    /// <summary>
    /// CRUD_Datagrid 的摘要说明
    /// </summary>
    public class CRUD_Datagrid : IHttpHandler
    {


        public void ProcessRequest(HttpContext context)
        {
           SqlConnection conn = new SqlConnection("Data Source=.;User ID=sa;Password=sa;Initial Catalog=Students;");
           string command = context.Request.QueryString["test"];//前台传的标示值  
if (command == "add")
{
                try
                {
                    string StuNum = context.Request["StuNum"];
                    string StuName = context.Request["StuName"];
                    string Phone = context.Request["Phone"];
                    string Email = context.Request["Email"];
                    string sql = "INSERT INTO StuInfo VALUES('" + StuNum + "','" + StuName + "','" + Phone + "','" + Email + "')";
                    conn.Open();
                    SqlCommand com = new SqlCommand(sql, conn);
                    com.ExecuteNonQuery();
                    conn.Close();
                    context.Response.Write("T");
                    context.Response.End();
                }
                catch (Exception ex)
                {
                    context.Response.Write("F");
                }
}
            else if (command == "modify")
            {
              
                try
                {
                    string StuID = context.Request["StuId"];
                    string StuNum = context.Request["StuNum"];
                    string StuName = context.Request["StuName"];
                    string Phone = context.Request["Phone"];
                    string Email = context.Request["Email"];
                    string sql = "UPDATE StuInfo SET StuNum='" + StuNum + "',StuName='" + StuName + "',Phone='" + Phone + "',Email='" + Email + "' WHERE StuId=" + StuID + "";
                    conn.Open();
                    SqlCommand com = new SqlCommand(sql, conn);
                    com.ExecuteNonQuery();
                    conn.Close();
                    context.Response.Write("T");
                    context.Response.End();
                   
                }
                catch (Exception ex)
                {
                    context.Response.Write("F");
                }
            }
            else if (command == "delete")
            {


                try
                {
                    string StuID = context.Request["StuId"];
                    string sql = "DELETE FROM StuInfo WHERE StuId=" + StuID + "";
                    conn.Open();
                    SqlCommand com = new SqlCommand(sql, conn);
                    com.ExecuteNonQuery();
                    conn.Close();
                    context.Response.Write("T");
                    context.Response.End();


                }
                catch (Exception ex)
                {
                    context.Response.Write("F");
                }
            }
else
{//调用查询方法
                DataSet ds = new DataSet();
                string sql = "select * from StuInfo";
                SqlDataAdapter da = new SqlDataAdapter(sql, conn);      
                da.Fill(ds);
                string strJson = Dataset2Json(ds, -1);//DataSet数据转化为Json数据
                context.Response.Write(strJson);//返回给前台页面
                context.Response.End();
}
        }
        #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格式
         public bool IsReusable
        {
            get
            {
                return false;
            }
        }
}     
}


相关内容推荐