回《【开源】EnterpriseFrameWork框架系列文章索引》
EFW框架源代码下载:http://pan.baidu.com/s/1qWJjo3U
EFW框架中的WebController就是解决JqueryEasyUI与逻辑层的交互,之间的数据是通过Json字符串来传递;值得注意的是WebController的代码一定不要和EFWWeb项目放在一起,你可以单独建一个项目类库,也可以和逻辑层项目放一起;在EFWWeb项目不要编写任何C#代码,这个在前面的文章中就提过,可以让你的Web项目发布更省事一点,免去编译EFWWeb项目的痛苦;
控制器可以调用分层一下的所有代码,包括ObjectModel、Dao、Entity,甚至可以直接用oleDb编写SQL语句操作数据库;还有控制器与控制器之间是不能存在任何依赖关系的;
本章主要内容通过解读框架源代码来学习WebController是怎么实现的,以及思考这样实现会给我们开发带来什么好处;
本文要点:
1.如何使用Web控制器
2.Web控制器的设计思路
3.Web控制器基类AbstractController的实现
4.Web控制器的自定义标签WebControllerAttribute和WebMethodAttribute
5.基于JqueryEasyUI封装的Web控制器的实现
6.Web常用组件封装成控制器
Web控制器源代码目录
EFW框架控制器设计图
讲解EFW框架中的Web控制器的使用之前先看看传统的Web系统是如何开发的;
如上图,传统方式一个aspx文件对应一个cs文件,开发方式跟Winform桌面程序相同,都是事件响应的模式;我们再看看EFW框架中是如何开放的;
如上图,有两个项目EFWWeb项目和Books项目,EFWWeb项目里面只有界面HTML代码和JS代码,后台CS代码在另外的Books项目中;接着看里面的详细代码,界面层是如何调用后台的Web控制器的;
Book.aspx文件
1 <%@ Page Language="C#" %> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head runat="server"> 4 <title>书籍管理</title> 5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 6 <link rel="stylesheet" type="text/css" href="../../../WebPlugin/jquery-easyui-1.3.4/themes/default/easyui.css"/> 7 <link rel="stylesheet" type="text/css" href="../../../WebPlugin/jquery-easyui-1.3.4/themes/icon.css"/> 8 <script type="text/javascript" src="../../../WebPlugin/jquery-1.8.0.min.js"></script> 9 <script type="text/javascript" src="../../../WebPlugin/jquery-easyui-1.3.4/jquery.easyui.min.js"></script> 10 <script type="text/javascript" src="../../../WebPlugin/jquery-easyui-1.3.4/locale/easyui-lang-zh_CN.js"></script> 11 <script src="../../../WebPlugin/JQueryCommon2.0.js" type="text/javascript"></script> 12 <script src="Book.js" type="text/javascript"></script> 13 </head> 14 <body class="easyui-layout"> 15 <div region="center" style="overflow:hidden;"> 16 <div id="grid-tool"> 17 <table cellpadding="0" cellspacing="0" style="width:100%"> 18 <tr> 19 <td style="padding-left:2px"> 20 <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-add" onclick="btn_add();">新增</a> 21 <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-edit" onclick="btn_alter();">修改</a> 22 </td> 23 <td style="text-align:right;padding-right:2px"> 24 <input class="easyui-searchbox" data-options="prompt:'请输入书籍名称'" style="width:250px"></input> 25 </td> 26 </tr> 27 </table> 28 </div> 29 <table id="bookGird" class="easyui-datagrid" toolbar="#grid-tool" fit="true" border="false" singleSelect="true"> 30 <thead> 31 <tr> 32 <th field="Id" width="100">序号</th> 33 <th field="BookName" width="80">书籍名称</th> 34 <th field="BuyPrice" width="120">购书价格</th> 35 <th field="BuyDate" width="200">购书时间</th> 36 <th field="Flag" width="80">是否丢失</th> 37 </tr> 38 </thead> 39 </table> 40 </div> 41 42 <%--弹出窗界面--%> 43 <div id="dialog-book" title="新增书籍" class="easyui-dialog" icon="icon-save" style="background:#fafafa;padding:10px;width:350px;height:250px;" buttons="#dlg-buttons1" resizable="true" modal="true"> 44 <form id="bookform" method="post"> 45 <table> 46 <tr> 47 <td><label>书籍名称:</label></td> 48 <td><input name="BookName" class="easyui-validatebox" style="width:200px;" type="text" required="true"></input></td> 49 </tr> 50 <tr> 51 <td><label>购书价格:</label></td> 52 <td><input name="BuyPrice" class="easyui-validatebox" style="width:200px;" type="text" required="true"></input></td> 53 </tr> 54 <tr> 55 <td><label>购书日期:</label></td> 56 <td><input name="BuyDate" class="easyui-datebox" style="width:200px;" type="text" required="true"></input></td> 57 </tr> 58 <tr> 59 <td><label>是否丢失:</label></td> 60 <td><input id="_flag" type="checkbox"/></td> 61 </tr> 62 </table> 63 <input id="book_id" type="hidden" name="Id" ></input> 64 <input id="book_flag" type="hidden" name="Flag" ></input> 65 </form> 66 </div> 67 <div id="dlg-buttons1"> 68 <a href="#" class="easyui-linkbutton" onclick="btn_save();">确定</a> 69 <a href="#" class="easyui-linkbutton" onclick="$('#dialog-book').dialog('close');">取消</a> 70 </div> 71 </body> 72 </html>