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内容。