asp.net下利用MVC模式实现Extjs表格增删改查

浏览数：77 / 时间：2015年06月09日

在网上看到有很多人写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; }
    }
}