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

简介:   JQuery EasyUI类库,大家不会陌生,出来已经有很多年了。个人感觉还是很好用的,作者更新频率也很快,bug也及时修复。   最近在整理以前的代码,找到了这个组件,它是将EasyUI组件封装成MVC控件,这样我们就可以不用写那些html标签了,我们先看看调用方式 @Html.

  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>

  

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

clip_image001

  其实代码不复杂,最关键的是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
即可下载 
相关文章
|
6月前
jQuery+CSS3自动轮播焦点图特效源码
jQuery+CSS3自动轮播焦点图特效源码
60 1
jQuery+CSS3自动轮播焦点图特效源码
|
6月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
132 0
|
2天前
|
JavaScript
jQuery制作的3D冰块立方时钟动态特效源码
jQuery制作的3D冰块立方时钟动态特效源码是一段基于jQuery实现的3D魔方立方时钟效果代码,该设计非常特别,且支持数字颜色的变化,提供8款颜色选择,非常有意思,欢迎对此段代码感兴趣的朋友前来下载使用。
17 8
|
3天前
|
JavaScript
jQuery制作的网站首页宽屏导航轮播图特效源码
jQuery制作的网站首页宽屏导航轮播图特效源码是一段基于jQuery制作的可用于商城首页 微商城 互联网公司或某些电子商城的首页特效,自带有二级菜单栏、轮播图滚动、登录注册按钮等等,非常全面,欢迎对此段代码感兴趣的朋友前来下载使用。
11 4
|
3天前
|
JavaScript
jQuery实现的手风琴四季场景变换特效源码
jQuery实现的手风琴四季场景变换特效源码是一段基于jQuery实现的手风琴四季场景变换效果代码,拥有春夏秋冬四季转场特效,鼠标可放大每个季节的图像,欢迎对此段代码感兴趣的朋友前来下载使用。
8 1
|
25天前
|
移动开发 JSON 数据可视化
精选八款包括可视化CMS,jquery可视化表单,vue可视化拖拉,react可视化源码
精选八款包括可视化CMS,jquery可视化表单,vue可视化拖拉,react可视化源码
43 0
|
2月前
|
JavaScript 前端开发 UED
jQuery日历控件与假日显示
【9月更文挑战第1天】
|
4月前
|
移动开发 开发框架 JavaScript
基于Jquery WeUI的微信开发H5页面控件的经验总结(1)
基于Jquery WeUI的微信开发H5页面控件的经验总结(1)
|
4月前
|
存储 开发框架 前端开发
在EasyUI项目中使用FileBox控件实现文件上传处理
在EasyUI项目中使用FileBox控件实现文件上传处理
|
4月前
|
移动开发 JSON JavaScript
基于Jquery WeUI的微信开发H5页面控件的经验总结(2)
基于Jquery WeUI的微信开发H5页面控件的经验总结(2)