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
- }
- }
看,其实并不复杂吧,完整源码是必须提供的
来源: http://www.cnblogs.com/xiyang1011/p/7798029.html