基于JQuery EasyUI的WebMVC控件封装(含源码)

　JQuery EasyUI类库，大家不会陌生，出来已经有很多年了。个人感觉还是很好用的，作者更新频率也很快，bug也及时修复。

　　最近在整理以前的代码，找到了这个组件，它是将EasyUI组件封装成MVC控件，这样我们就可以不用写那些html标签了，我们先看看调用方式

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

<form id= "form1" >      @Html.HiddenFor(c => c.ID)      @Html.HiddenFor(c => c.EditMode)      @Html.HiddenFor(c => c.CodeTypeID)      @Html.HiddenFor(c => c.CreateUserID)      <table border= "1"  style= "width: 100%;" >          <tr>              <td style= "width: 100px;" >@Html.EasyUI().LabelFor(c => c.CodeID).Required( true )</td>              <td>@Html.EasyUI().ValidateBoxFor(c => c.CodeID).Required( true ).Width( "60%" )</td>          </tr>          <tr>              <td>@Html.EasyUI().LabelFor(c => c.CodeName).Required( true )</td>              <td>@Html.EasyUI().ValidateBoxFor(c => c.CodeName).Required( true ).Width( "60%" )</td>          </tr>          <tr>              <td>@Html.EasyUI().LabelFor(c => c.CodeTypeName)</td>              <td>@Html.DisplayFor(c => c.CodeTypeName)</td>          </tr>          <tr>              <td>@Html.EasyUI().LabelFor(c => c.IsUsed)</td>              <td>@Html.DropDownListMetaCodeFor(c => c.IsUsed, MetaSourceType.Null,  string .Empty,  new { @style =  "width:60%;"  })</td>          </tr>          <tr>              <td>@Html.EasyUI().LabelFor(c => c.SortOrder)</td>              <td>@Html.EasyUI().NumberBoxFor(c => c.SortOrder).Min(10).Value(10).Width( "60%" )</td>          </tr>          <tr>              <td>@Html.EasyUI().LabelFor(c => c.CreateUserName)</td>              <td>@Html.EasyUI().ValidateBoxFor(c => c.CreateUserName).Width( "60%" )</td>          </tr>          <tr>              <td>@Html.EasyUI().LabelFor(c => c.CreateTime)</td>              <td>@Html.EasyUI().DateBoxFor(c => c.CreateTime)</td>          </tr>      </table> </form>

　　

　　我们再来看看代码是如何实现的，下面是整个项目布局

　　其实代码不复杂，最关键的是TagElementBuilder.cs这个类

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161

using  System; using  System.Linq; using  System.Web; using  System.Web.Mvc;   namespace  NS.Utility.EasyUI {      public  abstract  class  TagElementBuilder<T> : IHtmlString  where  T :  class      {          #region 私有变量          private  TagBuilder tagBuilder;          #endregion            #region 公有属性          /// <summary>          /// 组件Tag标签类型.包括input,select,label等          /// </summary>          public  abstract  string  TagName {  get ; }            /// <summary>          /// Tag标签组装类          /// </summary>          protected  TagBuilder TagBuilder          {              get              {                  if  ( this .tagBuilder !=  null )                      return  this .tagBuilder;                  return  this .tagBuilder =  new  TagBuilder(TagName);              }          }                   #endregion            #region 私有方法          /// <summary>          /// 判断class名称是否存在          /// </summary>          /// <param name="className"></param>          /// <returns></returns>          private  bool  ContainsClass( string  className)          {              string  classs;              if  (!TagBuilder.Attributes.TryGetValue( "class" ,  out  classs))              {                  return  false ;              }                var  classArray = classs.Split( new [] {  ' '  }, StringSplitOptions.RemoveEmptyEntries).ToArray();              return  classArray.Any(i =>  string .Equals(i, className, StringComparison.OrdinalIgnoreCase));          }          #endregion            #region 公有方法            /// <summary>          /// 设置ID属性值          /// </summary>          /// <param name="id"></param>          /// <returns></returns>          public  T ID( string  id)          {              this .TagBuilder.GenerateId(id);              return  this  as  T;          }            /// <summary>          /// 设置Name属性值          /// </summary>          /// <param name="name"></param>          /// <returns></returns>          public  T Name( string  name)          {              this .TagBuilder.MergeAttribute( "name" , name,  true );              return  this  as  T;          }            /// <summary>          /// 设置Attribute属性列表          /// </summary>          /// <param name="key"></param>          /// <param name="value"></param>          /// <param name="replaceExisting"></param>          /// <returns></returns>          public  T Attribute( string  key,  string  value,  bool  replaceExisting =  false )          {              this .TagBuilder.MergeAttribute(key, value, replaceExisting);              return  this  as  T;          }            /// <summary>          /// 增加class属性值          /// </summary>          /// <param name="className"></param>          /// <returns></returns>          public  T AddClass( string  className)          {              if  ( string .IsNullOrWhiteSpace(className))              {                  return  this  as  T;              }                if  (ContainsClass(className))              {                  return  this  as  T;              }                TagBuilder.AddCssClass(className);              return  this  as  T;          }            /// <summary>          /// 删除class属性值          /// </summary>          /// <param name="className"></param>          /// <returns></returns>          public  T RemoveClass( string  className)          {              if  ( string .IsNullOrWhiteSpace(className))              {                  return  this  as  T;              }                if  (!ContainsClass(className))              {                  return  this  as  T;              }                var  classs = TagBuilder.Attributes[ "class" ];                var  classArray = classs.Split( new [] {  ' '  }, StringSplitOptions.RemoveEmptyEntries)                  .Where(i =>  string .Equals(i, className, StringComparison.OrdinalIgnoreCase));                TagBuilder.Attributes[ "class" ] =  string .Join( " " , classArray);              return  this  as  T;          }            /// <summary>          /// 合并class属性值          /// </summary>          /// <param name="className"></param>          /// <returns></returns>          public  T ToggleClass( string  className)          {              if  ( string .IsNullOrWhiteSpace(className))              {                  return  this  as  T;              }                return  ContainsClass(className) ? RemoveClass(className) : AddClass(className);          }          #endregion            #region 抽象方法          /// <summary>          /// 返回HTML编码的字符串(子类必须重写)          /// </summary>          /// <returns></returns>          public  abstract  string  ToHtmlString();          #endregion      } }

　　

　　再看看具体是如何实现的？

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215

using  System; using  System.Collections.Generic; using  System.Linq; using  System.Text; using  System.Web.Mvc; using  System.Web.Mvc.Html;   namespace  NS.Utility.EasyUI {      public  class  ComboBoxBuilder : TagElementBuilder<ComboBoxBuilder>      {          #region 私有变量          private  bool  required =  false ;          private  string  valueField =  string .Empty;          private  string  textField =  string .Empty;          private  string  groupField =  string .Empty;          private  string  groupFormatter =  string .Empty;          private  EasyUIComboBoxMode mode = EasyUIComboBoxMode.local;          private  string  url =  string .Empty;          private  EasyUIComboBoxMethod method = EasyUIComboBoxMethod.post;          private  string  data =  string .Empty;          private  string  filter =  string .Empty;          private  string  formatter =  string .Empty;          private  string  loader =  string .Empty;          private  string  loadFilter =  string .Empty;            private  string  onBeforeLoad =  string .Empty;          private  string  onLoadSuccess =  string .Empty;          private  string  onLoadError =  string .Empty;          private  string  onSelect =  string .Empty;          private  string  onUnselect =  string .Empty;          #endregion            #region 公有方法          public  ComboBoxBuilder Required( bool  required)          {              this .required = required;              return  this ;          }          public  ComboBoxBuilder ValueField( string  valueField)          {              this .valueField = valueField;              return  this ;          }          public  ComboBoxBuilder TextField( string  textField)          {              this .textField = textField;              return  this ;          }