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文件的代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Register.BLL;
using Register.Model;
using System.Web.Script.Serialization;
using RegisterWeb.Manager.SystemUserManager.ashx;
using System.Text;

namespace RegisterWeb.Manager.HospitalManager.ashx
{
    /// <summary>
    /// DepartmentsManagerService 的摘要说明
    /// </summary>
    public class DepartmentsManagerService : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            //context.Response.Write("Hello World");
            String action = context.Request["action"];

            //获取科室的全部列表
            if (action.Equals("list"))
            {
                DepartmentListJSON departmentListJSON = new DepartmentListJSON();
            

                departmentListJSON.rows = new List<DepartmentJSON>();

                 int row = int.Parse(context.Request["rows"].ToString());  
                int page = int.Parse(context.Request["page"].ToString());

                List<DepartmentsInfo> list = DepartmentsBLL.GetPagedDepartmentsInfo(row, page, " Departments_State='1' ");
                departmentListJSON.total = DepartmentsBLL.GetDepartmentsCount("  Departments_State='1' ");

                foreach (DepartmentsInfo de in list)
                {
                    string status;
                    if (de.Departments_State.ToString().Equals("1"))
                    {
                        status = "有效";
                    }
                    else
                        status = "无效";
                    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));
                }

                JavaScriptSerializer jss = new JavaScriptSerializer();
                context.Response.Write(jss.Serialize(departmentListJSON));
            }
          //添加科室
            else if (action.Equals("add"))
            {
                String DepartmentName = context.Request["textDepartmentName"];
                String DepartmentDes = context.Request["textDepartmentDes"];
                String selectHosptial = context.Request["selectHosptial"];
                DepartmentsInfo info = new DepartmentsInfo();
                info.Departments_ID = DataIDHelper.GetDataID("Departments_ID");
                info.Departments_Introduce = DepartmentDes;
                info.Departments_Name = DepartmentName;
                info.Departments_LastAmendPerson = "admin";
                info.Departments_Recoder = "admin";
                info.Departments_LastAmendTime = DateTime.Now;
                info.Departments_AddTime = DateTime.Now;
                info.Hospital_ID = selectHosptial;
                info.Departments_State="1";

                if (DepartmentsBLL.AddDepartments(info))
                {
                    message msg = new message(true,"该科室添加成功！");
                    JavaScriptSerializer jss = new JavaScriptSerializer();
                    context.Response.Write(jss.Serialize(msg));
                }
                else
                {
                    message msg = new message(false, "该科室添加失败！");
                    JavaScriptSerializer jss = new JavaScriptSerializer();
                    context.Response.Write(jss.Serialize(msg));
                }

            }
                //删除科室
            else if (action.Equals("delete"))
            {
                String id = context.Request["id"];
                  DepartmentsInfo info = new DepartmentsInfo();
                info.Departments_ID=id;
                if (DepartmentsBLL.DeleteDepartments(info))
                {
                    context.Response.Write("ok");
                }
                else
                {
                    context.Response.Write("no");
                }
            }
                //编辑科室
            else if (action.Equals("edit"))
            {
                String DepartmentName = context.Request["textDepartmentName"];
                String DepartmentDes = context.Request["textDepartmentDes"];
                String selectHosptial = context.Request["selectHosptial"];
                String id = context.Request["id"];
                DepartmentsInfo info = new DepartmentsInfo();
                info.Departments_ID = id;
                info.Departments_Name = DepartmentName;
                info.Departments_Introduce = DepartmentDes;
                info.Hospital_ID = selectHosptial;
                info.Departments_LastAmendPerson = "admin";
                info.Departments_LastAmendTime = DateTime.Now;
                if (DepartmentsBLL.UpdateDepartments(info))
                {
                    message msg = new message(true, "该科室更新成功！");
                    JavaScriptSerializer jss = new JavaScriptSerializer();
                    context.Response.Write(jss.Serialize(msg));
                }
                else
                {
                    message msg = new message(false, "该科室更新失败！");
                    JavaScriptSerializer jss = new JavaScriptSerializer();
                    context.Response.Write(jss.Serialize(msg));
                }
            }
                //查询科室
            else if (action.Equals("search"))
            {
                string hospName = context.Request["hospName"];
                string depName = context.Request["depName"];
                DepartmentListJSON departmentListJSON = new DepartmentListJSON();
                departmentListJSON.rows = new List<DepartmentJSON>();

                int row = int.Parse(context.Request["rows"].ToString());
                int page = int.Parse(context.Request["page"].ToString());

                StringBuilder strBuilder = new StringBuilder();
                strBuilder.Append(" Departments_State='1' ");
                if (!String.IsNullOrEmpty(depName))
                {
                    strBuilder.Append(" and Departments_Name=").Append(depName).Append(" ");
                }
                if (!String.IsNullOrEmpty(hospName))
                {
                    strBuilder.Append(" and Hospital_ID='").Append(hospName).Append("' ");
                }

                List<DepartmentsInfo> list = DepartmentsBLL.GetPagedDepartmentsInfo(row, page, strBuilder.ToString());
                departmentListJSON.total = DepartmentsBLL.GetDepartmentsCount(strBuilder.ToString());

                foreach (DepartmentsInfo de in list)
                {
                    string status;
                    if (de.Departments_State.ToString().Equals("1"))
                    {
                        status = "有效";
                    }
                    else
                        status = "无效";
                    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));
                }

                JavaScriptSerializer jss = new JavaScriptSerializer();
                context.Response.Write(jss.Serialize(departmentListJSON));
            }


        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }

    class DepartmentListJSON
    {
        public int total { get; set; }
        public List<DepartmentJSON> rows { get; set; }
    }

    class DepartmentJSON
    {
        public string ID { get; set; }
        public string Hospital { get; set; }
        public string Name { get; set; }
        public string Introduce { get; set; }
        public string AddTime { get; set; }
        public string Recoder { get; set; }
        public string State { get; set; }
        public string HosptialID { get; set; }

        public DepartmentJSON(string ID, string Hospital, string Name, string Introduce, string AddTime, string Recoder, string State, string HospitalID)
        {
            this.ID = ID;
            this.Hospital = Hospital;
            this.Name = Name;
            this.Introduce = Introduce;
            this.AddTime = AddTime;
            this.Recoder = Recoder;
            this.State = State;
            this.HosptialID = HospitalID;
        }

    }

}

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

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

<script type="text/javascript">

        var url; //提交数据的路径
        var formId; //当天要提交的Form的编号
        var dialogId; //对话框的编号

        var successCallback = function (result) {
            //result为请求处理后的返回值
            var result = eval('(' + result + ')');
            if (result.success) {
                $.messager.show({
                    title: 'Success',
                    msg: result.msg
                });
                $(dialogId).dialog('close');
                $('#dg').datagrid('reload');
            } else {
                $.messager.show({
                    title: 'Error',
                    msg: result.msg
                });
            }
        }

        $(function () {
            //预加载编辑框
            $("#editDepartmentInfo").dialog({
                "title": "编辑科室信息",
                width: 500,
                height: 450,
                href: 'EditDepartment.aspx'
            });
            $("#editDepartmentInfo").dialog('open').dialog('close');

            $('#dg').datagrid({

                onDblClickRow: function (rowIndex, rowData) {
                    $('#editDepartmentInfo').dialog('open');
                    $("#textDepartmentName").val(rowData.Name);
                    $("#textDepartmentDes").val(rowData.Introduce);
                    $("#hoistal").combobox('setValue', rowData.HosptialID);

                    //      $('#edit').form('clear');
                    url = 'ashx/DepartmentsManagerService.ashx?action=edit&id=' + rowData.ID;
                    formId = "#edit";
                    dialogId = "#editDepartmentInfo";
                }
            });

        });
        //编辑科室部分
        function editDepartmentInfo() {
            var row = $('#dg').datagrid('getSelected');
            if (row) {
                $('#editDepartmentInfo').dialog('open');
                $("#textDepartmentName").val(row.Name);
                $("#textDepartmentDes").val(row.Introduce);
                $("#hoistal").combobox('setValue', row.HosptialID);
                //   $('#edit').form('clear');

                url = 'ashx/DepartmentsManagerService.ashx?action=edit&id=' + row.ID;
                formId = "#edit";
                dialogId = "#editDepartmentInfo";

            }
            else {
                $.messager.alert("提示", "您没有选中任何行！");
            }
        }

        //添加科室部分
        function addDepartmentInfo() {
            $("#addDepartmentInfo").dialog({
                "title": "新建科室信息",
                width: 500,
                height: 450,
                href: 'AddDepartment.aspx'
            });
            $('#addDepartmentInfo').dialog('open');
            $('#add').form('clear');

            url = 'ashx/DepartmentsManagerService.ashx?action=add';
            formId = "#add";
            dialogId = "#addDepartmentInfo";
        }
        function saveInfo() {

            $(formId).form('submit', {
                url: url,
                onSubmit: function () {
                    alert(formId);
                    return $(this).form('validate');
                },
                success: successCallback
            });
        }

        //  删除代码部分
        function deleteAdminUser() {
            var row = $('#dg').datagrid('getSelected');
            if (row) {
                $.messager.confirm('删除提示', '确定要删除' + row.Name + '吗', function (r) {
                    if (r) {
                        $.post('ashx/DepartmentsManagerService.ashx', { id: row.ID, action: 'delete' }, function (data, status) {
                        
                            if (data == "ok") {
                                $('#dg').datagrid('reload');
                            } else {
                                $.messager.show({
                                    title: 'Error',
                                    msg: '删除该科室失败!'
                                });
                            }
                        });
                    }
                });
            }
        }

        //多条件查询方法
        function tsearch() {
            var hoistalName = $("#hoistalName").combobox("getValue");
            var depName = $("#depName").val();
            alert(depName);
                $('#dg').datagrid('options').pageNumber = 1;  
                $('#dg').datagrid('getPager').pagination({pageNumber: 1});
              $('#dg').datagrid('options').url = 'ashx/DepartmentsManagerService.ashx?action=search&hospName='+hoistalName+'&depName='+depName;
              $('#dg').datagrid("reload");
        }
        
    </script>

<div region="center" title="科室信息管理" >

    <div  class="easyui-panel" title="查询条件" style="width:850px;height:80px" collapsible="true"
    >

    <div class="searchitem">
    <label>医院名：</label>
     <select id="hoistalName" name="selectHosptial">
     </select>
       <script type="text/javascript">

           $("#hoistalName").combobox({
               url: "ashx/HospitalInfoService.ashx?action=search",
               valueField: "HosptialItemID",
               textField: "HosptialItemName",
               panelHeight: "auto"
           });

     </script>
    </div>
    <div class="searchitem">
    <label>科室名：</label>
    <input type="text" id="depName" class="easyui-validatebox" />
    </div>
    
<div class="searchitem">
<a href="#" class="easyui-linkbutton" onclick="tsearch()" >查询</a>
</div>

    </div>

<table id="dg" title="科室信息管理" class="easyui-datagrid" style="width:850px;height:550px"
            url="ashx/DepartmentsManagerService.ashx?action=list"
            toolbar="#toolbar" pagination="true"
            rownumbers="true" fitColumns="true" singleSelect="true"   idField='ID'
            pageSize="20"
            >
        <thead>
            <tr>
                <th field="Name" width="50">科室名</th>
                <th field="Hospital" width="50">所属单位</th>
                <th field="Introduce" width="50">科室介绍</th>
                <th field="AddTime" width="50">添加时间</th>
                <th field="Recoder" width="50">记录人</th>
                <th field="State" width="50">状态</th>
            </tr>
        </thead>
    </table>

    <div id="toolbar" style="padding:5px;height:auto">
                    <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="addDepartmentInfo()">添加科室</a>
                    <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editDepartmentInfo()">编辑科室</a>
                    <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="deleteAdminUser()">删除科室</a>
    </div>


            <div id="addDepartmentInfo" class="easyui-dialog" closed="true" buttons="#addDepartmentInfo-buttons" style="padding:10px 20px">
            </div>
            <div id="addDepartmentInfo-buttons">
                <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveInfo()">保存</a>
                <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#addDepartmentInfo').dialog('close')">关闭</a>
            </div>

            <div id="editDepartmentInfo" class="easyui-dialog" closed="true" buttons="#editDepartmentInfo-buttons" style="padding:10px 20px">
            </div>
            <div id="editDepartmentInfo-buttons">
                <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveInfo()">保存</a>
                <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#editDepartmentInfo').dialog('close')">关闭</a>
            </div>

    </div>

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

下面看一下最后的效果：

源代码下载  这是源码

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