????? 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標簽擴展,這里已有屬性如果各位覺得不需要的話,可以刪除,刪除的時候有三個地方要改:控件類,控件解析類,控件屬性排序類
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
