博客园_雪雁

JQuery EasyUi之界面设计——母版页以及Ajax的通用处理（三）

2012-04-09T15:32:00Z

前面介绍过JS了，就这样个人认为还不够用。

因为JS文件是死的，无法使用服务器代码，自然不够灵活。那么通过母版页就完善了这一点。那么下面举一个例子——控件赋值。

控件赋值

前面说过easyui的form自带验证、提交、重置与赋值，那么如何利用这个赋值呢？千篇一律的写赋值代码总是那么的令人厌烦，尤其是元素比较多的时候，用反射嘛又怕别人诟病，那么就用JS来负责这一切吧.

那么如何做到通用呢？那母版页就是不错的选择。

下面贴出母版页完整代码：

   1: <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Form.master.cs" Inherits="Singer.Form" %>   2:     3: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   4: <html xmlns="http://www.w3.org/1999/xhtml">   5: <head runat="server">   6:     <title></title>   7:     <link href="/Scripts/jquery-easyui-1.2.5/themes/default/easyui.css" rel="stylesheet"   8:         type="text/css" />   9:     <link href="/Styles/form.css" rel="stylesheet" type="text/css" />  10:     <link href="/Scripts/jquery-easyui-1.2.5/themes/icon.css" rel="stylesheet" type="text/css" />  11:     <script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>  12:     <script src="/Scripts/jquery-easyui-1.2.5/jquery.easyui.min.js" type="text/javascript"></script>  13:     <script src="/Scripts/jquery-easyui-1.2.5/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>  14:     <script src="/Scripts/common.js" type="text/javascript"></script>  15:     <asp:ContentPlaceHolder ID="head" runat="server">  16:     </asp:ContentPlaceHolder>  17: </head>  18: <body>  19:     <script type="text/javascript">  20:         var ajaxUrl = '/Ajax/Common.ashx';  21:         //表单ID  22:         var id = '<%=Request.QueryString["ID"] %>';  23:         //是否自动加载表单，编辑用  24:         var autoLoad = '<%=Request.QueryString["autoLoad"] %>';  25:         //Ajax类型【页面名】  26:         var typeCode = "<%=System.IO.Path.GetFileName(HttpContext.Current.Request.Path) %>";  27:         $(function () {  28:             if ($.isFunction(window.setAjaxUrl)) {  29:                 setAjaxUrl.call();  30:             }  31:             //加载数据  32:             if (autoLoad == 1 && id !== undefined && id != '') {  33:                 $('#ff').form('load', ajaxUrl + '?autoLoad=1&Type=' + typeCode + '&id=' + id + "&_" + Math.floor(Math.random() * (1000 + 1)));  34:    35:             }  36:         });  37:     </script>  38:     <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">  39:     </asp:ContentPlaceHolder>  40: </body>  41: </html>

从代码中可以看出:

页面上定义了3个全局JS变量，有注释，我就不赘述了。
setAjaxUrl函数在表单赋值加载前执行，可以实现用于更改上面的3个变量的值，或者作其他作用，建议命名为beforeFormLoad。
typeCode的值为页面名，比如“index.aspx”，提交给处理程序用于判断是哪个页面，以便返回对应的JSON数据。

后台处理逻辑

那么处理程序如何返回对应的JSON数据呢？先看看大体结构：

   1: case "ADMINUSER_ADD.ASPX":   2:     #region 用户添加   3:     {   4:         if (context.Request["autoLoad"] == "1")   5:             context.Response.Write(db.TB_Admin.FirstOrDefault(p => p.ID == Convert.ToInt32(context.Request["id"])).ToJson());   6:         else   7:         {   8:             if (context.Request["id"].IsEmpty())   9:             {  10:                 if (context.Request["AdminPassword"].Trim() == string.Empty)  11:                 {  12:                     context.Response.Write("请输入密码！！");  13:                     return;  14:                 }  15:                 if (context.Request["AdminPassword"] != context.Request["AdminPassword2"])  16:                 {  17:                     context.Response.Write("两次密码不一致！！");  18:                     return;  19:                 }  20:                 var isExist = db.TB_Admin.FirstOrDefault(p => p.AdminLogin == context.Request["AdminLogin"].Trim());  21:                 if (isExist != null)  22:                 {  23:                     context.Response.Write("用户名重复！！");  24:                     return;  25:                 }  26:                 TB_Admin singer = new TB_Admin()  27:                 {  28:                     Defatulflag = context.Request["Defatulflag"] == "1" ? 1 : 0,  29:                     AdminLogin = context.Request["AdminLogin"].Trim(),  30:                     CreateBy = userID.ToString(),  31:                     CreateDate = DateTime.Now,  32:                     LastLoginDate = null,  33:                     Password = Utility.UserINFOManager.PasswordEncry(context.Request["AdminPassword"].Trim()),  34:                     RoleID = Convert.ToInt32(context.Request["RoleID"])  35:                 };  36:                 db.TB_Admin.InsertOnSubmit(singer);  37:                 db.SubmitChanges();  38:             }  39:             else  40:             {  41:                 var isExist = db.TB_Admin.FirstOrDefault(p => p.ID == Convert.ToInt32(context.Request["id"]));  42:                 isExist.Defatulflag = context.Request["Defatulflag"] == "1" ? 1 : 0;  43:                 isExist.AdminLogin = context.Request["AdminLogin"].Trim();  44:                 isExist.RoleID = Convert.ToInt32(context.Request["RoleID"]);  45:                 if (context.Request["AdminPassword"].Trim() != string.Empty)  46:                     isExist.Password = Utility.UserINFOManager.PasswordEncry(context.Request["AdminPassword"].Trim());  47:                 db.SubmitChanges();  48:             }  49:             context.Response.Write("1");  50:             return;  51:         }  52:     }  53:     break;  54:     #endregion

从上面代码可以看出：

通过Type参数，可以获取请求的页面。
通过autoLoad参数，可以判断是否是加载赋值。注意FirstOrDefault函数，是获取第一条数据，然后通过ToJson方法（自己定义的扩展方法）转换为JSON数据。
通过id参数，可以判断是否为编辑。
以上使用的是LINQ to SQL，个人认为使用LINQ to SQl开发小项目还是挺快的。关于LINQ to SQL的具体使用，就不说了。顺便送大家一段服务器分页通用代码（仅支持LINQ2SQL），如果觉得性能不行，请自己用存储过程实现，这里不考虑性能：

   1: /// <summary>   2: /// 当前页   3: /// </summary>   4: private int pageIndex = Convert.ToInt32(HttpContext.Current.Request["page"] ?? "1");   5: /// <summary>   6: /// 每页显示记录数   7: /// </summary>   8: private int pageSize = Convert.ToInt32(HttpContext.Current.Request["rows"] ?? "1");   9: /// <summary>  10: /// 获取分页JSON  11: /// </summary>  12: /// <typeparam name="T"></typeparam>  13: /// <param name="data"></param>  14: /// <returns></returns>  15: private string GetPageingJson<T>(IQueryable<T> data)  16: {  17:     return string.Format("{{\"total\":\"{0}\",\"rows\":{1}}}", data.Count(), data.Skip((pageIndex - 1) * pageSize).Take(pageSize).ToJson());  18: }

相比使用各种.NET Ajax框架，我还是喜欢按上面这种模式，虽然很多Ajax框架可以实现js调用C#方法，可以调用WebService，可以操作服务器控件，但是我仍然痴迷上面的模式，因为个人觉得这样精简、易控制、一目了然、没有ViewState、没有服务器控件、甚至没有Cookie和Session（需要实现接口）。。。。

前端HTML

刚才贴的后台处理逻辑是用户管理的编辑界面，那么前端HTML呢？如下：

   1: <%@ Page Title="" Language="C#" MasterPageFile="~/Form.Master" AutoEventWireup="true"   2:     CodeBehind="AdminUser_Add.aspx.cs" Inherits="Singer.WebPages.RoleManagement.AdminUser_Add" %>   3:     4: <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">   5: </asp:Content>   6: <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">   7:     <div class="easyui-layout" style="text-align: left; height: 270px;" fit="true">   8:         <div region="center" border="false" style="padding: 10px; background: #fff; border: 1px solid #ccc;">   9:             <form id="ff" method="post">  10:             <input type="hidden" name="id" value="<%=Request.QueryString["ID"] %>" />  11:             <table border="0" cellpadding="0" cellspacing="0">  12:                 <tr>  13:                     <td>  14:                         <label for="AdminLogin">  15:                             登录名：</label>  16:                     </td>  17:                     <td>  18:                         <input class="easyui-validatebox" style="width: 300px;" type="text" required="true"  19:                             validtype="length[0,20]" name="AdminLogin"></input>  20:                     </td>  21:                 </tr>  22:                 <tr>  23:                     <td>  24:                         <label for="RoleID">  25:                             所属角色：</label>  26:                     </td>  27:                     <td>  28:                         <input class="easyui-combobox" valuefield="ID" textfield="RoleName" panelheight="auto"  29:                             editable="false" style="width: 300px;" url="/Ajax/Common.ashx?Type=GetRoles"  30:                             required="true" name="RoleID"></input>  31:                     </td>  32:                 </tr>  33:                 <tr>  34:                     <td colspan="2" style='color: Red'>  35:                         在编辑时，输入管理员密码表示重新设置密码。  36:                     </td>  37:                 </tr>  38:                 <tr>  39:                     <td>  40:                         <label for="AdminPassword">  41:                             密码：</label>  42:                     </td>  43:                     <td>  44:                         <input class="easyui-validatebox" style="width: 300px;" type="text" validtype="length[6,20]"  45:                             id='txtPassword' name="AdminPassword"></input>  46:                     </td>  47:                 </tr>  48:                 <tr>  49:                     <td>  50:                         <label for="AdminPassword2">  51:                             确认密码：</label>  52:                     </td>  53:                     <td>  54:                         <input class="easyui-validatebox" style="width: 300px;" type="text" validtype="length[6,20]"  55:                             id='txtPassword2' name="AdminPassword2"></input>  56:                     </td>  57:                 </tr>  58:                 <tr>  59:                     <td>  60:                         <label for="Defatulflag">  61:                             是否上架：</label>  62:                     </td>  63:                     <td>  64:                         <input type="checkbox" name="Defatulflag" class="easyui-validatebox" type="text"  65:                             required="true" value="1" />  66:                     </td>  67:                 </tr>  68:             </table>  69:             </form>  70:         </div>  71:         <div region="south" border="false" style="text-align: right; padding: 5px 5px 5px 0;">  72:             <a class="easyui-linkbutton" iconcls="icon-save" href="javascript:void(0)" onclick="javascript:submitForm();">  73:                 提交</a> <%--<a class="easyui-linkbutton" iconcls="icon-no" href="javascript:void(0)" onclick="$('#ff').form('clear');">  74:                     重置</a>--%>  75:         </div>  76:     </div>  77:     <script type="text/javascript">  78:         $(function () {  79:             if (autoLoad == 1) {  80:                 $('#txtPassword').keypress(function () {  81:                     if ($(this).val().length > 0) {  82:                         $('#txtPassword2').validatebox({  83:                             required: true  84:                         });  85:                     }  86:                 }).change(function () {  87:                     if ($(this).val().length > 0) {  88:                         $('#txtPassword2').validatebox({  89:                             required: true  90:                         });  91:                     } else {  92:                         $('#txtPassword2').validatebox({  93:                             required: false  94:                         });  95:                     }  96:                 });  97:    98:             } else {  99:                 $('#txtPassword,#txtPassword2').validatebox({ 100:                     required: true 101:                 }); ; 102:             } 103:         }); 104:     </script> 105: </asp:Content>

值得注意的是：

这里使用的控件均为HTML控件。
请注意name属性，该属性决定提交的post参数名，同时也是form加载赋值的参数名，也就是这里的值要与后台输出的JSON要对应。
返回的JSON数据如下：

这一篇就写到这里吧。由于最近忙，又耽误了。。。

本文链接

JQuery EasyUi之界面设计——通用的JavaScript（二）

2012-03-25T15:30:00Z

所谓磨刀不误砍柴工，先写点通用的代码，后面开发起来效率就高多了。多余的话就不敲了，先简单介绍介绍吧。

时间格式化

对于序列化JSON，我喜欢用JSON.NET，为了方便，我定义了一个扩展方法，如下面代码：

1: /// <summary> 2: /// 将对象序列化为JSON数据 3: /// </summary> 4: /// <param name="instance"></param> 5: /// <returns></returns> 6: public static string ToJson(this object instance) 7: { 8: return JsonConvert.SerializeObject(instance); 9: }

那么序列化JOSN输出那么就方便多了，如下面代码：

1: var info = from a in db.TB_KTVAndConcert 2: join b in db.TB_City on a.Cityid equals b.ID 3: where a.AttributeCode == "AttrubuteCode".GetRequest() 4: orderby a.Cityid 5: select new 6: { 7: a.CreateDate, 8: a.Defaultflag, 9: a.ID, 10: a.Name, 11: a.Cityid, 12: b.CityName, 13: a.Displayindex 14: }; 15: if ("CityID".GetRequest().IsNotEmpty()) 16: { 17: if (MyRegex.IsNumberRegex("CityID".GetRequest())) 18: { 19: int cityId = Convert.ToInt32("CityID".GetRequest()); 20: info = info.Where(p => p.Cityid == cityId); 21: } 22: } 23: context.Response.Write(info.OrderByDescending(p => p.Defaultflag).ThenBy(p => p.Displayindex).ToJson());

序列化JSON是可以了，但是前台显示DateTime类型数据时显示就有问题了，也就是获取不到想要的格式化字符串。解决这个问题有两种方式，方式一就是定义一个C#方法来返回格式化时间字符串，关键部分代码如下：

1: select new 2: { 3: CreateDate = a.CreateDate.GetDateTimeString(), 4: a.Defaultflag, 5: a.ID, 6: a.Name, 7: a.Cityid, 8: b.CityName, 9: a.Displayindex 10: };

这样虽然可以，但是如果我想统一在浏览器端处理呢？于是封装下面的函数：

前台调用：

1: function formatCreateDate(value, row, index) { 2: 3: return fomatDate(row.CreateDate); 4: 5: }

显示效果：

消息框

弹出框以及系统消息框

1: function showMsg(title, msg, isAlert) { 2: if (isAlert !== undefined && isAlert) { 3: $.messager.alert(title, msg); 4: } else { 5: $.messager.show({ 6: title: title, 7: msg: msg, 8: showType: 'show' 9: }); 10: } 11: }

确认框

1: function showConfirm(title, msg, callback) { 2: $.messager.confirm(title, msg, function (r) { 3: if (r) { 4: if (jQuery.isFunction(callback)) 5: callback.call(); 6: } 7: }); 8: }

进度框

1: function showProcess(isShow, title, msg) { 2: if (!isShow) { 3: $.messager.progress('close'); 4: return; 5: } 6: var win = $.messager.progress({ 7: title: title, 8: msg: msg 9: }); 10: }

例如在表单提交时，为了防止重复提交，会显示一个进度框。提交完成时，关闭进度框并提示操作信息：

1: function submitForm(url) { 2: $('#ff').form('submit', { 3: url: (url === undefined ? "/Ajax/Common.ashx" : url) + "?Type=" + typeCode, 4: onSubmit: function () { 5: var flag = $(this).form('validate'); 6: if (flag) { 7: showProcess(true, '温馨提示', '正在提交数据...'); 8: } 9: return flag 10: }, 11: success: function (data) { 12: showProcess(false); 13: if (data == 1) { 14: top.showMsg('温馨提示', '提交成功！'); 15: if (parent !== undefined) { 16: if ($.isFunction(window.reloadParent)) { 17: reloadParent.call(); 18: } else { 19: parent.$("#tt").datagrid('reload'); 20: parent.closeMyWindow(); 21: } 22: } 23: } else { 24: $.messager.alert('温馨提示', data); 25: } 26: }, 27: onLoadError: function () { 28: showProcess(false); 29: $.messager.alert('温馨提示', '由于网络或服务器太忙，提交失败，请重试！'); 30: } 31: }); 32: }关键页面代码如下：

1: <div class="easyui-layout" style="text-align: left; height: 270px;" fit="true"> 2: 3: <div region="center" border="false" style="padding: 10px; background: #fff; border: 1px solid #ccc;"> 4: 5: <form id="ff" method="post"> 6: 7: <input type="hidden" name="id" value="" /> 8: 9: <table border="0" cellpadding="0" cellspacing="0"> 10: 11: <tr> 12: 13: <td> 14: 15: <label for="AdminLogin"> 16: 17: 登录名：</label> 18: 19: </td> 20: 21: <td> 22: 23: <input class="easyui-validatebox" style="width: 300px;" type="text" required="true" 24: 25: validtype="length[0,20]" name="AdminLogin"></input> 26: 27: </td> 28: 29: </tr> 30: 31: <tr> 32: 33: <td> 34: 35: <label for="RoleID"> 36: 37: 所属角色：</label> 38: 39: </td> 40: 41: <td> 42: 43: <input class="easyui-combobox" valuefield="ID" textfield="RoleName" panelheight="auto" 44: 45: editable="false" style="width: 300px;" url="/Ajax/Common.ashx?Type=GetRoles" 46: 47: required="true" name="RoleID"></input> 48: 49: </td> 50: 51: </tr> 52: 53: <tr> 54: 55: <td colspan="2" style='color: Red'> 56: 57: 在编辑时，输入管理员密码表示重新设置密码。 58: 59: </td> 60: 61: </tr> 62: 63: <tr> 64: 65: <td> 66: 67: <label for="AdminPassword"> 68: 69: 密码：</label> 70: 71: </td> 72: 73: <td> 74: 75: <input class="easyui-validatebox" style="width: 300px;" type="text" validtype="length[6,20]" 76: 77: id='txtPassword' name="AdminPassword"></input> 78: 79: </td> 80: 81: </tr> 82: 83: <tr> 84: 85: <td> 86: 87: <label for="AdminPassword2"> 88: 89: 确认密码：</label> 90: 91: </td> 92: 93: <td> 94: 95: <input class="easyui-validatebox" style="width: 300px;" type="text" validtype="length[6,20]" 96: 97: id='txtPassword2' name="AdminPassword2"></input> 98: 99: </td> 100: 101: </tr> 102: 103: <tr> 104: 105: <td> 106: 107: <label for="Defatulflag"> 108: 109: 是否上架：</label> 110: 111: </td> 112: 113: <td> 114: 115: <input type="checkbox" name="Defatulflag" class="easyui-validatebox" type="text" 116: 117: required="true" value="1" /> 118: 119: </td> 120: 121: </tr> 122: 123: </table> 124: 125: </form> 126: 127: </div> 128: 129: <div region="south" border="false" style="text-align: right; padding: 5px 5px 5px 0;"> 130: 131: <a class="easyui-linkbutton" iconcls="icon-save" href="javascript:void(0)" onclick="javascript:submitForm();"> 132: 133: 提交</a> 134: 135: </div> 136: 137: </div> 138: 139: <script type="text/javascript"> 140: 141: $(function () { 142: 143: if (autoLoad == 1) { 144: 145: $('#txtPassword').keypress(function () { 146: 147: if ($(this).val().length > 0) { 148: 149: $('#txtPassword2').validatebox({ 150: 151: required: true 152: 153: }); 154: 155: } 156: 157: }).change(function () { 158: 159: if ($(this).val().length > 0) { 160: 161: $('#txtPassword2').validatebox({ 162: 163: required: true 164: 165: }); 166: 167: } else { 168: 169: $('#txtPassword2').validatebox({ 170: 171: required: false 172: 173: }); 174: 175: } 176: 177: }); 178: 179: 180: 181: } else { 182: 183: $('#txtPassword,#txtPassword2').validatebox({ 184: 185: required: true 186: 187: }); ; 188: 189: } 190: 191: }); 192: 193: </script> 194:

效果如下：

窗口

窗口是用的非常频繁的，显示窗口：

1: $(function () { 2: $('body').append('<div id="myWindow" class="easyui-dialog" closed="true"></div>'); 3: }); 4: function showMyWindow(title, href, width, height, modal, minimizable, maximizable) { 5: $('#myWindow').window({ 6: title: title, 7: width: width === undefined ? 600 : width, 8: height: height === undefined ? 400 : height, 9: content: '<iframe scrolling="yes" frameborder="0" src="' + href + '" style="width:100%;height:98%;"></iframe>', 10: // href: href === undefined ? null : href, 11: modal: modal === undefined ? true : modal, 12: minimizable: minimizable === undefined ? false : minimizable, 13: maximizable: maximizable === undefined ? false : maximizable, 14: shadow: false, 15: cache: false, 16: closed: false, 17: collapsible: false, 18: resizable: false, 19: loadingMessage: '正在加载数据，请稍等片刻......' 20: }); 21: }

关闭窗口：

1: function closeMyWindow() {

2: $('#myWindow').window('close');

3: }

使用方式如下：

1: function onDataGridDblClickRow(rowIndex, rowData) { 2: 3: edit(); 4: 5: } 6: 7: function addType() { 8: 9: showMyWindow('用户管理 | 新建', '/WebPages/RoleManagement/AdminUser_Add.aspx', 600, 320) 10: 11: } 12: 13: function edit() { 14: 15: var row = $('#tt').datagrid('getSelected'); 16: 17: if (row) { 18: 19: showMyWindow('用户管理 | 编辑', '/WebPages/RoleManagement/AdminUser_Add.aspx?ID=' + row.ID + '&autoLoad=1', 600, 320) 20: 21: } else { 22: 23: showMsg("温馨提示", "请选择一行！"); 24: 25: } 26: 27: }

窗口弹出有本页弹出，有时由于框架页太小，经常会使用顶层窗口弹出，如：

1: function showSetPicWindow(adname, id) { 2: 3: top.showMyWindow(adname + " | 广告图设置", '/WebPages/ADManagement/ADPicturesManagement.aspx?TypeCode=ADPictures&ID=' + id + '&ATCode=KTVAdvert', 707, 440); 4: 5: }

效果如下：

表单

一个系统总是不乏表单的，自然表单的提交与赋值自然是频繁的。如果使用C#，可以通过反射减少工作量，但是我更趋向把工作量留给前台。比如提交：

值得说明的是：

typeCode来自母版页，为页面名。
url为提交的URL。
onSubmit事件会触发表单验证，如果验证通过会显示提交进度遮罩层。如果觉得不够用，可以自己扩展。
success事件会关闭进度，如果提交成功会显示成功提示，如果存在父窗口，会刷新父页面DataGrid并且关闭当前窗口。当然也可以实现reloadParent函数来个性化处理。
表单id和DataGrid的id都是固定的，如果没有效果请检查id。
关于表单的这里只写了提交，赋值的代码写在母版页了，以后再说。

页面html的提交代码如下：

1: <a class="easyui-linkbutton" iconcls="icon-save" href="javascript:void(0)" onclick="javascript:submitForm('/Ajax/ShortMMS_Common.ashx');"> 2: 提交</a>

有些页面可能刷新DataGrid还不够，需要刷新页面，于是可以使用下面的JS：

1: <script type="text/javascript"> 2: function reloadParent() { 3: top.showProcess(false); 4: parent.showMsg('温馨提示', '提交成功'); 5: parent.document.location.reload(); 6: } 7: </script>

最后，附上完整的JS代码：

1: //时间格式化 2: Date.prototype.format = function (format) { 3: if (!format) { 4: format = "yyyy-MM-dd hh:mm:ss"; 5: } 6: var o = { 7: "M+": this.getMonth() + 1, // month 8: "d+": this.getDate(), // day 9: "h+": this.getHours(), // hour 10: "m+": this.getMinutes(), // minute 11: "s+": this.getSeconds(), // second 12: "q+": Math.floor((this.getMonth() + 3) / 3), // quarter 13: "S": this.getMilliseconds() 14: // millisecond 15: }; 16: if (/(y+)/.test(format)) { 17: format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length)); 18: } 19: for (var k in o) { 20: if (new RegExp("(" + k + ")").test(format)) { 21: format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length)); 22: } 23: } 24: return format; 25: }; 26: function fomatDate(str) { 27: return (new Date(parseInt(str.substring(str.indexOf('(') + 1, str.indexOf(')'))))).format("yyyy-MM-dd hh:mm:ss"); 28: } 29: function showMsg(title, msg, isAlert) { 30: if (isAlert !== undefined && isAlert) { 31: $.messager.alert(title, msg); 32: } else { 33: $.messager.show({ 34: title: title, 35: msg: msg, 36: showType: 'show' 37: }); 38: } 39: } 40: $(function () { 41: $('body').append('<div id="myWindow" class="easyui-dialog" closed="true"></div>'); 42: }); 43: function showMyWindow(title, href, width, height, modal, minimizable, maximizable) { 44: $('#myWindow').window({ 45: title: title, 46: width: width === undefined ? 600 : width, 47: height: height === undefined ? 400 : height, 48: content: '<iframe scrolling="yes" frameborder="0" src="' + href + '" style="width:100%;height:98%;"></iframe>', 49: // href: href === undefined ? null : href, 50: modal: modal === undefined ? true : modal, 51: minimizable: minimizable === undefined ? false : minimizable, 52: maximizable: maximizable === undefined ? false : maximizable, 53: shadow: false, 54: cache: false, 55: closed: false, 56: collapsible: false, 57: resizable: false, 58: loadingMessage: '正在加载数据，请稍等片刻......' 59: }); 60: } 61: function closeMyWindow() { 62: $('#myWindow').window('close'); 63: } 64: function submitForm(url) { 65: $('#ff').form('submit', { 66: url: (url === undefined ? "/Ajax/Common.ashx" : url) + "?Type=" + typeCode, 67: onSubmit: function () { 68: var flag = $(this).form('validate'); 69: if (flag) { 70: showProcess(true, '温馨提示', '正在提交数据...'); 71: } 72: return flag 73: }, 74: success: function (data) { 75: showProcess(false); 76: if (data == 1) { 77: top.showMsg('温馨提示', '提交成功！'); 78: if (parent !== undefined) { 79: if ($.isFunction(window.reloadParent)) { 80: reloadParent.call(); 81: } else { 82: parent.$("#tt").datagrid('reload'); 83: parent.closeMyWindow(); 84: } 85: } 86: } else { 87: $.messager.alert('温馨提示', data); 88: } 89: }, 90: onLoadError: function () { 91: showProcess(false); 92: $.messager.alert('温馨提示', '由于网络或服务器太忙，提交失败，请重试！'); 93: } 94: }); 95: } 96: function deleteConfirm() { 97: return showConfirm('温馨提示', '确定要删除吗?'); 98: } 99: function showConfirm(title, msg, callback) { 100: $.messager.confirm(title, msg, function (r) { 101: if (r) { 102: if (jQuery.isFunction(callback)) 103: callback.call(); 104: } 105: }); 106: } 107: function showProcess(isShow, title, msg) { 108: if (!isShow) { 109: $.messager.progress('close'); 110: return; 111: } 112: var win = $.messager.progress({ 113: title: title, 114: msg: msg 115: }); 116: } 117:

这篇就写到这里吧。如有不足之处，还望大家补充。累了，就先写到这里了。

本文链接

JQuery EasyUi之界面设计——前言与界面效果（一）

2012-03-18T16:45:00Z

如果冯巩的开场白是“观众朋友们，我想死你们了”，那么我的开场白是“最近一直很忙，很久没有发文了”。

前面说过了EXT.NET，这里顺便再说说JQuery EasyUI。为啥我会选择JQuery EasyUI呢？主要有以下几点：

轻量级。
基本的组件都用，即“麻雀虽小五脏俱全”。
使用简洁方便，比如支持html+js。
可扩展性。
可维护性。世上没有完美的产品，而且其对IE6的兼容性还存在一些问题，但相比extjs，其还是很方便阅读和修改的。
简单性。这既是优点也是缺点。比如icon，自带的就那么几个，像我这样的懒人，就用那么几个就够了，extjs的图标选择起来都比较麻烦。如果实在不够用，就去extjs里面找几个加上。再比如组件的使用，官方文档的描述也就那么几页，使用起来，也就那么几个方法与事件，但基本够用了。
个人不喜欢固步自封，喜好使用对自己来说有点神秘和陌生的技术。
extjs如一个行动不便的美妇，其脚本太庞大，对象太丰富，并且不利于维护；ext.net如一个打扮得花枝招展的裹脚的妇女，其将extjs封装成服务器控件，虽然其维护起来不错，体验不错，使用方便，但是我不喜欢使用服务器控件的这种方式，也不喜欢其包了一层有一层的外壳，调起问题来从ASP.NET到EXT.NET到extjs；而easyui，则如一个清纯的少女，从外表即可窥探内心，清秀而不失美观。
其他。

最近手上有个私活，于是就试试了。现在项目已经基本完工了。那么我就来说说EasyUi这个系列吧。由于时间有限，会分几篇说（一定会说完），而且更新时间不会固定，敬请谅解。

在此之前，先说说编写本系列的计划吧：

JQuery EasyUi之界面设计——前言与界面效果（一）
JQuery EasyUi之界面设计——通用的JavaScript（二）
JQuery EasyUi之界面设计——母版页以及Ajax的通用处理（三）
JQuery EasyUi之界面设计——代码详解（四）

下面先从界面效果开始吧。

首页

首页的样式是扒的官网DEMO，但是与其不同的是，其右侧是一个框架，我这里的右侧换成了一个tab，对于管理系统来说，使用tab更方便。

内容展现页面

上面的按钮时类型，使用的是linkbutton实现的特效。下面区域使用的是datagrid，查询放在顶部工具栏。

弹出窗口

弹出窗口可以用于新增|编辑，也可以用于其他功能，这个效果与extjs的window差不多。

新增与编辑

easyui的form自带验证、提交、重置与赋值，使用起来简单方便。

提示框

本文链接

代码重构——程序员应有的基因

2012-01-29T14:18:00Z

去年帮另一个项目组赶项目时，总是有很多地方令我不舒服。本人编码有点小小的“洁癖”——即不喜欢见到冗余代码。即时现在忙，没时间整理，但是一有时间，我都尽可能的去重构。也许本人是个完美主义者吧。

个人认为重构有以下好处：

改善软件的性能、质量。
使架构更加合理。
使代码更容易被理解。
提高软件的扩展性和可维护性。
提高代码的重用率，通用性。
提高软件的开发速度。
更容易发现BUG。
可以提高开发人员的开发水平。

在我见过的很多代码中，很多程序员宁愿无限复制粘贴代码，也不愿意重构代码。比如经常可以看到这样一个Switch结构中，每个Case块除了某个参数不同，里面的代码几乎一模一样。看到这种代码，不知道是我的悲哀，还是他的悲哀。

这里就展开说说：

一、控件绑定

在开发表单的时候，我们经常会用到下拉列表。如果是服务器控件，我们通常会在后台绑定，但如果是html控件，我们通常需要写JavaScript来绑定，比如下面这个例子：

$.post(siteBase + "MktUser/Op.aspx?op=items", {}, function(res) {
if (res != null) {
// 事业别
var html = "<option value=''></option>";
$(res.Data.items).each(function(i, item) {
html += "<option value='" + item.Id + "'>" + item.Name + "</option>";
});
$("#item_id").html(html);
}
}, 'json');
这是一个绑定下拉列表（select）的例子，如果每次都写这么多，一个不太复杂的页面也会让这些代码占满，那么我们可以重构下，如下面的代码：function setSelect(se, key, data, val, txt, seval, setf) {
$.post("Op.aspx?op=" + key, data, function (res) {
if (res != null) {
var html = "<option value=''></option>";
var jsonData = (res.Data.items !== undefined ? res.Data.items : res.Data);
$(jsonData).each(function (i, item) {
var jTxt = '';
var jVal = '';
$.each(item, function (j) {
if (j == val)
jVal = item[j];
else if (j == txt)
jTxt = item[j];
});
html += "<option value='" + jVal + "' " + ((seval !== undefined && seval == jVal) ? "selected='selected'" : "") + ">" + jTxt + "</option>";
});
$(se).html(html);
if (setf !== undefined)
setTimeout(setf, 100);
}
}, 'json');
}

二、代码简化、灵活运用

很多代码我们可以简化或者灵活运用。关于简化，比如使用三元运算符。关于灵活运用，比如很多朋友喜欢将不为空的判断写死在JS里，那么我们也可以换一种方式，比如使用html元素的自定义属性或者文本来判断，比如：

三、代码归类

很多人经常羡慕别人有代码库，自己总是没有呢？其实在平常编码中，只要用心重构就会有了。

在你重构代码的时候，一般你就会思考，如何重构才能够更优，如何重构这段代码就能尽可能多的重复利用（以后也能用），于是乎，有时你会去找找相关的代码，有时你会把类似的处理逻辑的代码统一放在一起，比如邮件处理的代码、文件操作的代码等等。如果是C#，你可以归类，如果是JS，你可以考虑放到一个JS文件里。

关于这些，大家可以从这里《也把咱的小类库拿出来晒晒》打劫。

四、提取函数

提取函数很实用，在VS中使用快捷键——Ctrl+R+M就能实现提取方法了。提取方法一方面方便代码重用，另一方面也增加了发现问题的几率。比如看下面的异常：

_shutDownMessage=关键目录的更改通知。
bin dir change or directory rename
HostingEnvironment initiated shutdown
关键目录的更改通知。
bin dir change or directory rename
HostingEnvironment 导致关闭

_shutDownStack= 在 System.Environment.GetStackTrace(Exception e, Boolean needFileInfo)
在 System.Environment.get_StackTrace()
在 System.Web.Hosting.HostingEnvironment.InitiateShutdownInternal()
在 System.Web.Hosting.HostingEnvironment.InitiateShutdown()
在 System.Web.HttpRuntime.ShutdownAppDomain(String stackTrace)
在 System.Web.HttpRuntime.OnCriticalDirectoryChange(Object sender, FileChangeEvent e)
在 System.Web.FileChangesMonitor.OnCriticaldirChange(Object sender, FileChangeEvent e)
在 System.Web.DirectoryMonitor.FireNotifications()
在 System.Web.Util.WorkItem.CallCallbackWithAssert(WorkItemCallback callback)
在 System.Web.Util.WorkItem.OnQueueUserWorkItemCompletion(Object state)
在 System.Threading._ThreadPoolWaitCallback.WaitCallback_Context(Object state)
在 System.Threading.ExecutionContext.Run(ExecutionContext executionContext, ContextCallback callback, Object state)
在 System.Threading._ThreadPoolWaitCallback.PerformWaitCallbackInternal(_ThreadPoolWaitCallback tpWaitCallBack)
在 System.Threading._ThreadPoolWaitCallback.PerformWaitCallback(Object state)从上面文字中，我们可以看到异常捕获是到方法为止的，比如类似于“未将对象引用到对象的实例”异常，如果没有报出具体对象的话，茫茫代码中是很难查找的（在很多情况下无法调试或者无法模拟当时环境时），但是我们可以从最后提示的执行的方法名来限定问题代码范围，然后仔细检查推敲。

五、方法重载

有时候，可能要满足多种需求，但是又不想更改代码，那么方法重载就能派上用场了。比如下面两个方法：

1: /// <summary> 2: /// 将string类型的fDateTime转换为formatStr格式的日期类型 3: /// </summary> 4: public static string GetStandardDateTime(string fDateTime, string formatStr) 5: { 6: DateTime s = Convert.ToDateTime(fDateTime); 7: return s.ToString(formatStr); 8: } 9: 10: /// <summary> 11: ///将string类型的fDateTime转换为日期类型 yyyy-MM-dd HH:mm:ss 12: /// </sumary> 13: public static string GetStandardDateTime(string fDateTime) 14: { 15: return GetStandardDateTime(fDateTime, "yyyy-MM-dd HH:mm:ss"); 16: }

最后

写了这么多，就此结束吧。

如果你还沉浸在日复一日的重复编码中，那么就想想重构吧。重构也是个费力活，但是却可以让你更上一层楼。

本文链接

EXT.NET复杂布局（四）——系统首页设计（下）

2012-01-05T14:35:00Z

此篇为EXT.NET系列终结篇。希望此系列能够对大家有所帮助。

首页JS函数介绍

使然使用了Ext.NET，但是JavaScript的地位还是举足轻重的。

1.添加选项卡

1: var addTab = function (id, url, title) { 2: var tab = tplCenter.getComponent(id); 3: if (!tab) { 4: tab = tplCenter.add({ 5: id: id, 6: title: title, 7: closable: true, 8: autoLoad: { 9: showMask: true, 10: url: url, 11: mode: "iframe", 12: maskMsg: "正在加载 " + title + " ..." 13: } 14: }); 15: } 16: tplCenter.setActiveTab(tab); 17: }

注意maskMsg，它有以下效果：

2.显示消息

1: function showMsg(title, content) { 2: Ext.net.Notification.show({ 3: hideFx: { 4: fxName: 'switchOff', 5: args: [{}] 6: }, 7: showFx: { 8: args: [ 9: 'C3DAF9', 10: 1, 11: { 12: duration: 2.0 13: } 14: ], 15: fxName: 'frame' 16: }, 17: closeVisible: true, 18: html: content, 19: title: title + ' ' + new Date().format('g:i:s A') 20: }); 21: }

3.弹出窗口

1: function showMyWindow(url, id, title, isMaximized) { 2: url += ((url.indexOf('?') == -1 ? ("?rand=") : ("&rand=")) + Math.round(Math.random() * 10000)); 3: var myWin = new Ext.Window({ 4: id: id, 5: title: title, 6: width: 572, 7: height: 290, 8: iconCls: "addicon", 9: resizable: false, 10: draggable: true, 11: defaultType: "textfield", 12: labelWidth: 100, 13: collapsible: false, 14: closeAction: 'close', 15: closable: true, 16: maximizable: true, 17: maximized: arguments.length == 4 ? isMaximized : false, 18: modal: true, 19: buttonAlign: "center", 20: bodyStyle: "padding:0 0 0 0", 21: listeners: { "beforedestroy": function (obj) { 22: var tabs = top.tabs; 23: if (typeof tabs != undefined && tabs != null) { 24: if (top.tabs.items.getCount() > 1) { 25: var currentTab = tabs.getActiveTab(); 26: tabs.remove(currentTab); 27: } 28: } 29: top.showMsg('温馨提示', '我已经关闭啦！'); 30: } 31: }, 32: html: '<iframe style="margin-left:0px;margin-top:0px;border:0;' + 33: 'border-style:solid;border-color:red;" width="100%" height="100%" ' + 34: ' id="frmWin' + id + '" src="' + url + '" name="' + id + '" />' 35: }); 36: myWin.show(); 37: }

注意beforedestroy事件，这个事件可以在窗口关闭后通知你，有了这个通知事件，想干啥都方便了。在示例中，本人是显示消息。

页面布局

从图中可以看出分为上、中、左、右四块，前面介绍过了，就不细说了。

之所以使用Viewport，主要是为了自适应浏览器。值得注意的是，将一个页面分割几块，通常使用BorderLayout，其下有North、West、Center、East、South五个元素，其Collapsible属性指示是否隐藏面板，比如本示例的East面板。West这里放置左侧菜单，支持无限子集。为了有折叠面板的效果，需要设置Layout="AccordionLayout"。然后在后台动态添加TreePanel。

值得注意的是Center面板：

可以看出Center面板中放置了选项卡面板（TabPanel），主要到Plugins元素中的TabScrollerMenu控件，作用如图：

至于Panel，能让其自动加载框架页。TriggerEvent="show" 表示显示的时候加载。

可以看出，工作台那块都在Url="/WorkbenchMain.aspx" 设置。注意/表示网站根目录，只有发布到IIS或者Web应用程序有效。

工作台

工作台是非常重要的一块。

有时候为了显示重要信息，可能需要以不同颜色显示，那么注意下面的JS：

var template = '<b style="color:{1};">{0}</b>';
var setTitle = function (value, metadata, record, rowIndex, colIndex, store) {
return String.format(template, value, 'green');
};

在上面的代码中，你可以根据值来判断显示什么样的HTML，这里是粗体加绿。

自适应区域：

function autoSizeArea() {
var vHeight = Viewport1.getHeight();
pnlView.setHeight(vHeight);
vHeight = vHeight - 150;
GridPanel1.setHeight(vHeight);
GridPanel3.setHeight(vHeight);
GridPanel2.setHeight(vHeight);
GridPanel6.setHeight(vHeight);
GridPanel5.setHeight(vHeight);
}

弹出窗体：

function showTestPage() {
top.showMyWindow('/Test.aspx', 'frmStatesRequestList', '测a试?页3', true);
}

这里显示的是我的测试页，你可以在这里显示自定义页面，并且可以传递工作台中面板中的Json数据。

在这里，我在工作台也添加了一个弹出窗口的JS函数，这么做的原因是，从这里打开窗口处理完事项，我可以刷新工作台的数据，甚至是指定的面板的数据，也就是在beforedestroy事件中，reload相应的store。

在工作台，本人写了一些处理的JS，大家可以根据自己需要更改，并且剪切到独立的JS文件中去。

比如这个函数：

1: function showInput(animEl, recodes, TypeID, iconCs, msg, progressText, taskIDName, ObjectIdName, DriverIdName, TaskTitelName) { 2: Ext.MessageBox.show({ 3: title: '批注', 4: msg: '请输入批注：', 5: width: 300, 6: buttons: Ext.MessageBox.OKCANCEL, 7: multiline: true, 8: fn: function (btn, text) { 9: var remark = text.replace(/(^\s*)|(\s*$)/g, ''); 10: if (TypeID == 'Reject' || TypeID == 'Repeal') { 11: var tip = ''; 12: if (TypeID == 'Reject') 13: tip = '【退回】'; 14: if (TypeID == 'Repeal') 15: tip = '【撤销】'; 16: if (remark == '' && btn == 'ok') { 17: showInput(animEl, recodes, TypeID, iconCs, msg, progressText, taskIDName, ObjectIdName, DriverIdName, TaskTitelName); 18: alert(tip + '必须填写批注，请填写。'); 19: } 20: else if (btn == 'cancel') 21: Ext.MessageBox.alert('温馨提示', '操作已取消（' + tip + '必须填写批注）。'); 22: else if (remark != '' && btn == 'ok') 23: Operations(animEl, recodes, TypeID, iconCs, msg, progressText, taskIDName, ObjectIdName, DriverIdName, TaskTitelName, remark); 24: } 25: else { 26: if (btn == 'ok') 27: Operations(animEl, recodes, TypeID, iconCs, msg, progressText, taskIDName, ObjectIdName, DriverIdName, TaskTitelName, remark); 28: else 29: Ext.MessageBox.alert('温馨提示', '操作已取消。'); 30: } 31: }, 32: animEl: animEl 33: }); 34: }

用来判断相应的操作类型，假如是退回或者撤销，则必须填写批注。如：

至于其他的代码，我就不多介绍了，篇幅有限，精力有限。

工作台的代码，其他篇幅有部分介绍，可以参考EXT.NET复杂布局（一）——工作台。

处理面板顶部工具栏有不少按钮，如何动态添加这些按钮（可以根据用户权限和事项判断），代码如下：

1: /// <summary> 2: /// 向工具条添加按钮 3: /// </summary> 4: /// <param name="icon">图标</param> 5: /// <param name="text">文本</param> 6: /// <param name="facode">操作Code</param> 7: /// <param name="toolbar">工具条</param> 8: /// <param name="_panelName">容器ID</param> 9: private static void SetButton(Icon icon, string text, FACodeEnum facode, Toolbar toolbar, string _panelName) 10: { 11: if (toolbar == null) throw new ArgumentNullException("toolbar"); 12: var _btn = new Ext.Net.Button 13: { 14: Icon = icon, 15: Text = text, 16: Listeners = 17: { 18: Click = 19: { 20: Handler = 21: string.Format("toExcuteOperations(#{{{0}}}.getSelectionModel().getSelections(),'{1}');", _panelName, facode.ToString()) 22: } 23: } 24: }; 25: //设置Click事件的Handler，用于操作所选项。操作参数（所选记录集、操作Code） 26: if (toolbar.Items.Count > 0) 27: toolbar.Items.Add(new ToolbarSeparator()); 28: toolbar.Items.Add(_btn); 29: }

ToolbarSeparator表示分割线，比如：

在String.Format中，两个大括号代表一个大括号哦。

表单

还记得那个测试页么，在工作台弹出窗口后，窗口加载的是框架页，那么在这个框架页中，我们如何关闭这个窗口呢？比如提交数据完毕的时候。其实只需要输出这段脚本即可：

top.Ext.getCmp('frmStatesRequestList').destroy();

在这个框架页中，我们也可以调用首页消息函数，比如：

top.showMsg('温馨提示', '欢迎进入该页面！');

关于表单的一些介绍，请看EXT.NET复杂布局（三）——复杂表单布局。

尾声

从使用EXT.NET到现在，也差不多一年了，真正使用的时间也只有几个月而已。现在回想起来，还是感慨良多。

回想当初上手的时候，不仅ext不熟悉，而且对EXT.NET也一无所知，中间碰到过许多问题，但是挺过来了，而且还留下了自己的足迹。希望我的帖子能够帮助各位更快的掌握EXT以及EXT.NET，也希望能为EXT.NET的资料库添加块砖片瓦。

最后，附上源码。

本文链接

EXT.NET复杂布局（四）——系统首页设计（上）

2011-12-30T15:26:00Z

很久没有发帖了，很是惭愧，因此给各位使用EXT.NET的朋友献上一份礼物。

本篇主要讲述页面设计与效果，下篇将讲述编码并提供源码下载。

系统首页设计往往是个难点，因为往往要考虑以下因素：

重要通知
系统功能菜单
快捷操作
日常维护工作（比如待办事项、已办事项等等）
用户信息（比如公司、部门、组织机构）
系统信息（意见反馈、帮助等）
联系沟通
等等

又要兼顾美观得体（丑了客户不愿意用，更别说钱了），方便实用，怎么从有限的空间里显示更多的功能（阵地战），往往弄得抓耳搔头，大费脑细胞。下面就给出我的方案。

页面效果

我申明下，我不是专业的前端工程师，我就是一打杂的（啥都搞下），所以不要期望过高，如果还过得去，请点推荐。不多说了，上图：

从图中可以看出，首页分4块区域（四大板块）：

顶部面板——LOGO、用户信息、帮助、反馈、通知等。
左侧面板——组织机构（通常放功能菜单）。
右侧面板——联系人或其他信息。
中央区域——工作台。主要用于日常工作维护以及快捷操作。

顶部面包和右侧面板没啥好说的。接下来就说说功能吧。

左侧面板

左侧面板其实是相当重要的一块，在平常系统设计中，往往把功能菜单放在左侧。这里类似。不仅支持分组折叠，还支持无限极子菜单，美观而灵活。

当点击子节点，会显示在Tab页中。

这样，用户可以方便的实现操作。

中央区域

中央区域主要用于日常工作维护以及快捷操作。当然快捷操作你也可以放在顶部面板。

这个面板主要包括待处理事务、一般事务、通知、部门讨论区、部门文档等内容，当然我这是举例。

整个工作台布局也是采用折叠面板，不过当展开某个面板时，会刷新数据。默认加载，并不需要加载所有数据。

就拿待处理事务来说：

通过工具栏按钮，可以方便对事务进行操作（别忘了判断权限）。如点击退回操作：

通过数据行中的操作列按钮，可以方便查看表单内容，当表单关闭时，刷新工作台。

总之，只会显示一个操作面板。

最后

整个页面是自适应的，会随着浏览窗口大小自适应，如：

点子页面弹出表单可以最大化，如：

当你点击表单里面的提交按钮（假设存在），提交完后，可以关闭表单，父页面也可以触发操作，如关闭弹出的表单时：

先写到这里吧，下篇再细谈。到时奉上DEMO。

由于加群的人太多，EXT.NET群已满。由于现在是业余弄弄EXT.NET，所以本人也不会过多与大家交流EXT.NET，还写一篇，作为结尾好了。

这几天有空的话，尽量完善这个DEMO吧。

本文链接

使用MONO在MAC OS上开发——同步日志（二）

2011-12-09T16:44:00Z

上一篇使用MONO在MAC OS上开发——同步日志（一）讲述了在MAC OS读取配置文件以及写日志，那么只算是完成了基本的配置，下面的才是重点。

由于时间关系，就简单描述下，并不具体分析源码。最后奉上源码。

一：安装

第一步，安装MONO框架。你可以在MONO官网去下载。注意“MonoFramework-MRE-2.10.5_0.macos10.xamarin.x86.dmg”在低版本MAC OS上运行有问题。建议安装“MonoFramework-MRE-2.10.4_0.macos10.xamarin.x86.dmg”文件。

第二步，执行程序。将可执行程序“MonitoringApp”复制到电脑桌面，双击运行。

注：在MONO提供的开发工具（MonoDevelop）中，编译后会生成“MonitoringApp”脚本。用记事本打开，就会发现如下代码：

#!/bin/sh

exec mono "/Users/PRODUCTION/Desktop/App/lib/MonitoringApp/MonitoringApp.exe" "$@"

通过这段AppleScript，就明白了利用MONO在Mac OS上执行.NET程序的原理了，还包装了一层壳，一层你蜕不掉的壳——通过在终端上运行的AppleScript来启动MONO虚拟机，然后运行MonitoringApp.exe。这段AppleScript是通过终端运行的，带来了以下麻烦：

1）写死的路径。比如我将MonitoringApp文件移动位置，就不能运行了，因为这段脚本中，路径是死的。当然你可以去学习AppleScript，然后去搜MonitoringApp.exe文件，然后执行。但是对于只有3天时间的我，显然是不可能的。

2）无法脱离终端运行。但是AppleScript启动的程序无法脱离终端运行。打个比方，你将终端关了，OK，你的程序也关了。这问题当时我一直没解决，现在想解决，却没苹果电脑测试了。

二：环境配置

第一步，配置配置文件。配置文件名字必须是“Configuration.txt”。本目录提供了一个参考文件。具体参数说明如下：
    MonitoringDirectoryType：目录类型，仅支持两个值（Immediate、Cycle）。Immediate表示即时监控（默认值），Cycle表示周期监控。
    Path：监控目录路径。必须是存在的路径。
    TargetPath：目标目录路径。可以是远程目录路径。不能使用SMB路径，而应该是用如“/Volumes/mes_data/n81a”的类型。
    IncludeSubdirectories：是否涵盖子目录。
    Filter：过滤字符串。如“*”表示监控所有文件，“*.txt”表示监控所有的文本文件。
    BackupPath：备份路径。
    BackupExpired：备份过期时间。单位是天。必须为整数。默认值30天。
    CycleMinutes：周期循环时间。单位是分。必须为整数。默认值60分钟。
    注意事项：
        1）8个配置缺一不可。必须全部配置，并写值。
        2）支持多个目录。但是要求所有的值都以多个的形式表示，如“['Immediate','Cycle']”表示两个目录，相应的其他配置项也必须写两个值。
        3）所有的符号必须为英文符号。值必须用单引号括起来。
        4）有些值只对某种类型起作用，比如CycleMinutes只对MonitoringDirectoryType为Cycle的类型目录起作用，因此当目录类型为Immediate时，值属于无效状态。
        5）配置名以冒号结束。配置值涵盖在中括号中。
        6）每个配置项配置完成前，请不要换行。每个配置项之间请换行。程序是按行读取配置项的。
        7）配置名和配置值不区分大小写。

配置完配置文件后，请将文件复制到系统用户的根目录下。如“/Users/nzocnzoc”。

注：其实上面的都是屁话，具体的你还是自己看代码吧。值得注意的是，最好你所有的文字都用英文，否则复制过去可能都是乱码，即使设置了语言为中文也不行。

第二步，配置开机启动。请先将程序拖入对应用户的登陆项里。具体设置在：【系统偏好设置（System Preferences）】->【用户账户（Accounts）】->【登陆项（Login Items）】。然后再连接远程服务器。具体配置在【前往】->【连接服务器】中配置，请使用记住密码（切记）。配置完毕，然后将目标目录拖入至目标用户的登陆项中，如此，就能在开机启动时自动连接远程目录。
注意：由于网线连接或者WIFI连接相对缓慢，在登陆项中，请将远程目录的位置尽量移后，以便有充足的时间来缓冲。没办法，这是个比较蛋疼的办法，但是总归是实现了开机启动而且连上了远程目录。
第三步：重启电脑，测试是否成功。一定要测试是否文件能够上传到远程目录。

三：问题诊断。

如果文件没有成功上传，程序又没有提供异常提示，请先参考“/Users/当前用户”路径下的Data目录中的错误日志。

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

其实这个项目代码倒是很简单，1天不到就可以写完，但是移植到Mac OS上问题就来了。很多时候，我们都说MONO可以跨平台，事实上也是可以的，但是问题却很多。

代码必须全部用英文，包括注释，否则移植可能会出乱码。
需要在Mac OS上使用MonoDevelop（MONO的开发工具）编译生成。
Mac的文件系统与Window系统很不一样，使用.NET代码获取路径时，比如程序启动路径等均无法获取。
MONO for Mac OS不支持控制台应用程序，画Window应用程序界面最好用Gtk#画，否则可能界面显示可能会有问题。如需隐藏界面，最好将宽度和高度设置为0，设置属性和方法均无效，不知道下个版本会不会修复。
注意MONO框架版本问题。有可能最新版本不支持某些代码或者不支持某些低版本苹果系统。

笔者在这里权当是抛砖引玉，如果有朋友也使用过MONO for Mac OS，希望能分享下经验。

源码下载：MonitoringApp.7z

本文链接

程序员之歌

2011-12-01T15:40:00Z

程呀嘛程序员，

背着那电脑去加班，

不怕太阳晒，

也不怕风雨狂，

只怕领导骂我蠢啊，

没有技术喽，

无颜见爹娘。

程呀嘛程序员，

背着那电脑去加班，

不是为做官，

也不是为面子狂，

只为穷人要翻身哪，

不被压成干嘿，

不做码农了。

------------------------------------------------------------------------------------------------------------------------------------------

很久没写博客了，有很多内容要写，但总不想写，过段时间闲了再写写吧。这几天偶有所感，谨以此歌献给所有的程序员。。。

本文链接

使用MONO在MAC OS上开发——同步日志（一）

2011-09-26T14:51:00Z

原先打算再写点EXT.NET方面的，由于现在在玩Silverlight和Android，所以不打算写下去了。而且最近很忙，所以发帖也不会很及时。

好了，转入正题了：最近客户有个需求，要求写个小程序监控生产线上的苹果一体机的日志文件并上传到服务器。开始想使用Perl或者Python，但是时间不够（因为对这两门语言还不太熟悉），于是想试试MONO。MONO虽然没想象中好用，但是还算勉强能用。

虽然MonoDevelop还可以，但是还是比较喜欢使用VS开发。于是在VS里面先编码。值得注意的是：

如果是开发Winform程序，界面用GTK重画吧。
如果是在VS里面开发，最好将所有的编码和注释都用英文。否则换其他系统时，可能会出现乱码。
编写时需注意MONO是否支持，否则就是白写。

接下来，开始编码。

1.读取配置文件

习惯用XML，发现不支持System.Xml.Linq，亦不支持System.Xml，读取ini文件也麻烦，于是干脆读取文本文件好了。示例配置如下：

MonitoringDirectoryType:['Immediate','Cycle']

Path:['/Users/PRODUCTION/Public/FinalTest/LogsFolder','/Users/PRODUCTION/Public/FinalTest/LogsFolder']

TargetPath:['/Volumes/mes_data/FINALTEST/n81a/{Y}/{M}/{D}/FIN012','/Volumes/mes_data/FINALTEST/n81a/{Y}/{M}/{D}/FIN012']

IncludeSubdirectories:['FALSE','false']

Filter:['*.TXT','*.CSV']

BackupPath:['/Users/PRODUCTION/BACKUP/{Y}/{M}/{D}','/Users/PRODUCTION/BACKUP/{Y}/{M}/{D}']

BackupExpired:['2','2']

CycleMinutes:['','1440']

EXT.NET高效开发（四）——实用技巧

2011-08-27T12:49:00Z

很久没有发文了，一是忙上线的事。二是有些颓废了，身体虚弱了，感觉工作没有激情了，不太想写。好了，既然承诺了写下去，那么就坚持吧。

俗话说“授人以鱼，不如授之以渔”，下面就开始本篇之旅吧。

1）检测浏览器与IE版本。

这里是在后台检查，然后输出相应的Extjs脚本，你也可以在前台写JS检测。

这里没有使用EXT.NET的对象，直接写的纯Extjs。

这里是在后台代码进行判断，首先获取浏览器信息判断，然后注册相应的Extjs脚本。当用户点是，则下载。注释很完整，就不多做解释了。

if (!IsPostBack)
{
HttpBrowserCapabilities _hbc = Request.Browser;
//如果是IE并且主版本低于8，则弹出一个模式窗口，显示警告和下载页面（需要客户将网站加入到信任列表）
if (_hbc.IsBrowser("IE"))
{
//低于IE8
if (_hbc.MajorVersion < 8)
{
//弹出确认提示框
string _strScript = "Ext.onReady(function(){Ext.MessageBox.confirm('警告', '<b style=\"color:red;\">*您的IE版本过低，存在安全隐患，并可能造成部分功能无法访问，建议您立刻升级您的IE浏览器。</b><br />*是否立即升级您的浏览器，以获取更佳更安全的体验？<br />*如果您已经安装IE8，浏览器仍弹出此对话框，请重启电脑再试。', function(btn){if(btn=='yes')window.location.href='/FormServerTemplates/UploadIEVersion.aspx?DownLoad=true';});});";
//注册脚本块
Page.ClientScript.RegisterClientScriptBlock(Page.GetType(), "updateIE", _strScript, true);
}
}
else
{
//对非IE浏览器仅弹出警告
string _strScript = " Ext.MessageBox.alert('警告','您正在使用非IE浏览器访问，可能部分功能无法访问。');";
Page.ClientScript.RegisterClientScriptBlock(Page.GetType(), "updateIE", _strScript, true);
}
}

当然，你也可以在前台写JS来检查。如下面代码：

Ext.onReady(function () {
if (Ext.isChrome) {
Ext.Msg.alert("浏览器检测", "你使用的是Chrome");
}
if (Ext.isIE) {
Ext.Msg.alert("浏览器检测", "你使用的是IE");
}
if (Ext.isIE6) {
Ext.Msg.alert("浏览器检测", "你使用的是IE");
}
if (Ext.isIE7) {
Ext.Msg.alert("浏览器检测", "你使用的是IE7");
}
if (Ext.isIE8) {
Ext.Msg.alert("浏览器检测", "你使用的是IE8");
}
if (Ext.isOpera) {
Ext.Msg.alert("浏览器检测", "你使用的是Opera");
}
if (Ext.isGecko3) {
Ext.Msg.alert("浏览器检测", "你使用的是火狐");
}
);

2) 检测是否安装了Silverlight4.0。

个人对Silverlight也比较喜爱，所以项目中不可避免的会用到。比如上传，施工计划系列（Silverlight——施工计划日报表（四）——自适应浏览器窗口、Silverlight——施工计划日报表（三）、Silverlight——施工计划日报表（二）、Silverlight——施工计划日报表（一））等等。所以检测客户端是否安装了Silverlight也是不可避免的了。这点虽然与Extjs不能挂钩，但是也许大家也有用得着的地方。接下来的随笔还会介绍EXT.NET如何与Silverlight结合布局。

3)下载

总是有人问，为什么使用EXT.NET的服务器事件无法实现下载，或者没反应，后台写的操作也不起作用了，或者点击按钮就出乱码了。其实想想就明白了，EXT.NET在后台对前台进行操作，依赖的是Extjs，也就是它会向前台输送Javascript，干的好好的，你突然向人家输送一个文件流，那么人家就不认了。那么怎么实现下载呢？其实很简单，不要写在DirectEvent事件中，或者在另一个页面进行处理（放心，浏览器不会跳转）。比如在页面上进行下载，页面上的列模型如下：

<ColumnModel ID="ColumnModel2" runat="server">
<Columns>
<ext:RowNumbererColumn />
<ext:Column Header="附件ID" Hidden="true" DataIndex="Id">
</ext:Column>
<ext:Column Header="文件名" DataIndex="FileName">
</ext:Column>
<ext:DateColumn Header="创建日期" DataIndex="CreateDate" Format="yyyy-MM-dd" />
<ext:Column Header="上传用户" DataIndex="UserName" />
<ext:CommandColumn Header="操作">
<Commands>
<ext:GridCommand Icon="PagePaste" CommandName="DownLoad" Text="下载" />
</Commands>
</ext:CommandColumn>
</Columns>
</ColumnModel>那么怎么实现这个下载呢？添加监听事件如下：<Listeners>
<Command Handler="cellCommand(command, record);" />
</Listeners>

然后写下下面的JS函数：

function cellCommand(command, record)
{
if(command=='DownLoad')
window.location.href="/FormServerTemplates/DownLoad.aspx?Id="+record.data.Id+"&FileName="+escape(record.data.FileName);
}

然后在这个页面DownLoad.aspx去处理你的下载逻辑就行了。比如下面的函数：

private void DownLoadIE(int _type)
{
Response.ContentType = "application/x-zip-compressed";
Response.AddHeader("Content-Disposition", "attachment;filename=IE8-WindowsXP-x86-CHS.exe");
string filename = Server.MapPath("~/DownLoad/IE8/IE8-WindowsXP-x86-CHS.exe");
Response.TransmitFile(filename);
}

刚才说的是在页面上下载，那么假如我要在EXT.NET服务器事件（DirectEvent）中下载怎么办呢？也不难，只要跳转就行：

protected void btnDownLoad_Click(object sender, DirectEventArgs e)
{
Session["RPTPackageNotice"] = _rptPackageNotice;
X.Redirect("/FormServerTemplates/DownLoad.aspx", "请稍候，下载马上就开始了...");
}

这里，你也可以使用Response.Redirect来进行跳转哦。至于新页面的数据，你可以考虑放在Session或者Cache里面（用完了记得删哦），也可以重新从数据库中获取。是不是挺方便呢，赶快回家试试吧。

4）后台执行JS或者调用前台函数

如果你希望在DirectEvent事件中执行js，那么可以这么做：

X.Js.Alert("测试");
X.Js.AddScript("alert(0);");
X.Js.Confirm("确认", "alert('已确认！');");
X.Js.Call("alert", 1);
X.AddScript("alert(2);");
ResourceManager1.AddScript("alert(3);");

这几种写法都是可行的，最终会向浏览器输出如下内容：

{script:"alert(\"测试\");alert(0);(function(){var result=confirm(\"确认\");alert('已确认！');})();alert(1);alert(2);alert(3);"}

这下子，你明白了EXT.NET是如何在后台对界面进行更改的吧。其实上面的这么多函数，最终调用的都是ResourceManager1.AddScript函数哦。也许大家对这些函数用的不多，但本人却相当喜欢。有时候写写JS也是一种不错的享受，拼来拼去，还不就是为了这结果。

5）页面提示跳转

既然人家封装了，既然用的是EXT.NET，改用的还是要用的。比如上面的代码：

X.Redirect("/FormServerTemplates/DownLoad.aspx", "请稍候，下载马上就开始了...");

显示效果如下：

这样更友好，其实其原理也很简单，如下面代码：

ResourceManager rm = ResponseManager.ResourceManager;
if (msg.IsNotEmpty())
{
X.Mask.Show(new MaskConfig
{
Msg = msg,
MsgCls = msgCls
});
}

rm.AddScript("window.location=\"".ConcatWith(TokenUtils.IsRawToken(url) ? url : rm.ResolveClientUrl(url), "\";"));

也就是首先获取当前的ResourceManager 对象，显示一个带消息的遮罩层，然后添加window.location转向。

6）在后台获取某个EXT.NET控件。

你可以使用ControlUtils.FindControl来获取，也可以使用容器空间的FindControl方法来获取，都一样方便。但是本人比较喜欢后者。找到之后，转化一下，就可以进行平常的操作了。

比如下面的代码，获取控件之后，进行了类型判断，禁用该控件。

Control _control = userControl.FindControl(_controlFiled.Value);
if (_control == null)
{
LogManager.WriteWarningLog(string.Format("控件{0}不存在！", _controlFiled.Value));
continue;
}
if (_control is TextFieldBase)
(_control as TextFieldBase).Disabled = Convert.ToBoolean(_controlFiled.Attribute("Disabled").Value);
else if (_control is CheckboxBase)
(_control as CheckboxBase).Disabled = Convert.ToBoolean(_controlFiled.Attribute("Disabled").Value);
else if (_control is CheckboxGroupBase)
(_control as CheckboxGroupBase).Disabled = Convert.ToBoolean(_controlFiled.Attribute("Disabled").Value);
else if (_control is PanelBase)
(_control as PanelBase).Disabled = Convert.ToBoolean(_controlFiled.Attribute("Disabled").Value);

但是个人建议不要这么写，还是直接输出JS来的快，简单又方便，不过前提是你得判断下它是否存在setDisabled函数，当然ID要的是客户端ID。这下你明白了为什么本人有时候喜欢写JS的原因了么？简介、方便、直观、高效。

写累了，就此打住好了。不出意外的话，下一篇写写怎么结合ASP.NET服务器控件，怎么结合Silverlight等等。

本文链接