Asp.net 简明教程

ASP.NET - HTML Server

HTML 服务器控件本质上是标准 HTML 控件，增强了这些控件以启用服务器端处理。诸如标题标记、锚点标记和输入元素之类的 HTML 控件不由服务器处理，而是会被发送到浏览器显示。

它们通过添加 runat="server" 属性并添加 id 属性来专门转换为服务器控件，以便能够对它们进行服务器端处理。

例如，考虑 HTML 输入控件：

<input type="text" size="40">

可以通过添加 runat 和 id 属性将它转换为服务器控件：

<input type="text" id="testtext" size="40" runat="server">

Advantages of using HTML Server Controls

虽然 ASP.NET 服务器控件可以执行 HTML 服务器控件完成的所有工作，但这些控件在以下情况下很有用：

  1. 使用静态表格进行布局。

  2. 转换 HTML 页面，使其可以在 ASP.NET 下运行

下表描述了 HTML 服务器控件：

Control Name

HTML tag

HtmlHead

<head>element

HtmlInputButton

<input type=button

submit

reset>

HtmlInputCheckbox

<input type=checkbox>

HtmlInputFile

<input type = file>

HtmlInputHidden

<input type = hidden>

HtmlInputImage

<input type = image>

HtmlInputPassword

<input type = password>

HtmlInputRadioButton

<input type = radio>

HtmlInputReset

<input type = reset>

HtmlText

<input type = text

password>

HtmlImage

<img> element

HtmlLink

<link> element

HtmlAnchor

<a> element

HtmlButton

<button> element

HtmlButton

<button> element

HtmlForm

<form> element

HtmlTable

<table> element

HtmlTableCell

<td> and <th>

HtmlTableRow

<tr> element

HtmlTitle

<title> element

HtmlSelect

<select&t; element

HtmlGenericControl

Example

以下示例使用基本 HTML 表格进行布局。它使用一些框来从用户处获取姓名、地址、城市、州等输入。它还具有一个按钮控件，单击该按钮可在表格的最后一行中显示用户数据。

页面应在设计视图中呈现如下：

asp.net server controls

内容页的代码显示了如何使用 HTML 表格元素进行布局。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="htmlserver._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

   <head runat="server">
      <title>Untitled Page</title>

      <style type="text/css">
         .style1
         {
            width: 156px;
         }
         .style2
         {
            width: 332px;
         }
      </style>

   </head>

   <body>
      <form id="form1" runat="server">
         <div>
            <table style="width: 54%;">
               <tr>
                  <td class="style1">Name:</td>
                  <td class="style2">
                     <asp:TextBox ID="txtname" runat="server"  style="width:230px">
                     </asp:TextBox>
                  </td>
               </tr>

               <tr>
                  <td class="style1">Street</td>
                  <td class="style2">
                     <asp:TextBox ID="txtstreet" runat="server"  style="width:230px">
                     </asp:TextBox>
                  </td>
               </tr>

               <tr>
                  <td class="style1">City</td>
                  <td class="style2">
                     <asp:TextBox ID="txtcity" runat="server"  style="width:230px">
                     </asp:TextBox>
                  </td>
               </tr>

               <tr>
                  <td class="style1">State</td>
                  <td class="style2">
                     <asp:TextBox ID="txtstate" runat="server" style="width:230px">
                     </asp:TextBox>
                  </td>
               </tr>

               <tr>
                  <td class="style1"> </td>
                  <td class="style2"></td>
               </tr>

               <tr>
                  <td class="style1"></td>
                  <td ID="displayrow" runat ="server" class="style2">
                  </td>
               </tr>
            </table>

         </div>
         <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Click" />
      </form>
   </body>
</html>

按钮控件背后的代码：

protected void Button1_Click(object sender, EventArgs e)
{
   string str = "";
   str += txtname.Text + "<br />";
   str += txtstreet.Text + "<br />";
   str += txtcity.Text + "<br />";
   str += txtstate.Text + "<br />";
   displayrow.InnerHtml = str;
}

注意以下内容：

  1. 已对页面布局使用了标准 HTML 标记。

  2. HTML 表格的最后一行用于数据显示。它需要服务器端处理，因此向其添加了 ID 属性和 runat 属性。