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