JQuery EasyUI类库,大家不会陌生,出来已经有很多年了。个人感觉还是很好用的,作者更新频率也很快,bug也及时修复。
最近在整理以前的代码,找到了这个组件,它是将EasyUI组件封装成MVC控件,这样我们就可以不用写那些html标签了,我们先看看调用方式
<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这个类
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 } }
再看看具体是如何实现的?
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; } public ComboBoxBuilder GroupField(string groupField) { this.groupField = groupField; return this; } public ComboBoxBuilder GroupFormatter(string groupFormatter) { this.groupFormatter = groupFormatter; return this; } public ComboBoxBuilder Mode(EasyUIComboBoxMode mode) { this.mode = mode; return this; } public ComboBoxBuilder Url(string url) { this.url = url; return this; } public ComboBoxBuilder Method(EasyUIComboBoxMethod method) { this.method = method; return this; } public ComboBoxBuilder Data(string data) { this.data = data; return this; } public ComboBoxBuilder Filter(string filter) { this.filter = filter; return this; } public ComboBoxBuilder Formatter(string formatter) { this.formatter = formatter; return this; } public ComboBoxBuilder Loader(string loader) { this.loader = loader; return this; } public ComboBoxBuilder LoadFilter(string loadFilter) { this.loadFilter = loadFilter; return this; } public ComboBoxBuilder OnBeforeLoad(string onBeforeLoad) { this.onBeforeLoad = onBeforeLoad; return this; } public ComboBoxBuilder OnLoadSuccess(string onLoadSuccess) { this.onLoadSuccess = onLoadSuccess; return this; } public ComboBoxBuilder OnLoadError(string onLoadError) { this.onLoadError = onLoadError; return this; } public ComboBoxBuilder OnSelect(string onSelect) { this.onSelect = onSelect; return this; } public ComboBoxBuilder OnUnselect(string onUnselect) { this.onUnselect = onUnselect; return this; } #endregion #region TagElementBuilder 重写属性和方法 public override string TagName { get { return "input"; } } public override string ToHtmlString() { //参考格式:<input id="cc" class="easyui-combobox" name="dept" data-options="valueField:'id',textField:'text',url:'get_data.php'" /> //拼接class属性值 TagBuilder.AddCssClass("easyui-combobox"); //拼接data-options属性值 List<string> listAttri = new List<string>(); //开始拼接各种属性值 if (this.required == true) { //是否必输项 listAttri.Add(string.Format("required:{0}", this.required.ToString().ToLower())); } if (string.IsNullOrEmpty(this.valueField) == false) { listAttri.Add(string.Format("valueField:'{0}'", this.valueField)); } if (string.IsNullOrEmpty(this.textField) == false) { listAttri.Add(string.Format("textField:'{0}'", this.textField)); } if (string.IsNullOrEmpty(this.groupField) == false) { } if (this.mode != EasyUIComboBoxMode.local) { } if (string.IsNullOrEmpty(this.url) == false) { listAttri.Add(string.Format("url:'{0}'", this.url)); } if (this.method == EasyUIComboBoxMethod.get) { } if (string.IsNullOrEmpty(this.data) == false) { } if (string.IsNullOrEmpty(this.filter) == false) { } if (string.IsNullOrEmpty(this.formatter) == false) { } if (string.IsNullOrEmpty(this.loader) == false) { } if (string.IsNullOrEmpty(this.loadFilter) == false) { } //开始拼接各种事件 if (string.IsNullOrEmpty(this.onBeforeLoad) == false) { } if (string.IsNullOrEmpty(this.onLoadSuccess) == false) { } if (string.IsNullOrEmpty(this.onLoadError) == false) { } if (string.IsNullOrEmpty(this.onSelect) == false) { } if (string.IsNullOrEmpty(this.onUnselect) == false) { } string dataOptions = string.Join(",", listAttri.ToArray()); TagBuilder.Attributes.Add("data-options", dataOptions); var builder = new StringBuilder(); var tagHtml = TagBuilder.ToString(TagRenderMode.SelfClosing); builder.AppendLine(tagHtml); return new MvcHtmlString(builder.ToString()).ToHtmlString(); } #endregion } }
看,其实并不复杂吧,完整源码是必须提供的
源码下载方式
1,关注微信公众号:小特工作室(也可直接扫描签名处二维码)
2,发送:示例4011
即可下载
1,关注微信公众号:小特工作室(也可直接扫描签名处二维码)
2,发送:示例4011
即可下载