Easy UI中的展示用户数据，后端返回JSON，批量删除数据，添加用户数据(validate表单验证 )，修改用户数据，

spring.net简单介绍

OA项目第二天

Asp.Net MVC请求处理原理

Asp.Net mvc 是怎样进入请求管道的：

请求–>IIS—>ISAPIRuntime–>HttpWorkRequest–>HttpRuntime–>HttpContext–>找到Global文件，并且编译该文件–>确保Global文件中Application_Start被调用–>创建HttpApplication(池 栈)如果池中没有根据Global文件编译的类型通过反射的形式创建出HttpApplication–>获取所有的在配置文件中的HttpModues,这时System.Web.Routing下的UrlRoutingModule也获取了，执行每个Modules下的Init方法，那么UrlRoutingModule中的Init方法完成了请求管道第7个事件的注册。—>进入管道–>第7个事件触发了，执行相应的方法.—>完成了MVCHanlder的创建。—》请求管道的11与12事件之间执行MvcHandler中的ProcessRequest方法。那么该方法中去找控制器，找方法，执行方法中的代码，然后找视图最后渲染视图。

展示用户数据

这里我们用jquery.easyui插件来进行展示,首先我们先添加一个UserInfoController，然后添加对应的视图，在视图界面引入相关script

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/jquery.easyui.min.js"></script>
    <script src="~/Scripts/easyui-lang-zh_CN.js"></script>
    <link href="~/Content/themes/icon.css" rel="stylesheet" />
    <link href="~/Content/themes/default/easyui.css" rel="stylesheet" />
    <script src="~/Scripts/datapattern.js"></script>//这个用作json的日期转换

然后是相关的表格（具体的增删改查方法待会在实现，现在主要是查询分页）

 <script type="text/javascript">
        $(function () {
            loadData();
        });
        function loadData(pars) {
            $('#tt').datagrid({
                url: '/UserInfo/GetUserInfoList',
                title: '用户数据表格',
                width: 700,
                height: 400,
                fitColumns: true, //列自适应
                nowrap: false,
                idField: 'ID',//主键列的列明
                loadMsg: '正在加载用户的信息...',
                pagination: true,//是否有分页
                singleSelect: false,//是否单行选择
                pageSize: 5,//页大小，一页多少条数据
                pageNumber: 1,//当前页，默认的
                pageList: [5, 10, 15],//可以让你选择煤业显示多少？
                queryParams: {},//往后台传递参数
                columns: [[//c.UserName, c.UserPass, c.Email, c.RegTime
                    { field: 'ck', checkbox: true, align: 'left', width: 50 },//checkbox: true可选复选框
                    { field: 'ID', title: '编号', width: 80 },// ID返回JSon数据ID属性，这个不能随便改，包括下面
                    { field: 'UName', title: '姓名', width: 120 },
                    { field: 'UPwd', title: '密码', width: 120 },
                    { field: 'Remark', title: '备注', width: 120 },
                    {
                        field: 'SubTime', title: '时间', width: 80, align: 'right',
                        formatter: function (value, row, index) {
                            return (eval(value.replace(/\/Date\((\d+)\)\//gi, "new Date($1)"))).pattern("yyyy-M-d");
                        }
                    }
                ]],
                toolbar: [{
                    id: 'btnDelete',
                    text: '删除',
                    iconCls: 'icon-remove',
                    handler: function () {
						//删除方法，见下文
                        deleteInfo();
                    }
                }, {
                    id: 'btnAdd',
                    text: '添加',
                    iconCls: 'icon-add',
                    handler: function () {
						//添加方法，见下文
                        addInfo();
                    }
                }, {
                    id: 'btnEidt',
                    text: '编辑',
                    iconCls: 'icon-edit',
                    handler: function () {
						//跟新方法，见下文
                        showEditInfo();
                    }
                }],
            });
        }
    </script>
</head>
<body>
    <div>
        <table id="tt" style="width: 700px;" title="标题，可以使用代码进行初始化，也可以使用这种属性的方式" iconcls="icon-edit"></table>
    </div>

请求的控制器方法

public ActionResult GetUserInfoList()
     {
         //page rows
         int pageIndex = Request["page"] != null ? int.Parse(Request["page"]) : 1;
         int pageSize = Request["rows"] != null ? int.Parse(Request["rows"]) : 5;
         int totalCount;
          var userinfoList=bll.LoadPageEntities(pageIndex, pageSize, out totalCount, u => u.DelFlag == true, u => u.ID, true);
         var temp = from u in userinfoList
             select new
             {
                 ID=u.ID,
                 UName = u.UName,
                 UPwd = u.UPwd,
                 Remark = u.Remark,
                 SubTime = u.SubTime
             };
         return Json(new {rows = temp, total = totalCount});

     }

注意如果这时候发生错误，无法加载制定的元数据资源。请看http://blog.csdn.net/aojiancc2/article/details/56481653

批量删除数据

补全上面的删除方法，对应上面loadData方法中的deleteInfo

function deleteInfo() {
            var rows = $('#tt').datagrid('getSelections');//拿到所有选择的数据
            if (!rows||rows.length==0) {
                $.messager.alert("提示", "请选择要删除的记录", "error");
                return;
            }
            $.messager.confirm("提示",
                "确定要删除数据吗",
                function(r) {
                    if (r) {
                        //把数据发送到服务器
                        var strID = "";
                        var rowsLength = rows.length;
                        for (var i = 0; i < rowsLength; i++) {
                            strID = strID + rows[i].ID + ","; //1,2,3,
                        }
                        //去掉最后的，
                        strID = strID.substr(0, strID.length - 1);
                        //发送给服务端
                        $.post("/UserInfo/DeleteUserInfo",
                            { "strID": strID },
                            function(data) {
                                if (data == "OK") {
                                    //重新加载当前页面
                                    $('#tt').datagrid('reload');
                                    //不要记录上次发送的数据(清楚所有行)
                                    $('#tt').datagrid('clearSelections');
                                } else {
                                    $.messager.alert("提示", "删除失败", "error");
                                }
                            });
                    }
                });
        }

控制器

//批量删除用户
    public ActionResult DeleteUserInfo()
    {
        string[] temps = Request["strID"].Split(new[] {','});
        List<int> list = new List<int>();
        foreach (string s in temps)
        {
            list.Add(Convert.ToInt32(s));
        }

        if (bll.DeleteEntities(list))
        {
            return Content("OK");
        }
        else
        {
            return Content("NO");
        }
    }

注意，我们这里是批量删除，要在业务层新建一个业务，因为这里是UserinfoServer，不属于公共业务(如果做到后面确实需要公共再修改)，所以在相关接口和方法里添加,下面是接口和方法

public interface IUserinfoServerice: IBaseService<UserInfo>
    {
        bool DeleteEntities(List<int> list);
    }

  public class UserInfoService : BaseService<UserInfo>, IUserinfoServerice
    {
    	//删除业务
        public bool DeleteEntities(List<int> list)
        {
             var tempList=CurrentDal.LoadEntities(u => list.Contains(u.ID));
            foreach (UserInfo userInfo in tempList)
            {
                CurrentDal.DeleteEntity(userInfo);
            }

            return CurrentDBSession.SaveValueChange();
        }
        .......
}

添加用户数据

Easy UI有html写法和js写法，html的属性写法是比较新的写法，传统是用的js，但是我们现在还是用js继续写。

首先我们在前端添加一个展示的界面

<!---------添加--------->>
   <div id="addDiv">
       @using (Ajax.BeginForm("AddUserInfo", "UserInfo", new { }/*这个是要传递的数据*/, new AjaxOptions() { HttpMethod = "post", OnSuccess = "afterAdd" }, new { id = "addForm" }))
       {

           <table>
               <tr><td>用户名</td> <td><input type="text" name="UName" /></td></tr>
               <tr><td>密码</td><td><input type="text" name="UPwd" /></td> </tr>
               <tr><td>标记</td><td><input type="text" name="Remark" /></td> </tr>
               <tr><td>排序</td><td><input type="text" name="Soet" /></td> </tr>
           </table>
       }
   </div>

Js部分,在加载界面完成后，

$("#addDiv").css("display", "none");

对应上面loadData方法中的添加方法

function addInfo() {
           $("#addDiv").css("display", "block");
           $("#addDiv").dialog({
               title: '添加用户数据',
               width: 300,
               height: 200,
               collapsible: true,
               maximizable: true,
               resizable: true,
               modal: true,
               buttons: [{
                   text: 'Ok',
                   iconCls: 'icon-ok',
                   handler: function () {
                       //表单校验
                       validateInfo($("#addForm"));
                       $("#addForm").submit();//提交表单

                   }
               }, {
                   text: 'Cancel',
                   handler: function () {
                       $("#addForm input").val("");
                       $('#addDiv').dialog('close');
				  $('#tt').datagrid('reload');//从新加载当前页面
                   }
               }]
           });
       }

表单校验以及ajax回掉函数(表单验证需要我们使用jquery.validate.min.js，这里我们不用MVC的验证方式)

@在样式里面添加这个可以改变提示的字体样式
 <style>

        .error{

            color:red;

        }

    </style>
@

//添加用户的Ajax回调
        function afterAdd() {
            $("#addForm input").val("");
            $('#addDiv').dialog('close');
        }
        //表单验证
        function validateInfo(control) {
            control.validate({
                rules: {//表示验证规则
                    UName: "required",//表示对哪个表单元素进行校验，要写具体的表单元素的name属性的值
                    Remark: {
                        required: true
                    },
                    UPwd: {
                        required: true,
                        minlength: 5
                    },
                    Soet: {
                        required: true
                    }
                },
                messages: {
                    UName: "请输入用户名",
                    Remark: {
                        required: "请输入备注"
                    },
                    UPwd: {
                        required: "请输入密码",
                        minlength: jQuery.format("密码不能小于{0}个字 符")
                    },
                    Soet: {
                        required: "请输入排序"
                    }
                }
            });
        }

至于后端很简单

public ActionResult AddUserInfo(UserInfo userInfo)
       {
           userInfo.DelFlag = true;
           userInfo.ModifiedOn = DateTime.Now;
           userInfo.SubTime = DateTime.Now;
           bll.AddEntity(userInfo);
           return Content("Ok");
       }

展示更新数据

记住添加表单和修改表单两个千万不能公用Div,更新数据跟添加数据差不多的做法

<!---------修改面板--------->
   <div id="editDiv">
       @using (Ajax.BeginForm("EditUserInfo", "UserInfo", new { }, new AjaxOptions() { HttpMethod = "post", OnSuccess = "afterEdit" }, new { id = "editForm" }))
       {
           <input type="hidden" name="ID" id="editID"/>
           <input type="hidden" name="SubTime" id="editSubTime"/>
           <input type="hidden" name="DelFlag" id="editDelFlag"/>
           <table>
               <tr><td>用户名</td> <td><input type="text" name="UName" id="editUName"/></td></tr>
               <tr><td>密码</td><td><input type="text" name="UPwd" id="editUPwd"/></td> </tr>
               <tr><td>标记</td><td><input type="text" name="Remark" id="editRemark"/></td> </tr>
               <tr><td>排序</td><td><input type="text" name="Soet" id="editSoet"/></td> </tr>
           </table>
       }
   </div>

从上面我们可以看到。我们这里要注意，我们拿到的ID，SubTime,DelFlag等属性是放在隐藏域里面的，并且SubTime要转换成标准的时间格式

//点击修改数据
       function showEditInfo() {
           var rows = $('#tt').datagrid('getSelections');//拿到所有选择的数据
           if (rows.length != 1) {
               $.messager.alert("提示", "请选择相应数据", "error");
           } else {
               $.post("/UserInfo/ShowUserInfo", { "id": rows[0].ID }, function(data) {
                   $("#editID").val(data.ID);
                   $("#editDelFlag").val(data.DelFlag);
                   $("#editRemark").val(data.Remark);
                   $("#editSoet").val(data.Soet);
                   $("#editSubTime").val(ChangeDateFormat(data.SubTime));//转换成标准时间格式
                   $("#editUName").val(data.UName);
                   $("#editUPwd").val(data.UPwd);
                   //展示要修改的数据
                   showUserinfo();
               });
           }
       }
       //展示要修改的用户信息
       function showUserinfo() {
           $("#editDiv").css("display", "block");
           $("#editDiv").dialog({
               title: "修改用户信息",
               width: 300,
               height: 200,
               collapsible: true,
               maximizable: true,
               resizable: true,
               modal: true,
               buttons: [
                   {
                       text: 'Ok',
                       iconCls: 'icon-ok',
                       handler: function () {
                           //表单校验
                           validateInfo($("#editForm"));
                           $("#editForm").submit();//提交表单

                       }
                   }, {
                       text: 'Cancel',
                       handler: function () {
                           $("#editForm input").val("");
                           $('#editDiv').dialog('close');
                       }
                   }]
           });
       }
       //修改用户信息后的Ajax回调
       function afterEdit() {
           $("#editDiv").dialog("close");
           $('#tt').datagrid('reload');//从新加载当前页面
       }
       //将序列化成json格式后日期(毫秒数)转成日期格式
       function ChangeDateFormat(cellval) {
           var date = new Date(parseInt(cellval.replace("/Date(", "").replace(")/", ""), 10));
           var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
           var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
           return date.getFullYear() + "-" + month + "-" + currentDate;
       }

Spring.Net介绍

要是一个工程过于庞大，企业一般的做法是会在表现层和业务层之间再添加一个服务层。来进行两者的解耦。前面我们对业务层和数据层的解耦是通过数据会话层，也就是抽象工厂，通过反射创建类的实例。但是现在我们使用Srping.Net进行业务层和表现层的解耦。特点概述：

• IOC：控制反转，就是创建对象的权力由开发人员自己控制new，转到了由容器控制。
• DI：依赖注入，就是通过容器创建对象的时候，在对象的初始化是可以给一些属性，构造方法的参数等注入默认值(可以是复杂的类型)

微软自己也推出了一个框架，Unity(不是unity3d..)，用起来基本差不多。