MVC学习笔记2--EasyUIGrid的简单封装
这个封装，首先需要理解HtmlHelper，他是MVC用来封装HTML代码的。
所以说，理论上就是一个字符串拼接在页面上的过程。因为在我理解看来MVC的本质就是还给页面纯净的HTML。
创建自己的HtmlHelper方法需要有三个注意的地方：
1.类必须用Static修饰，
2.命名空间必须是System.Web.Mvc（可以随便建一个类，改掉命名空间就行）
3.方法的第一个参数必须是this HtmlHelper helper,否则不能用HTMLHelper访问
HtmlHelper中的方法返回值有两种，一种是返回string类型，一种是HtmlString类型
1 public static string TableProduce(this HtmlHelper helper, int row, int col) 2 { 3 //返回值如果如下，就可以执行出不被编码化的代码，也就是在页面上显示一段JS代码 4 return "<script>alert('a')</script>\n\r\n"; 5 6 } 7 public static HtmlString TableProduce(this HtmlHelper helper, int row) 8 { 9 10 //返回值如果是return new HtmlString("");就可以执行出被编码化的代码，也就是在页面上执行一段JS代码 11 return new HtmlString("<script>alert('A')</script>"); 12 }
然后，完成EasyUI的Grid需要有三步：
1.在页面上写一个正常的EasyUI的Grid，保证显示没有问题。
2.将这些代码黏贴进自己创建的HTMLHelper类中，以字符串拼接的模式，将这些代码包括起来。
3.将里面一些常用参数做成传入的参数值
4.因为里面的行是不固定的，所以，我们需要传一个list进去，list里面包括了改行的列头，是否显示，绑定的字段等
5.因为字段名是有可能复制错的，我们最好能做一个获取字段名的方法。
代码如下
1 namespace System.Web.Mvc 2 { 3 public static class MyHtmlHelper 4 { 5 public static string TableProduce(this HtmlHelper helper, int row, int col) 6 { 7 //返回值如果如下，就可以执行出不被编码化的代码，也就是在页面上显示一段JS代码 8 return "<script>alert('a')</script>\n\r\n"; 9 10 } 11 public static HtmlString TableProduce(this HtmlHelper helper, int row) 12 { 13 14 //返回值如果是return new HtmlString("");就可以执行出被编码化的代码，也就是在页面上执行一段JS代码 15 return new HtmlString("<script>alert('A')</script>"); 16 } 17 /// <summary> 18 /// EasyUIGrid生成 19 /// </summary> 20 /// <param name="helper"></param> 21 /// <param name="list"></param> 22 /// <returns></returns> 23 public static HtmlString EasyUIGrid(this HtmlHelper helper, List<EasyUIColumn> list, string url) 24 { 25 string a = "<script>\n"; 26 a = a + "$(function () { \n"; 27 a = a + " $(\"#grid\").datagrid({ \n"; 28 a = a + " nowrap: false, \n"; 29 a = a + " striped: true, \n"; 30 a = a + " height: 'auto', \n"; 31 a = a + " singleSelect: true, \n"; 32 a = a + " rownumbers: true, \n"; 33 a = a + " border: true, \n"; 34 a = a + " collapsible: false, \n"; 35 a = a + " title: \"菜单列表\", \n"; 36 a = a + " iconCls: 'icon-edit', \n"; 37 a = a + " url: '" + url + "', \n"; 38 a = a + " columns: [[ \n"; 39 foreach (EasyUIColumn item in list) 40 { 41 a = a + " { \n"; 42 a = a + " field: '" + item.field + "', \n"; 43 a = a + " title: '" + item.title + "', \n"; 44 a = a + " sortable: " + item.sortable.ToString().ToLower() + ", \n"; 45 a = a + " width: " + item.width + ", \n"; 46 if (string.Format("{0}", item.formatter) != "") 47 { 48 a = a + " formatter: function (value, row, index) { \n"; 49 a = a + " return \"" + item.formatter + "\""; 50 a = a + " } \n"; 51 } 52 a = a + " }, \n"; 53 } 54 a = a.TrimEnd(','); 55 a = a + " ]], \n"; 56 a = a + " pagination: true, \n"; 57 a = a + " pageSize: 10, \n"; 58 a = a + " pageList: [10, 20, 30], \n"; 59 a = a + " pageNumber: 1, \n"; 60 a = a + " frozenColumns: [[ \n"; 61 a = a + " { field: 'ck', checkbox: true } \n"; 62 a = a + " ]], \n"; 63 a = a + " pagePosition: 'bottom', \n"; 64 a = a + " sortName: 'iOrder', \n"; 65 a = a + " sortOrder: 'ASC' \n"; 66 a = a + " }); \n"; 67 a = a + " var p = $('#grid').datagrid('getPager'); \n"; 68 a = a + " $(p).pagination({ \n"; 69 a = a + " pageSize: 10, \n"; 70 a = a + " pageList: [10, 20, 30], \n"; 71 a = a + " beforePageText: '第', \n"; 72 a = a + " afterPageText: '页 共 {pages} 页', \n"; 73 a = a + " displayMsg: '当前显示 {from} - {to} 条记录 共 {total} 条记录' \n"; 74 a = a + " }); \n"; 75 a = a + "}) \n"; 76 a += "</script>\n"; 77 a += "<table id=\"grid\" width=\"100%\" style=\"border:0px;\"></table>\n\r\n"; 78 return new HtmlString(a); 79 80 } 81 } 82 }
1 public class EasyUIColumn 2 { 3 /// <summary> 4 /// 字段名 5 /// </summary> 6 public string field { get; set; } 7 /// <summary> 8 /// 标题名 9 /// </summary> 10 public string title { get; set; } 11 /// <summary> 12 /// 长度 13 /// </summary> 14 public string width { get; set; } 15 /// <summary> 16 /// 输出格式化，需传入一个完整的HTML字符串，可以考虑出一个简单的多选项，用代码生成相关字符串 17 /// </summary> 18 public string formatter { get; set; } 19 /// <summary> 20 /// 是否展示 21 /// </summary> 22 public bool hidden { get; set; } 23 /// <summary> 24 /// 是否排序 25 /// </summary> 26 public bool sortable { get; set; } 27 /// <summary> 28 /// 针对传入的lambda表达式，获取表达式属性的字符串，如：p=>p.Name,就获取一个"Name"，以此方法，防止出现传入的属性名写错 29 /// </summary> 30 /// <typeparam name="T"></typeparam> 31 /// <param name="expr"></param> 32 /// <returns></returns> 33 public static string GetPropertyName<T>(Expression<Func<T, object>> expr) 34 { 35 var rtn = ""; 36 if (expr.Body is UnaryExpression) 37 { 38 rtn = ((MemberExpression)((UnaryExpression)expr.Body).Operand).Member.Name; 39 } 40 else if (expr.Body is MemberExpression) 41 { 42 rtn = ((MemberExpression)expr.Body).Member.Name; 43 } 44 else if (expr.Body is ParameterExpression) 45 { 46 rtn = ((ParameterExpression)expr.Body).Type.Name; 47 } 48 return rtn; 49 } 50 }
这样，一个基本的EasyUIGrid封装的方法就做好了，页面上采用以下方式调用
1 ViewData["list"] = new List<EasyUIColumn>() 2 { 3 new EasyUIColumn(){ 4 field=EasyUIColumn.GetPropertyName<Student>(p=>p.SName), title="学生姓名", sortable=true,width = "280", hidden=true, formatter = "<input type='text' id='txtText_\" + row.RowID + \"' name='txtText_\" + row.RowID + \"' value='\" + value + \"' style='border:1px solid #999999; width:150px;' />" 5 }, 6 new EasyUIColumn(){ 7 field="SAge", title="学生年龄", sortable=true,width = "200", hidden=false 8 } 9 };
1 @Html.EasyUIGrid(ViewData["list"] as List<MvcProject.Models.EasyUIColumn>, "")
这里面还有很多可以封装的东西，但是小子我偷懒，就不写了。
这个东西，只是为了一些常用的页面展示数据，为了方便项目里一些重复用EasyUIGrid的地方做的。
但是，这东西的灵活性远远不如EasyUI高，万万不可本末倒置，什么都依赖这个。
如果将EasyUI的什么属性都封装进去，那为什么不用EasyUI本身呢？
浙公网安备 33010602011771号