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来实现。

 

　　另外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方法中实现。创建外层的< DIV >跟结束的< /DIV >我们交给了RenderBeginTag跟RenderEndTag去实现而无需重写。

 

　　CompositeControl的呈现

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