Web服务器控件和HTML控件的区别与联系

 

我们知道，在ASP.NET中，使用了两类控件，一类是HTML控件，还有一类是WEB控件。

WEB控件我们已经很熟悉，因为它是ASP.NET提供，一般关于ASP.NET的教程文章都会仔细介绍这些控件的详细应用技巧；

而HTML控件，很多关于ASP.NET的文章仅仅一句话略过，甚至说只要在原来的HTML基础上加上“RunAt=”Server””就可以了，

以致很多用户在使用ASP.NET的过程中几乎没有使用HTML控件，更加不知道这些控件的具体使用方法和详细功能。

其实，HTML控件虽然在使用方法上和HTML有一点相似，但是，在功能上，HTML控件可以具有自己的“事件”，

所以，一些HTML完全不可能实现的功能，使用HTML控件可以简单实现。 

【Web服务器控件】

Web服务器控件 (Web server control) 

属于 System.Web.UI.WebControls 命名空间的 ASP.NET 服务器控件。Web 服务器控件比 HTML 服务器控件更丰富、更抽象。Web 服务器控件在 ASP.NET 页上有 asp 标记前缀，例如 <asp:Button runat="server" />。

HTML控件直接映射到 HTML 元素。

HTML控件可以通过修改代码将其变成Web服务器端控件，几乎所有的HTML标记只要加上runat = "server"，这个服务器控件标识属性后都可以变成服务器端控件。这与普通HTML标记相比最大的区别在于，服务器端控件可以通过服务器端代码来控制。

【WEB服务器控件是HTML控件的一种扩展】 ,区别是: 　　1)前者可以触发服务器控件特有的事件，后者只能通过回递的方式触发服务器上的页面级事件。 　　2)输入到前者中的数据在请求之间可以维护（即具有状态管理功能）,而后者无法自动维护数据，只能使用页面级的脚本来保存和恢复。 　　3)前者可以自动检测浏览器并调整到恰当的显示，而后者没有自动适应功能，必须在代码中手动检测浏览器。 　　4)每个服务器控件都具有一组属性，可以在服务器端的代码中更改控件的外观和行为，而后者只有HTML属性。

区别是在响应客户端请求时所返回结果,点击某个WEN服务器控件在发送请求的时候,所返回来的是整个页面,

而HTML控件则是点击某个控件,结果返回在只是一些与之相关联的地方,不会整个页面在重新获取

所有如果某些控件不需要服务器端的事件或状态管理功能时，可以选择HTML控件，这样可以提高应用程序的性能。

ASP.NET中html控件和web控件 虽然好多功能相同并且长得很像 ，但是它们的内部实现机制是完全不一样的 ，Web控件要比Html控件执行效率要好 

   
   1. 使用起来也相当方便,举个简单的例子,例如Button的生成: 
   Html控件是将庞大控件集合全部弄到页面中，用到哪个功能，就设置一下属性,如下: 
   <input type=submit/button runat=server> 
   这样会占用相当大的控件资源 
   
   Web控件是将集成式的拆解成单功能的： 
   <asp:button id="btnOK" /> 
   这样就可以节省不必要的控件所占用的资源了 
   
   2.Web控件具有回送功能,能够用ViewState维持控件的状态. 
    Html控件则不能,当点击页面的操作，其状态就会丢失. 
    可以做这样的一个实验: 
    I. 分别建立两个文件: a.html b.aspx 
    II.在a.html页面中加Html控件的RadioButton和一个button， 
    在b.aspx中加Web控件的RadioButton和一个button 
    III.a.html直接双击浏览器运行,b.aspx通过IIS运行 
    IV.在a.html运行界面中，选中RadioButton,再单击Button按钮，会发现RadioButton会 
    取消选中(丢失其状态),但在b.aspx页面执行同样的操作，RadioButton不会丢失，因为ViewState 
    给它保存了状态. 您可以在运行界面点击浏览器菜单"查看"->“源文件",打开Html代码文件， 
    找到加密后的ViewState,类似于下面: 
    <input type="hidden" name="_VIEWSTATE" value="dDw0ajfmafmjfzzmj4"/> 
    其实ViewState实现原理也是将一些信息放到隐藏的一个控件中，并且asp.net生成的ViewState信息 
   
    是存储在客户端的 
    这里要注意的一点是： 
    只有当格式为*.aspx文件，并且控件具有属性:"runat=server"时，回送功能才能打开 
   
   
   3. Html控件与Web控件最大的区别是它们对事件处理的方法不同。对于Html窗体控件， 
   当引发一个事件时，浏览器会处理它。但对于Web控件，事件仅由浏览器生成，但浏览 
   器不会处理它，客户端要给服务器发个信息，告诉服务器处理事件。 不过有些事件， 
   比如: 
    按下键/移动/鼠标等事件，Asp.net中没有这些事件 
    (因为这些事件即时性强，服务器处理得不够及时)，这时候Html控件就发挥其作用了，结合Html事件 
   
    协助完成. 
   
   如下是一些Html常用的事件: 
   在浏览器上执行的Html控件事件: 
   
   单击时触发: 
   <INPUT type="button" value="Click Me" οnclick="alert('Hi,你好!');"> 
   
   鼠标弹起时触发: 
   <INPUT type="button" value="Click Me" οnmοuseup="alert('Hi,你好!');"> 
   
   //悬浮在控件上方时触发 
   <INPUT type="button" value="Click Me" οnmοuseοver="alert('Hi,你好!');"> 
   
   //鼠标在控件上方移动时触发 
   <INPUT type="button" value="Click Me" οnmοusemοve="alert('Hi,你好!');"> 
   
   //双击控件时触发 
   <INPUT type="button" value="Click Me" οndblclick="alert('Hi,你好!');"> 
   
   //当焦点在控件时，按键时触发 
   <INPUT type="button" value="Click Me" οnkeypress="alert('Hi,你好!');"> 
   
   //按键按下时触发 
   <INPUT type="button" value="Click Me" οnkeydοwn="alert('Hi,你好!');">  


在不需要与后台进行交互时就使用HTML控件，它的占用的资源比较少，速度也比较快,在需要与后台进行交互时，就使用WEB控件，或者在HTML   控件上加上runat="server"   也可以将一个HTML控件转换成交互控件，但这样占用的资源就和Web控件没任何分别了。 
       WEB控件可以响应服务器端事件，可以在后台代码中设置相关属性和方法等！HTML不可， WEB服务器控件需要通过服务器处理后译为HTML控件再发送给浏览器，所以比较耗费服务器资源，并由于有IEWSTATE，所以在回送的时候会保持控件状态（也可以设置不保存）也因此增加了回送信息量。HTML直接发送到浏览器，不另耗费服务器资源，但无状态保存！    
       获得HTML控件的值   需要使用REQUEST的FORM   方法，WEB控件就可以直接通过属性直接处理！   
 所以，一般来说，对于不需要保存控件状态，并无什么对值处理的地方就可以使用HTML 如果需要对控件进行动态的处理，或要保存其状态等   就可以WEB服务器控件！WEB服务器控件用起来个人认为要方便些，但是就是另外多耗费服务器资源！   
    很多书上都说，考虑性能的话在能不用WEB服务器控件的地方就尽量不用。    
    什么时候用什么时候不用还是要看具体情况，在条件宽松的情况下就看个人习惯了

【转】http://bbs.blueidea.com/thread-401431-1-1.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" 
οnmοuseοver="this.style.backgroundColor='yellow'" 
οnmοuseοut="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的主要部分之一，利用这些控件，我们在设计中可以实现很多我们以前完全不敢想或者很难实现的功能。