Mikel
来源： asp.net下利用MVC模式实现Extjs表格增删改查 – yfsmooth – 博客园
在网上看到有很多人写extjs下的表格控件的增删改查，但是大多数都是直接从后台读取数据，很少有跟数据库进行交互的模式。
今天就来写一个这样的例子。欢迎大家交流指正。
首先简单介绍一下MVC模式，MVC全名是Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写。
Model（模型）
是应用程序中用于处理应用程序数据逻辑的部分。
通常模型对象负责在数据库中存取数据。
通常模型对象负责在数据库中存取数据。
View（视图）
是应用程序中处理数据显示的部分。
通常视图是依据模型数据创建的。
通常视图是依据模型数据创建的。
Controller（控制器）
是应用程序中处理用户交互的部分。
通常控制器负责从视图读取数据，控制用户输入，并向模型发送数据。
通常控制器负责从视图读取数据，控制用户输入，并向模型发送数据。
下面就为大家说明代码示例：
视图部分：
前台JS部分代码：
Ext.onReady(function () {
var csm = new Ext.grid.CheckboxSelectionModel({//创建checkbox对象
handleMouseDown: new Ext.emptyFn()
});
var cum = new Ext.grid.ColumnModel([
csm, //checkbox对象
{header: "用户ID", dataIndex: "id", sortable: true
},
{ header: '用户姓名', dataIndex: 'name', sortable: true,
editor: new Ext.grid.GridEditor(
new Ext.form.TextField({ allowBlank: false }))
},
{ header: '性别', dataIndex: 'sex', sortable: true,
editor: new Ext.grid.GridEditor(
new Ext.form.TextField({ allowBlank: false }))
}
]);
;
var store = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({ url: 'UserData.aspx' }),
reader: new Ext.data.JsonReader({
totalProperty: 'totalCount', //json字符串中的字段，数据量大小
root: 'data'//json字符串中的字段
}, [
{ name: 'id' },
{ name: 'name' },
{ name: 'sex' }
]),
remoteSort: true
});
var Record = Ext.data.Record.create([
{ name: 'id', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'sex', type: 'string' }
]);
store.load({ params: { start: 0, limit: 5} }); //运行加载表格数据
var cumgrid = new Ext.grid.EditorGridPanel({
renderTo: 'cumGrid',
store: store,
stripeRows: true, //斑马线效果
viewConfig: {
forceFit: true,
columnsText: "显示的列",
sortAscText: "升序",
sortDescText: "降序"
},
height: 200,
width: 550,
sm: csm,
bbar: new Ext.PagingToolbar({
pageSize: 5, //每页信息条数
store: store,
autowidth: true,
autoHeight: true,
displayInfo: true,
prevText: "上一页",
nextText: "下一页",
refreshText: "刷新",
lastText: "最后页",
firstText: "第一页",
beforePageText: "当前页",
afterPageText: "共{0}页",
displayMsg: '显示第{0}条到第{1}条记录，一共{2}条',
emptyMsg: '没有记录'
}),
tbar: new Ext.Toolbar(['-', {
text: '添加一行',
handler: function () {
var win = new Ext.Window({
title: '添加用户',
layout: 'fit',
height: 300,
width: 300,
border: 0,
frame: true, //去除窗体的panel框架
plain: true,
html: '<iframe frameborder=0 width="100%" height="100%" allowtransparency="true" scrolling=auto src="addUser.htm"></iframe>'
});
win.show(); //显示窗口
}
}, '-', {
text: '删除一行',
handler: function () {
Ext.Msg.confirm('信息', '确定要删除？', function (btn) {
if (btn = 'yes') {
var id = "";
function getid() {
for (var i = 0; i < cumgrid.getSelectionModel().getSelections().length; i++) {
id += cumgrid.getSelectionModel().getSelections()[i].get("id");
id += ',';
}
};
getid(); //初始化选中行id字符串数组
Ext.Ajax.request({
url: "DelUserInfo.aspx",
method: "post",
params: { id: id },
success: function (response) {
Ext.Msg.alert("恭喜", "删除成功了!");
store.reload();
},
failure: function () {
Ext.Msg.alert("提 示", "删除失败了!");
}
})
}
});
}
}, '-', {
text: '保存',
handler: function () {
var m = store.getModifiedRecords().slice(0);
var jsonArray = [];
Ext.each(m, function (item) {
jsonArray.push(item.data);
})
if (false) {//判断条件
return;
} else {
// alert(Ext.encode(jsonArray))
Ext.Ajax.request({
//url: "Demo/Operator.aspx",
url: "SaveUserInfo.aspx",
method: "POST",
params: 'data=' + encodeURIComponent(Ext.encode(jsonArray)),
success: function (response, option) {
store.reload();
alert(response.responseText);
},
failure: function (response) {
store.reload();
alert(response.responseText)
Ext.Msg.alert("提示", "修改失败了!");
}
});
}
}
}, '-']),
cm: cum
});
cumgrid.render(); //刷新表格
});
表格界面如上图所示。增删改查分别通过，添加，删除，保存修改，和后台读取数据并分页实现。
业务处理部分：
UserBll.cs：
public class UserBLL
{
public UserBLL()
{
//
//TODO: 在此处添加构造函数逻辑
//
}
UserDao dao = new UserDao();
JsonHelper json = new JsonHelper();
DataTable dt = new DataTable();
//获取全部数据
public string GetUserInfo()
{
dt = dao.GetAllInfo();//从数据库中读取数据
json.success = true;
foreach (DataRow dr in dt.Rows) //将读取出的数据转换成字符串
{
json.AddItem("id", dr["id"].ToString());
json.AddItem("name", dr["name"].ToString());
json.AddItem("sex", dr["sex"].ToString());
json.ItemOk();
}
string jsons = json.ToString();
return jsons;
}
//根据id获取用户数据
public UserBean getUserInfosNoState(int id)
{
return dao.getUserInfosNoState(id);
}
//分页获取数据
public string GetUserInfoPage(int start, int limit)
{
JSONHelper json = new JSONHelper();
dt = dao.GetUserInfoPaging(start, limit); //从数据库中读取数据
json.success = true;
foreach (DataRow dr in dt.Rows) //将读取出的数据转换成字符串
{
json.AddItem("id", dr["id"].ToString());
json.AddItem("name", dr["name"].ToString());
json.AddItem("sex", dr["sex"].ToString());
json.ItemOk();
}
json.totlalCount = dao.GetAllUserCount();
string jsons = "";
if (json.totlalCount > 0)
{
jsons = json.ToString();
}
else
{
jsons = @"{success:false}";
}
return jsons;
}
//删除用户信息
public int DelUserInfos(int id)
{
return dao.DelUserInfos(id);
}
//更新用户信息
public int SaveUserInfo(UserBean user)
{
return dao.SaveUserInfo(user);
}
//添加用户信息
public int AddUserInfo(UserBean user)
{
return dao.AddUserInfo(user);
}
}
后台查询数据部分：
UserData.aspx.cs：
public string ds = string.Empty;
public UserBLL ub = new UserBLL();
protected void Page_Load(object sender, EventArgs e)
{
string starts = Request.Form["start"];//获取读取数据的范围
string limits = Request.Form["limit"];
int index = Convert.ToInt32(starts);
int length = Convert.ToInt32(limits);
ds = ub.GetUserInfoPage(index, length);
}
增加数据：
AddUserInfo.aspx.cs:
UserBLL ub = new UserBLL();
protected void Page_Load(object sender, EventArgs e)
{
AddUserInfos();
}
public void AddUserInfos() //添加数据
{
//获取姓名性别
string name = Request.Form["name"];
string sex = Request.Form["sex"];
UserBean user = new UserBean();
user.Name = name;
user.Sex = sex;
int count = ub.AddUserInfo(user);
if (count > 0)
Response.Write(@"{success:true}");
else
Response.Write(@"{success:false}");
}
删除数据部分：
DelUserInfo.aspx.cs：
需要注意因为从前台传来的是所有改变行所有数据id的json字符串，需要进行字符串分割获取到要删除行的id
UserBLL ub = new UserBLL();
protected void Page_Load(object sender, EventArgs e)
{
DeleteRoomInfo();
}
public void DeleteRoomInfo()
{
string id = Request.Form["id"];//获取要删除用户的id字符串
if (id != null)
{
string[] ids = id.Split(',');//将每一名用户的id分割存入字符串数组
try
{
foreach (string r in ids)
{
ub.DelUserInfos(Convert.ToInt32(r));//循环删除用户信息
}
Response.Write(@"{success:true}");
}
catch (Exception)
{
Response.Write(@"{success:false}");
}
}
else
{
Response.Write(@"{success:false}");
}
}
修改数据部分：
SaveUserInfo.aspx.cs:
此处需要注意，因为前台传来的是所有改变行所有数据的json字符串，需要进行分割处理，先去掉多余的字符，在根据’,’分割成“数据名：数据值的形式”，再循环根据:进行分割
UserBLL ub = new UserBLL();
protected void Page_Load(object sender, EventArgs e)
{
SaveRoomInfo();
}
public void SaveRoomInfo()
{
int count=0;
string data = Request.Form["data"];// 对传值过来的json字符串进行处理，分解成键值对
data = RemoveChars(data,"[");
data = RemoveChars(data, "]");
data = RemoveChars(data,"\"");
data = RemoveChars(data, "}");
data = RemoveChars(data, "{");
string[] field = data.Split(',');
string[] keyvalue;
for (int i = 0; i < field.Length / 3; i++)
{
UserBean user = new UserBean();
for (int j = i * 3, k = 0; k < 3; j++, k++)
{
keyvalue = field[j].Split(':');//将json字符串中的数据项名和数据项值分开，分别存入user对象中
if (keyvalue[0] == "id")
{
user.Id = Convert.ToInt32(keyvalue[1]);
}
else if (keyvalue[0] == "name")
{
user.Name = keyvalue[1];
}
else if (keyvalue[0] == "sex")
{
user.Sex = keyvalue[1];
}
}
count = ub.SaveUserInfo(user);
}
if (count > 0)
{
Response.Write("{success:'true'},{data:" + field[2] + "}");
}
else
{
Response.Write("{success:'false'},{data:" + field[2] + "}");
}
}
//删除字符串中某个字符
static string RemoveChars(string str, string remove)
{
if (string.IsNullOrEmpty(str) || string.IsNullOrEmpty(remove))
{
throw new ArgumentException("....");
}
StringBuilder result = new StringBuilder(str.Length);
Dictionary<char, bool> dictionary = new Dictionary<char, bool>();
foreach (char ch in remove)
{
dictionary[ch] = true;
}
foreach (char ch in str)
{
if (!dictionary.ContainsKey(ch))
{
result.Append(ch);
}
}
return result.ToString();
}
模型部分：
UserBean.cs:
public class UserDao
{
public UserDao()
{
//
//TODO: 在此处添加构造函数逻辑
//
}
private DataTable dt;
public DataTable GetAllInfo()
{
try
{
return SqlHelper.ExecuteDataTable("select * from T_user");
}
catch(Exception){throw;}
}
//分页读取数据
public DataTable GetUserInfoPaging(int start, int limit)
{
try
{
return SqlHelper.ExecuteDataTable("select top " + limit + " * from T_user where id not in(select top " + start + " id from T_user order by id asc) order by id asc");
}
catch (Exception) { throw; }
}
public UserBean getUserInfosNoState(int id)
{
try
{
dt = SqlHelper.ExecuteDataTable("select * from T_user where id=" + id);
UserBean user = new UserBean();
user.Id = int.Parse(dt.Rows[0]["id"].ToString());
user.Name = dt.Rows[0]["name"].ToString();
user.Sex = dt.Rows[0]["sex"].ToString();
return user;
}
catch (Exception){ throw; }
}
//获得用户总数
public int GetAllUserCount()
{
try
{
return (int)SqlHelper.ExecuteScalar("select count(*) from T_user");
}
catch (Exception) { throw; }
}
//删除用户信息
public int DelUserInfos(int id)
{
try
{
int count = SqlHelper.ExecuteNonQuery("delete T_user where id=" + id);
return count;
}
catch (Exception){ throw; }
}
//保存修改
public int SaveUserInfo(UserBean user)
{
try
{
int count = SqlHelper.ExecuteNonQuery("update T_user set name='" + user.Name + "',sex='" + user.Sex + "' where id=" + user.Id);
return count;
}
catch (Exception){ throw;}
}
//新增用户
public int AddUserInfo(UserBean user)
{
try
{
int count = SqlHelper.ExecuteNonQuery("insert into T_user values('" + user.Name + "','" + user.Sex + "')");
return count;
}
catch (Exception)
{ throw; }
}
}
UserBean.cs
public class UserBean
{
public UserBean()
{
//
//TODO: 在此处添加构造函数逻辑
//
}
private long id;
private string sex;
private string name;
public long Id
{
get { return id; }
set { id = value; }
}
public string Name
{
get { return name; }
set { name = value; }
}
public string Sex
{
get { return sex; }
set { sex = value; }
}
}
潮平帆远，击水三千
