jquery easyui+ashx+三层框架实现增删改查

     文章结尾有demo的源码

       先说一下背景， 最近在学校做一个比赛作品，是一个电子挂号系统。因为自己没有接触过医院方面的项目，没有到大医院看过病，也没有亲身体验过网上预约挂号系统的流程。现在对需求还是有很多不明白的地方。需要向大侠请教，如果有哪位园友做过类似的系统，还请加我qq1143314007（请备注 博客园 谢谢）和我交流。因为一些业务不是很清楚，所有数据库设计的还没有设计完整。由于时间紧迫，只能先做一些基础数据的更新了。在这个期间我们做了科室管理的增删改查。因为第一次使用jquery easyui也遇到了不少问题。

先看看这个项目的组织结构吧。

相信有些经验的人看到这个组织架构就知道，是一个基本的三层架构，然后在数据库访问层使用了一个抽象工厂模式来调用DAL。简单的介绍一个这个架构。

FrameWork：包括数据库访问接口，数据访问库，公共代码类，数据访问工厂等基础库

Register.Model：实体库
Register.DBUtility：通用数据库操作类
Register.IDAL：数据库增删改查接口
Register.DALFactory：数据库访问程序集访问工厂类
Register.DAL：数据库增删改查相关操作
Register.Command：公共访问类，比如密码加密解密，邮件发送等基础类
Register.BLL：实现相关业务逻辑库。

Reference：包括使用的第三方的库。

Solution Items：关于项目的说明文件，项目分工，项目进度等文档资料的说明

Test：项目单元测试的代码

WebApplication：系统项目及系统服务.

基本的项目结构就介绍这些，本文主要介绍jquery easyui和ashx以及三层架构的一个整合，下面来介绍主要代码（后面我会附上全部代码以及数据库）

ashx文件的代码：

View Code

  1 using System;
  2 using System.Collections.Generic;
  3 using System.Linq;
  4 using System.Web;
  5 using Register.BLL;
  6 using Register.Model;
  7 using System.Web.Script.Serialization;
  8 using RegisterWeb.Manager.SystemUserManager.ashx;
  9 using System.Text;
 10 
 11 namespace RegisterWeb.Manager.HospitalManager.ashx
 12 {
 13     /// <summary>
 14     /// DepartmentsManagerService 的摘要说明
 15     /// </summary>
 16     public class DepartmentsManagerService : IHttpHandler
 17     {
 18 
 19         public void ProcessRequest(HttpContext context)
 20         {
 21             context.Response.ContentType = "text/plain";
 22             //context.Response.Write("Hello World");
 23             String action = context.Request["action"];
 24 
 25             //获取科室的全部列表
 26             if (action.Equals("list"))
 27             {
 28                 DepartmentListJSON departmentListJSON = new DepartmentListJSON();
 29             
 30 
 31                 departmentListJSON.rows = new List<DepartmentJSON>();
 32 
 33                  int row = int.Parse(context.Request["rows"].ToString());  
 34                 int page = int.Parse(context.Request["page"].ToString());
 35 
 36                 List<DepartmentsInfo> list = DepartmentsBLL.GetPagedDepartmentsInfo(row, page, " Departments_State='1' ");
 37                 departmentListJSON.total = DepartmentsBLL.GetDepartmentsCount("  Departments_State='1' ");
 38 
 39                 foreach (DepartmentsInfo de in list)
 40                 {
 41                     string status;
 42                     if (de.Departments_State.ToString().Equals("1"))
 43                     {
 44                         status = "有效";
 45                     }
 46                     else
 47                         status = "无效";
 48                     departmentListJSON.rows.Add(new DepartmentJSON(de.Departments_ID, (HospitalInfoBLL.GetHospitalInfoByID(de.Hospital_ID)).Hospital_Name, de.Departments_Name, de.Departments_Introduce, de.Departments_AddTime.ToString(), de.Departments_Recoder, status,de.Hospital_ID));
 49                 }
 50 
 51                 JavaScriptSerializer jss = new JavaScriptSerializer();
 52                 context.Response.Write(jss.Serialize(departmentListJSON));
 53             }
 54           //添加科室
 55             else if (action.Equals("add"))
 56             {
 57                 String DepartmentName = context.Request["textDepartmentName"];
 58                 String DepartmentDes = context.Request["textDepartmentDes"];
 59                 String selectHosptial = context.Request["selectHosptial"];
 60                 DepartmentsInfo info = new DepartmentsInfo();
 61                 info.Departments_ID = DataIDHelper.GetDataID("Departments_ID");
 62                 info.Departments_Introduce = DepartmentDes;
 63                 info.Departments_Name = DepartmentName;
 64                 info.Departments_LastAmendPerson = "admin";
 65                 info.Departments_Recoder = "admin";
 66                 info.Departments_LastAmendTime = DateTime.Now;
 67                 info.Departments_AddTime = DateTime.Now;
 68                 info.Hospital_ID = selectHosptial;
 69                 info.Departments_State="1";
 70 
 71                 if (DepartmentsBLL.AddDepartments(info))
 72                 {
 73                     message msg = new message(true,"该科室添加成功！");
 74                     JavaScriptSerializer jss = new JavaScriptSerializer();
 75                     context.Response.Write(jss.Serialize(msg));
 76                 }
 77                 else
 78                 {
 79                     message msg = new message(false, "该科室添加失败！");
 80                     JavaScriptSerializer jss = new JavaScriptSerializer();
 81                     context.Response.Write(jss.Serialize(msg));
 82                 }
 83 
 84             }
 85                 //删除科室
 86             else if (action.Equals("delete"))
 87             {
 88                 String id = context.Request["id"];
 89                   DepartmentsInfo info = new DepartmentsInfo();
 90                 info.Departments_ID=id;
 91                 if (DepartmentsBLL.DeleteDepartments(info))
 92                 {
 93                     context.Response.Write("ok");
 94                 }
 95                 else
 96                 {
 97                     context.Response.Write("no");
 98                 }
 99             }
100                 //编辑科室
101             else if (action.Equals("edit"))
102             {
103                 String DepartmentName = context.Request["textDepartmentName"];
104                 String DepartmentDes = context.Request["textDepartmentDes"];
105                 String selectHosptial = context.Request["selectHosptial"];
106                 String id = context.Request["id"];
107                 DepartmentsInfo info = new DepartmentsInfo();
108                 info.Departments_ID = id;
109                 info.Departments_Name = DepartmentName;
110                 info.Departments_Introduce = DepartmentDes;
111                 info.Hospital_ID = selectHosptial;
112                 info.Departments_LastAmendPerson = "admin";
113                 info.Departments_LastAmendTime = DateTime.Now;
114                 if (DepartmentsBLL.UpdateDepartments(info))
115                 {
116                     message msg = new message(true, "该科室更新成功！");
117                     JavaScriptSerializer jss = new JavaScriptSerializer();
118                     context.Response.Write(jss.Serialize(msg));
119                 }
120                 else
121                 {
122                     message msg = new message(false, "该科室更新失败！");
123                     JavaScriptSerializer jss = new JavaScriptSerializer();
124                     context.Response.Write(jss.Serialize(msg));
125                 }
126             }
127                 //查询科室
128             else if (action.Equals("search"))
129             {
130                 string hospName = context.Request["hospName"];
131                 string depName = context.Request["depName"];
132                 DepartmentListJSON departmentListJSON = new DepartmentListJSON();
133                 departmentListJSON.rows = new List<DepartmentJSON>();
134 
135                 int row = int.Parse(context.Request["rows"].ToString());
136                 int page = int.Parse(context.Request["page"].ToString());
137 
138                 StringBuilder strBuilder = new StringBuilder();
139                 strBuilder.Append(" Departments_State='1' ");
140                 if (!String.IsNullOrEmpty(depName))
141                 {
142                     strBuilder.Append(" and Departments_Name=").Append(depName).Append(" ");
143                 }
144                 if (!String.IsNullOrEmpty(hospName))
145                 {
146                     strBuilder.Append(" and Hospital_ID='").Append(hospName).Append("' ");
147                 }
148 
149                 List<DepartmentsInfo> list = DepartmentsBLL.GetPagedDepartmentsInfo(row, page, strBuilder.ToString());
150                 departmentListJSON.total = DepartmentsBLL.GetDepartmentsCount(strBuilder.ToString());
151 
152                 foreach (DepartmentsInfo de in list)
153                 {
154                     string status;
155                     if (de.Departments_State.ToString().Equals("1"))
156                     {
157                         status = "有效";
158                     }
159                     else
160                         status = "无效";
161                     departmentListJSON.rows.Add(new DepartmentJSON(de.Departments_ID, (HospitalInfoBLL.GetHospitalInfoByID(de.Hospital_ID)).Hospital_Name, de.Departments_Name, de.Departments_Introduce, de.Departments_AddTime.ToString(), de.Departments_Recoder, status, de.Hospital_ID));
162                 }
163 
164                 JavaScriptSerializer jss = new JavaScriptSerializer();
165                 context.Response.Write(jss.Serialize(departmentListJSON));
166             }
167 
168 
169         }
170 
171         public bool IsReusable
172         {
173             get
174             {
175                 return false;
176             }
177         }
178     }
179 
180     class DepartmentListJSON
181     {
182         public int total { get; set; }
183         public List<DepartmentJSON> rows { get; set; }
184     }
185 
186     class DepartmentJSON
187     {
188         public string ID { get; set; }
189         public string Hospital { get; set; }
190         public string Name { get; set; }
191         public string Introduce { get; set; }
192         public string AddTime { get; set; }
193         public string Recoder { get; set; }
194         public string State { get; set; }
195         public string HosptialID { get; set; }
196 
197         public DepartmentJSON(string ID, string Hospital, string Name, string Introduce, string AddTime, string Recoder, string State, string HospitalID)
198         {
199             this.ID = ID;
200             this.Hospital = Hospital;
201             this.Name = Name;
202             this.Introduce = Introduce;
203             this.AddTime = AddTime;
204             this.Recoder = Recoder;
205             this.State = State;
206             this.HosptialID = HospitalID;
207         }
208 
209     }
210 
211 }

在ashx文件中，不同的action对应一个前台的增删改查操作。然后执行相应的方法返回json串或者文本信息。

在看一下前台页面的核心jquery ui代码

View Code

  1 <script type="text/javascript">
  2 
  3         var url; //提交数据的路径
  4         var formId; //当天要提交的Form的编号
  5         var dialogId; //对话框的编号
  6 
  7         var successCallback = function (result) {
  8             //result为请求处理后的返回值
  9             var result = eval('(' + result + ')');
 10             if (result.success) {
 11                 $.messager.show({
 12                     title: 'Success',
 13                     msg: result.msg
 14                 });
 15                 $(dialogId).dialog('close');
 16                 $('#dg').datagrid('reload');
 17             } else {
 18                 $.messager.show({
 19                     title: 'Error',
 20                     msg: result.msg
 21                 });
 22             }
 23         }
 24 
 25         $(function () {
 26             //预加载编辑框
 27             $("#editDepartmentInfo").dialog({
 28                 "title": "编辑科室信息",
 29                 width: 500,
 30                 height: 450,
 31                 href: 'EditDepartment.aspx'
 32             });
 33             $("#editDepartmentInfo").dialog('open').dialog('close');
 34 
 35             $('#dg').datagrid({
 36 
 37                 onDblClickRow: function (rowIndex, rowData) {
 38                     $('#editDepartmentInfo').dialog('open');
 39                     $("#textDepartmentName").val(rowData.Name);
 40                     $("#textDepartmentDes").val(rowData.Introduce);
 41                     $("#hoistal").combobox('setValue', rowData.HosptialID);
 42 
 43                     //      $('#edit').form('clear');
 44                     url = 'ashx/DepartmentsManagerService.ashx?action=edit&id=' + rowData.ID;
 45                     formId = "#edit";
 46                     dialogId = "#editDepartmentInfo";
 47                 }
 48             });
 49 
 50         });
 51         //编辑科室部分
 52         function editDepartmentInfo() {
 53             var row = $('#dg').datagrid('getSelected');
 54             if (row) {
 55                 $('#editDepartmentInfo').dialog('open');
 56                 $("#textDepartmentName").val(row.Name);
 57                 $("#textDepartmentDes").val(row.Introduce);
 58                 $("#hoistal").combobox('setValue', row.HosptialID);
 59                 //   $('#edit').form('clear');
 60 
 61                 url = 'ashx/DepartmentsManagerService.ashx?action=edit&id=' + row.ID;
 62                 formId = "#edit";
 63                 dialogId = "#editDepartmentInfo";
 64 
 65             }
 66             else {
 67                 $.messager.alert("提示", "您没有选中任何行！");
 68             }
 69         }
 70 
 71         //添加科室部分
 72         function addDepartmentInfo() {
 73             $("#addDepartmentInfo").dialog({
 74                 "title": "新建科室信息",
 75                 width: 500,
 76                 height: 450,
 77                 href: 'AddDepartment.aspx'
 78             });
 79             $('#addDepartmentInfo').dialog('open');
 80             $('#add').form('clear');
 81 
 82             url = 'ashx/DepartmentsManagerService.ashx?action=add';
 83             formId = "#add";
 84             dialogId = "#addDepartmentInfo";
 85         }
 86         function saveInfo() {
 87 
 88             $(formId).form('submit', {
 89                 url: url,
 90                 onSubmit: function () {
 91                     alert(formId);
 92                     return $(this).form('validate');
 93                 },
 94                 success: successCallback
 95             });
 96         }
 97 
 98         //  删除代码部分
 99         function deleteAdminUser() {
100             var row = $('#dg').datagrid('getSelected');
101             if (row) {
102                 $.messager.confirm('删除提示', '确定要删除' + row.Name + '吗', function (r) {
103                     if (r) {
104                         $.post('ashx/DepartmentsManagerService.ashx', { id: row.ID, action: 'delete' }, function (data, status) {
105                         
106                             if (data == "ok") {
107                                 $('#dg').datagrid('reload');
108                             } else {
109                                 $.messager.show({
110                                     title: 'Error',
111                                     msg: '删除该科室失败!'
112                                 });
113                             }
114                         });
115                     }
116                 });
117             }
118         }
119 
120         //多条件查询方法
121         function tsearch() {
122             var hoistalName = $("#hoistalName").combobox("getValue");
123             var depName = $("#depName").val();
124             alert(depName);
125                 $('#dg').datagrid('options').pageNumber = 1;  
126                 $('#dg').datagrid('getPager').pagination({pageNumber: 1});
127               $('#dg').datagrid('options').url = 'ashx/DepartmentsManagerService.ashx?action=search&hospName='+hoistalName+'&depName='+depName;
128               $('#dg').datagrid("reload");
129         }
130         
131     </script>
132 
133 <div region="center" title="科室信息管理" >
134 
135     <div  class="easyui-panel" title="查询条件" style="width:850px;height:80px" collapsible="true"
136     >
137 
138     <div class="searchitem">
139     <label>医院名：</label>
140      <select id="hoistalName" name="selectHosptial">
141      </select>
142        <script type="text/javascript">
143 
144            $("#hoistalName").combobox({
145                url: "ashx/HospitalInfoService.ashx?action=search",
146                valueField: "HosptialItemID",
147                textField: "HosptialItemName",
148                panelHeight: "auto"
149            });
150 
151      </script>
152     </div>
153     <div class="searchitem">
154     <label>科室名：</label>
155     <input type="text" id="depName" class="easyui-validatebox" />
156     </div>
157     
158 <div class="searchitem">
159 <a href="#" class="easyui-linkbutton" onclick="tsearch()" >查询</a>
160 </div>
161 
162     </div>
163 
164 <table id="dg" title="科室信息管理" class="easyui-datagrid" style="width:850px;height:550px"
165             url="ashx/DepartmentsManagerService.ashx?action=list"
166             toolbar="#toolbar" pagination="true"
167             rownumbers="true" fitColumns="true" singleSelect="true"   idField='ID'
168             pageSize="20"
169             >
170         <thead>
171             <tr>
172                 <th field="Name" width="50">科室名</th>
173                 <th field="Hospital" width="50">所属单位</th>
174                 <th field="Introduce" width="50">科室介绍</th>
175                 <th field="AddTime" width="50">添加时间</th>
176                 <th field="Recoder" width="50">记录人</th>
177                 <th field="State" width="50">状态</th>
178             </tr>
179         </thead>
180     </table>
181 
182     <div id="toolbar" style="padding:5px;height:auto">
183                     <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="addDepartmentInfo()">添加科室</a>
184                     <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editDepartmentInfo()">编辑科室</a>
185                     <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="deleteAdminUser()">删除科室</a>
186     </div>
187 
188 
189             <div id="addDepartmentInfo" class="easyui-dialog" closed="true" buttons="#addDepartmentInfo-buttons" style="padding:10px 20px">
190             </div>
191             <div id="addDepartmentInfo-buttons">
192                 <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveInfo()">保存</a>
193                 <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#addDepartmentInfo').dialog('close')">关闭</a>
194             </div>
195 
196             <div id="editDepartmentInfo" class="easyui-dialog" closed="true" buttons="#editDepartmentInfo-buttons" style="padding:10px 20px">
197             </div>
198             <div id="editDepartmentInfo-buttons">
199                 <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveInfo()">保存</a>
200                 <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#editDepartmentInfo').dialog('close')">关闭</a>
201             </div>
202 
203     </div>

jquery easyui 的具体函数使用方法参考jquery easyui中文api 

下面看一下最后的效果：

源代码下载  这是源码

关于源代码ashx中出现较多的if else的问题，可以参考http://www.cnblogs.com/wzcheng/archive/2010/05/20/1739810.html 解决