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
;
}
|