这里的环境只有VS2010，EF CF4.1，继续加入Jquery EasyUI，做一个用户列表（选中，编辑，删除，新增）
首先把页面代码先弄上来吧~
代码语言：javascript复制 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.kk = '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.kk = '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获取用户列表
代码语言：javascript复制 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，一个最基本的功能就完成了，下次我们将会深入研究，加油。
