找回密码
当前位置：Mikel > 开发笔记 > ASP.NET MVC > 正文

asp.net下利用MVC模式实现Extjs表格增删改查 - yfsmooth - 博客园

2015-04-27 分类：ASP.NET MVC 阅读(593) 评论(0)

来源： 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; }
    }
}
复制代码
潮平帆远，击水三千
赞(0) 打赏
分享到： 更多 (0)

相关推荐

热门标签

C# (813)ASP.NET MVC (619)Android (587)ASP.NET (447)数据库 (299)JavaScript (285)JQuery (221)PHP (210)SQLServer (197)程序开发 (156)架构设计 (155)源价值 (155)SQL (128)Java (111)EasyUi (85)教程 (76)网站 (67)Debug (63)互联网 (63)MySQL (60)Flash (56)搜索优化 (54)创意 (53)SEO (51)ASP.NET MVC3 (51)电子商务 (50)建站经验 (49)实例代码 (49)源码下载 (47)原创 (45)

分类

链接表

<figure class="wp-block-image size-full"><a href="https://act.walk-live.com/acts/invite/registration?inviteid=hkXrmnvL" target="_blank"><img src="https://www.mikel.cn/wp-content/uploads/2024/11/wangxinyun.jpg"></a></figure>

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏