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 }
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 }
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 }
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 }
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标签扩展,这里已有属性如果各位觉得不需要的话,可以删除,删除的时候有三个地方要改:控件类,控件解析类,控件属性排序类