自定义服务器控件完全由开发人员自行设计开发,开发人员可自定义UI、功能、属性、方法、事件等特征,常见的自定义服务器控件分为4种:复合控件、验证控件、模板控件和数据绑定控件。
(1)复合控件:该类控件包含两个或多个已存在控件。它复用了子控件提供的实现来进行控件呈现、事件处理及其他功能。
(2)验证控件:与上文所述标准服务器控件中的验证控件定义相同。
(3)模板控件:该类控件提供了一种称为模板的通用功能。模板控件本身不提供用户界面,而是通过内联模板提供,这意味着模板控件允许页面开发人员自定义该控件的用户界面。
(4)数据绑定控件:与上文所述标准服务器控件中的数据绑定控件定义相同。
本文将介绍简单在VS环境中如何创建自定义服务器控件的过程。
实例一:创建自定义控件过程
(1)创建一个测试用Web站点应用程序
首先打开Visual Studio 2005,然后,单击"文件"菜单下"新建网站..."项目。这时,将弹出如下图的对话框
在此对话框中,开发人员需要选择创建模板,位置、编程语言。如图1所示,示例采用了ASP.NET网站模板,文件系统和C#编程语言来创建。当单击"确定"按钮之后,Visual Studio 2005将在本机D:/AppTest下创建一个test1文件夹。所有应用程序文件都存储在文件夹内。默认情况下,test1文件夹内包括一个空的用于存储应用程序数据文件的App_Data文件夹,同时还分别包括一个Default.aspx和Default.aspx.cs文件。通过这一过程,创建了一个Web站点应用程序。该Web站点将用于测试所创建的Web自定义服务器控件。
(2)添加自定义控件项目
成功创建Web控件测试项目之后,创建自定义控件项目过程如下:文件/新建项目出现如下图所示对话框
在左侧“项目类型”列表中选择Visual C#节点下的Window,之后在右侧模版列表中选择“类库”设置此项目的名称和存储位置,一般为了便于管理建议建议将Web控件库项目和测试站点项目存储在同一文件夹内。
注意:在解决方案选项设置中选择添入解决方案。
Visual Studio 2005的"解决方案资源管理器"将显示如图所示内容。
解决方案资源管理器中包括两个项目。一个是前文创建的Web站点项目,另一个是名为ClassLibrary1的Web控件库项目,其中默认包括一个WebCustomControl1.cs文件。下面就可以开始编写、编译和测试自定义服务器控件了
(3)编写控件
一个简单的自定义控件此控件ShowDate控件功能实现显示当前日期标签控件,由System.Web.UI.WebControls.WebControl继承,具有一个custom属性,用于显示问候信息;例如将custom属性值设置为"Ch",则显示结果为"2006年12月30日 星期六 "。
ShowDate控件的实现代码包含在ShowDate.cs文件中。该文件源代码如下所示。
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/1327ab569c1ae82736693a50b8e33378.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/7ff8d92cded7e0ce15e7ca1acc870052.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/7ff8d92cded7e0ce15e7ca1acc870052.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/7ff8d92cded7e0ce15e7ca1acc870052.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/717446ca04a6125dc5b6b54e0fa14ab4.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/7ff8d92cded7e0ce15e7ca1acc870052.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/717446ca04a6125dc5b6b54e0fa14ab4.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/717446ca04a6125dc5b6b54e0fa14ab4.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/7ff8d92cded7e0ce15e7ca1acc870052.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/7ff8d92cded7e0ce15e7ca1acc870052.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/7ff8d92cded7e0ce15e7ca1acc870052.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/717446ca04a6125dc5b6b54e0fa14ab4.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/7ff8d92cded7e0ce15e7ca1acc870052.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/717446ca04a6125dc5b6b54e0fa14ab4.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/717446ca04a6125dc5b6b54e0fa14ab4.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/717446ca04a6125dc5b6b54e0fa14ab4.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/0196c3df5ea9e936f21e9932cca91014.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
代码说明:
基类说明:如果服务器控件需要呈现用户界面(UI)元素或任何其他客户端可见的元素,则应该从system.Web.UI.WebControls.WebControl(或派生类)派生该控件。如果控件要呈现在客户端浏览器中不可见的元素(如隐藏元素或meta元素),则应从System.Web.UI.Control派生该控件。本例显然需要呈现用户界面元素,因此,自定义服务器控件类WelcomeLabel从WebControl基类继承。由于WebControl类从Control派生,因此,WelcomeLabel控件则自动继承基类提供的成员对象,这些对象多数与用户界面元素呈现有关,例如,Font、ForeColor、BackColor、Width等等。另外,同样也是由于从WebControl继承,因此,WelcomeLabel控件还自动实现ASP.NET 2.0新增的主题和皮肤功能。实际上,由于WelcomeLabel控件与ASP.NET 2.0的内置服务器控件Label有着很多相似之处,因此,从功能实现的角度出发,最好的方式应该是使得WelcomeLabel控件类从Label类继承。然而,本例为了说明定义属性和定义属性元数据的实现方法,因此,从WebControl基类继承。
属性说明:如上原代码所示,定义了一个Custom属性,该属性的设置是对当前日期显示格式设置是中文呢还是英文。使用视图状态存储Custom属性值。使用视图状态保存回发间的Custom值。每次回发时,将重新创建页并从视图状态还原值。如果Custom值并未存储在视图状态中,则在每次回发时会将值设置为其默认的“ch”。ViewState属性继承自WebControl,是保存数据值的字典。通过使用String键,可输入和检索值。本例中将"Custom"用作键。字典中的项被类型化为Object,然后必须将其强制转换为属性类型。通常为了正确配置属性,我们不仅必须编写代码,还要分配几个特性。 特性(以粗体表示)定义了新控件将如何与设计器 (Visual Studio) 进行交互。Custom属性的特性告诉 Visual Studio 如何在设计过程中处理属性:Bindable 属性可绑定 到数据源。您可以将 属性字段链接到数据库、XML 文件或任何其他 DataSet。 Appearance 属性将显示在 Appearance 类别下的属性视图中。您可以选择想要的任何类别,包括默认类别:Appearance、Accessibility、Behavior、Data、Layout 或 Misc。只要用户选择了属性的类别组织方法,属性将会显示在 Appearance 下。DefaultValue属性具有一个空的默认值。。Description — 属性说明显示在控件列表下,并且也可能作为工具提示出现。Localizable — 它会用发送信号的方式通知 ASP.NET 2.0 Framework 该控件包括可以针对不同语言或位置进行配置的文本属性。
RenderContents方法说明:通常,在从WebControl派生控件并呈现单个元素时,应重写RenderContents方法(而不是Render方法),以呈现控件标记中的内容。在呈现控件及其样式属性的开始标记之后,WebControl的Render方法将调用RenderContents。如果重写Render方法以写入内容,则控件将丢失生成到WebControl的Render方法中的样式呈现逻辑。
在源代码中,ShowDate控件重写了继承的RenderContents方法以呈现内容。传入RenderContents方法的参数是HtmlTextWriter类型的对象,它是具有呈现标记和其他HTML(和HTML变量)标记的方法的实用工具类。
(4)编译使用自定义控件
在编写完成ShowDate控件的源代码之后,接着需要编译和测试所实现的自定义服务器控件。为了实现这一目的,开发人员需要在测试用Web站点中引用Web控件库项目输出,并编写相关代码以便测试服务器控件。
在Web站点中实现Web控件库项目引用的方法比较简单。首先,右键单击解决方案资源管理器中的Web站点项目名称,在弹出的菜单中选中"添加引用..."一项。此时,将自动弹出如图所示的窗口。
在添加引用窗口中包括5个选项卡,其中包括一个名为"项目"的选项卡。单击它可发现在其列表中包括一个上文创建的ClassLibrary1项目。选中该项并单击"确定"按钮,即可完成项目引用。
在完成项目引用后,Visual Studio 2005将自动在Web站点项目中添加一个Bin文件夹,并在其中包含了ClassLibrary1.dlll和ClassLibrary1.pdb文件。前者是控件程序集,后者中则保存着调试和项目状态信息。这样,Web站点就能够顺利使用HelloMyControl项目的输出了。如下显示了为测试WelcomeLabel控件而创建的Default.aspx文件源代码
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
页面利用@ Register指令将ShowDate控件引入,然后,通过<self:ShowDate>标记具体指示控件的位置,以及属性设置等。如图所示显示了执行Default.aspx的页面截图。
小结:本文通过一个简单的示例说明创建Asp.net服务器控件的过程,以便读者参考。