2.4　HTML容器控件

HtmlSelect和HtmlTextArea控件是HTML容器控件中日常开发使用最多的控件，且使用难度高于其他的容器控件。为了能够更好地掌握它们，本部分将重点讨论这两个控件的使用方法。

2.4.1　HtmlTextArea控件

HtmlTextArea控件用来控制＜textarea runat="server"＞元素，可以使用它在网页上创建一个多行文本框，文本框的尺寸由Cols和Rows属性控制。其中，Cols属性确定控件的宽度，而Rows属性确定控件的高度。如：

＜textarea id="TextArea1"cols="40"rows="4"runat="server"/＞

而在后台代码里，只要使用该控件的Value属性就可以获取到它的值，如TextArea1.Value。

与HtmlInputText控件一样，该控件也包含onserverchange事件，当控件的内容在对服务器进行发送之前更改时，将引发该事件。通常，该事件用于验证在控件中输入的文本。

2.4.2　HtmlSelect控件

HtmlSelect控件用来控制＜select runat="server"＞元素，可以使用它在网页上创建一个数据下拉列表选项框。看下面的例子，如代码清单2-6所示。

代码清单2-6 TestHtmlSelect.aspx

＜form id="form1"runat="server"＞

＜div＞

选择一个颜色：＜br/＞

＜select id="sl_Color"runat="server"＞

＜option＞SkyBlue＜/option＞

＜option＞LightGreen＜/option＞

＜option＞Gainsboro＜/option＞

＜option＞LemonChiffon＜/option＞

＜/select＞

＜input id="submit1"type="Submit"runat="server"

value="提交"onserverclick="Bt_Submit_Click"/＞

＜br/＞

＜input type="text"id="txt_Color"runat="server"/＞

＜input id="adToSelect"type="Submit"runat="server"

value="添一个颜色选项到HtmlSelect控件"

onserverclick="Bt_AddToSelect_Click"/＞

＜p/＞

＜span id="Span1"runat="server"＞颜色变换演示区域＜/span＞

＜/div＞

＜/form＞

在代码清单2-6中，需要使用sl_Color下拉列表选项框中的项(（otion)通过Bt_Submit_Click事件来为Spa n 1控件设置背景色。与此同时，还需要将txt_Color文本框里的内容通过B t_AddToSelect_Click事件动态地添加到sl_Color下拉列表选项框，以供程序选择使用。后台的实现代码如下所示：

protected void Bt_Submit_Click(object Source, EventArgs e）

{

Span1.Style["background-color"]=sl_Color.Value；

}

protected void Bt_AddToSelect_Click(object Source, EventArgs e）

{

sl_Color.Items.Add(txt_Color.Value)；

}

在上面的代码中，语句sl_Color.Items.Add(txt_Color.Value)为txt_Color控件动态添加一个颜色选项。在这里需要注意的是，Items属性属于ListItemCollection类型，因此可以访问它的Add方法将新的选项添加到下拉列表选项框中。而sl_Color.Value语句则用来获取txt_Color控件的选项值，代码的运行结果如图2-9所示。

默认情况下，此控件呈现为下拉列表选项框。但是，如果允许多重选择（通过指定Multiple属性）或为Size属性指定大于1的值，则该控件将显示为列表框。如：

＜select id="sl_Color"runat="server"size="5"＞

当给控件添加一个size="5"属性时，运行界面如图2-10所示。

图　2-9　代码清单2-6的运行结果

图　2-10　添加size=“5”属性的运行结果

其实，在实际开发中，除了可以直接在页面设置选项之外，经常还需要将该控件动态绑定到数据源，以便于在后台能够灵活地控制HtmlSelect控件的选项数据。这时，可以设置DataSource属性以指定要将其绑定到该控件的数据源。如：

ArrayList values=new ArrayList（）；

values.Add（"#0066CC"）；

values.Add（"#0099CC"）；

values.Add（"#003366"）；

sl_Color.DataSource=values；

sl_Color.DataBind（）；

在将数据源绑定到该控件后，可以通过设置DataValueField和DataTextField属性，分别指定将哪个字段绑定到控件的Value和Text属性。