ASP.NET MVC+EF框架+EasyUI实现权力管系列
(开篇)**
   (1):框架搭建    (2):数据库访问层的统筹Demo   
(3):面向接口编程
  
(4
):业务逻辑层的包**

  前言:今天经营打了一个诺基亚之Windows
Phone 8系统,特感兴趣,所以当何看了颇丰富时,这篇文章就是写的起硌迟,
从之Demo开始交如今本身都写了4首博客了,终于得以见见页面的物了,当然就相对于此类别以来的话语那时小巫见大巫了,权限项目还未曾起写为,当然前面的这些基础是最后要的,所以我形容的那个缓慢,而且组织句子真心不容易,这不是说知识点,而是直接以项目向上描绘,写的太方便了,怕大家看不了解,所以写的比较详细,但是皇天不借助于苦心人,现在这个Demo的后台基本写了了,现在咱们开始采用easyUI设计前台的页面,很快我们尽管可知看到成效了。废话不多说了,下面我们开我们的道。

1. 贯彻用户(UserInfo)的增删改查

 (1)当我们开动手规划前台页面的当儿,我们事先使下充斥到easyUI的法定Demo,然后我们当LYZJ.UserLimitMVC.UI.Portal项目面临添加UserInfoController控制器,添加了控制器后,会发出一个Index方法,最后我们在Index方法方面添加一个视图(View),这时候我们就是设当前台写easyUI的代码了,所以我们尽管以easyUI的Demo放到我们的门类里,方便我们的运用。

 (2)我们以品种的Content文件夹下面新建一个JqueryeasyUI文件夹,然后用easyUI的持有项目还拷贝过来存放到者文件夹下面。

 (3)这时候我们的档次配置就完事了,下面看一下我们的公文是怎存放于里的,截图所示:

        json 1

 (4)当添加easyUI的时段每个人之编程习惯还是说公司的规定都见面生出早晚之征,我这样丰富是一模一样种植方法,还有雷同种办法就是“各就各位”,也就是说JS文件就放到Jquery文件夹下面,而另外文件放到content文件夹下面,但是这样的话我以为之所以起有些乱,所以自己哪怕这样放了,大家喜爱什么样就怎么着来放。

2.运用easyUI实现用户之增删改查的页面Index.cshtml

 (1)因为这里是用easyUI来实现的页面,所以自己不怕未解释了,因为自用的时easyUI的DataGird控件,所以我们到easyUI的Demo里面找到这页面,然后针对这个页面进行复制,修改操作即可,当然我之前台代码我耶深受了挺详尽的诠释,大家可以参照一下。下面我就亮一下代码:

  1 @{
  2 
  3     Layout = null;
  4 
  5 }
  6 
  7 <!DOCTYPE html>
  8 
  9 <html>
 10 
 11 <head>
 12 
 13     <meta name="viewport" content="width=device-width" />
 14 
 15     <title>实现用户的增删改查</title>
 16 
 17     @*添加Jquery EasyUI的样式*@
 18 
 19     <link href="~/Content/JqueryEasyUI/themes/default/easyui.css" rel="stylesheet" />
 20 
 21     <link href="~/Content/JqueryEasyUI/themes/icon.css" rel="stylesheet" />
 22 
 23     @*添加Jquery,EasyUI和easyUI的语言包的JS文件*@
 24 
 25     <script src="~/Content/JqueryEasyUI/jquery-1.8.0.min.js"></script>
 26 
 27     <script src="~/Content/JqueryEasyUI/jquery.easyui.min.js"></script>
 28 
 29     <script src="~/Content/JqueryEasyUI/locale/easyui-lang-zh_CN.js"></script>
 30 
 31     @*实现对EasyUI的DataGird控件操作的JS代码*@
 32 
 33     <script type="text/javascript">
 34 
 35         $(function () {
 36 
 37             //当页面首次刷新的时候执行的事件
 38 
 39             initTable();
 40 
 41         });
 42 
 43         //实现对DataGird控件的绑定操作
 44 
 45         function initTable() {
 46 
 47             $('#test').datagrid({   //定位到Table标签,Table标签的ID是test
 48 
 49                 //   UserInfo是控制器,GetAllUserInfos是控制器中获取用户数据的一个Action
 50 
 51                 url: '/UserInfo/GetAllUserInfos',   //指向后台的Action来获取当前用户的信息的Json格式的数据
 52 
 53                 title: '用户的展示',  //标识
 54 
 55                 //下面的这些属性如果谁不太清楚的话我建议去官方网站去学习或者在群里我们讨论,这里就不说了
 56 
 57                 iconCls: 'icon-save',
 58 
 59                 width: 500,
 60 
 61                 height: 350,
 62 
 63                 nowrap: true,
 64 
 65                 autoRowHeight: false,
 66 
 67                 striped: true,
 68 
 69                 collapsible: true,
 70 
 71                 pagination: true,
 72 
 73                 rownumbers: true,
 74 
 75                 sortName: 'ID',
 76 
 77                 sortOrder: 'desc',
 78 
 79                 remoteSort: false,
 80 
 81                 idField: 'ID',
 82 
 83                 frozenColumns: [[
 84 
 85                     { field: 'ck', checkbox: true },
 86 
 87                     { title: '主键', field: 'ID', width: 80, sortable: true },
 88 
 89                     { title: '用户名', field: 'UName', width: 120, sortable: true },
 90 
 91                     { title: '密码', field: 'Pwd', width: 100, sortable: true }
 92 
 93                 ]],
 94 
 95                 toolbar: [{
 96 
 97                     id: 'btnadd',
 98 
 99                     text: '添加',
100 
101                     iconCls: 'icon-add',
102 
103                     handler: function () {
104 
105                         $('#btnsave').linkbutton('enable');
106 
107                     }
108 
109                 }, {
110 
111                     id: 'btncut',
112 
113                     text: '修改',
114 
115                     iconCls: 'icon-cut',
116 
117                     handler: function () {
118 
119                         $('#btncut').linkbutton('enable');
120 
121                     }
122 
123                 }, '-', {
124 
125                     id: '删除',
126 
127                     text: 'Save',
128 
129                     iconCls: 'icon-cancel',
130 
131                 }]
132 
133             });
134 
135         }
136 
137     </script>
138 
139 </head>
140 
141 <body>
142 
143     <div>
144 
145         <!-----------------------EasyUI的DataGird控件的放置----------------------->
146 
147         <table id="test" style="width: 700px" title="用户操作" iconcls="icon-edit">
148 
149            
150 
151         </table>
152 
153     </div>
154 
155 </body>
156 
157 </html>

3.控制器实现获取用户信息之Action方法

 (1)当我们组织好前台之后,这时候我们就需实现后台的操作的艺术,我们以前台的EasyUI里面有一个URL属性,传递的哪怕是控制器下面的方法,我们于写的时呢如对应和斯设置同一搜索一样,不然的话默认会找不至。

 (2)当我们操作控制器底时刻我们需要使用前几篇博客中落实之事务逻辑层的有的事物,所以我们这边要加上一些援,LYZJ.UserLimitMVC.IBLL,LYZJ.UserLimitMVC.BLL,LYZJ.UserLimitMVC.Model

 (3)
当我们得操作项目之View视图的当儿,我们是待和数据库进行交互的,那麽我们怎么用数据库被的音讯注册及路被错过吧,这里发出一个颇粗略的道就是我们于MVC的Model层添加ADO.NET实体模型—>从数据库中生成—>选择数据库的连,随便连接一个数据库,当选择表的时刻咱们无需选择,这样就确立了一个缺损的型,当我们添加完成以后我们在说这模型删除即可,然后我们又修改web.config中的情,首先我们找到LYZJ.UserLimitMVC.Model类库下面的App.Config,然后我们复制下面的立段代码:

1   <connectionStrings>
2 
3     <add name="DataModelContainer" connectionString="metadata=res://*/DataModel.csdl|res://*/DataModel.ssdl|res://*/DataModel.msl;provider=System.Data.SqlClient;provider connection string=&quot;data source=HYL;initial catalog=LYZJShopDB;persist security info=True;user id=sa;password=saa;MultipleActiveResultSets=True;App=EntityFramework&quot;" providerName="System.Data.EntityClient" />
4 
5   </connectionStrings>

  到我们的路之Web.Config中之<configuration>节点下面,然后注释刚才咱们自动生成connectionString节点,这时候我们的数据库等的部署就水到渠成了。

 (4)
下面我们再度数据库被输入几修数,进行测试,因为咱们的项目包含分页,所有自建议于数据库中手动添加数据超过10长达以上。

 (5)
我们以开控制器的时呢得要是利用接口编程。

 (6)
下面就是自身控制器中实现的计,代码贴出大家指点一下

 1 namespace LYZJ.UserLimitMVC.UI.Portal.Controllers
 2 
 3 {
 4 
 5     public class UserInfoController : Controller
 6 
 7     {
 8 
 9         //在这里也需要依赖接口编程
10 
11         private IBLL.IUserInfoService _userInfoService = new UserInfoService();
12 
13         public ActionResult Index()
14 
15         {
16 
17             return View();
18 
19         }
20 
21         public ActionResult GetAllUserInfos()
22 
23         {
24 
25             //Json格式的要求{total:22,rows:{}}
26 
27             //实现对用户分页的查询,rows:一共多少条,page:请求的当前第几页
28 
29             int pageIndex = Request["page"] == null ? 1 : int.Parse(Request["page"]);
30 
31             int pageSize = Request["rows"] == null ? 10 : int.Parse(Request["rows"]);
32 
33             int total = 0;
34 
35             //调用分页的方法,传递参数,拿到分页之后的数据
36 
37             var data = _userInfoService.LoadPageEntities(pageIndex, pageSize, out total, u => true, true, u => u.ID);
38 
39             //构造成Json的格式传递
40 
41             var result = new {total = total, rows = data};
42 
43             return Json(result, JsonRequestBehavior.AllowGet);
44 
45         }
46 
47     }
48 
49 }

 (7)上面代码我们虽然就贴出来了,但是我们不理解针对怪,这时候我们启动浏览器直接去访问这个控制器下面的主意来博Json数据,然后我们看Json数据是否是,结果如图所示:json 2

     json 3

4.终极之效益

 (1)这篇博客及这边我们早已看了最终了吧,很光荣之喻大家,你们猜对了,下面我重新上几摆放效果图,展示一下即可,如果各位博友还有啊地方不绝理解话可叫自身留言或投入自己之群问我,我将坏乐于啊卿去解决的!

     json 4

     json 5

最终自己再此提醒一个老主要之瞩目起,很多丁当为此easyUI获取数据的时节肯定后台传递的Json串没有其他问题,而且前台的代码对应之页写的对,那麽那里来底问题吧,那即便是Json串中之一味词写错了,这里传递让后台的json串应该是:{total:22,rows:{}},有图也证实

     json 6

 

源码下载

 

   (1):一体化源码下载

  

  Kencery回本系列开篇

  

相关文章

网站地图xml地图