MVC3快速搭建Web应用(二)

上一篇文章发布后MVC3快速搭建Web应用(一)，自己又仔细读了数遍，感觉一是文笔太差，二是描述逻辑比较混乱，客观原因是涉及到东西其实蛮多的，那三个步骤不可能在一篇短短的文章中就可以描述清楚。此篇笔者将尽量更加详尽一些。另外需要说明一点的是，本文默认读者：

熟悉ASP.NET MVC；Razor语法；熟悉javascript；实体框架。

Web应用不像winform应用，要想让用户得到更流畅更舒适的体验，方法之一就是模拟winform的窗口操作，使用户在浏览器中也能像桌面一样舒服。在界面框架方面我们有大家最熟悉的jquery ui，有Ext等等，经过一系列的筛选，我们最终决定使用easyui，文档教程例子都比较全面的一个js ui框架。首先我们来看看用到的js文件

 
 
 
 

  
  
  
  
 jquery主文件 
  
  
  
  
 easy ui主文件 
  
  
  
  
 校验组件  
  
  
  
  
 表单组件 
  
  
  
  
 easyui的中文化 
  
  
  
  
 校验组件的中文化
 
 
 
 

我们把它添加到mvc的Shared/_Layout.cshtml中。这样我们的项目所有Layout=null的视图都拥有了easyui支持。

在MVC3中，当你右键添加一个控制器时，向导会让你选择：

其中模版我们选择使用实体框架并生成相关actions与views，Model选择你实体框架中对应的表名（类名），DataContext选择上下文类

Views引擎选择Razor，高级选项里的两个勾都去掉，因为我们不需要引用内置的脚本库，也不需要选择layout（不选择layout,MVC默认该view使用Shared/_Layout.cshtml，也就是刚才我们添加js文件link的那个文件)。

确认上一篇中你下载的t4模版放进了它应该存在的地方（最好备份一下原始的），当你点击Add时，vs会自动在Controllers下面添加相应的控制器，在views文件夹下添加Create、Edit、Delete、Details、Index五个文件。下面我们一一查看他们的内容：

#p#

控制器中，action已经自动帮你添加完毕

 
 
 
 

  
  
  
  
　　　　private BsmisEntities db = new BsmisEntities(); 
  
  
  
  
        // 
  
  
  
  
        // GET: /User/ 
  
  
  
  

  
  
  
  
        public ViewResult Index() 
  
  
  
  
        { 
  
  
  
  
            return View(); 
  
  
  
  
        } 
  
  
  
  

  
  
  
  
        // 
  
  
  
  
        // GET: /User/Create 
  
  
  
  
        public ActionResult Create() 
  
  
  
  
        { 
  
  
  
  
            return View(); 
  
  
  
  
        }  
  
  
  
  

  
  
  
  
        // 
  
  
  
  
        // POST: /User/Create 
  
  
  
  
        [HttpPost] 
  
  
  
  
        public ActionResult Create(T_User t_user) 
  
  
  
  
        { 
  
  
  
  
            JsonResult result = new JsonResult(); 
  
  
  
  
            result.Data = true; 
  
  
  
  
            try
  
  
  
  
            { 
  
  
  
  

  
  
  
  
                if (t_user.Enable == null) 
  
  
  
  
                    t_user.Enable = 0; 
  
  
  
  

  
  
  
  
                db.T_User.AddObject(t_user); 
  
  
  
  

  
  
  
  
                db.SaveChanges(); 
  
  
  
  
            } 
  
  
  
  
            catch (Exception ee) 
  
  
  
  
            { 
  
  
  
  
                result.Data = ee.Message; 
  
  
  
  
            } 
  
  
  
  
            return result; 
  
  
  
  
        } 
  
  
  
  

  
  
  
  
        // 
  
  
  
  
        // GET: /User/Edit/5 
  
  
  
  
        [OutputCache(Location = OutputCacheLocation.None)] 
  
  
  
  
        public ActionResult Edit(int id) 
  
  
  
  
        { 
  
  
  
  
            T_User t_user = db.T_User.Single(t => t.UserID == id); 
  
  
  
  
            ViewBag.DepartmentID = new SelectList(db.T_DepartmentInfo, "DepartmentID", "Code", t_user.DepartmentID); 
  
  
  
  
            return View(t_user); 
  
  
  
  
        } 
  
  
  
  

  
  
  
  
        // 
  
  
  
  
        // POST: /User/Edit/5 
  
  
  
  

  
  
  
  
        [HttpPost] 
  
  
  
  
        [OutputCache(Location = OutputCacheLocation.None)] 
  
  
  
  
        public ActionResult Edit(T_User t_user) 
  
  
  
  
        { 
  
  
  
  
            JsonResult result = new JsonResult(); 
  
  
  
  
            result.Data = true; 
  
  
  
  
            try
  
  
  
  
            { 
  
  
  
  
                db.T_User.Attach(t_user); 
  
  
  
  
                db.ObjectStateManager.ChangeObjectState(t_user, EntityState.Modified); 
  
  
  
  
                db.SaveChanges(); 
  
  
  
  
            } 
  
  
  
  
            catch (Exception ee) 
  
  
  
  
            { 
  
  
  
  
                result.Data = ee.Message; 
  
  
  
  
            } 
  
  
  
  
            return result; 
  
  
  
  

  
  
  
  
        } 
  
  
  
  

  
  
  
  
        // 
  
  
  
  
        // POST: /User/Delete/5 
  
  
  
  
        [HttpPost, ActionName("Delete")] 
  
  
  
  
        public ActionResult DeleteConfirmed(int id) 
  
  
  
  
        {  
  
  
  
  
　　　　　　　JsonResult json=new JsonResult(); 
  
  
  
  
　　　　　　　　json.Data=true; 
  
  
  
  
　　　　　　　　try
  
  
  
  
　　　　　　　　{            　　T_User t_user = db.T_User.Single(t => t.UserID ==id); 
  
  
  
  
            　　db.T_User.DeleteObject(t_user); 
  
  
  
  
            　　db.SaveChanges(); 
  
  
  
  
　　　　　　　　} 
  
  
  
  
　　　　　　　　catch(Exception ee) 
  
  
  
  
　　　　　　　　{ 
  
  
  
  
　　　　　　　　　　json.Data=ee.Message; 
  
  
  
  
　　　　　　　　} 
  
  
  
  
　　　　　　　　return json;        } 
  
  
  
  

  
  
  
  

  
  
  
  
        /// 
 
  
  
  
  
        /// 数据显示、分页信息 
  
  
  
  
        ///  
  
  
  
  
        ///  
  
  
  
  
        ///  
  
  
  
  
        ///  
  
  
  
  
        public JsonResult List(int page, int rows) 
  
  
  
  
        { 
  
  
  
  
            var q = from u in db.T_User 
  
  
  
  
                    join d in db.T_DepartmentInfo on u.DepartmentID equals d.DepartmentID 
  
  
  
  
                    orderby u.UserID 
  
  
  
  
                    select new
  
  
  
  
                        { 
  
  
  
  
                            UserID = u.UserID, 
  
  
  
  
                            UserName = u.UserName, 
  
  
  
  
                            Address = u.Address, 
  
  
  
  
                            Birth = u.Birth, 
  
  
  
  
                            DepartmentID = u.DepartmentID, 
  
  
  
  
                            DepartmentName = d.Name, 
  
  
  
  
                            Enable = u.Enable, 
  
  
  
  
                            Gendar = u.Gendar, 
  
  
  
  
                            IDCardNumber = u.IDCardNumber, 
  
  
  
  
                            LastAccessIP = u.LastAccessIP, 
  
  
  
  
                            LastAccessTime = u.LastAccessTime, 
  
  
  
  
                            LogonTimes = u.LogonTimes, 
  
  
  
  
                            Password = u.Password, 
  
  
  
  
                            PostCode = u.PostCode, 
  
  
  
  
                            RealName = u.RealName, 
  
  
  
  
                            Tel = u.Tel, 
  
  
  
  
                            Province = u.Province, 
  
  
  
  
                            City = u.City, 
  
  
  
  
                            Area = u.Area 
  
  
  
  
                        }; 
  
  
  
  

  
  
  
  

  
  
  
  
            var result = q.Skip((page - 1) * rows).Take(rows).ToList(); 
  
  
  
  
            Dictionary json = new Dictionary(); 
  
  
  
  
            json.Add("total", q.ToList().Count); 
  
  
  
  
            json.Add("rows", result); 
  
  
  
  

  
  
  
  
            return Json(json, JsonRequestBehavior.AllowGet); 
  
  
  
  
        }
 
 
 
 

这些action分别对应create、delete、edit、index视图（detail我们一般情况下不需要它，所以我的模版里没有写对应的生成代码）你可以比较一下它与原生的模版生成的代码之间的区别。后期我们还会在控制器里添加一些譬如检查名称是否重名之类的action

 
 
 
 

  
  
  
  
[OutputCache(Location = OutputCacheLocation.None)] 
  
  
  
  
        public JsonResult CheckRealNameExist(string RealName, int UserID) 
  
  
  
  
        { 
  
  
  
  
            JsonResult result = new JsonResult(); 
  
  
  
  
            result.JsonRequestBehavior = JsonRequestBehavior.AllowGet; 
  
  
  
  

  
  
  
  
            result.Data = false; 
  
  
  
  
            try
  
  
  
  
            { 
  
  
  
  
                if (UserID == 0) 
  
  
  
  
                { 
  
  
  
  
                    if (db.T_User.Any(p => p.RealName == RealName)) 
  
  
  
  
                    { 
  
  
  
  
                        return result; 
  
  
  
  
                    } 
  
  
  
  

  
  
  
  
                } 
  
  
  
  
                else
  
  
  
  
                { 
  
  
  
  
                    if (db.T_User.Any(p => ((p.UserID != UserID) && (p.RealName == RealName)))) 
  
  
  
  
                    { 
  
  
  
  
                        return result; 
  
  
  
  
                    } 
  
  
  
  
                } 
  
  
  
  
            } 
  
  
  
  
            catch (Exception) 
  
  
  
  
            { 
  
  
  
  
                return result; 
  
  
  
  
            } 
  
  
  
  

  
  
  
  
            result.Data = true; 
  
  
  
  
            return result; 
  
  
  
  

  
  
  
  
        }
 
 
 
 

返回值一般都是jsonresult。这样的话，当你在浏览器中访问http://localhost:1233/User/CheckRealNameExist?RealName=张三&UserID=0时 你会获得一个true或false值。是不是跟webservice有点异曲同工？

同样，在Views文件夹中生成了Create、Edit、Details、Delete、Index五个文件，其中Details与Delete我们不需要，因为我们想使用更友好的异步删除（用户单击delete后，页面不刷新，成功后浏览器下方滑出提示，3秒后关闭，失败滑出失败信息，不自动关闭 /利用easyui中的messager组件）。以下是Index中的js：

#p#

 
 
 
 

  
  
  
  
//删除 
  
  
  
  
        function del() { 
  
  
  
  
            var id = getselectedRow(); 
  
  
  
  
            if (id != undefined) { 
  
  
  
  
                $.messager.confirm('确认', '确定删除?', function (r) { 
  
  
  
  
                    if (r) { 
  
  
  
  
                        var url = 'User/Delete/' + id; 
  
  
  
  
                        $.post(url, function () { 
  
  
  
  

  
  
  
  
                        }).success(function () { 
  
  
  
  
                            $.messager.show({ 
  
  
  
  
                                title: '提示', 
  
  
  
  
                                msg: '删除成功', 
  
  
  
  
                                timeout: 3000, 
  
  
  
  
                                showType: 'slide'
  
  
  
  
                            }); 
  
  
  
  
                            $('#dg').datagrid('reload'); 
  
  
  
  
                        }) 
  
  
  
  
                            .error(function () { 
  
  
  
  
                                $.messager.alert('错误', '删除发生错误'); 
  
  
  
  
                            }); 
  
  
  
  

  
  
  
  
                    } 
  
  
  
  
                }); 
  
  
  
  
            } 
  
  
  
  
        }
 
 
 
 

我们把Details与Delete删除后只剩下Index、Create、Edit三个文件，这三个文件之间的关系是，Index中包含添加、编辑按钮，点击后使用js将对应的actionresult加载到div中，以实现弹窗新建，编辑的效果。

 
 
 
 

  
  
  
  
//新建 
  
  
  
  
        function c_dlg() { 
  
  
  
  
            var url = 'User/Create'; 
  
  
  
  
            $('#c_dlg').show(); 
  
  
  
  
            $('#c_dlg').load(url, function () { 
  
  
  
  
                $(this).dialog({ 
  
  
  
  
                    title: '添加', 
  
  
  
  
                    buttons: [{ 
  
  
  
  
                        text: '提交', 
  
  
  
  
                        iconCls: 'icon-ok', 
  
  
  
  
                        handler: function () { 
  
  
  
  
                            $('#c_form').submit(); 
  
  
  
  
                        } 
  
  
  
  
                    }, { 
  
  
  
  
                        text: '取消', 
  
  
  
  
                        handler: function () { 
  
  
  
  
                            $('#c_dlg').dialog('close'); 
  
  
  
  
                        } 
  
  
  
  
                    }] 
  
  
  
  
                }); 
  
  
  
  
            }); 
  
  
  
  
        } 
  
  
  
  

  
  
  
  
        //编辑框 
  
  
  
  
        function e_dlg() { 
  
  
  
  
            var id = getselectedRow(); 
  
  
  
  
            if (id != undefined) { 
  
  
  
  
                var url = 'User/Edit/' + id; 
  
  
  
  
                $('#e_dlg').show(); 
  
  
  
  
                $('#e_dlg').load(url, function () { 
  
  
  
  
                    $(this).dialog({ 
  
  
  
  
                        title: '编辑', 
  
  
  
  
                        buttons: [{ 
  
  
  
  
                            text: '提交', 
  
  
  
  
                            iconCls: 'icon-ok', 
  
  
  
  
                            handler: function () { 
  
  
  
  
                                $('#e_form').submit(); 
  
  
  
  
                            } 
  
  
  
  
                        }, { 
  
  
  
  
                            text: '取消', 
  
  
  
  
                            handler: function () { 
  
  
  
  
                                $('#e_dlg').dialog('close'); 
  
  
  
  
                            } 
  
  
  
  
                        }] 
  
  
  
  
                    }); 
  
  
  
  
                }); 
  
  
  
  
            } 
  
  
  
  
        }
 
 
 
 

这里面的c_dlg与e_dlg是index页面的两个Div节点：