现在的位置: 首页 > 综合 > 正文

HTML控件全攻略

2013年06月09日 ⁄ 综合 ⁄ 共 6055字 ⁄ 字号 小 中 大 ⁄ 评论关闭

HTML控件全攻略
02-3-7 下午 01:30:17

我们知道，在ASP.NET中，使用了两类控件，一类是HTML控件，还有一类是WEB控件。WEB控件我们已经很熟悉，因为它是ASP.NET提供，一般关于ASP.NET的教程文章都会仔细介绍这些控件的详细应用技巧；而HTML控件，很多关于ASP.NET的文章仅仅一句话略过，甚至说只要在原来的HTML基础上加上“RunAt=”Server””就可以了，以致很多用户在使用ASP.NET的过程中几乎没有使用HTML控件，更加不知道这些控件的具体使用方法和详细功能。其实，HTML控件虽然在使用方法上和HTML有一点相似，但是，在功能上，HTML控件可以具有自己的“事件”，所以，一些HTML完全不可能实现的功能，使用HTML控件可以简单实现。
一、HTML控件介绍
HTML控件在ASP.NET编程中具有主要位置，由于其简单和HTML的相似性，很多时候，我们可以使用HTML控件来代替WEB控件。在ASP.NET中，HTML控件一共有20种，它们之间的相互关系如下：

二、HTML控件的使用
HTML控件的使用简单，重要在于灵活使用。HTML和ASP的使用，让我们养成了一些不是太好的习惯，包括代码的编写，甚至已经完全脱离了面向对象编程，现在，我们使用HTML控件，慢慢的必须回到面向对象编程的编码习惯和思路。HTML控件比较多，我们现在挑选比较常用和实用的几个控件举例介绍。
1、HTMLAnchor控件
在ASP中，我们建立一个链接是这样的<a href=”链接URL”>链接文字</a>。这样建立的一个链接，如果不和JavaScript结合的话，唯一的功能就是一个链接，而且，这个链接不能有任何特殊一点的功能。现在，我们来看使用HTMLAnchor实现一个JavaScript中常见的程序，就是用户点击链接以后，链接文字变成别的文字。以下程序点击“点击我”以后，链接文字变为“欢迎你”。程序代码如下：
<%@ Page Language="vb"%>
<%@ Import Namespace="System.Data" %>
<script runat="server" language="VB">
Sub btnclk(Sender as Object,E as EventArgs)
a1.InnerText="欢迎你"
End Sub
</Script>
<Form RunAt="Server">
<A id="a1" RunAt="Server" onServerClick="btnclk">点击我</A>
</Form>
在以上的代码中，链接有了事件处理！这样，在链接点击以后，我们可以做一些必要的处理。需要注意的一点是：这里，不是onClick而是onServerClick。现在，我们来看一个比较复杂的举例，在这个举例里面，点击链接可以显示一张图片，再一次点击，可以隐藏该图片，代码如下：
<html>
<head>
<script language="C#" runat="server">
void Page_Load (Object sender, EventArgs e) {
if (!IsPostBack) {
showhideLink.InnerText = image.Visible ? "隐藏图片" : "显示图片";
}
}
void ShowHideAd(Object sender, EventArgs E) {
image.Visible = image.Visible ? false : true;
showhideLink.InnerText = image.Visible ? "隐藏图片" : "显示图片";
}
</script>
</head>
<body>
<form runat="server">
<p><a id="showhideLink" runat="server" onServerClick="ShowHideAd"/></p>
<table id="image" cellpadding=3 visible=false runat="server">
<tr><td>
<img src="x.gif">
</td></tr>
</table>
</form>
</body>
</html>
程序运行效果：


2、HTMLButton控件
HTMLButton没有太多的变化，但是，按钮的外观处理比较任意一点，来看一个举例：
<form runat="server">
<p>With embedded <b><img></b> tag: </p>
<p><button id="Button1" runat="server"
style="width:157; height=200"
onServerClick="saySomething">
<img src="/aspxtreme/shared/images/billg_tongue.gif"
width="157" height="200" border=0 alt="">
</button>
<p>With rollover effect: </p>
<p><button id="Button2" runat="server"
onServerClick="saySomething"
style="font: 8pt verdana; background-color:lightgreen;
border-color:black; height=30; width:100"
onmouseover="this.style.backgroundColor='yellow'"
onmouseout="this.style.backgroundColor='lightgreen'">
Click me too!
</button>
<p><span id="Message" runat="server" />
</form>
在以上代码中，当用户鼠标移到按钮上和离开按钮时，按钮的表面颜色是不一样的，效果比较特别，如图：



3、HtmlGenericControl控件
从控件名字上，可能我们很难猜测这个控件的功能。仔细观察所有的HTML控件，我们发现有一些HTML标记没有对应的HTML控件，比如：<body>、<div>、<span>等，而这些HTML标记又比较重要，如果需要用到这些标记怎么办呢？HTMLGenericControl就是这些标记的控件。现在，我们看一个比较有趣的举例，在这个例子中，用户可以选择页面的背景颜色！这个功能在一些文学、读书网站、资源网站可能比较实用，因为这些网站可能提供大量资料给浏览者，如果用户阅读时间较长而所有资料格式都差不多的话，用户有可能感觉网站比较单调而且任意疲劳，这时候，如果可以让用户选择网页的背景颜色，用户就会感觉比较舒适。来看程序源代码：
<html>
<head>
<title>试验HtmlGenericControl</title>
<script language="C#" runat="server">
void Page_Load (object Source, EventArgs e) {
Body.Attributes["bgcolor"]=ColorSelect.Value;
}
</script>
</head>
<body id="Body" runat="server">
<Center>
<form runat="server">
<p>选择页面背景： </p>
<select id="ColorSelect" runat="server">
<option>Aqua</option>
<option>Bisque</option>
<option>Chartreuse</option>
<option>DodgerBlue</option>
<option>ForestGreen</option>
<option>Gainsboro</option>
<option>HotPink</option>
<option>Ivory</option>
<option>Khaki</option>
<option>Lavender</option>
<option>Magenta</option>
<option>NavajoWhite</option>
<option>Olive</option>
<option>PaleGoldenRod</option>
<option>Red</option>
<option>SandyBrown</option>
<option>Tan</option>
<option>Violet</option>
<option>Wheat</option>
<option>YellowGreen</option>
</select>
<input type=submit runat="server" Value="确定">
</form>
</Center>
</body>
</html>
程序运行效果如下：


这个程序很有趣，而且非常简单，从这里，我们可以感受到这个控件的方便和实用。其实，这个控件实现的一些功能，我们以前可能很少使用，甚至都没有仔细考虑，这就是新的Asp.NET需要我们挖掘的一些地方，也是我们需要改变编程、设计思维的原因。
4、HtmlImage控件
在一些新闻网站和图片网站中，我们有时候需要查找、显示很多图片，这些图片一般我们是直接显示出来，当图片比较多的情况下，直接显示出来就会增加网页文件大小，消耗用户时间。所以，这时候，我们可以直接给用户一个图片下拉选择框来选择真正需要显示的图片。下面的举例就是这样，由用户选择来显示图片：
<html>
<head>
<title>HtmlImage试验</title>
<script language="C#" runat="server">
void chgImage (Object Sender, EventArgs e) {
Image.Src= ImgSelector.Value;
}
</script>
</head>
<body>
<form runat="server">
<img id="Image" runat="server"
src="top.gif" />
<p>选择图片: </p>
<select id="ImgSelector" runat="server">
<option value="Cereal1.gif">Healthy Grains</option>
<option value="warning.gif">warning</option>
<option value="Cereal3.gif">U.F.O.S</option>
<option value="Cereal4.gif">Oatey O's</option>
<option value="x.gif">Strike</option>
<option value="Cereal7.gif">Fruity Pops</option>
</select>
<input type=submit runat="server" value="显示" onServerClick="chgImage">
</form>
</div>
</body>
</html>
程序执行效果如下：


以上程序演示了使用HTMLImage控件实现选择显示图片的功能，我们注意到，在使用HTMLImage控件的时候，图片的路径可以作为控件的一个属性来设置，这样，我们就可以很简单的实现类似以上程序的许多功能。
5、HtmlTable控件
我们知道，在HTML中使用Table的时候，Table是已经指定而且不能动态改变的；在ASP中，要实现Table的动态载入也比较困难。在使用HTMLTable的时候，我们就可以很简单的实现表、表格行和表格单元格的动态生成，因为表格行和表格单元格都已经作为控件，我们可以通过对这些控件的灵活使用来生成动态表格。在以下的举例中，用户选择表格的行数和列数来实现动态生成表格：
<html>
<head>
<title>HTMLTable试验</title>
<script language="C#" runat="server">
void Page_Load(Object sender, EventArgs e) {
int row=0;
int numrows=int.Parse(setRows.Value);
int numcells=int.Parse(setCols.Value);
for (int j=0; j<numrows; j++) {
HtmlTableRow r=new HtmlTableRow();
if (row%2 == 1) r.BgColor="Gainsboro";
row++;
for (int i=0; i<numcells; i++) {
HtmlTableCell c=new HtmlTableCell();
c.Controls.Add(new LiteralControl("row " + j.ToString() + ", cell " + i.ToString()));
r.Cells.Add(c);
}
Table1.Rows.Add(r);
}
}
</script>
</head>
<body>
<Center>
<form runat="server">
<p><table id="Table1" cellpadding=5 cellspacing=0
border=1 bordercolor="black" runat="server" /></p>
<table>
<tr>
<td>表格行数:</td>
<td>
<select id="setRows" runat="server">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select></td>
<td>表格列数:</td>
<td>
<select id="setCols" runat="server">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select></td></tr>
</table>
<p><input type=submit value="生成表格" runat="server">
</form>
</Center>
</body>
</html>
程序执行效果如下：


在以上图片中，程序动态生成一个两行三列的表格。在学习使用HTMLTable的时候，需要真正了解表格是怎样生成的，这一点，我们可以参考上面程序的实现方式。HTMLTable的应用非常广泛，特别是网页结合数据库的时候，这种动态生成Table的设计方法更加必不可少。
三、总结
HTML控件是ASP.NET的主要部分之一，利用这些控件，我们在设计中可以实现很多我们以前完全不敢想或者很难实现的功能。
返回
【上篇】
【下篇】

作者:

抱歉!评论已关闭.

返回首页

Copyright © 2013-2018 学步园  保留所有权利.
软文销售 QQ客服：2265327166 点击这里给我发消息（其他合作也可洽谈）
必威体育
必威电竞