基于JQuery EasyUI的WebMVC控件封装(含源码)
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
即可下载
基于JQuery EasyUI的WebMVC控件封装(含源码)的更多相关文章
- jquery easyui datebox 时间控件默认显示当前日期的实现方法
jquery easyui datebox 时间控件默认显示当前日期的实现方法 直接class easyui-datebox后添加一个value="true"就可以
- jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法
博客分类: jquery-easyui jQueryAjax框架HTML 现象: AJAX返回的html无法做到自动渲染为EasyUI的样式.比如:class="easyui-layout ...
- 国籍控件(js源码)
国籍控件(js源码) 一直苦于没有好的国籍控件可以用,于是抽空写了一个国籍控件,现分享给大家. 主要功能和界面介绍 国籍控件主要支持中文.英文过滤以及键盘上下事件. 源码介绍 国籍控件核心是两个文件, ...
- 在Winform窗体中使用WPF控件(附源码)
原文:在Winform窗体中使用WPF控件(附源码) 今天是礼拜6,下雨,没有外出,闲暇就写一篇博文讲下如何在Winform中使用WPF控件.原有是我在百度上搜索相关信息无果,遂干脆动手自己实现. W ...
- Jquery easyui的validatebox控件和正则表达式
http://blog.csdn.net/dandanzmc/article/details/36421465 仔细观察jquery.validatebox.js文件,会发现它的验证其实还是采用的正则 ...
- Python 基于python实现的http接口自动化测试框架(含源码)
基于python实现的http+json协议接口自动化测试框架(含源码) by:授客 QQ:1033553122 欢迎加入软件性能测试交流 QQ群:7156436 由于篇幅问题,采用百度网 ...
- 打造基于jQuery的日期选择控件
终于把jQuery拼写正确了哈,哈哈javascript也是区分大小写的,所以确实不能写错,今天我来和大家分享的是日期选择控件的实现,功能也许不够强大,但是能够满足需求. 我之前也写过(正确的说是改过 ...
- 基于Jquery的文本提示控件 poshytip
Html中,如设置了title的属性,则当鼠标在该对象上面短暂的停留时,会显示预设的文本提示,但,这些效果只会短暂的显示,一会就会消失,又要重新把鼠标移出再移回来才被显示,样式也无法重写,实在是恼人之 ...
- 福利到~分享一个基于jquery的智能提示控件intellSeach.js
一.需求 我们经常会遇到[站内搜索]的需求,为了提高用户体验,我们希望能做到像百度那样的即时智能提示.例如:某公司人事管理系统,想搜索李XX,只要输入“李”,系统自然会提示一些姓李的员工,这样方便用户 ...
随机推荐
- foreach循环中为什么不要进行remove/add操作
先来看一段代码,摘自阿里巴巴的java开发手册 List<String> a = new ArrayList<String>(); a.add("1"); ...
- 深入理解String的关键点和方法
String是Java开发中最最常见的,本篇博客针对String的原理和常用的方法,以及String的在开发中常见问题做一个整体性的概括整理.因为之前对String的特性做过一些分析,所以不在详细描述 ...
- 安装 node-sass 时报错
在安装 node-sass 时报错,截图如下 解决方法如下: npm install --save node-sass --registry=https://registry.npm.taobao.o ...
- 教育,创新,提升:Indiegogo和Kickstarter上受中国用户支持的10个众筹项目
中国的经济正在迅速发展,已成为世界第二大经济体.中国家庭随着经济水平的提高,越来越多父母愿意将自己的子女送到海外留学. 家长们希望自己的子女可以有机会接受国外大学优质的教育, 以便他们将来可以学成归来 ...
- Judge Route Circle
Initially, there is a Robot at position (0, 0). Given a sequence of its moves, judge if this robot m ...
- Spring详解(七)------事务管理
PS:本篇博客源码下载链接:http://pan.baidu.com/s/1mi3NhX2 密码:3io2 1.事务介绍 事务(Transaction),一般是指要做的或所做的事情.在计算机术语中是指 ...
- ASP.Net MVC 布局页 模板页 使用方法详细说明
一.Views文件夹 -> Shared文件夹下的 _Layout.cshtml 母版页 @RenderBody 当创建基于_Layout.cshtml布局页面的视图时,视图的内容会和布局页面合 ...
- C#中的原子操作Interlocked,你真的了解吗?
阅读目录 背景 代码描述 越分析越黑暗 结语 一.背景 这个标题起的有点标题党的嫌疑[捂脸],这个事情的原委是这样的,有个Web API的站点在本地使用Release模式Run的时候出现问题,但是使用 ...
- YYModel学习总结YYClassInfo(1)
OC的run-time 机制,简直像是网络上的猫! 我在开发中很少用到,但是作为iOS开发 人家肯定会问这个东西,所以深入的学习了下. 对于 run-time的入手,YYModel的学习,简直让人美滋 ...
- 读Zepto源码之Stack模块
Stack 模块为 Zepto 添加了 addSelf 和 end 方法. 读 Zepto 源码系列文章已经放到了github上,欢迎star: reading-zepto 源码版本 本文阅读的源码为 ...