極客書

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伺服器控制項完成的所有作業，但在以下情況下，後面的控制項很有用：

  • Using static tables for layout purposes.
  • Converting a HTML page to run under 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 All HTML controls not listed

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;
}

注意以下事項：

  • 標準的HTML標記已用於頁面布局。

  • HTML表的最後一行用於數據顯示。它需要伺服器端處理，因此一個ID屬性和runat屬性被添加到其中。