logo
搜索
我的图书馆

发文章

发文工具

其他工具

留言交流
搜索
分享

System.Web.UI.HtmlControls简介

 趋明 2012-03-19
System.Web.UI.HtmlControls命名空间是专为创建ASP.NET应用程序而建立的，它包含了所有HTML服务器控件的类。HtmlControl类时所有HTML服务器控件的父类，该类定义了所有HTML服务器控件公共的属性、方法和事件。HtmlContainerControl类继承了HtmlControl类，该类是与具有开始标记和结束标记的HTML元素映射的HTML服务器控件的父类。如HtmlAnchor类、HtmlForm类、HtmlTable类等都是该类的子类。HTML服务器控件默认只在客户端使用，通过runat="server"属性可以使HTML服务器控件与服务器进行交互。

HTML服务器控件
HTML服务器控件与标准的HTML元素相映射。ASP.NET把这些元素对象化，让程序可以直接控制。这样的好处就是使构建Web程序更加高效和灵活，还方便了代码的编写和维护。

HTML的锚点控件：HtmlAnchor控件
HtmlAnchor控件与Html<a>元素映射。该控件可以用编程的方式控制HTML<a>元素，用于在Web窗体设置描点或其他网页的超链接。HtmlAnchor控件的语法定义如下所示：

 

HTML的Input系列控件：HtmlInput控件
HtmlInput使用于输入数据的控件。该控件有10种类型，通过其Type属性可以设置不同的类型。HtmlInput控件包含的类型如下所述。

Button:普通按钮。
Submit:提交按钮。
Reset：重置按钮。
Image:显示图片的按钮。
Text:普通文本框。
Password：输入密码的文本框。
CheckBox:复选框输入控件。
Radio:单选按钮。
File:上传文件到服务器。
Hidden：输入隐藏内容的控件,如ID.

下面我重点讲述其中几个：

1、HtmlInputButton控件：该控件与<input type=button>元素映射。该控件的功能与HtmlButton控件相似，用于创建命令按钮。单击该控件将引发ServerClick事件，在此事件中可以编写要执行得代码。Value属性可以设置按钮显示的文本信息。HtmlInputButton控件的语法定义如下：

<input

  type="Button"

  id = "被程序代码识别的名称"

  Visible="False|True"

  OnServerClick="事件函数名"

  runat="server"

  value="显示按钮的文字"

  />

 HtmlInputButton类的主要成员及其说明：

属性：Value：在控件上显示的文本信息

方法：ServerClick：单击控件时引发此事件

下面演示如何使用HtmlInputButton控件，代码如下：

[csharp] view plaincopyprint?
  1. <%@ Page Language="C#" AutoEventWireup="true" %>  
  2. <html xmlns="http://www./1999/xhtml" >  
  3. <head runat="server">  
  4.     <title>HtmlButton使用示例</title>  
  5. <script language="javascript" type="text/javascript">  
  6. function onClientclick()   
  7. {  
  8. alert("单击了按钮");  
  9. }  
  10. </script>  
  11. <script type="text/C#" runat="server">  
  12.     protected void ButtonOnclick(object sender, EventArgs e)  
  13.     {  
  14.         Response.Write("服务器端处理按钮事件");  
  15.     }  
  16. </script>  
  17. </head>  
  18. <body>  
  19.     <form id="form1" runat="server">  
  20.     <div>  
  21.        <h3>HtmlButton使用示例</h3>  
  22.     </div>  
  23.     <button id ="button1" onclick="onClientclick()" >客户端按钮</button>  
  24.     <br /><br />  
  25.      <button id ="button2" runat="server" onserverclick="ButtonOnclick" >服务器端按钮</button>  
  26.     </form>      
  27. </body>  
  28. </html>  


 

HTML的表格控件：HtmlTable控件
HtmlTable控件与<table>元素映射。该控件是一个表格。一个表格包含行，行包含单元格。HtmlTable控件通常用设计页面的布局。其语法如下：
<table
  ID="被程序代码识别的名称"
  Align="left|Center|Right"
  runat="server"
  BGColor="背景色"
  BorderColor="边框颜色"
  CellPadding="像素"
  CellSpacing="像素"
  Hight="表格高度"
  Rows="行的集合"
  Width="表格的宽度"
>
<tr><td></td></tr>
</table>

HtmlTable类的主要成员及其说明：

Align：指定内容的对齐方式

BgColor:指定背景色

Border:指定边框大小

BorderColor：指定边框颜色

CellPadding:指定单元格的内容与边框的距离，以像素为单位

CellSpacing:指定相邻两个单元格的距离，以像素为单位

Rows:包含行的集合

Height:指定控件的高度

width:指定控件的宽度

 

下面演示如何使用HtmlTable控件，代码如下：

[csharp] view plaincopyprint?
  1. <%@ Page Language="C#" AutoEventWireup="True" %>  
  2. <script runat="server">  
  3.   void Button_Click(Object sender, EventArgs e)  
  4.   {  
  5.       this.Table1.BgColor = this.BgColorSelect.Value;  
  6.       this.Table1.Border = int.Parse(BorderSelect.Value);  
  7.       this.Table1.BorderColor = this.BorderColorSelect.Value;  
  8.   }  
  9. </script>  
  10. <html xmlns="http://www./1999/xhtml" >  
  11. <head>  
  12.    <title>HtmlTable使用示例</title>  
  13. </head>  
  14. <body>  
  15.    <form id="Form1" runat="server">  
  16.       <h3>HtmlTable使用示例</h3>  
  17.       <table id="Table1"   
  18.              border="1"   
  19.              runat="server">  
  20.          <tr>  
  21.             <th>  
  22.               第一列  
  23.             </th>  
  24.             <th>  
  25.                第二列  
  26.             </th>    
  27.          </tr>  
  28.          <tr>  
  29.             <td>  
  30.               1  
  31.             </td>  
  32.             <td>  
  33.               2  
  34.             </td>      
  35.          </tr>  
  36.          <tr>  
  37.             <td>  
  38.                3  
  39.             </td>  
  40.             <td>  
  41.               4  
  42.             </td>  
  43.          </tr>  
  44.       </table>  
  45.       <hr/>  
  46.       选择显示设置: <br/><br/>  
  47.       背景色:  
  48.       <select id="BgColorSelect"   
  49.               runat="server">  
  50.          <option value="Red">Red</option>  
  51.          <option value="Blue">Blue</option>  
  52.          <option value="Green">Green</option>  
  53.          <option value="Black">Black</option>  
  54.          <option value="White" selected>White</option>        
  55.       </select>  
  56.       边框大小:  
  57.       <select id="BorderSelect"   
  58.               runat="server">  
  59.          <option value="0">0</option>  
  60.          <option value="1" selected>1</option>  
  61.          <option value="2">2</option>  
  62.          <option value="3">3</option>  
  63.          <option value="4">4</option>  
  64.          <option value="5">5</option>  
  65.       </select>  
  66.       边框颜色:  
  67.       <select id="BorderColorSelect"   
  68.               runat="server">  
  69.          <option value="Red">Red</option>  
  70.          <option value="Blue">Blue</option>  
  71.          <option value="Green">Green</option>  
  72.          <option value="Black" Selected>Black</option>  
  73.          <option value="White">White</option>  
  74.       </select>  
  75.       <br/><br/>  
  76.       <input id="Button1" type="button"  value="设置" onserverclick ="Button_Click"  runat="server"/>  
  77.    </form>  
  78. </body>  
  79. </html>  

 

HTML的数据行控件：HtmlTableRow控件
HtmlTableRow控件与<tr>元素映射。该控件表示为HtmlTable控件的行，每行中包含一个或一个以上的单元格。通过其Align,BgColor等属性，可以设置控件的对齐方式、背景色等。
HtmlTableRow控件的语法定义如下：
<tr
  ID="被程序代码识别的名称"
  Align="left|Center|Right"
  runat="server"
  BGColor="背景色"
  BorderColor="边框颜色"
  Height="行高度"
  Cells="单元格集合"
 
>
<td>单元格</td>
</tr>

HtmlTableRow类的主要成员及其说明：

Align：指定内容的对齐方式

BgColor:指定背景色

Border:指定边框大小

BorderColor：指定边框颜色

Cells:包含单元格的集合

Height:指定行的高度

 

下面将演示如何使用HtmlTableRow控件，代码如下：

[csharp] view plaincopyprint?
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="HtmlTableRow.aspx.cs" Inherits="HtmlTableRow" %>  
  2.   
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  4.   
  5. <html xmlns="http://www./1999/xhtml">  
  6. <head runat="server">  
  7.     <title>HtmlTableRow使用示例</title>  
  8.   
  9.     <script  runat="server">  
  10.         void Button_Click(Object sender,EventArgs e)  
  11.         {  
  12.             int cellcount = 1;  
  13.             for (int i = 0; i <= Table1.Rows.Count - 1; i++)  
  14.             {  
  15.                 Table1.Rows[i].Align = "center";  
  16.                 for (int i2 = 0; i2 <= Table1.Rows[i].Cells.Count - 1; i2++)  
  17.                 {  
  18.                     Table1.Rows[i].Cells[i2].InnerText = cellcount.ToString();  //与GridView1.Rows[i].Cells[0].Text几乎一样   
  19.                     cellcount++;  
  20.                 }  
  21.             }  
  22.         }  
  23.     </script>  
  24. </head>  
  25. <body>  
  26.     <form id="form1" runat="server">  
  27.         <h3>HtmlTableRow使用示例</h3>  
  28.         <br/>  
  29.         <table id="Table1" border="1" bordercolor="black" runat="server" width="50%">  
  30.             <tr align="left">  
  31.                 <td>Cell 1</td><td>Cell 2</td>  
  32.             </tr>  
  33.             <tr align="left">  
  34.                 <td> Cell3</td><td>Cell 4 </td>  
  35.             </tr>  
  36.         </table>  
  37.         <br/><br/>  
  38.         <input id="Button1" type="button"  
  39.           value="改变单元格的内容"  
  40.           onserverclick="Button_Click"  
  41.           runat="server"/>  
  42.     </form>  
  43. </body>  
  44. </html>  

运行后，结果如下：


 

 

HTML的单元格控件：HtmlTableCell控件
HtmlTableCell控件与<td>和<th>元素映射。该控件表示为HtmlTableRow控件的Cell。其中<td>元素表示一般单元格，而<th>元素表示标题单元格。通过其Align，BgColor等属性，可以设置控件的对齐方式、背景色等。HtmlTableCell控件的语法定义如下：
<tr或th
   ID="被程序代码识别的名称"
  Align="left|Center|Right"
  runat="server"
  BGColor="背景色"
  BorderColor="边框颜色"
  Height="高度"
  NoWap="True|False"
  ColSpan="跨列数"
  RowSpan="跨行数"
  Width="宽度"
>
单元格内容
</tr或th>

 

下面将演示如何使用HtmlTableCell控件，代码如下：

[csharp] view plaincopyprint?
  1. <%@ Page Language="C#" AutoEventWireup="True" %>  
  2. <script runat="server">  
  3.   void Button_Click(Object sender, EventArgs e)  
  4.   {  
  5.       this.column1.BgColor = "red";  
  6.       this.column2.BgColor = "yellow";  
  7.       this.cell1.BgColor = "green";  
  8.       this.cell1.InnerText = "单元格1";  
  9.       this.cell2.BgColor = "white";  
  10.       this.cell2.Width = "50";  
  11.       this.cell2.NoWrap = true;  
  12.       this.cell2.InnerText = "单元格2的内容非常多,需要换行显示";  
  13.         
  14.   }  
  15. </script>  
  16. <html xmlns="http://www./1999/xhtml" >  
  17. <head>  
  18.    <title>HtmlTableCell 使用示例</title>  
  19. </head>  
  20. <body>  
  21.    <form id="Form1" runat="server">  
  22.       <h3>HtmlTableCell 使用示例</h3>  
  23.       <table id="Table1"   
  24.              border="1"   
  25.              runat="server">  
  26.          <tr>  
  27.             <th id ="column1" runat="server">  
  28.               第一列  
  29.             </th>  
  30.             <th id ="column2" runat="server">  
  31.                第二列  
  32.             </th>    
  33.          </tr>  
  34.          <tr>  
  35.             <td id="cell1" runat="server">  
  36.               1  
  37.             </td>  
  38.             <td id="cell2" runat="server" >  
  39.               2  
  40.             </td >      
  41.          </tr>  
  42.         </table>  
  43.        
  44.       <br/><br/>  
  45.       <input id="Button1" type="button"  value="设置" onserverclick ="Button_Click"  runat="server"/>  
  46.    </form>  
  47. </body>  
  48. </html>  

    本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
    转藏 分享 献花（0）

    来自： 趋明 > 《编程开发》

    举报/认领

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多