ASP.NET 控件开发基础

　【IT168 技术】当开发一个服务器控件时，首先要明白其内部的工作机理。其实在页面内部每一点由asp.net返回的HTML代码无论是简单的<span>标签，或者是button按钮，或者是复杂的gridview控件，都是由继承自System.Web.UI.Control的对象生成的。

　　控件的属性

　　控制控件的方法大多是通过控件的属性来操作的，通过控制服务器控件的属性，就可以相应的改变服务器生成的html.

　　下面是一个服务器控件的属性:

　　

图1 服务器控件属性

　　在Visual Studio里，当通过属性窗口来改变控件的属性时，VS会自动将属性添加到对应的aspx的HTML里，而在html内添加属性时，在属性窗口里也会对应显示更改过的属性视图比如：

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

< asp:Button  ID ="Button1"  runat ="server"  Text ="Button"  CommandName ="cName"   />

 

　　在属性窗口里会对应显示，如下：

　　

图2 属性窗口

　　当然某些控件的属性会略有不同，比如常用的Label控件：

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

< asp:Label  ID ="Label1"  runat ="server" >

 

　　这里是Text属性</asp:Label>

　　在开始符号和结束符号之间的内容会被设置成Text属性.

　　当然，最实用也是我们最常用的是通过C#以编程的方式动态的修改控件的属性.这就不说了.

内容导航

　　控件的方法

　　控件通过方法来操作更加复杂的控件操作，通常在控件的方法内部会有很复杂的过程，一般包括几个内部函数和属性的组合.比如：

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

private   void  LoadDropDownList()

{

ArrayList list  =   new  ArrayList();

list.Add( " Hello " );

list.Add( " Goodbye " );

GridView1.DataSource  =  list;

GridView1.Databind();

}

 

　　这样，通过调用Databind()方法，就可以讲gridview和数据源进行绑定.

　　控件的事件

　　控件通过事件来通知其它类或者客户端其内部的某个状态被改变。事件是一种灵活的机制，当控件与客户端进行交互的时候，事件会通过Http Post方法和服务器进行交互，通过自动回传机制，WEB开发中的事件表现起来就会像开发Windows FORM程序一样(当然，速度是无法和Form相比的)

　　在Visual Studio中，可以在属性窗口中通过黄色的闪电图标来显示和控制控件的事件，如下：

图3  显示控制控件事件

　　当双击相应的事件后，会在后台产生默认的处理方法，命名规则为”控件名_事件名”。

　　WEB Page本质是一个控件树

　　在aspx页面的头部将Trace="true"设置到Page后，页面会显示相应的追踪信息，在Control Tree那一节，你会发现整个页面其实就是一个控件树。

图4  WebPage本质是控件树 内容导航

　　根控件

　　OK，既然asp.net页面的本质是一个控件树，按照C#是完全面向对象的语言惯例(所有的一切都是继承于System.Object)，那么所有控件共同的父类是什么?

　　在asp.net中，所有的控件被分布在3个主要命名空间中，分别为：

　　System.Web.UI

　　System.Web.UI.WebControls

　　System.Web.UI.HtmlControls

　　它们之间的关系如下所示

图4 根控件关系

　　System.Web.UI命名空间

　　由上图可知，System.Web.UI处于继承树顶端的，而System.Web.UI.Control是所有控件的基础，所有的控件必须强制直接或者间接的继承Control类,而直接继承Control类的是Page类，以及UserControl类。

　　System.Web.UI.HtmlControls命名空间

　　在System.Web.UI.HtmlControls命名空间中的对象，通过在html标签中加入runat=”server”属性，能够将HTML中的标签转化为服务器控件。Asp.net的引擎会将的页面中的HTML标签和System.Web.UI.HtmlControls内的对象进行匹配。

图6  System.Web.UI.HtmlControls命名空间 内容导航

　　通过查看System.Web.UI.HtmlControls命名空间，我们可以发现，很多HTML对应的标签都可以通过添加runat=”server”属性转化为服务器控件，比如<table>会转化为HtmlTable对象，但像<input >标签可以通过type属性对应不同的服务器对象。当html内的标签没有和上图中的服务器控件匹配时，所有不匹配的html标签都会通过添加runat=”server”转化为HtmlGenericControl服务器控件。下面是对应的服务器控件类与HTML标签之间的对应关系:

HTML Tag	HTML Server Control
<form>	HtmlForm
<input type="text">	HtmlInputText
<input type="password">	HtmlInputText
<input type="radio">	HtmlInputRadioButton
<input type="checkbox">	HtmlInputCheckBox
<input type="submit">	HtmlInputButton
<input type="hidden">	HtmlInputHidden
<input type="button">	HtmlInputButton
<input type="image">	HtmlInputImage
<input type="file">	HtmlInputFile
<button>	HtmlButton
<select>	HtmlSelect
<textarea>	HtmlTextArea
<img>	HtmlImage
<a>	HtmlAnchor
<table>	HtmlTable
<tr>	HtmlTableRow
<td>	HtmlTableCell
其他标签	HtmlGenericControl

　　Demo:动态构建html表格

　　通过在前台设置表格的行(x)和列(y),动态的利用System.Web.UI.HtmlControls命名空间下的控件动态的进行设置表格的大小:

　　前台代码如下:

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

< h3 > HTML Controls </ h3 >

X

< input  type ="text"  id ="XTextBox"  runat ="server"   />< br  />

< br  />

Y

< input  type ="text"  id ="YTextBox"  runat ="server"   />< br  />

< br  />

< input  type ="submit"  id ="BuildTableButton"  runat ="server"

value ="Build Table"  onserverclick ="BuildTableButton_ServerClick"   />< br  />

< br  />

< span  id ="Span1"  runat ="server" ></ span >

</ div >

 

　　后台代码如下:

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

protected   void  BuildTableButton_ServerClick( object  sender, EventArgs e)

    {

         int  xDim  =  Convert.ToInt32(XTextBox.Value);

         int  yDim  =  Convert.ToInt32(YTextBox.Value);

        BuildTable(xDim, yDim);

    }

     private   void  BuildTable( int  xDim,  int  yDim)

    {

        HtmlTable table;

        HtmlTableRow row;

        HtmlTableCell cell;

        HtmlGenericControl content;

        table  =   new  HtmlTable();

        table.Border  =   1 ;

         for  ( int  y  =   0 ; y  <  yDim; y ++ )

        {

            row  =   new  HtmlTableRow();

             for  ( int  x  =   0 ; x  <  xDim; x ++ )

            {

                cell  =   new  HtmlTableCell();

                cell.Style.Add( " font " ,  " 18pt " );

                cell.Style.Add( " background-color " ,  " blue " );

                cell.Style.Add( " color " ,  " red " );

                content  =   new  HtmlGenericControl( " SPAN " );

                content.InnerHtml  =   " X: "   +  x.ToString()  +

                 " Y: "   +  y.ToString();

                cell.Controls.Add(content);

                row.Cells.Add(cell);

            }

            table.Rows.Add(row);

        }

        Span1.Controls.Add(table);

    }

 

　　这段代码通过构建HtmlTable对象，然后在其内部通过循环的方式加入tr和td.最后将结果放入标签中显示。

　　注意下面几行代码：

                cell = new HtmlTableCell();

                cell.Style.Add("font", "18pt");

                cell.Style.Add("background-color", "blue");

                cell.Style.Add("color", "red");

　　可以通过html的style属性的add方法添加CSS的键-值对应(有点HashTable的感觉)，在render(输出)到客户端的过程中会自动应用其CSS样式(注意，因为全部是string作为键和值的参数，所以要小心你的拼写)

内容导航

　　System.Web.UI.WebControls命名空间

　　在这个命名空间下封装了标准的Web控件。

　　

图7 命名空间

　　图所示,在System.Web.UI.WebControls命名空间下的控件被分成4种类型：1. 简单控件；2. 列表控件(List)；3. 富应用控件(Rich)；4. 验证控件。

　　1. 简单控件

　　简单控件有点像封装在System.Web.UI.HtmlControls命名空间里的控件，每一个控件对应一个HTML标签，TextBox除外.控件和Html标签的对应关系如下:

HTML Tag	Simple Web Control
<input type="text">	TextBox with TextMode=Single
<input type="password">	TextBox with TextMode=Password
<textarea>	TextBox with TextMode=MultiLine
<input type="checkbox">	CheckBox
<input type="radio">	RadioButton
<input type="submit">	Button
<input type="image">	ImageButton
<button>	Button
<select>	DropDownList
<select size=3>	SelectList with Rows=3
<textarea>	HtmlTextArea
<img>	Image
<a>	HyperLink, LinkButton
<table>	Table
<tr>	TableRow
<td>	TableCell
<table>	Panel
<span>	Label

　　2列表控件

　　列表控件在简单控件的基础上，增加了数据源。从CheckBoxList控件到RadioButtonList控件，在到强大的GridView控件，提供了重复生成不同HTML代码的能力.

　　3富应用控件

　　富应用控件是那些将需要大量HTML拼接起来的东西转化为简单的一个控件，最有代表性的就是Calender控件，可以通过简单的应用就可以创造出非常复杂的效果.

　　4验证控件

　　验证控件通过提供客户端以javascript为基础的验证方式来减少与服务器的交互，从而达到减少网络流量..

　　System.Web.UI.WebControls?System.Web.UI.HtmlControls?

　　这两个命名空间内有很多控件貌似是重叠的.尤其是HTML控件和asp.net的简单控件都是以控件名称和html标签进行匹配.但Asp.net控件更加丰富，所以在不是非必要的情况下，最好使用WebControl命名空间内的控件并作为基类。