HTML服务器控件

HTML Server Controls

本书的重点是使用ASP.NET服务器控件。然而，了解和使用HTML及HTML服务器控件，对在现实中开发应用程序是有帮助的。

服务器不会处理普通的HTML控件，例如，<h1>、<a>和<input>，它们将直接被发送到客户端，由浏览器进行显示。可以为服务器提供标准的HTML控件，将它们转换为HTML服务器控件，使得它们能在服务器端处理。

将HTML控件转换为HTML服务器控件，只需简单地添加runat="server"属性。另外，可能您还会添加id属性，这样可以通过编程方式访问和控制控件。例如，下面从一个简单的输入控件开始：

您可以添加id和runat属性，将它转换为HTML服务器控件，如下所示：

基于以下两个主要原因，可选择使用HTML服务器控件，而不是ASP.NET服务器控件：

为了在ASP.NET下运行，转换现有的HTML页

为了在ASP.NET下运行转换的现有的HTML页，您须将文件的扩展名修改为.aspx。然而，HTML控件只能运行在客户端，而不是服务器端。为了获得如自动维护状态（见第6章）等服务器端处理的优势，必须为控件添加runat属性。

使用HTML表格实现页面布局

服务器端控件消耗服务器资源。通常，页面使用静态表格实现布局。除非须要引用一个或多个表格元素，否则，无须进行服务器端处理。下面的示例说明了这一要点。

在VS2005中，新建一个网站，并将其命名为HtmlServerControls。从“Toolbox”中拖动一个HTML表格控件到设计区。将该表格设置为2列6行。将一个HTML按钮拖动到页面中，并且置于表格下方。接着设置按钮的ID和runat="server"属性。

在表格第一行的第一个单元格中，输入文本字符串Name，然后在第二个单元格中，添加一个Input（文本框）控件。将Input控件的ID设置为txtName。接下来的三行与之类似，三个Input控件分别命名为txtStreet、txtCity和txtState。保留表格第5行

的空白。保留最后一行第二列的空白，并将它的ID设置为tdInnerHtml。设计视图如图3-5所示，其中标识了控件名称。

图3-5：HTML控件的页面布局

确认所有被命名的控件都设置了runat="server"属性。然而，页面上其他表格元素，既不需要ID属性，又不需要runat属性。因为，它们都用作静态显示，而无须在服务器上处理。

在设计视图中，双击按钮以便在代码隐藏文件中添加事件处理程序。输入以下突出显示的代码：

protected void btnDoIt_ServerClick(object sender, EventArgs e)

{

string strHtml = "";

strHtml += txtName.Value + "<br/>";

strHtml += txtStreet.Value + "<br/>";

strHtml += txtCity.Value + ", " + txtState.Value;

tdInnerHtml.InnerHtml = strHtml;

}

如果查看Default.aspx文件源视图中按钮的HTML代码，您将会发现，按钮包含一个onServerClick属性，而不是常规HTML或ASP页面中使用的onServer属性。这就在告知服务器：当Click事件发生时，应调用的函数是：

onServerClick="btnDoIt_ServerClick"

提示：如果希望控件在客户端处理事件，那么应使用传统的onClick属性。在这种情况下，必须提供客户端脚本来处理事件。

您可以在同一个按钮控件中，包含onClick和onServerClick属性。这种情况下，将首先执行客户端代码，而后再运行服务器端代码。本章稍后将做示范。

如果留意一下Click事件处理程序会发现，每次单击“Do It！”按钮，它都会被执行。您将看到一个HTML字符串中包含了输入文本框的值，同时，还会加上些HTML作为换行。这个字符串被指定给一个表格单元格的InnerHtml属性，该单元格id属性值为tdInnerHtml：

tdInnerHtml.InnerHtml = strHtml

如果使用InnerText属性替换InnerHtml属性，那么结果页则显示<和>符号。然而，采用这样方式，当在文本域中输入值，并单击按钮之后，结果页如图3-6所示。

图3-6：具有InnerHtml的HTML服务器控件

表3-5列举了HTML标签，以及它们属于的类别。在图3-5和3-6所示的示例中，两个输入控件的类型分别是文本域和按钮。如表3-5所示，这二者都使用了<input>这样的HTML标签，而其他输入控件则没有使用该标签。

表3-5 HTML标签及其类别

HTML标签	类别	HTML服务器控件名称	说明
<head>	容器	HtmlHead	<head>元素。可以在它的控件集合中添加其他元素
<input>	输入	HtmlInputButton HtmlInputCheckbox HtmlInputFile HtmlInputHidden HtmlInputImage HtmlInputPassword HtmlInputRadioButton HtmlInputReset HtmlInputSubmit HtmlInputText	<input type=button \| submit \| reset> <input type=checkbox> <input type=file> <input type=hidden> <input type=image> <input type=password> <input type=radio> <input type=reset> <input type=submit> <input type=text \| password>
<img>	空	HtmlImage	图片
<link>	空	HtmlLink	Href属性读取/设置URL目标
<textarea>	输入	HtmlTextArea	多行文本输入
<a>	容器	HtmlAnchor	锚标签
<button>	容器	HtmlButton	可自定义输出格式，IE 4.0及以上版本可用
<form>	容器	HtmlForm	每个页面最多只能有一个HtmlForm控件；method默认为POST
<table>	容器	HtmlTable	表格，可以包含行，行中包含单元格
<td> <th>	容器	HtmlTableCell	表格单元格；表格标题单元格
<tr>	容器	HtmlTableRow	表格行
<title>	容器	HtmlTitle	标题元素
<select>	容器	HtmlSelect	用于选择的下拉菜单
	容器	HtmlGenericControl	没有列出任何HTML控件