ASP.NET-HTMLサーバー

HTMLサーバーコントロールは、基本的にサーバー側の処理を可能にするために拡張された標準のHTMLコントロールです。ヘッダータグ、アンカータグ、入力要素などのHTMLコントロールはサーバーによって処理されませんが、表示のためにブラウザーに送信されます。

これらは、属性runat = "server"を追加し、id属性を追加してサーバー側の処理に使用できるようにすることにより、サーバーコントロールに具体的に変換されます。

たとえば、HTML入力コントロールについて考えます。

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

runatおよびid属性を追加することにより、サーバーコントロールに変換できます。

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

HTMLサーバーコントロールを使用する利点

ASP.NETサーバーコントロールはHTMLサーバーコントロールによって実行されるすべてのジョブを実行できますが、後のコントロールは次の場合に役立ちます。

レイアウト目的での静的テーブルの使用。
ASP.NETで実行するためのHTMLページの変換

次の表で、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

例

次の例では、レイアウトに基本的なHTMLテーブルを使用しています。名前、住所、都市、州などのユーザーからの入力を取得するためにいくつかのボックスを使用します。また、ボタンコントロールもあり、クリックすると、テーブルの最後の行にユーザーデータが表示されます。

デザインビューでは、ページは次のようになります。

ASP.NETサーバーコントロール

コンテンツページのコードは、レイアウト用の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属性が追加されました。

Asp.net-html-server

ASP.NET-HTMLサーバー

HTMLサーバーコントロールを使用する利点

例