您的位置:首页 > 产品设计 > UI/UE

System.Web.UI.HtmlControls

2013-06-25 09:34 447 查看
System.Web.UI.HtmlControls简介

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控件,代码如下:



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控件,代码如下:

<%@ Page Language="C#" AutoEventWireup="True" %>

<script runat="server">

void Button_Click(Object sender, EventArgs e)

{

this.Table1.BgColor = this.BgColorSelect.Value;

this.Table1.Border = int.Parse(BorderSelect.Value);

this.Table1.BorderColor = this.BorderColorSelect.Value;

}

</script>

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

<head>

<title>HtmlTable使用示例</title>

</head>

<body>

<form id="Form1" runat="server">

<h3>HtmlTable使用示例</h3>

<table id="Table1"

border="1"

runat="server">

<tr>

<th>

第一列

</th>

<th>

第二列

</th>

</tr>

<tr>

<td>

1

</td>

<td>

2

</td>

</tr>

<tr>

<td>

3

</td>

<td>

4

</td>

</tr>

</table>

<hr/>

选择显示设置: <br/><br/>

背景色:

<select id="BgColorSelect"

runat="server">

<option value="Red">Red</option>

<option value="Blue">Blue</option>

<option value="Green">Green</option>

<option value="Black">Black</option>

<option value="White" selected>White</option>

</select>

边框大小:

<select id="BorderSelect"

runat="server">

<option value="0">0</option>

<option value="1" selected>1</option>

<option value="2">2</option>

<option value="3">3</option>

<option value="4">4</option>

<option value="5">5</option>

</select>

边框颜色:

<select id="BorderColorSelect"

runat="server">

<option value="Red">Red</option>

<option value="Blue">Blue</option>

<option value="Green">Green</option>

<option value="Black" Selected>Black</option>

<option value="White">White</option>

</select>

<br/><br/>

<input id="Button1" type="button" value="设置" onserverclick ="Button_Click" runat="server"/>

</form>

</body>

</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控件,代码如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="HtmlTableRow.aspx.cs" Inherits="HtmlTableRow" %>

<!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>HtmlTableRow使用示例</title>

<script runat="server">

void Button_Click(Object sender,EventArgs e)

{

int cellcount = 1;

for (int i = 0; i <= Table1.Rows.Count - 1; i++)

{

Table1.Rows[i].Align = "center";

for (int i2 = 0; i2 <= Table1.Rows[i].Cells.Count - 1; i2++)

{

Table1.Rows[i].Cells[i2].InnerText = cellcount.ToString(); //与GridView1.Rows[i].Cells[0].Text几乎一样

cellcount++;

}

}

}

</script>

</head>

<body>

<form id="form1" runat="server">

<h3>HtmlTableRow使用示例</h3>

<br/>

<table id="Table1" border="1" bordercolor="black" runat="server" width="50%">

<tr align="left">

<td>Cell 1</td><td>Cell 2</td>

</tr>

<tr align="left">

<td> Cell3</td><td>Cell 4 </td>

</tr>

</table>

<br/><br/>

<input id="Button1" type="button"

value="改变单元格的内容"

onserverclick="Button_Click"

runat="server"/>

</form>

</body>

</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控件,代码如下:

<%@ Page Language="C#" AutoEventWireup="True" %>

<script runat="server">

void Button_Click(Object sender, EventArgs e)

{

this.column1.BgColor = "red";

this.column2.BgColor = "yellow";

this.cell1.BgColor = "green";

this.cell1.InnerText = "单元格1";

this.cell2.BgColor = "white";

this.cell2.Width = "50";

this.cell2.NoWrap = true;

this.cell2.InnerText = "单元格2的内容非常多,需要换行显示";

}

</script>

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

<head>

<title>HtmlTableCell 使用示例</title>

</head>

<body>

<form id="Form1" runat="server">

<h3>HtmlTableCell 使用示例</h3>

<table id="Table1"

border="1"

runat="server">

<tr>

<th id ="column1" runat="server">

第一列

</th>

<th id ="column2" runat="server">

第二列

</th>

</tr>

<tr>

<td id="cell1" runat="server">

1

</td>

<td id="cell2" runat="server" >

2

</td >

</tr>

</table>

<br/><br/>

<input id="Button1" type="button" value="设置" onserverclick ="Button_Click" runat="server"/>

</form>

</body>

</html>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐