借助控件本身的Render()实现DesignTimeHtml的生成

王朝asp·作者佚名 2006-01-09

宽屏版字体: 小|中|大|超大

续上文http://http://www.cnblogs.com/piglikefly/posts/40707.aspx

ControlDesigner中，DesignTimeHtml的Get流程

先来个简单的Control

using System;

using System.Web.UI;

using System.Web.UI.Design;

using System.Web.UI.WebControls;

using System.Drawing;

using System.Drawing.Design ;

using System.ComponentModel;

namespace Flying.Pig.WebControl

{

[

Designer("Flying.Pig.WebControl.SimpleControlDesigner"),

]

public class SimpleControl: Control

{

protected override void Render(HtmlTextWriter writer)

{

base.Render (writer); // 进程监视时设置断点

}

public class SimpleControlDesigner : ControlDesigner

{

public override string GetDesignTimeHtml()

{

return base.GetDesignTimeHtml (); // 进程监视时设置断点

}

显然，这个Control什么都做不了。写它的目的是为了追踪System.Web.UI.Design.ControlDesigner.GetDesignTimeHtml()究竟做了什么事。

编译->放到工具箱->启动另一个IDE->创建一个Web应用程序->回到控件编辑的IDE->启动进程监视->设置断点（断点位置见代码）->回到Web应用程序IDE->把SimpleControl扔到Webform1里

然后你发现了什么？对，没错，DesignTimeHtml的Get流程：

首先，IDE检查SimpleControlDesigner的GetDesignTimeHtml()，

然后根据SimpleControlDesigner.GetDesignTimeHtml()指示，调用base.GetDesignTimeHtml()，也就是System.Web.UI.Design.ControlDesigner的GetDesignTimeHtml()

那么ControlDesigner的GetDesignTimeHtml()做了什么呢？原来它和运行时刻一样（其实还是有一些区别的，我以后再详细解释），搞了一个HtmlTextWriter，请求SimpleControl.Render()生成Html，以便在IDE里显示。

至此，我们可以发现，除了自己一行行的拼凑外，也可以让控件本身的Render()来生成DesignTimeHtml。

抛弃GetDesignTimeHtml()

现在来做个不需要实现GetDesignTimeHtml()方法，或者连ControlDesigner都不用，却能提供丰富灵活的DesignTime呈现的WebControl

using System;

using System.Web.UI;

using System.Web.UI.Design;

using System.Web.UI.WebControls;

using System.Drawing;

using System.Drawing.Design ;

using System.ComponentModel;

namespace Flying.Pig.WebControls

{

public class SimpleControl: WebControl

{

private Label label;

public SimpleControl()

{

Text = "SimpleControl";

}

public string Text

{

get

{

EnsureChildControls();

return label.Text;

}

set

{

EnsureChildControls();

label.Text = value;

}

protected override void CreateChildControls()

{

Controls.Clear();

label = new Label();

Controls.Add(label);

base.CreateChildControls ();

}

下面是SimpleControl的设计时及运行时的效果，

设计时：

图中SimpleControl的属性设置为

<cc1:SimpleControl

id="SimpleControl2"

runat="server"

style="Z-INDEX: 101; LEFT: 32px; POSITION: absolute; TOP: 32px"

Text="我的SimpleControl"

Font-Size="10.5pt"

Width="120px"

Height="128px"

BackColor="Linen"

BorderWidth="1px"

Font-Bold="True"

</cc1:SimpleControl>

运行效果：

子控件的样式处理

再来个稍复杂点的控件 CaptionText。

using System;

using System.Web.UI;

using System.Web.UI.Design;

using System.Web.UI.WebControls;

using System.Drawing;

using System.Drawing.Design ;

using System.ComponentModel;

namespace Flying.Pig.WebControls

{

public class CaptionTextBox: WebControl

{

private Label label;

private TextBox textBox;

private Table table;

public CaptionTextBox()

{

Caption = "Caption";

Text = "Text";

}

public string Caption

{

get

{

EnsureChildControls();

return label.Text;

}

set

{

EnsureChildControls();

label.Text = value;

}

public string Text

{

get

{

EnsureChildControls();

return textBox.Text;

}

set

{

EnsureChildControls();

textBox.Text = value;

}

/**//// <summary>

/// Render前的预处理。

/// 在这个控件的预处理是把控件样式应用到子控件。

/// </summary>

private void DoPreRender()

{

EnsureChildControls();

// 重置子控件样式

table.ControlStyle.Reset();

textBox.ControlStyle.Reset();

label.ControlStyle.Reset();

table.ApplyStyle(ControlStyle);

// 对于label和text只应用控件的字体样式

textBox.Font.MergeWith(ControlStyle.Font);

label.Font.MergeWith(ControlStyle.Font);

}

protected override void CreateChildControls()

{

Controls.Clear();

label = new Label();

textBox = new TextBox();

table = new Table();

TableRow row = new TableRow();

row.Cells.Add(new TableCell());

row.Cells[0].Controls.Add(label);

row.Cells[1].Controls.Add(textBox);

table.Rows.Add(row);

Controls.Add(table);

base.CreateChildControls ();

}

protected override void OnPreRender(EventArgs e)

{

DoPreRender();

base.OnPreRender (e);

}

protected override void Render(HtmlTextWriter writer)

{

if (Page != null && Page.Site != null && Page.Site.DesignMode)

{

// 由于DesignMode下的Render过程不调用OnPreRender，所以需对诸如样式之类的属性进行处理。

DoPreRender();

}

base.Render (writer);

}

设计时效果：

图中控件的属性为

<cc1:CaptionTextBox

id="CaptionTextBox1"

style="Z-INDEX: 102; LEFT: 16px; POSITION: absolute; TOP: 16px"

runat="server"

Width="320px"

Caption="姓名："

Text="朱爱飞"

Font-Size="10.5pt"

BackColor="PeachPuff"

Height="72px">

</cc1:CaptionTextBox>

运行时效果

CaptionText 演示在设计模式下，对嵌套子控件的样式处理，详情参见代码中的Render及DoPreRender方法。

今天是头一次以Blog的方式写心得，再加上我原本就是个思路不太清楚的，所以表达的很乱。见谅见谅。