ASP.NET MVC+EF框架+EasyUI完结权力管连串
(开篇)**
   (1):框架搭建    (二):数据库访问层的宏图德姆o   
(三):面向接口编制程序
  
(肆):业务逻辑层的包裹**

  前言:后天经营买了2个三星的Windows
Phone 八系统,特感兴趣,所以在哪儿看了很短日子,这篇文章就写的有点迟,
从这几个德姆o开首到现行反革命本人已经写了四篇博客了,终于得以见到页面包车型地铁东西了,当然那相对于这些项目来讲的话这时小巫见大巫了,权限项目还从未先河写吗,当然前边的这个基础是最后要的,所以小编写的异常慢,而且集体句子真心不易于,那不是说知识点,而是直接将品种往上写,写的太宽了,怕大家看不懂,所以写的相比详细,不过皇天不负苦心人,未来以此德姆o的后台基本写完了,将来我们开始运用easyUI设计前台的页面,十分的快大家就能够见到效果了。废话不多说了,上面大家初始大家的征途。

一. 得以实现用户(UserInfo)的增加和删除改查

 (一)当大家早先入手规划前台页面包车型大巴时候,大家先要下载到easyUI的官方德姆o,然后大家在LYZJ.UserLimitMVC.UI.Portal项目中增多UserInfoController调控器,加多完调控器后,会有四个Index方法,最终我们在Index方法方面加多多少个视图(View),那时候大家将要在前台写easyUI的代码了,所以大家就将easyUI的德姆o放到大家的花色里面,方便我们的使用。

 (二)大家在品种的Content文件夹上面新建3个JqueryeasyUI文件夹,然后将easyUI的具有品种都拷贝过来存放到此文件夹下边。

 (叁)那时候大家的品类安插就大功告成了,下边看一下我们的文书是何等存放在里头的,截图所示:

        json 1

 (4)当增多easyUI的时候每一种人的编制程序习惯也许说公司的明确都会有必然的认证,笔者如此丰裕是一种方法,还有一种办法正是“各就各位”,也正是说JS文件就停放Jquery文件夹上边,而别的文件放到content文件夹上面,可是那样的话笔者以为用起来有点乱,所以本人就这么放置了,咱们喜爱怎么就什么样来放置。

贰.行使easyUI完结用户的增加和删除改查的页面Index.cshtml

 (一)因为那里是利用easyUI来实现的页面,所以小编就不表明了,因为我动用的时easyUI的DataGird控件,所以我们到easyUI的德姆o里面找到那一个页面,然后对这么些页面进行理并答复制,修改操作就能够,当然作者的前台代码作者也给了老大详细的注解,大家能够参见一下。下边小编就显得一下代码:

  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方法

 (一)当大家组织好前台之后,那时候我们就供给达成后台的操作的格局,大家在前台的EasyUI里面有多个U安德拉L属性,传递的就是调整器下边包车型客车法子,大家在写的时候也要对应和那些设置1摸同样,不然的话私下认可会找不到。

 (二)当我们操作调节器的时候大家须要使用前面几篇博客中贯彻的事体逻辑层的一些东西,所以大家那里必要增加壹些引用,LYZJ.UserLimitMVC.IBLL,LYZJ.UserLimitMVC.BLL,LYZJ.UserLimitMVC.Model

 (三)
当大家要求操作项目的View视图的时候,大家是索要和数据库进行互动的,那麽大家怎么将数据库中的新闻注册到项目中去吧,那里有二个很简短的章程就是我们在MVC的Model层增多ADO.NET实人体模型型—>从数据库中生成—>选取数据库的两次三番,随便连接三个数据库,当选取表的时候大家不供给选择,那样就建立了3个空的模子,当大家抬高实现今后大家在讲那些模型删除就能够,然后大家再修改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节点,那时候我们的数据库等的配备就实现了。

 (四)
上边咱们再数据库中输入几条数据,举行测试,因为我们的种类包涵分页,全体小编建议往数据库中手动添加数据超越十条以上。

json, (伍)
大家在挥洒调节器的时候也势须要采用接口编制程序。

 (陆)
上边正是自家调节器中贯彻的艺术,代码贴出来大家指点一下

 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.末尾的效果

 (一)那篇博客到这边我们早已观看了最终了吧,很荣幸的告知我们,你们猜对了,上面小编再上几张效果图,体现一下就能够,若是各位博友还有如哪儿方不太驾驭话能够给本身留言大概参与本身的群问作者,笔者将很乐于为您去解决的!

     json 4

     json 5

终极自身再那里提示1个不胜关键的小心项,诸多少人在用easyUI获取数据的时候明显后台传递的Json串未有其它难点,而且前台的代码对应的页写的正确,那麽那里出的标题吧,那正是Json串中的单词写错了,那里传递给后台的json串应该是:{total:22,rows:{}},有图为证

     json 6

 

源码下载

 

   (1):全体源码下载

  

  Kencery回到本体系开篇

  

相关文章

网站地图xml地图