閱讀(14.5k) 書簽贊(0) 我要糾錯(cuò)

ASP.NET HTML 服務(wù)器

2022-06-27 15:39 更新

HTML 服務(wù)器

HTML 服務(wù)器控件主要是保證服務(wù)端運(yùn)行的增強(qiáng)型標(biāo)準(zhǔn) HTML 控件。HTML 控件不是由服務(wù)器處理，而是被發(fā)送到瀏覽器進(jìn)行顯示，比如頁(yè)面標(biāo)題標(biāo)簽，鏈接標(biāo)簽及輸入元素。

通過(guò)添加 runat = "server" 屬性和一個(gè) id 屬性，它們可被特定地轉(zhuǎn)化為一個(gè)服務(wù)器控件，應(yīng)用于服務(wù)器端處理。

例如，HTML 輸入控件：

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

它可以通過(guò)添加 runat 和 id 屬性被轉(zhuǎn)換成一個(gè)服務(wù)器控件：

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

使用 HTML 服務(wù)器控件的優(yōu)點(diǎn)

盡管 ASP.NET 服務(wù)器控件可以完成 HTML 服務(wù)器控件執(zhí)行的每一項(xiàng)工作，HTML 控件在以下情況仍然具有優(yōu)勢(shì)：

使用靜態(tài)表達(dá)到布局目的。
轉(zhuǎn)換一個(gè) HTML 頁(yè)面到 ASP.NET 下運(yùn)行。

下面這個(gè)表格介紹了 HTML 服務(wù)器控件：

控件名稱	HTML 標(biāo)簽
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	未列出的所有 HTML 控件

實(shí)例

以下實(shí)例使用了基本的 HTML 表格進(jìn)行布局。它使用了用于從用戶獲得輸入諸如姓名，地址，城市，州等的框，還有一個(gè)按鈕控件，該控件被點(diǎn)擊后能夠獲取該表最后一行中顯示的用戶數(shù)據(jù)。

頁(yè)面在設(shè)計(jì)視圖中應(yīng)如下所示：

內(nèi)容頁(yè)面的代碼表明了 HTML 表格元素進(jìn)行布局的應(yīng)用。

<%@ 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>

按鈕控件的后臺(tái)代碼為：

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

觀察以下陳述：

標(biāo)準(zhǔn) HTML 標(biāo)簽已被使用進(jìn)行頁(yè)面布局。
HTML 表格的最后一行用于數(shù)據(jù)顯示。它需要服務(wù)器端進(jìn)行加工，因此為其添加 ID 屬性和 runat 屬性。

ASP.NET HTML 服務(wù)器

HTML 服務(wù)器

使用 HTML 服務(wù)器控件的優(yōu)點(diǎn)

實(shí)例

相關(guān)教程