2.6 使用代码处理HTML服务器控件
在实际开发中,有时候并不能够预先知道页面需要多少个文本输入框、选择框、表的行列数或者其他控件,因为这些可能是由临时查询的数据多少或者其他原因而决定。这就要求程序能够根据需要动态生成相关控件或者改变相关控件的属性来满足系统的需要。在ASP.NET中,这些功能是非常容易实现的,你可以根据自己的需要在后台用代码来生成各种类型的控件,或者改变已有控件的属性、样式等。
2.6.1 设置Style特性和其他属性
在ASP.NET中,每个Html服务器控件都公开了自己的一组属性,可以通过在代码里设置这些属性来改变Html服务器控件的相关设置。同理,每个Html服务器控件在样式的管理方面也都提供了一个Style属性,Style属性实际上是一个样式表属性集合,通过设置Style中的属性,便能通过程序代码在程序执行过程中改变Html控件的样式。
来看一个具体的例子。首先建立一个Test.aspx页面,并在页面里添加HtmlAnchor控件mySite。代码如下所示:
<a id="mySite"runat="server"></a>
页面的HtmlAnchor控件mySite创建好之后,就可以在后台代码为它设置相关属性了。代码如下所示:
protected void Page_Load(object sender, EventArgs e)
{
//设置样式
mySite.Style["color"]="#008000";
mySite.Style["font-size"]="12pt";
mySite.Style["text-decoration"]="none";
mySite.Style["font-style"]="italic";
//设置属性
mySite.HRef="http://www.comesns.com";
mySite.InnerText="我的网站";
}
请求页面时,将为HtmlAnchor控件mySite返回如下的HTML代码:
<a href="http://www.comesns.com"id="mySite"
style="color:#008000;font-size:12pt;text-decoration:none;font-style:italic;">我的网站</a>
最后值得注意的是,CSS样式特性中还包括一些没有通过代码显示设置的信息。例如,在Visual Studio设计器中重设输入控件大小时,Visual Studio将把Height和Width属性添加到它使用的样式表中,然后这些信息将出现在最终的HTML中。
2.6.2 Attributes属性使用说明
因为HTML服务器控件不能够为每个HTML元素都公开一个分类明确的等效控件,所以可以用Attributes集合以编程的方式向任何HTML服务器控件添加标记属性,这样就能够设置未被HTML服务器控件类以声明方式公开的标记属性。
Attributes属性实质上是一个ASP.NET服务器控件(包括Html服务器控件、Web服务器控件和用户控件)的属性集合。控件的属性值与属性可以通过Attributes任意指定,ASP.NET程序会将其原样发送到浏览器解释。但这里需要注意如下两点:
1)因为可以任意指定属性,所以对于控件来说,有些指定的属性是不合法的,那么指定这种属性是无效的。例如,假设为一个名为imagel的HtmlImage控件通过Attribute给其指定一个Text属性,属性值为“风景画”。因为HtmlImage控件将会被转化为标记,而指定的Text属性将按原样发送,所以就会出现这种代码。显然,标记根本没有Text属性,所以这个属性将会被浏览器忽略,不予理睬。
2)指定属性必须为ASP.NET服务器控件对应的HTML标记所支持的属性。仍然以HtmlImage控件为例:可以通过imagel.Attributes["alt"]="描述文字"或者imagel.Alt="描述文字"的方式来指定HtmlImage控件imagel的Alt属性,使其在图像没有正确加载时,在图像位置显示图像的文字描述。但如果指定了一个不存在的属性,如imagel.Attributes["Title"]="描述文字"这种方式来设置就是错误的,这也是通常在开发中比较容易犯的错误。
2.6.3 用程序动态创建控件
要使用程序来动态创建相关控件,可以先简单地创建一个HTML服务器控件的实例,然后再像2.6.1节所讲的那样,给这个控件实例设置相关的样式与属性,最后通过Controls的Add方法把它们添加到页面上去。下面仍然以HtmlAnchor控件为例,详细示例见代码清单2-8。
代码清单2-8 Test1.aspx.cs
using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.HtmlControls;
namespace_2_4
{
public partial class Test1:System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
//创建一个HtmlAnchor控件的实例mySite
HtmlAnchor mySite=new HtmlAnchor();
//设置HtmlAnchor控件的相关样式和属性
mySite.Style["color"]="#008000";
mySite.Style["font-size"]="12pt";
mySite.Style["text-decoration"]="none";
mySite.Style["font-style"]="italic";
mySite.HRef="http://www.comesns.com";
mySite.InnerText="我的网站";
//添加HtmlAnchor控件到页面
this.Controls.Add(mySite);
}
}
}
运行程序后,你会发现其运行结果与2.6.1节中例子的运行结果完全相同,同样会为HtmlAnchor控件mySite返回如下的HTML代码:
<a href="http://www.comesns.com"id="mySite"
style="color:#008000;font-size:12pt;text-decoration:none;font-style:italic;">我的网站</a>