asp.net 控件开发（一）---显示控件内容

asp.net控件的显示自然会离不开输出html、css、javascript等前台的显示内容，所以开发一个控件的时候第一件事就是要知道如何输出客户端要显示的内容。

一、选择基类

asp.net中所有的标准控件都可以拿过来作为基类，如果我们要开发的控件只是对原有的标准控件做一些功能上的加强的话（如：你对TreeView的CheckBox添加一些随动的功能），就可以直接拿标准控件过来作为基类。

一般的如果开发的控件从标准里面找不到合适的，可以从三个类中来继承：

System.Web.UI.Control
System.Web.UI.WebControls.WebControl
System.Web.UI.WebControls.CompositeControl

下面介绍下这三个类的关系跟区别：

Control:只提供简单的呈现，没有对css的支持。如：Literal控件
WebControl:建立了对控件外观的支持。适合可视化的控件来继承 ，如：Button
CompositeControl:是派生多个控件复合的。适合开发应用asp.net中的标准控件。
三者的关系：Control是asp.net所有控件的基类 ，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)
{
writer.WriteLine("Henllo World");
}
}

编译之后，在新的项目中添加对dll文件的使用，会呈现出"Hello World"。

Control输出html内容

在Render方法中我们要实现输出html标签跟样式可以借助于：HtmlTextWriterTag、HtmlTextWriterAttribute、HtmlTextWriterStyle这三个枚举来实现。HtmlTextWriterTag是表示Html标签，HtmlTextWriterAttribute是表示标签上的属性,HtmlTextWriterStyle是表示样式。 Picture示例：

public class PicShow : Control
{

protected override void Render(HtmlTextWriter writer)
{
writer.AddStyleAttribute(HtmlTextWriterStyle.TextAlign, "center");
writer.AddStyleAttribute(HtmlTextWriterStyle.Height, "100px");
writer.AddStyleAttribute(HtmlTextWriterStyle.Width, "100px");
writer.RenderBeginTag(HtmlTextWriterTag.Div);

//Create Img Tag
writer.AddAttribute(HtmlTextWriterAttribute.Src, "你的图片地址");
writer.AddStyleAttribute(HtmlTextWriterStyle.Width, "80px");
writer.AddStyleAttribute(HtmlTextWriterStyle.Height, "80px");
writer.RenderBeginTag(HtmlTextWriterTag.Img);
writer.RenderEndTag();
//End Of Div
writer.RenderEndTag();
}
}

当你指定好上面的图片地址后，就可以显示出指定的图片。同过查看源文件我们可以发现客户端生成的源代码就是我们所要创建的html内容。

WebControl的呈现

WebControl的呈现分为三步：呈现开始标签、呈现标签中的内容、呈现结束标签，分别实现的方法为：RenderBeginTag、RenderContents、RenderEndTag。RenderBeginTag所生成的标签是有WebControl.TagKey或则WebControl.TagName属性来决定的。WebControl.TagKey的默认呈现标签为,所以如果我们要改变刚开始的呈现标签可以通过重写WebControl.TagKey或则WebControl.TagName来实现。

注意的就是通常我们要对外围的标签进行控制时我们不会去重写RenderBeginTag方法，而是去重写TagKey属性。另外如果我们重写了RenderBeginTag方法就一定要去重写RenderEndTag方法。

另外WebControl提供了AddAttributeToRender方法来添加控件的属性。需要注意的一点你重写AddAttributeToRender方法添加属性时，也要去调用base.AddAttributeToRender方法。
我们用WebControl来实现上面的PicShow控件：

public class PictureWeb : WebControl
{
protected override HtmlTextWriterTag TagKey
{
get
{
return HtmlTextWriterTag.Div;
}
}
protected override void AddAttributesToRender(HtmlTextWriter writer)
{
base.AddAttributesToRender(writer);
writer.AddStyleAttribute(HtmlTextWriterStyle.TextAlign, "center");
writer.AddStyleAttribute(HtmlTextWriterStyle.Width, "100px");
writer.AddStyleAttribute(HtmlTextWriterStyle.Height, "100px");
}
protected override void RenderContents(HtmlTextWriter writer)
{
writer.AddAttribute(HtmlTextWriterAttribute.Src,"你的图片地址");
writer.AddStyleAttribute(HtmlTextWriterStyle.Width, "80px");
writer.AddStyleAttribute(HtmlTextWriterStyle.Height, "80px");
writer.RenderBeginTag(HtmlTextWriterTag.Img);
writer.RenderEndTag();   
}
}

在上面的代码中我们首先要创建div标签，所以修改TagKey属性，为了给外层的div添加属性所以重写了AddAttributesToRender方法，最后在呈现的Img在RenderContents方法中实现。创建外层的跟结束的我们交给了RenderBeginTag跟RenderEndTag去实现而无需重写。

CompositeControl的呈现因为CompositeControl继承于WebControl所以也有属性TagKey来决定开始的标签。我们要实现CompositeControl的呈现只需添加域即可以，如我们的控件需要有TextBox控件可以表示为：private TextBox _txtInput。然后通过重写CreateChildControls方法，通过this.Controls.Add方法来呈现。

【相关文章】