VS2010+EF Code First 4.1学习MVC3（一）

这里的环境只有VS2010，EF CF4.1，继续加入Jquery EasyUI，做一个用户列表（选中，编辑，删除，新增）

首先把页面代码先弄上来吧~

@{
    ViewBag.Title = "用户列表";
    Layout = "~/Views/Shared/_Layout.cshtml";
    <script src="http://www.cnblogs.com/Content/jqUI/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="http://www.cnblogs.com/Content/jqUI/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="http://www.cnblogs.com/Content/jqUI/easyui-lang-zh_CN.js" type="text/javascript"></script>
    <link href="http://www.cnblogs.com/Content/jqUI/themes/icon.css" rel="stylesheet" type="text/css" />
    <link href="http://www.cnblogs.com/Content/jqUI/themes/default/easyui.css" rel="stylesheet" type="text/css" />
    
    <script src="http://www.cnblogs.com/Content/ColorBox/jquery.colorbox.js" type="text/javascript"></script>
    <link href="http://www.cnblogs.com/Content/ColorBox/colorbox.css" rel="stylesheet" type="text/css" />
    <link href="http://www.cnblogs.com/Content/ColorBox/colorbox_ie_fix.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        $(function () {
            $('#tt').datagrid({
                 810,
                height: 400,
                idField: 'uid',
                url: '/User/Ajax_UserList',
                singleSelect: true,
                rownumbers: true, //行编号
                sortOrder: "asc",
                columns: [[
                    { field: 'ck', checkbox: true }, //控制复选框
                   {field: 'uid', title: '编号', hidden: true,  80, sortable: true },
                  { field: 'UserName', title: '姓名',  100 },
                  { field: 'loginName', title: '登录名',  50 },
                  { field: 'password', title: '密码',  50 },
                  { field: 'opt', title: '操作',  100, align: 'center',
                      formatter: function (value, rec, index) {
                          var v = '<a href="#" mce_href="#" onclick="view(\'' + rec.uid + '\')">查看</a> ';
                          var e = '<a href="#" mce_href="#" onclick="edit(\'' + rec.uid + '\')">编辑</a> ';
                          var d = '<a href="#" mce_href="#" onclick="del(\'' + index + '\')">删除</a> ';
                          return v + e + d;
                      }
                  }
                ]],
                toolbar: [{
                    text: '增加', iconCls: 'icon-add', handler: function () {
                        $.fn.colorbox({
                            iframe: true,
                            height: 500,
                             400,
                            href: '/User/Create',
                            onClosed: function () {
                                $("#tt").datagrid("reload");
                            }
                        });
                    }
                },
                { text: '导入', iconCls: 'icon-add', handler: function () {
                    window.location.href = 'StuImport.aspx'
                }
                },
                { text: '查找', iconCls: 'icon-search', handler: function () {

                }
                }
                ],
                pagination: true,
                pageList: [5, 10, 15, 20, 25],
                pageSize: 5,
                pageIndex: 1
            });
        })

        function view(bh)  //转到查看页面  
        {
            $.fn.colorbox({
                iframe: true,
                speed: 300,
                closolling: false,
                href: "/User/Detail/" + bh,
                innerHeight: '100%',
                height: 300,
                 500,
                onOpen: false,
                onLoad: false,
                onComplete: false,
                onCleanup: false,
                onClosed: function () {
                    //$("#tt").datagrid("reload");
                }
            });
        }
        function edit(bh)  //转到编辑页面  
        {
            window.location.href = 'StuEdit.aspx?id=' + bh;
        }

        function del(index) {  //删除操作
            $.messager.confirm('确认', '确认删除?', function (row) {
                if (row) {
                    var selectedRow = $('#tt').datagrid('getSelected');  //获取选中行  
                    $.ajax({
                        url: '/User/DeleteUser?uid=' + selectedRow.uid,
                        type: "POST",
                        success: function (data) { alert(data); }
                    });
                    $('#tt').datagrid('deleteRow', index);
                    $("#tt").datagrid("reload");
                }
            })
        }  
      
    </script>
}
<h2>
    用户列表</h2>
<table id="tt">
</table>

Controllers获取用户列表

        /// <summary>
        /// 获取JSON列表信息
        /// Test by Isaac on 2013-01-22
        /// </summary>
        /// <param name="page"></param>
        /// <param name="rows"></param>
        /// <returns></returns>
        public JsonResult Ajax_UserList(String page, String rows)
        {
            Dictionary<string, object> result = new Dictionary<string, object>();
            Int32 total = 0;
            IList<Pt_User> list = GetAllUser(out total, page, rows);
            result.Add("rows", list);
            result.Add("total", total);
            return Json(result, JsonRequestBehavior.AllowGet);
        }

        /// <summary>
        /// 获取所有用户信息
        /// </summary>
        /// <returns></returns>
        private IList<Pt_User> GetAllUser(out Int32 total, String page, String rows)
        {
            Int32 pageIndex = Convert.ToInt32(page);
            Int32 pageSize = Convert.ToInt32(rows);
            Int32 startNum = pageSize * (pageIndex - 1);
            IList<Pt_User> userList = new List<Pt_User>();
            using (var db = new MvcCmsContext())
            {
                total = db.Pt_User.Count();
                userList = db.Pt_User.OrderByDescending(p => p.uid)
                                    .Skip(startNum).Take(pageSize).ToList();
            }
            return userList;
        }

效果如下：

 1         /// <summary>
 2         /// 获取所有用户信息
 3         /// </summary>
 4         /// <returns></returns>
 5         private IList<Pt_User> GetAllUser(out Int32 total, String page, String rows)
 6         {
 7             Int32 pageIndex = Convert.ToInt32(page);
 8             Int32 pageSize = Convert.ToInt32(rows);
 9             Int32 startNum = pageSize * (pageIndex - 1);
10             IList<Pt_User> userList = new List<Pt_User>();
11             using (var db = new MvcCmsContext())
12             {
13                 total = db.Pt_User.Count();
14                 userList = db.Pt_User.OrderByDescending(p => p.uid)
15                                     .Skip(startNum).Take(pageSize).ToList();
16             }
17             return userList;
18         }

点击新增效果如下：（成功后自动关闭层，并刷新列表）

 1         /// <summary>
 2         /// 新建用户
<spa增加/divn style="color: #008080;"> 3         /// Test by isaac on 2013-01-22
 4         /// </summary>
 5         /// <param name="model"></param>
 6         /// <returns></returns>
 7         [HttpPost]
 8         public ActionResult Create(Pt_User model)
 9         {
10             try
11             {
12                 //操作数据的代码
13                 using (var db = new MvcCmsContext())
14                 {
15                     model.registerTime = DateTime.Now;
16                     model.status = "001";
17                     db.Pt_User.Add(model);
18                     db.SaveChanges();
19                 }
20                 return RedirectToAction("/User/UserList");
21             }
22             catch
23             {
24                 return View();
25             }
26         }

        /// <summary>
        /// 删除用户
        /// Test by isaac on 2013-01-22
        /// </summary>
        /// <param name="uid">用户ID</param>
        /// <returns>结果</returns>
        [HttpPost]
        public JsonResult DeleteUser(String uid)
        {
            JsonResult result = new JsonResult();
            try
            {
                using (var db = new MvcCmsContext())
                {
                    Int32 id = uid != "" ? Convert.ToInt32(uid) : 0;
                    Pt_User model = db.Pt_User.SingleOrDefault(p => p.uid == id);
                    db.Pt_User.Remove(model);
                    db.SaveChanges();
                }
                result = Json(new { success = true });
            }
            catch (Exception)
            {
                result = Json(new { success = false });
            }
            return result;
        }

 弹出删除提示，删除成功后，自动刷新列表信息

OK，一个最基本的功能就完成了，下次我们将会深入研究，加油。