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

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

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

View页面代码

  1 @{
  2     ViewBag.Title = "用户列表";
  3     Layout = "~/Views/Shared/_Layout.cshtml";
  4     <script src="http://www.cnblogs.com/Content/jqUI/jquery-1.7.1.min.js" type="text/javascript"></script>
  5     <script src="http://www.cnblogs.com/Content/jqUI/jquery.easyui.min.js" type="text/javascript"></script>
  6     <script src="http://www.cnblogs.com/Content/jqUI/easyui-lang-zh_CN.js" type="text/javascript"></script>
  7     <link href="http://www.cnblogs.com/Content/jqUI/themes/icon.css" rel="stylesheet" type="text/css" />
  8     <link href="http://www.cnblogs.com/Content/jqUI/themes/default/easyui.css" rel="stylesheet" type="text/css" />
  9     
 10     <script src="http://www.cnblogs.com/Content/ColorBox/jquery.colorbox.js" type="text/javascript"></script>
 11     <link href="http://www.cnblogs.com/Content/ColorBox/colorbox.css" rel="stylesheet" type="text/css" />
 12     <link href="http://www.cnblogs.com/Content/ColorBox/colorbox_ie_fix.css" rel="stylesheet" type="text/css" />
 13     <script type="text/javascript">
 14         $(function () {
 15             $('#tt').datagrid({
 16                 width: 810,
 17                 height: 400,
 18                 idField: 'uid',
 19                 url: '/User/Ajax_UserList',
 20                 singleSelect: true,
 21                 rownumbers: true, //行编号
 22                 sortOrder: "asc",
 23                 columns: [[
 24                     { field: 'ck', checkbox: true }, //控制复选框
 25                    {field: 'uid', title: '编号', hidden: true, width: 80, sortable: true },
 26                   { field: 'UserName', title: '姓名', width: 100 },
 27                   { field: 'loginName', title: '登录名', width: 50 },
 28                   { field: 'password', title: '密码', width: 50 },
 29                   { field: 'opt', title: '操作', width: 100, align: 'center',
 30                       formatter: function (value, rec, index) {
 31                           var v = '<a href="#" mce_href="#" onclick="view(\'' + rec.uid + '\')">查看</a> ';
 32                           var e = '<a href="#" mce_href="#" onclick="edit(\'' + rec.uid + '\')">编辑</a> ';
 33                           var d = '<a href="#" mce_href="#" onclick="del(\'' + index + '\')">删除</a> ';
 34                           return v + e + d;
 35                       }
 36                   }
 37                 ]],
 38                 toolbar: [{
 39                     text: '增加', iconCls: 'icon-add', handler: function () {
 40                         $.fn.colorbox({
 41                             iframe: true,
 42                             height: 500,
 43                             width: 400,
 44                             href: '/User/Create',
 45                             onClosed: function () {
 46                                 $("#tt").datagrid("reload");
 47                             }
 48                         });
 49                     }
 50                 },
 51                 { text: '导入', iconCls: 'icon-add', handler: function () {
 52                     window.location.href = 'StuImport.aspx'
 53                 }
 54                 },
 55                 { text: '查找', iconCls: 'icon-search', handler: function () {
 56 
 57                 }
 58                 }
 59                 ],
 60                 pagination: true,
 61                 pageList: [5, 10, 15, 20, 25],
 62                 pageSize: 5,
 63                 pageIndex: 1
 64             });
 65         })
 66 
 67         function view(bh)  //转到查看页面  
 68         {
 69             $.fn.colorbox({
 70                 iframe: true,
 71                 speed: 300,
 72                 closolling: false,
 73                 href: "/User/Detail/" + bh,
 74                 innerHeight: '100%',
 75                 height: 300,
 76                 width: 500,
 77                 onOpen: false,
 78                 onLoad: false,
 79                 onComplete: false,
 80                 onCleanup: false,
 81                 onClosed: function () {
 82                     //$("#tt").datagrid("reload");
 83                 }
 84             });
 85         }
 86         function edit(bh)  //转到编辑页面  
 87         {
 88             window.location.href = 'StuEdit.aspx?id=' + bh;
 89         }
 90 
 91         function del(index) {  //删除操作
 92             $.messager.confirm('确认', '确认删除?', function (row) {
 93                 if (row) {
 94                     var selectedRow = $('#tt').datagrid('getSelected');  //获取选中行  
 95                     $.ajax({
 96                         url: '/User/DeleteUser?uid=' + selectedRow.uid,
 97                         type: "POST",
 98                         success: function (data) { alert(data); }
 99                     });
100                     $('#tt').datagrid('deleteRow', index);
101                     $("#tt").datagrid("reload");
102                 }
103             })
104         }  
105       
106     </script>
107 }
108 <h2>
109     用户列表</h2>
110 <table id="tt">
111 </table>

Controllers获取用户列表

JSON列表信息

 1         /// <summary>
 2         /// 获取JSON列表信息
 3         /// Test by Isaac on 2013-01-22
 4         /// </summary>
 5         /// <param name="page"></param>
 6         /// <param name="rows"></param>
 7         /// <returns></returns>
 8         public JsonResult Ajax_UserList(String page, String rows)
 9         {
10             Dictionary<string, object> result = new Dictionary<string, object>();
11             Int32 total = 0;
12             IList<Pt_User> list = GetAllUser(out total, page, rows);
13             result.Add("rows", list);
14             result.Add("total", total);
15             return Json(result, JsonRequestBehavior.AllowGet);
16         }

 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         /// 获取所有用户信息
 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         }

删除用户

 1         /// <summary>
 2         /// 删除用户
 3         /// Test by isaac on 2013-01-22
 4         /// </summary>
 5         /// <param name="uid">用户ID</param>
 6         /// <returns>结果</returns>
 7         [HttpPost]
 8         public JsonResult DeleteUser(String uid)
 9         {
10             JsonResult result = new JsonResult();
11             try
12             {
13                 using (var db = new MvcCmsContext())
14                 {
15                     Int32 id = uid != "" ? Convert.ToInt32(uid) : 0;
16                     Pt_User model = db.Pt_User.SingleOrDefault(p => p.uid == id);
17                     db.Pt_User.Remove(model);
18                     db.SaveChanges();
19                 }
20                 result = Json(new { success = true });
21             }
22             catch (Exception)
23             {
24                 result = Json(new { success = false });
25             }
26             return result;
27         }

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

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