我们知道，在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的主要部分之一，利用这些控件，我们在设计中可以实现很多我们以前完全不敢想或者很难实现的功能。 

知识点：

        理解 ASP.NET 的控件的分类、 掌握服务器控件和页面回发的原理、 掌握基本的 Web 服务器控件、 掌握服务器控件的客户端事件处理。

        在第一课【使用ASP.NET开发Web项目】第一课——初识ASP.NET中，我么创建了第一个ASP.NET程序，也已经初步认识到了 ASP.NET WebForm 中的 Button、Label 和 TextBox 控件。Asp.net之所以开发方便和快捷，关键是它有一组强大的控件库，包括 HTML 控件、HTML 服务器控件和 Web服务器控件。

        我们经常使用的是 Web 服务器控件，根据它们功能的侧重点不同，Web 服务器控件可以分为标准控件、具有强大数据绑定功能的数据控件、用于检测输入的验证控件等。通过本章的学习，可以掌握所有 ASP.NET 控件的共有特性、常用的标准控件及服务器控件的客户端事件处理的方式。

1、控件概述

        在 ASP.NET 中，控件分为HTML 控件、HTML服务器控件和Web服务器控件。不管什么控件，最终会生成 HTML 代码，由浏览器根据 HTML 代码解析后呈现。

1.1    ASP.NET中的客户端和服务端

        客户端一般由浏览器来充当，服务端一般由IIS 这类的服务器和网站代码来实现！ 用于提供浏览服务的服务器端软件，称为 Web 服务器。

        常用的web服务器： IIS 微软集成在Windows Server 服务器上的 Web 服务器软件，全称为 Internet Information Server，又称互联网信息服务器。 ASP.NET Development Server 集成在 Visual Studio 2005 和 2008 中的 Web 服务器，可以处理本机的请求，用于 Web 应用程序开发中使用。

ASP.NET中客户端控件和服务端控件的区别

• 客户端控件：即普通Html控件，使用script控制操作，由客户端浏览器解释执行。
• 服务端控件：即Asp.Net的控件，这些控件在服务器端解释执行，生成根据用户的浏览器而定的html元素。

1.2    HTML 控件 

        HTML 标签，比如<input type=”text” />是一个文本框标签，在 ASP.NET 中，这种标签称作 HTML 控件。ASP.NET 不会对这种控件做处理，即在客户端运行，我们也无法为 HTML 控件绑定服务器端事件，即在服务器端无法用代码捕获它，只能在客户端通过 javascript 等程序语言来控制。因为 HTML 控件不消耗服务器资源，所以如果仅仅强调客户端的应用，那么用 HTML 控件即可。

1.3    HTML 服务器控件 

        我们可以将 HTML 控件转换为 HTML 服务器控件，方法是在 HTML 标签中添加runat="server"的属性，这个属性声明了该控件在服务器端运行。在 ASP.NET 执行的过程中，ASP.NET 将创建包含runat="server"属性的元素实例，如果需要在后置代码中使用此实例，则需要为控件分配id 属性。

示例练习1：HTML服务器控件的使用

示例效果：用户在输入框里输入姓名，点击【确定】按钮时，输出针对该姓名的欢迎语。

第一步：在VS中新建asp.net web项目，并添加一个web窗体，使用HTML服务器控件，制作基本界面。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication18.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title> HTML服务器控件的使用 </title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            请输入姓名：<input id="txtName" type="text" runat="server" name="txtName" />
            <input type="button" value="确定" runat="server" id="btnSure" onserverclick="btnSure_ServerClick" />
        </div>
    </form>
</body>
</html>

代码提示：

• 具有runat="server"属性的所有控件都必须放在具有runat="server"属性的 form 中。
• onserverclick是HTML服务器控件的单击事件。

第二步：在解决方案资源管理器中，找到当前WebForm1.aspx，点击左侧的三角形，双击打开文件WebForm1.aspx.cs，编写代码。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebApplication18
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void btnSure_ServerClick(object sender,EventArgs e)
        {
            Response.Write("欢迎您！" + txtName.Value);
        }
    }
}

注意：

        这里的事件，需要自己在WebForm1.aspx.cs文件里写。

1.4  Web服务器控件 

       与HTML服务器控件不同，Web 服务器控件不是由 HTML 元素直接转换而来的，而是微软重新定义的一套控件。第一章使用的 TextBox、Label 和 Button 都是 Web 服务器控件。Web 服务器控件提供统一的编程模型、包含方法以及与之相关的事件处理程序，并且这些代码都在服务器端执行。在 ASP.NET 中，我们平时使用的都是 Web 服务器控件。Web 服务器控件的标签都是以“asp:” 开头，称为标记前缀，后面是控件类型，如：<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> 。

注意：

        虽然runat="server"是 Web 服务器控件的默认属性，但该属性不能省略不写，否则会出现编译错误。

1.5      HTML控件、HTML服务器控件、web服务器控件之间的区别      

•     html控件：<input type="button" name="b1">，运行在客户端
•     html服务器控件：<input type="button" name="b1" runat="sever">，在服务器端运行
•     web服务器控件：<asp:Button id="b1" runat="server">，在服务器端运行

    HTML 服务器控件和 Web 服务器控件都是在服务器端运行，它们通过设置 id 属性，在服务器端用id来自动捕获它们。

                                                                               

                     

2、Web服务器控件的应用

2.1      显示文本控件  

（1）     Label控件  

        Label 控件是 ASP.NET 中最常用的控件之一，用于将文本内容显示在网页上，支持以编程方式动态修改显示的内容。Label 控件常用的成员如表所示。

                                                       

   

示例练习2：Label控件的使用

示例效果：网页运行后，用户通过快捷键“Alt+U”，快速访问文本框。

第一步：在当前项目中，新添加一个web窗体，并命名为Example2，如下图所示

第二步：Web窗体添加成功后，默认打开源代码界面，我们可以单击下方的【设计】，切换界面。然后从工具箱里分别拖一个Label控件和一个TextBox控件，并进行相关属性设置。

        TextBox控件：ID属性设置为：txtName
         Label控件：   ID属性设置为：lblName，AccessKey属性设置为：U，AssociatedControlID属性设置为：txtName，Text属性设置为：用户名（U）

     第三步：启动运行调试，查看效果。效果出现后，可以在VS中，回到【源代码】界面，查看代码的变化。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Example2.aspx.cs" Inherits="WebApplication19.Example2" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
        </div>
        <asp:TextBox ID="txtName" runat="server" Width="202px"></asp:TextBox>
        <asp:Label ID="lblName" runat="server" AccessKey="U" AssociatedControlID="txtName" Text="用户名（U）"></asp:Label>
    </form>
</body>
</html>

注意：当我们在设计界面拖放控件，并设置属性时，会自动在aspx页面生成对应代码。

提示：Label控件的Text属性中如果包含HTML标签，则会被浏览器解析并执行。

思考：在浏览器中查看页面源代码，看看两个源代码之间有什么区别，为什么？

（2）     TextBox控件  

        在页面中，使用 TextBox 控件收集用户输入的信息或者显示文本。它可以配置为单行、多行或者密码类型。TextBox 常用的成员如表所示。

示例练习3：TextBox控件的使用

示例效果：网页运行后，用户按照提示输入用户名、密码和留言，当用户留言结束离开TextBox控件时（失去焦点），触发OnTextChanged事件，显示欢迎语。

第一步：在当前项目中，新添加一个web窗体，并命名为Example3，然后在body里写一个4行2列的表格，做基础界面设计。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Example3.aspx.cs" Inherits="WebApplication20.Example3" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <table>
                <tr>
                    <td>用户名：</td>
                    <td>
                        <asp:TextBox ID="txtName" runat="server" Class="txt"></asp:TextBox></td>              
                </tr>
                    <tr>
                        <td>密码：</td>
                        <td>
                            <asp:TextBox ID="txtPwd" runat="server" TextMode="Password" Class="txt"></asp:TextBox></td>
                    </tr>
                        <tr>
                            <td>留言：</td>
                            <td>
                                <asp:TextBox ID="txtContent"  runat="server" TextMode="MultiLine" Rows="7"  Columns="45" Class="txt"  OnTextChange="txtContent_TextChanged"  AutoPostBack="true" ></asp:TextBox> </td>
                        </tr>
                    <tr>
                        <td colspan="2">
                            <asp:Label ID="lblInfo" runat="server" Text=""></asp:Label></td>
                    </tr>
            </table>
        </div>
    </form>
</body>
</html>

第二步：在head标签里，写一对style标签，写css样式，来控制表格的样式。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Example3.aspx.cs" Inherits="WebApplication20.Example3" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>  TextBox控件的使用练习 </title>
    <style type="text/css">
        table {border:1px solid black; border-collapse:collapse; width:490px;}
        td    {border:1px solid black; padding:10px;}
        .txt  {border:1px solid black;}
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <table>
                <tr>
                    <td>用户名：</td>
                    <td>
                        <asp:TextBox ID="txtName" runat="server" Class="txt"></asp:TextBox></td>              
                </tr>
                    <tr>
                        <td>密码：</td>
                        <td>
                            <asp:TextBox ID="txtPwd" runat="server" TextMode="Password" Class="txt"></asp:TextBox></td>
                    </tr>
                        <tr>
                            <td>留言：</td>
                            <td>
                                <asp:TextBox ID="txtContent"  runat="server" TextMode="MultiLine" Rows="7"  Columns="45" Class="txt"  OnTextChange="txtContent_TextChanged"  AutoPostBack="true" ></asp:TextBox> </td>
                        </tr>
                    <tr>
                        <td colspan="2">
                            <asp:Label ID="lblInfo" runat="server" Text=""></asp:Label></td>
                    </tr>
            </table>
        </div>
    </form>
</body>
</html>

第三步：点击【设计】，进入设计界面，选中留言对应的TextBox控件（ID属性被设置为txtContent），在属性面板点击【事件】，找到该控件的TextChanged事件，双击进入。（注意，这时候事件后面有事件名，是因为我们在第一步写源代码时，已经写好了事件名称。）

在txtContent_TextChanged事件中，编写代码：

protected void txtContent_TextChanged(object sender, EventArgs e)
        {
            lblInfo.Text = "您好：" + txtName.Text + "，您的留言是:" + txtContent.Text;
        }

第四步：启动运行调试，查看效果。

示例代码分析：

（1）OnTextChanged 事件在输入焦点离开 TextBox 时才被引发。 

（2）AutoPostBack 属性用于设置当触发文本框的 OnTextChanged 事件时，是否自动产生向服务器的回发。为了避免由于回发引起页面的刷新，默认把 AutoPostBack 属性设置为false。

（3）本例中，将用于输入留言的 TextBox 的 AutoPostBack 属性设置为 true，使 TextBox失去焦点后自动回发到服务器，以便立即处理 OnTextChanged 事件。 

2.2      显示图片控件  

        开发网站时，常常用到各种图片。Image 控件用于在网页上呈现图片，最终生成<img>元素，支持以编程的方式管理显示的图片。Image 控件常用成员如表所示。

     

示例练习4：Image控件的使用

示例效果：网页运行后，会随机显示一张图片，鼠标移动到图片上面，会出现该图片的说明性文字。刷新页面，会随机显示新的图片，同样，鼠标移动到该图片上也有提示文字。

第一步：在当前项目中，新添加一个web窗体，并命名为Example4，然后在设计界面，拖放一个Image控件，并设置属性。ID属性：imgWuhan、Height属性：200px、Width属性：300px

 切换到源代码模式，会看到我们添加的Image控件，已经被自动添加。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Example4.aspx.cs" Inherits="WebApplication21.Example4" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
        </div>
        <asp:Image ID="imgWuhan" runat="server" Height="200px" Width="300px" />
    </form>
</body>
</html>

第二步：在解决方案资源管理器中，鼠标右键单击当前项目名称WebApplication21，依次选择【添加】——【新建文件夹】——【将新建的文件夹命名为img】。然后鼠标右键单击文件夹【img】，再单击【在文件资源管理器中打开文件夹】，然后将自己需要的图片，存放在该文件夹里。

第三步：在解决方案资源管理器中，鼠标单击Example4.aspx文件前面的三角形，找到他对应的Example4.aspx.cs文件，双击进入，在Page_Load事件里编写代码。

     protected void Page_Load(object sender, EventArgs e)
     {

            Random num = new Random();
            int i = num.Next(1, 5);//随机产生1到5之间的整数
            imgWuhan.ImageUrl = "img/" + i + ".jpg";//构造图片的相对路径
            switch (i)
            {
                case 1:
                    imgWuhan.ToolTip = "凌波门";//设置图片的ToolTip属性
                    break;
                case 2:
                    imgWuhan.ToolTip = "武汉关";
                    break;
                case 3:
                    imgWuhan.ToolTip = "黄鹤楼";
                    break;
                case 4:
                    imgWuhan.ToolTip = "鹦鹉洲大桥";
                    break;
            }
        }

第四步：启动运行调试，查看效果。

2.3      控件的超级链接

        HyperLink 控件用于在网页上以图片或文本方式呈现一个链接，常用成员如表所示。

示例练习5：HyperLink控件的使用

示例效果：网页运行后，看到一个文本超链接“百度首页”、一张图片超链接，分别点击他们，都可以打开百度首页。

第一步：在当前项目中，新添加一个web窗体，并命名为Example5，然后在设计界面，拖放一个HyperLink控件，并设置属性。ID属性：hlkText、NavigateUrl属性：http://www.baidu.com、Target属性：_blank、Text属性：百度首页。

第二步：在设计界面新增加一个img文件夹，拷贝一个baidu.png图片到img文件夹

第二步：在设计界面，继续拖放一个HyperLink控件，并设置属性。ID属性：hlkImage、ImageHeight属性：100px、ImageUrl属性：img/baidu.png、ImageWidth属性：200px、NavigateUrl属性：http://www.baidu.com、Target属性：_blank。

（注意：这里设置ImageUrl属性时，采用的是相对路径，可以提前在自己项目的img文件夹中存放一张图片。如果自己练习时的图片名称、格式等不一致时，要学会自己更改，否则可能会导致图片不可见）

第三步：切换到源代码界面，查看代码

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Example5.aspx.cs" Inherits="WebApplication22.Example5" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
        </div>
        <asp:HyperLink ID="hlkText" runat="server" NavigateUrl="http://www.baidu.com" Target="_blank">百度首页</asp:HyperLink>
        <p>
            &nbsp;</p>
        <p>
            &nbsp;</p>
        <p>
            <asp:HyperLink ID="hlkImage" runat="server" ImageHeight="100px" ImageUrl="img/baidu.png" ImageWidth="200px" NavigateUrl="http://www.baidu.com" Target="_blank">HyperLink</asp:HyperLink>
        </p>
    </form>
</body>
</html>

 HyperLink 使用 Text 属性时，呈现一个文本方式的链接，最终会生成一个包含文本的<a>标签（<a id="hlkText" href="http://www.baidu.com" target="_blank">百度首页</a> ）。同时使用 ImageUrl 属性和Text 属性时，程序会优先显示 ImageUrl 属性中的图片，当图片不可用时则显示 Text 属性中的文字，HyperLink 控件会为 ImageUrl 属性生成<img>标签，并使用<a>标签嵌套（<a id="hlkImage" href="http://www.baidu.com" target="_blank"><img src="img/baidu.png" alt="HyperLink" style="height:100px;width:200px;" /></a> ）。

第四步：启动运行调试，查看效果。

点击《百度首页》即可自动跳转到百度网站首页。

2.4      单选按钮的应用

        在 ASP.NET WebForm 中，单选按钮主要有 RadioButton 控件提供。RadioButton 控件用于在页面创建一个单选项，可以使用GroupName属性，将多个单选项分为一组来创建多个互斥的选项。RadioButton 常用成员如表 所示。

示例练习6：RadioButton控件的使用

示例效果：网页运行后，有一组单选按钮选项，默认选项“男”被选中，用户可以根据需要，点选不同的选项，每次只能选中一个。

第一步：在当前项目中，新添加一个web窗体，并命名为Example6，然后在设计界面，拖一个Label，Label的TEXT属性写上文字“性别：”，再文字后面拖放一个RadioButton控件，并设置属性。ID属性：rdoSexM、Checked属性：True、GroupName属性：gender、Text属性：男。

第二步：在当前设计界面，继续拖放一个RadioButton控件，并设置属性。ID属性：rdoSexW、GroupName属性：gender、Text属性：女。

第三步：启动运行调试，查看效果。（可以切换到源代码界面，查看代码）

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Example6.aspx.cs" Inherits="WebApplication23.Example6" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
        </div>
        <p>
            <asp:Label ID="Label1" runat="server" Text="性别"></asp:Label>
            <asp:RadioButton ID="rdoSexM" runat="server" Checked="True" GroupName="gender" Text="男" />
            <asp:RadioButton ID="rdoSexW" runat="server" GroupName="gender" Text="女" />
        </p>
        <p>
            &nbsp;</p>
        <p>
            &nbsp;</p>
    </form>
</body>
</html>

运行效果

2.5      复选框的应用

        在 ASP.NET WebForm 应用程序中，CheckBox 控件用来在页面中创建复选框，常用成员见表 所示。

示例练习7：CheckBox控件的使用

示例效果：网页运行后，有一组复选框按钮选项，默认选项“篮球”被选中，用户可以根据需要，点选不同的选项，选中以后，单击确定按钮，会输出用户选中的选项。

第一步：在当前项目中，新添加一个web窗体，并命名为Example7，然后在设计界面，拖一个Label，Label的TEXT属性写上文字“请选择你喜欢的运动：”，在文字后面拖放一个CheckBox控件，并设置属性。ID属性：chkSport1、Checked属性：True、Text属性：篮球。

继续添加两个CheckBox控件，分别设置他们的属性：

ID属性：chkSport2、Text属性：足球

ID属性：chkSport3、Text属性：乒乓球

第二步：在当前设计界面，换行以后，继续拖放Button控件，并设置其属性，ID属性：btnSure、Text属性：确定。

第三步：在当前设计界面，换行以后，输入文字“你选择的爱好是：”，然后再文字后面拖放一个Label控件，并设置其属性，ID属性：lblState、Text属性： （设置为空）。

可以查看一下此时的源代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Example7.aspx.cs" Inherits="WebApplication24.Example7" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
        </div>
        <asp:Label ID="Label1" runat="server" Text="请选择你喜欢的运动"></asp:Label>
        <asp:CheckBox ID="chkSport1" runat="server" Checked="True" Text="篮球" />
        <asp:CheckBox ID="chkSport2" runat="server" Text="足球" />
        <asp:CheckBox ID="chkSport3" runat="server" Text="乒乓球" />
        <br />
        <asp:Button ID="btnSure" runat="server" Text="确定" />
        <p>
            <asp:Label ID="Label2" runat="server" Text="你选择的爱好是："></asp:Label>
            <asp:Label ID="lblState" runat="server"></asp:Label>
        </p>
    </form>
</body>
</html>

第四步：在当前设计界面，双击Button控件，进入该控件的事件，编写代码。

  protected void btnSure_Click(object sender, EventArgs e)
        {
            foreach(Control ct in form1.Controls)
            {
                if (ct.GetType().ToString().Equals("System.Web.UI.WebControls.CheckBox"))
                {
                    CheckBox cb = (CheckBox)ct;
                    if (cb.Checked==true)
                    {
                        lblState.Text += cb.Text + " ";
                    }
                }
             }
        }

代码解析：

• foreach (Control ct in form1.Controls){}；使用foreach循环，遍历指定元素中的所有控件。（注意：本示例里使用的是form1.Controls，因为我们的源代码里默认的是 <form id="form1" runat="server">，如果使用其他id，请注意替换。）
• GetType()方法：GetType()方法继承自Object，所以C#中任何对象都具有GetType()方法，它的作用和typeof()相同，返回Type类型的当前对象的类型。 （区别：typeof(x)中的x，必须是具体的类名、类型名称等，不可以是变量名称。）
• ToString()方法：用于将对象实例以字符串的形式显式。（区别：GetType()方法用于获取对象实例的类型）
• Equals()方法：  用来比较引用相等，意味着比较的不是两个对象，而是两个对象的引用，比较两个对象指向的内存空间的内容是不是相同。

注意：

        CheckBox 最终生成的 HTML 元素是<input type=”checkbox”>和<label>，如示例 6中， 用来选择“篮球”的 CheckBox 产生的 HTML 代码是：<input id="chkSport1" type="checkbox" name="chkSport1" checked="checked" /><label for="chkSport1">篮球</label>

第五步：运行效果

点击【确定】

选择【足球】，点击【确定】

2.6      列表控件

        列表控件主要用于显示若干个选项，让用户选择其中一项或多项，具体过程取决于列表控件允许单选还是多项。列表控件常用的成员如表 所示。

在 ASP.NET 中，列表控件包括 DropDownList 控件、ListBox 控件、RadioButtonList 控件和CheckBoxList 控件。 

1. DropDownList 控件：用来制作下拉列表框，默认情况下，其选项都是第一项（索引为 0 的项）。 该控件最终会生成一个<select>HTML 元素，Items 属性中的每个选项都将生成一个<option>元素，但默认状况下它只支持单项选择模式，不支持多项选择模式。使用多项选择模式时可以使用ListBox 控件。 
2. ListBox 控件：是允许用户选择一项或多项的列表控件，该控件最终会生成<select>HTMl 元素，Items 属性中的每一个选项都将生成<option>元素。除了列表控件的常用成员之外，ListBox控件还包含一个常用成员——Rows 属性，用于设置和获取 ListBox 中显示列表项的数目。将ListBox 控件的 Rows 属性设置为 1 时，其外观将与 DropDownList 相同。 
3. RadioButtonList 控件：用于在页面上创建一组单选按钮，可以设置选项的排列与布局。
4. CheckBoxList 控件：用于在页面上创建一组复选框，可以设置选项的排列与布局。

除了列表控件常用的成员之外， RadioButtonList 与 CheckBoxList 的常用成员见表所示。

示例练习8：列表控件的使用

示例效果：网页运行后，显示各种类型的列表控件，用户可以根据需要进行选择。

第一步：根据案例要求准备好数据库文件。（推荐阅读：SQL Server数据库第三课2：使用create语句新建数据库、数据库表）

在这里，我是用MySQL创建数据库。

               我用MySQL数据库创建了一个数据库CarSYS，数据库CarSYS内有一个表名为Brand，有2个字段：BrandId是整数，就主键，标记序号；BrandName是汽车名称，是字符串。

第二步：设计前台界面，在当前项目中，新添加一个web窗体，并命名为Example8。

在设计界面，写上文字“DropDownList控件：”，在文字后面拖放一个DropDownList控件，并设置属性。ID属性：ddlCarType、Height属性：30px、Width属性：176px。
 

换行以后继续输入文字“ListBox控件：”，然后在文字后面拖放一个ListBox控件，并设置属性。ID属性：lbCarType、Height属性：86px、Width属性：122px、Rows属性：5。

换行以后继续输入文字“RadioButtonList控件：”，然后在文字后面拖放一个RadioButtonList控件，并设置属性。ID属性：rblCarType、RepeatColumns属性：5、RepeatDirection属性：Horizontal。

换行以后继续输入文字“CheckBoxList控件：”，然后在文字后面拖放一个CheckBoxList控件，并设置属性。ID属性：cblCarType、RepeatColumns属性：5、RepeatDirection属性：Horizontal。

此时预览网页，看一下效果，由于没有绑定数据库，所以控件里的内容都是空的

第三步：添加MySQL数据库的引用

   

添加MySQL.Data.dll

第四步：连接数据库，在解决方案资源管理器中，鼠标单击Example8.aspx文件前面的三角形，找到他对应的Example8.aspx.cs文件，双击进入，在Page_Load事件里编写代码。（数据库连接操作，推荐阅读：ADO.NET数据库开发（三）DataSet 对象和DataAdapter 对象的使用）

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using MySql.Data.MySqlClient;   //我使用的是MySQL数据库


namespace WebApplication25
{
    public partial class Example8 : System.Web.UI.Page
    {
       
        protected void Page_Load(object sender, EventArgs e)

        {

            string constr = "Server=localhost;UserId=root;Password=68331;Database=CarSYS;pooling=false;CharSet=utf8;port=3306";//声明一个字符串用来存放连接数据库的信息
            string sql = "select * from Brand";//声明一个字符串，用来存放查询数据库表语句
            MySqlConnection con = new MySqlConnection(constr);//创建一个SqlConnection对象，由于我使用的是MySQL数据库，因此注意要引用using MySql.Data.MySqlClient;

            try       //将可能出错的语句放在try语句里
            {
                con.Open();//打开数据连接
                MySqlDataAdapter sda = new MySqlDataAdapter(sql, con);//创建一个SqlDataAdapter对象，
                DataSet ds = new DataSet();//创建一个DataSet对象，注意要引用using System.Data;
                sda.Fill(ds);

                //用DropDownList显示品牌
                ddlCarType.DataSource = ds.Tables[0]; //设置表格对象，列表控件从该对象中检索其数据项列表
                ddlCarType.DataTextField = "BrandName";//设置为列表项提供文本内容的数据源字段
                ddlCarType.DataValueField = "BrandId";//设置为列表项提供值的数据源字段
                ddlCarType.DataBind();//将数据源绑定到控件中
                ddlCarType.Items.Insert(0, new ListItem("请选择", "-1"));//插入"请选择"项，必须放到数据绑定之后：

                //用ListBox显示品牌
                lbCarType.DataSource = ds.Tables[0];
                lbCarType.DataTextField = "BrandName";
                lbCarType.DataValueField = "BrandId";
                lbCarType.DataBind();

                //用RadioButtonList显示品牌
                rblCarType.DataSource = ds.Tables[0];
                rblCarType.DataTextField = "BrandName";
                rblCarType.DataValueField = "BrandId";
                rblCarType.DataBind();
                rblCarType.SelectedIndex = 0;

                //用CheckBoxList显示品牌
                cblCarType.DataSource = ds.Tables[0];
                cblCarType.DataTextField = "BrandName";
                cblCarType.DataValueField = "BrandId";
                cblCarType.DataBind();
                cblCarType.SelectedIndex = 0;
            }

            catch (Exception ex)
            {
                Response.Write(ex.Message);
            }

            finally
            {
                con.Close();//关闭数据库连接
            }
        }
    }
}

2.6      HiddenField控件

        HiddenField 控件是 ASP.NET 表单类控件，它没有用户界面，包含一个常用属性 Value。HiddenField 控件会生成“type=’hidden’”的 input 元素。 

        在实际项目中，为了避免页面回发时使数据恢复初始化的状态，可以使用 HiddenField 控件来保存这些数据。

示例练习9：HiddenField控件的使用

示例效果：单击 Button 时，Label 显示的数据从 0 开始，以 1 的步长逐步递增的功能。

                          

 
第一步：在当前项目中，新添加一个web窗体，并命名为Example9，然后在设计界面，拖放一个HiddenField控件，并设置属性。ID属性：hfNumber、Value属性：0。

继续拖放一个Label控件，并设置属性。ID属性：lblCount、Text属性为：累计到：0。

继续拖放一个Button控件，并设置属性。ID属性：btnAdd、Text属性为：累计。

第二步：在解决方案资源管理器中，鼠标单击Example9.aspx文件前面的三角形，找到他对应的Example9.aspx.cs文件，双击进入，编写代码。

       public int i
        {
            get
            {
                return int.Parse(hfNumber.Value);
            }

            set
            {
                hfNumber.Value = value.ToString();
            }

        }

第三步：在解决方案资源管理器中，切换到Example9.aspx文件的设计界面，双击Button按钮进入Click事件，编写代码。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebApplication26
{
    public partial class Example9 : System.Web.UI.Page
    {

        public int i
        {
            get
            {
                return int.Parse(hfNumber.Value);
            }

            set
            {
                hfNumber.Value = value.ToString();
            }

        }

        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void btnAdd_Click(object sender, EventArgs e)
        {
            i++;
            lblCount.Text = "累计到：" + i;
        }
    }
}

下面是运行结果

3、    服务器控件的客户端事件处理

           ASP.NET 事件主要是指在服务器端处理的事件，但对有些服务器控件的操作并不会触发页面回发，可以将服务器控件的 AutoPostback 属性设置为 true，使该控件立即触发页面回发，以便服务器端处理操作引发的事件。但是回发会导致整个页面的频繁刷新，降低客户的体验度，也会增加服务器的负担，所以可以将一些工作借助客户端事件进行处理。 

           客户端事件在浏览器中引发后立即捕获，由浏览器中的 javascript 脚本负责处理；在ASP.NET 中，服务器控件借助 Attributes 属性来支持客户端的各种事件。 

           Attributes 属性由 System.Web.UI.WebControls.WebControl 类提供，所有呈现为 HTMl 标签的 Web 服务器控件都拥有此属性。Attributes 属性是在服务器端为服务器控件添加客户端处理代码的解决方案。 

示例练习10：服务器控件的客户端事件处理

        示例效果：单击 Web 服务器控件 Button 时，首先弹出对话框，提示用户“您确认删除吗”，如果用户单击“确定”，则提示“正在执行删除操作”。

第一步：在当前项目中，新添加一个web窗体，并命名为Example10，然后在设计界面，拖放一个Button控件，并设置属性。ID属性：btnDel、Text属性：删除。

第二步：在解决方案资源管理器中，鼠标单击Example10.aspx文件前面的三角形，找到他对应的Example10.aspx.cs文件，双击进入，编写代码。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebApplication27
{
    public partial class Example10 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
               //使用Attributes属性为服务器控件添加onclick客户端事件的处理
               btnDel.Attributes.Add("onclick", "javascript:return confirm('您确认删除吗？')");
        }
    }
}

第三步：在解决方案资源管理器中，切换到Example10.aspx文件的设计界面，双击Button按钮进入Click事件，编写代码。

 protected void btnDel_Click(object sender, EventArgs e)
        {
            Response.Write("正在执行删除操作！");
        }

       

        下面是运行结果

注意：案例中，Button 服务器控件既写了客户端单击事件, 又写了服务器端单击事件。那么当单击该 Button 时，先执行客户端单击事件“return confirm('您确认删除吗？')”，如果返回的是 false，则不会触发服务器端的单击事件，也不会导致回发。如果返回的是 true，那么在执行完客户端脚本之后进行回发。注意回发时，也要先触发 Page_Load 事件，然后再触发服务器端的单击事件。

 ————————————————

版权声明：本文为CSDN博主「逍遥小丸子」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/dnruanjian/article/details/102465685

https://blog.csdn.net/dnruanjian/article/details/102465685

    Asp.net在客户端开发和web开发所用到的控件还是有很大的差别的，而且Web开发的界面是在浏览器中显示的，所以控件的设计都和前边学习HTML设计有联系，没有客户端开发那么简单，不过我们可以通过专门工具，例如Dreamweaver（还在学习中）等，来帮助我们开发。这篇博客，先简单总结各个控件的功能！

 

   先看控件的学习分类：

     一，对于标准服务器控件，我不想多写，因为他大部分都和C/S窗体设计当中的功能差不多，只不过使用稍微有区别。这里简单罗列下，总结其中我认为典型的两个。

   在这里我总结一下，HyperLink控件和FileUpload控件。其他控件的详细使用，大家上网查都有的。

       1，HyperLink:

         (1),功能：在网页上创建连接，使用户可以在应用程序的不同页面之间转换，还可以显示可单击的文本或图像。以超链接的形式显示。

        （2），常用属性：

             其中的Target值：

     2，FileUpLoad控件：

     （1），功能:显示一个文本框控件和一个浏览按钮，用户通过FileUpLoad控件，可以在客户端选择一个文件并将该文件上传到Web服务器上，可以上传图片，文本文件等很多格式的文件。

     （2），常用属性；

    二，验证控件：

      1，总述：数据验证控件是一个集合，使用验证控件可以验证输入的信息是否符合我们想要的特定的标准。

      2，内容：

    （下边验证部分是自己网上找的自己进行简单的修改，感觉总结的挺好）

        1、RequiredFieldValidator（必填字段验证）的使用

RequiredFieldValidator控件使用的标准代码如下：

<asp:RequiredFieldValidator ID="Validator_Name" runat="Server" ControlToValidate="要检查的控件名"
                ErrorMessage="出错信息" Display="Static|Dymatic|None">
占位符
</asp:RequiredFieldValidator>

在以上标准代码中：

ControlToValidate：表示要进行检查控件ID；

ErrorMessage：表示当检查不合法时，出现的错误信息；

Display：错误信息的显示方式；Static表示控件的错误信息在页面中占有肯定位置；Dymatic表示控件错误信息出现时才占用页面控件；None表示错误出现时不显示，但是可以在ValidatorSummary中显示；

占位符：表示Display为Static时，错误信息占有"占位符"那么大的页面空间；

2、CompareValidator（比较验证）控件

比较控件比较两个控件的输入是否符合程序设定，大家不要把比较仅仅理解为"相等"，尽管相等是用的最多的，其实，这里的比较包括范围很广，大家看标准代码就会明白。

CompareValidator控件的标准代码如下：

<asp:CompareValidator ID="Validator_ID" runat="Server" ControlToValidate="要验证的控件ID"
                ControlToCompare="要比较的控件ID" ErrorMessage="错误信息" Type="String|Integer|Double|DateTime|Currency"   Operator="Equal|NotEqual|GreaterThan|GreaterTanEqual|LessThan|LessThanEqual|DataTypeCheck"
              Display="Static|Dymatic|None">
占位符
</asp:CompareValidator>

在以上标准代码中：

Type：表示要比较的控件的数据类型；

Operator：表示比较操作，这里，比较有7种方式；

其他属性和RequiredFieldValidator相同；

在这里，要注意ControlToValidate和ControlToCompare的区别，如果operate为GreateThan，那么，必须ControlToCompare大于ControlToValidate才是合法的，这下，应该明白它们两者的意义了吧？例子程序请参考RequiredFieldValidator控件，对照标准代码自己设计。

 

3、RangeValidator（范围验证）控件

验证输入是否在一定范围，范围用MaximumValue和MinimunVlaue来确定。

RangeValidator控件标准代码如下：

<asp:RangeValidator ID="Vaidator_ID" runat="Server" ControlToValidate="要验证的控件ID"
                Type="String|Integer|Double|DateTime|Currency" MinimumValue="最小值" MaximumValue="最大值"
                ErrorMessage="错误信息" Display="Static|Dymatic|None">
占位符
 </asp:RangeValidator>

在以上代码中：

用MinimumValue和MaximumValue来界定控件输入值得范围，用type来定义控件输入值的类型。

 

4、RegularExpresionValidator（正则表达式）控件

正则表达式验证控件的功能非常强大，你可以自己容易构造验证方式，我们先来看看标准代码：

<asp:RegularExpressionValidator ID="Validator_ID" runat="Server" ControlToValidate="要验证控件名"                ValidationExpression="正则表达式" ErrorMessage="错误信息" Display="Static|Dymatic|None">
占位符
</asp:RegularExpressionValidator>

在以上标准代码中，ValidationExpression是重点，现在来看看它的构造：

在ValidationExpression中，不同的字符表示不同的含义：

星号"*"：表示和其他表达式一起，表示容易组合；

方括号“[ ]”：用与定义可接受的字符。[abc123]表示控件只能接受 a，b，c，1，2，3这6个字符；[A-Z]表示任意大写字母；

反集合符号“ ^”：用于定义不可以接受的字符。[^a-h]表示控件除了 a到h 8个字符外，都可以接受；

花括号“{ }”：定义必须输入的字符个数。{6}表示只能输入6个字符； {6，}表示必须输入6个以上，无上限；{2，6}表示必须输入2至6个字符；但是花括号必须放在方括号后面，例如 [a-z]{4} 表示必须输入 4位a和z之间的任意字符。

小圆点“ .”：用于代表任意字符。例如 .{3，6}表示接受3到6个任意字符。

竖线“ |”：用于表示“或”的逻辑符号。例如 [1-9]{3，6}|[A-Za-z]{3}表示可以接受 3到6个数字或者 3个字母。（大小写都可以区别的哦） 

小括号“（）”：用于分块，与数字运算中的小括号作用类似。

斜线“ \”：若希望可以接受的字符包含上述特殊字符。例如 \([0-9]{3}\),表示输入格式为“（xxx）”的电话区号。

注意，在以上表达式中，引号不包括在内；

举例：正则表达式：".*[A-Z]"表示数字开头的任意字符组合其后接一个大写字母。

 

这里我想插一点，就是在ASP.NET中我们可以设置属性来直接生成一些格式的正在表达式，非常方便：

5、CustomValidator（自定义验证）控件

该控件用自定义的函数界定验证方式，其标准代码如下：

<asp:CustomValidator ID="Validator_ID" runat="Server" ControlToValidate="要验证的控件"
 OnServerValidate="服务器段验证函数" ClientValitationFunction="客户段验证函数" ErrorMessage="错误信息"       Display="Static|Dymatic|None"></asp:CustomValidator>
占位符 
</asp:CustomValidator>

以上代码中，用户必须定义一个函数来验证输入。

6、ValidationSummary（验证总结）控件

该控件不对Web窗体中输入的数据进行验证，而是收集本页的所有验证错误信息，并可以将它们组织以后再显示出来。其标准代码如下：

<asp:ValidationSummary ID="Validator_ID" runat="Server" HeaderText="头信息" ShowSummary="True|False"
                DiaplayMode="List|BulletList|SingleParagraph" />

在以上标准代码中，HeadText相当于表的HeadText，DisplayMode表示错误信息显示方式：List相当于HTML中的＜BR＞；BulletList相当于HTML中的＜LI＞；SingleParegraph表示错误信息之间不作如何分割。

     三，登录控件：

       1，总述：对于目前常用的网站系统而言，登录功能是必不可少的，例如论坛、电子邮箱、在线购物等。登录功能能够让网站准确的验证用户的身份。用户能够访问该网站时，可以注册并登录，登录后的用户还能够注销登录状态以保证用户资料的安性。ASP.NET就提供了一系列的登录控件方便登录功能的开发。

 

        2，内容：

        3，Login登录控件：

           常用属性：

      其他的几个和这个很相同，都是为了实现有关登录的功能，ASP.NET提前为大家设计好的，我们直接使用即可！

 

    四，用户控件：

      1，概述：用户控件是一种复合控件，其工作原理类似于ASP.NET中的网页，可以向用户控件中添加现有的Web服务器控件和标记，并定义控件的属性和方法。

      和我们客户端开发中的用户控件功能一样，可以根基我们自己的意愿去利用现有的控件设计满足我们需求的控件。

      综上为，ASP.NET中控件的简单总结，需要我们从实践中更进一步掌握！