Web表单设计器主要是利用WebBrowser控件,对网页文件进行编辑,最后上传到IIS当中,供Web应用程序使用(Web应用程序在运行时,会对Html元素中的扩展属性进行解析,完成操作).
设计器操作网页主要是利用 IHTMLDocument2 对象,他是WebBrowser加载网页之后,从WebBrowser.Document.DomDocument属性取得的.加载网页完成后必须将IHTMLDocument2对象的designMode属性设置为:On,意思是开启对网页的设计.
下面我说明下关键点,主要是WebBrowser中Html元素获取,Html元素与控件实体转换,控件实体属性排序等
1
//
取得当前选择的Html元素
2
3
private
IHTMLElement GetElementUnderCaret()
4
{
5
IHTMLElement element
=
null
;
6
7
IHTMLTxtRange rg
=
null
;
8
IHTMLControlRange ctlRg
=
null
;
9
switch
(doc.selection.type)
10
{
11
case
"
None
"
:
12
case
"
Text
"
:
13
rg
=
doc.selection.createRange()
as
IHTMLTxtRange;
14
15
if
(rg
!=
null
)
16
{
17
rg.collapse(
true
);
18
element
=
rg.parentElement();
19
}
20
break
;
21
case
"
Control
"
:
22
ctlRg
=
doc.selection.createRange()
as
IHTMLControlRange;
23
element
=
ctlRg.commonParentElement();
24
break
;
25
}
26
27
return
element;
28
}
1
///
<summary>
2
///
将Html元素转换为控件实体
3
///
</summary>
4
///
<param name="htmlControl">
当前选择的Html元素
</param>
5
///
<returns></returns>
6
public
IControl GetControl(IHTMLElement htmlControl)
7
{
8
if
(htmlControl
==
null
)
return
null
;
9
if
(
!
(htmlControl
is
HTMLButtonElement))
10
return
null
;
11
12
_htmlButton
=
htmlControl
as
HTMLButtonElement;
13
this
._htmlControl
=
htmlControl;
14
15
if
(
this
._button
==
null
)
this
._button
=
new
WebFormDesigner.ControlOperation.PropertySort.Button();
16
17
//
将Html元素属性值设置到控件实体属性
18
if
(
this
._htmlButton.id
!=
null
&&
this
._htmlButton.id.Trim()
!=
""
)
19
{
20
this
._button.Id
=
this
._htmlButton.id;
21
this
._button.Name
=
this
._htmlButton.id;
22
}
23
if
(
this
._htmlButton.title
!=
null
&&
this
._htmlButton.title.Trim()
!=
""
)
24
this
._button.Title
=
this
._htmlButton.title;
25
if
(
this
._htmlButton.value
!=
null
&&
this
._htmlButton.value.Trim()
!=
""
)
26
this
._button.Value
=
this
._htmlButton.value;
//
this._htmlControl.getAttribute("value", 0) as string;
27
if
(
this
._htmlButton.getAttribute(
"
buttontype
"
,
0
)
!=
null
&&
this
._htmlButton.getAttribute(
"
buttontype
"
,
0
).ToString()
!=
""
)
28
this
._button.ButtonType
=
this
._htmlButton.getAttribute(
"
buttontype
"
,
0
).ToString();
29
else
30
this
._htmlButton.removeAttribute(
"
buttontype
"
,
0
);
31
this
._button.ToDataEx
=
WebFormDesigner.ControlOperation.Evaluate.Parameters.ConvertFormString(
this
._htmlButton.getAttribute(
"
todataex
"
,
0
)
as
string
);
32
if
(
this
._htmlButton.accessKey
!=
null
&&
this
._htmlButton.accessKey.Trim()
!=
""
)
33
this
._button.AccessKey
=
this
._htmlButton.accessKey;
//
.getAttribute("accesskey", 1) as string;
34
if
(
this
._htmlButton.tabIndex
!=
0
)
35
this
._button.TabIndex
=
this
._htmlButton.tabIndex;
//
Int32.Parse(.getAttribute("tabindex", 0).ToString());
36
if
(
this
._htmlButton.className
!=
null
&&
this
._htmlButton.className.Trim()
!=
""
)
37
this
._button.Class
=
this
._htmlButton.className;
38
this
._button.Style
=
new
CustomStyle(
this
._htmlButton.style);
39
return
this
._button;
40
}
1
///
<summary>
2
///
将控件实体转换为Html元素
3
///
</summary>
4
///
<param name="control"></param>
5
///
<returns></returns>
6
public
IHTMLElement GetHtmlControl(IControl control)
7
{
8
if
(control
==
null
||
!
(control
is
PropertySort.Button))
return
null
;
9
this
._button
=
control
as
PropertySort.Button;
10
11
if
(
this
._htmlControl
==
null
||
this
._htmlButton
==
null
)
return
null
;
12
13
//
将控件实体属性值设置到Html元素属性
14
if
(
this
._button.Id
!=
null
&&
this
._button.Id
!=
""
)
15
{
16
this
._htmlButton.id
=
this
._button.Id;
17
this
._htmlButton.name
=
this
._button.Id;
18
}
19
if
(
this
._button.Title
!=
null
&&
this
._button.Title.Trim()
!=
""
)
20
this
._htmlButton.title
=
this
._button.Title;
21
if
(
this
._button.Value
!=
null
&&
this
._button.Value.Trim()
!=
""
)
22
this
._htmlButton.value
=
this
._button.Value;
23
if
(
this
._button.ButtonType
==
null
)
24
this
._htmlButton.removeAttribute(
"
buttontype
"
,
0
);
25
else
26
this
._htmlButton.setAttribute(
"
buttontype
"
,
this
._button.ButtonType,
0
);
27
this
._htmlButton.setAttribute(
"
todataex
"
,
this
._button.ToDataEx.ToString(),
0
);
28
if
(
this
._button.AccessKey
!=
null
&&
this
._button.AccessKey.ToString().Trim()
!=
""
)
29
this
._htmlButton.accessKey
=
this
._button.AccessKey;
30
if
(
this
._button.TabIndex
!=
0
)
31
this
._htmlButton.tabIndex
=
short
.Parse(
this
._button.TabIndex.ToString());
32
if
(
this
._button.Class
!=
null
&&
this
._button.Class.Trim()
!=
""
)
33
this
._htmlButton.className
=
this
._button.Class;
34
return
this
._htmlControl;
35
}
对实体类属性进行排序显示,必须继承要排序的实体类,并实现ICustomTypeDescriptor接口
1
class
Button : Control.Button, ICustomTypeDescriptor
其中最重要的方法就是GetProperties
1
public
PropertyDescriptorCollection GetProperties(Attribute[] attributes)
2
{
3
string
[] sortName
=
new
string
[] {
"
CtlType
"
,
"
Id
"
,
"
Title
"
,
"
Value
"
,
"
ButtonType
"
,
"
ToDataEx
"
,
"
AccessKey
"
,
"
TabIndex
"
,
"
Class
"
,
"
Style
"
};
4
PropertyDescriptorCollection tmpPDC
=
TypeDescriptor.GetProperties(
typeof
(Control.Button), attributes);
5
return
tmpPDC.Sort(sortName);
6
}
既然是开源,废话我就不说了,自己看代码.只说明一点,控件自定义属性要与前台(Web应用程序,目前不开源)结合来用,需要各位自己做前台html标签扩展,这里已有属性如果各位觉得不需要的话,可以删除,删除的时候有三个地方要改:控件类,控件解析类,控件属性排序类
