首页 > 代码库 > Asp.Net+Easyui实现基本的CRUD
Asp.Net+Easyui实现基本的CRUD
话说今天周四，本该给自己放个假，好好休息休息，但无奈自己对IT实在是痴迷，心甘情愿的想加加班把目标功能实现，功夫不负有心人，经过6个小时的鏖战，我终于成功了。在此和大家分享下成果，希望大家给个赞。
我的目标效果：在页面加载时，table表显示后台数据表中的学生的信息；点击添加按钮，出现弹框，可以添加学生信息；选中某一学生记录后，点击修改按钮，出现弹框，可以对学生信息进行修改；选中某一学生记录后，点击删除按钮，便可删除该学生信息。效果图如下所示：
目标效果有了，说说实现思路吧。
1.需要引入Easyui类库和相关的js：
<head>
<title></title>
<link href=http://www.mamicode.com/"css/easyui.css" rel="stylesheet" type="text/css" />> 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.画出添加、修改、删除三个按钮 <!--添加、修改、删除按钮-->
<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 = http://www.mamicode.com/"add"; //设定表示为后台调不同方法数据提供接口 > 通过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的学习，咱们改日再谈。
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。