控件的显示自然会离不开输出htmlcssjavascript等前台的显示内容所以开发一个控件的时候第一件事就是要知道如何输出客户端要显示的内容
一选择基类
中所有的标准控件都可以拿过来作为基类如果我们要开发的控件只是对原有的标准控件做一些功能上的加强的话（如你对TreeView的CheckBox添加一些随动的功能）就可以直接拿标准控件过来作为基类
一般的如果开发的控件从标准里面找不到合适的可以从三个类中来继承
SystemWebUIControl
SystemWebUIWebControlsWebControl
SystemWebUIWebControlsCompositeControl
下面介绍下这三个类的关系跟区别
Control:只提供简单的呈现没有对css的支持如Literal控件
WebControl:建立了对控件外观的支持适合可视化的控件来继承 如Button
CompositeControl:是派生多个控件复合的适合开发应用中的标准控件
三者的关系Control是所有控件的基类 WebControl是从Control中继承而来CompositeControl是从WebControl中继承而来
二如何呈现
Control的呈现
Control类中的呈现是通过方法Render来实现的Render的原型
protected internal virtual void Render(HtmlTextWriter writer){}
HtmlTextWriter writer 参数是在运行时有调用Render方法的框架所提供所以我们可以同过重写Render方法来实现内容的呈现
HelloWorld示例
public class HelloWorld : Control
{
protected override void Render(HtmlTextWriter writer)
{
writerWriteLine(Henllo World);
}
}
编译之后在新的项目中添加对dll文件的使用会呈现出Hello World
Control输出html内容
在Render方法中我们要实现输出html标签跟样式可以借助于HtmlTextWriterTagHtmlTextWriterAttributeHtmlTextWriterStyle这三个枚举来实现HtmlTextWriterTag是表示Html标签HtmlTextWriterAttribute是表示标签上的属性HtmlTextWriterStyle是表示样式
Picture示例
public class PicShow : Control
{
protected override void Render(HtmlTextWriter writer)
{
writerAddStyleAttribute(HtmlTextWriterStyleTextAlign center);
writerAddStyleAttribute(HtmlTextWriterStyleHeight px);
writerAddStyleAttribute(HtmlTextWriterStyleWidth px);
writerRenderBeginTag(HtmlTextWriterTagDiv);
//Create Img Tag
writerAddAttribute(HtmlTextWriterAttributeSrc 你的图片地址);
writerAddStyleAttribute(HtmlTextWriterStyleWidth px);
writerAddStyleAttribute(HtmlTextWriterStyleHeight px);
writerRenderBeginTag(HtmlTextWriterTagImg);
writerRenderEndTag();
//End Of Div
writerRenderEndTag();
}
}
当你指定好上面的图片地址后就可以显示出指定的图片同过查看源文件我们可以发现客户端生成的源代码就是我们所要创建的html内容
WebControl的呈现
WebControl的呈现分为三步呈现开始标签呈现标签中的内容呈现结束标签分别实现的方法为RenderBeginTagRenderContentsRenderEndTagRenderBeginTag所生成的标签是有WebControlTagKey或则WebControlTagName属性来决定的WebControlTagKey的默认呈现标签为<span>所以如果我们要改变刚开始的呈现标签可以通过重写WebControlTagKey或则WebControlTagName来实现
注意的就是通常我们要对外围的标签进行控制时我们不会去重写RenderBeginTag方法而是去重写TagKey属性另外如果我们重写了RenderBeginTag方法就一定要去重写RenderEndTag方法
另外WebControl提供了AddAttributeToRender方法来添加控件的属性需要注意的一点你重写AddAttributeToRender方法添加属性时也要去调用baseAddAttributeToRender方法
我们用WebControl来实现上面的PicShow控件
public class PictureWeb : WebControl
{
protected override HtmlTextWriterTag TagKey
{
get
{
return HtmlTextWriterTagDiv;
}
}
protected override void AddAttributesToRender(HtmlTextWriter writer)
{
baseAddAttributesToRender(writer);
writerAddStyleAttribute(HtmlTextWriterStyleTextAlign center);
writerAddStyleAttribute(HtmlTextWriterStyleWidth px);
writerAddStyleAttribute(HtmlTextWriterStyleHeight px);
}
protected override void RenderContents(HtmlTextWriter writer)
{
writerAddAttribute(HtmlTextWriterAttributeSrc你的图片地址);
writerAddStyleAttribute(HtmlTextWriterStyleWidth px);
writerAddStyleAttribute(HtmlTextWriterStyleHeight px);
writerRenderBeginTag(HtmlTextWriterTagImg);
writerRenderEndTag();
}
}
在上面的代码中我们首先要创建div标签所以修改TagKey属性为了给外层的div添加属性所以重写了AddAttributesToRender方法最后在呈现的Img在RenderContents方法中实现创建外层的<div>跟结束的</div>我们交给了RenderBeginTag跟RenderEndTag去实现而无需重写
CompositeControl的呈现
因为CompositeControl继承于WebControl所以也有属性TagKey来决定开始的标签我们要实现CompositeControl的呈现只需添加域即可以如我们的控件需要有TextBox控件可以表示为private TextBox _txtInput然后通过重写CreateChildControls方法通过thisControlsAdd方法来呈现
