HTML控件和Web服务器控件

ASP.NET程序设计教程第5章HTML控件和Web服务器控件河南城建学院计算机科学与工程系第5章HTML控件和Web服务器控件2内容本章主要介绍了ASP.NET中几种基本的HTML控件和Web服务器控件,详细介绍了各控件的基本属性及使用方法.第5章HTML控件和Web服务器控件3ASP．NET的四种服务器控件服务器控件是Web表单的用户界面元素。ASP．NET有四种服务器控件：HTML控件Web服务器控件有效性验证控件用户控件第5章HTML控件和Web服务器控件4服务器控件：HTML控件代表常规的HTML表单元素，如文本框和按钮，但它们是在服务器上创建的，您可以在服务器上控制它们。Web控件与此类似，但提供了更多的功能，可以提供更复杂的用户界面。有效性验证控件用于验证用户的输入。用户控件是自定义的控件，用于实现某些功能。有效性验证控件将在第6章介绍。所有服务器控件都有属性、方法和事件。它们提供的功能比传统HTML表单元素多，使开发人员创建用户界面更容易。第5章HTML控件和Web服务器控件5服务器控件事件服务器能引发多种事件。换句话说，用户可以对服务器控件执行许多操作：单击按钮、单击连接、填写文本框、选择列表框中的条目，等等。所有这些都要由服务器进行处理，每当事件发生时，客户都要向服务器发送信息。第5章HTML控件和Web服务器控件6服务器控件事件的主动与被动事件注意：将被动用户事件与主动事件区别开来很重要。主动事件要求用户进行明确的操作，即用户必须进行有意识的操作，包括单击按钮或链接、填写文本框等。被动事件是用户无意中执行的操作，例如鼠标在图像上移动。只有主动事件才会在服务器上进行处理，因为被动事件太多，无法将其所有的数据发送给服务器，不过可以通过客户端脚本来处理它们。第5章HTML控件和Web服务器控件75.1HTML控件以前我们介绍过一些基本的HTML标记，这些HTML标记在以往的静态网页或ASP动态网页里即可满足我们的需求。但是标准的HTML标记并没有办法利用程序直接来控制它们的属性、使用方法和接收事件，程序员必须另外学习其它如JavaScript等程序语言才得以控制这些HTML标记。ASP.NET为动态网页程序设计带来了许多新的技术，这些技术其中之一就是将所有的HTML标记对象化，让程序可以直接控制；对象化之后的HTML标记我们称为HTML控件。第5章HTML控件和Web服务器控件85.1HTML控件HTML控件由HTML标记衍生而来，HTML控件在外形上与普通的HTML标记很相似，几乎所有的HTML标记加上runat=“Server”这个Server控件的标识属性后，都可以变成HTML控件。我们可以使用如VB.NET或C#等语言来撰写控制HTML控件的程序，ASP.NET把HTML标记对象化，可以让网页对象的互动、程序的写作及维护变的更轻松容易，也让执行的效率明显的改善不少。ASP.NET将HTML标记对象化的好处，我们观察以下程序便了解：第5章HTML控件和Web服务器控件9HTML控件（例1）!--传统的HTML静态网页写作方式--HtmlBodyAHref=请按这里/A/Body/Html传统的HTML标记无法利用程序直接控制，这是因为HTML标记当初设计时并没有彻底对象化；所以如果要动态的利用程序设定标记的属性，必需要插入ASP程序才可以，如下所示：第5章HTML控件和Web服务器控件10HTML控件（例2）!--为了动态的设定标记的属性，必需在标记中插入许多程序--html%strAddress==%=strAddress%请按这里/A/html第5章HTML控件和Web服务器控件11HTML控件（例2注释）ASP网页设计师没有办法直接利用程控对象，所以必需在标记后面插入一些ASP程序代码。这就是为什么以前的ASP程序代码非常杂乱，常常会看到标记中插入许多叙述的程序，这样会导致程序代码在维护以及阅读上的困难。ASP.NET为了要解决这种杂乱无章的程序写作风格，便将HTML标记对象化而产生出HTML控件。HTML控件可以让程序直接控制并设定其属性，如下范例所示：第5章HTML控件和Web服务器控件12HTML控件（例3）!--ASP.NET的HTML控件可以利用程序直接控制--htmlAId=Anchor1Runat=Server请按这里/A,成为对象了/htmlScriptLanguage=C#Runat=ServervoidPage_Load(){Anchor1.HRef==欢迎来到微软中国;}/Script第5章HTML控件和Web服务器控件13HTML控件（例3注释）HTML控件比HTML标记多了ID以及Runat这两种属性。ID属性表示程序是以本属性来控制对象的，所以任何对象的名称不可重复，不管它们是否为同一种类。而Runat属性表示这个对象是在Server端执行，所有的HTML控件都必须加上这个属性设定值；倘若该对象在程序执行时不需要被程控，则可以忽略ID属性的设定。在VS.NET中利用HTML标记变为HTML控件第5章HTML控件和Web服务器控件14HTML控件对事件的支持：我们知道网页在被加载时会先触发Page_Load事件，此时我们就可以利用这个事件进行对象的初值化，以及从数据库抓数据回来等工作，所以我们在Page_Load事件程序中利用程序指定超级链接控件Anchor1的HRef属性。这样一来程序代码和HTML控件分开，程序的架构就不会显的杂乱无章而不好管理。了解HTML控件可以直接被程序所控制后，我们再来了解HTML控件对事件的支持：第5章HTML控件和Web服务器控件15HTML控件对事件的支持（示例）!—LI4.ASPX--htmlFormRunat=ServerButtonId=Button1Runat=ServerOnServerClick=Button1_Click改变字体/ButtonBR；成了对象（控件）。/FormSpanId=Sp1“Runat=Server原来的字体/Span(接下页）第5章HTML控件和Web服务器控件16HTML控件对事件的支持（续）（接上页）ScriptLanguage=C#Runat=ServerpublicvoidButton1_Click(objectsender,EventArgse){Sp1.InnerHtml=B按下Button1后出现的字体/B;}/Script/html第5章HTML控件和Web服务器控件17HTML控件对事件的支持（续2）在LI4.ASPX上述程序代码中我们声明了名为Button1的Button控件，除指定Runat属性值为Server外还指定了OnServerClick属性为Button1_Click。OnServerClick是Button对象所支持的事件，本事件在使用者按下按钮时便会触发。设定本属性表示发生OnServerClick事件时要执行哪个事件程序，我们将属性值填入Button1_Click则表示当使用者按下按钮时，便会执行Button1_Click这个事件程序。第5章HTML控件和Web服务器控件185.1.1HTML控件的优点HTML控件将HTML标记对象化，可以让程序直接控制并设定其属性，这样一来程序代码和HTML控件分开，程序的架构就不会显的杂乱无章而不好管理。HTML控件对事件的支持，以事件触发方式来编写程序，使得网页编程变得更加简单。第5章HTML控件和Web服务器控件19HTML控件架构当ASP.NET网页执行时，会检查标注有无Runat属性。如果标注没有设定这个属性，那么该标注就会被视为字符串，并被送到字符串流等待送到客户端的浏览器进行解译。如果标注有设定Runat=“Server”属性，那么就会依照该标注所对应的HTML控件来产生对象，所以ASP.NET对象的产生是由Runat属性值所决定的。当程序在执行时解析到有指定Runat=Server属性的标注时，Page对象会将该控件从.NET共享类别库加载并列入控制架构中，表示这个控件可以被程序所控制。等到程序执行完毕后再将HTML控件的执行结果转换成HTML标注，然后送到字符串流和一般标注一起下载至客户端的浏览器进行解译。第5章HTML控件和Web服务器控件205.1.2HTML控件架构HTML控件的执行过程：转换成HTML标注ASPX文件检查标注是否有runat=“server”字串流加载器公共类库HTML控制项执行是否第5章HTML控件和Web服务器控件215.1.2HTML控件架构所有的Html控件位于System.Web.UI.HtmlControls命名空间中，是从HtmlControl基类中直接或间接派生出来的。第5章HTML控件和Web服务器控件225.1.2HTML控件架构第5章HTML控件和Web服务器控件235.1.3HTML控件常用属性Style属性Attributes属性Visible属性Disabled属性InnerHtml属性及InnerText属性第5章HTML控件和Web服务器控件245.1.3.1Style属性ASP.NET为每个Html控件提供了一个Sty1e的属性，Style属性实际上是一个样式表属性集合，通过设置Style中的属性，能通过程序代码在程序执行过程中改变Html控件的样式。第5章HTML控件和Web服务器控件255.1.3.1Style属性Style属性可以设定的样式：样式名称说明设定值Background-Color背景色RGB值或指定颜色Color前景色RGB值或指定颜色Font-Family字型标楷体Font-Size字体大小20ptFont-Style斜体Italic(斜体)或Normal(一般)Font-Weight粗体Bold(粗体)或Normal(一般)Text-Decoration效果Underline(底线)、Strikethrough(穿越线)、Overline(顶线)或是None(无)Text-Transform转大小写Uppercase(全转大写)、Lowercase(全转小写)、InitialCap(前缀大写)或是None(无)第5章HTML控件和Web服务器控件265.1.3.1Style属性例[5.3]：通过程序来控制Anchor1控件的Style属性：publicclassWebForm1:System.Web.UI.Page{privatevoidPage_Load(objectsender,System.EventArgse){//在此处放置用户代码以初始化页面//指定超级链接的属性Anchor1.Style[color]=#008000;Anchor1.Style[font-size]=10pt;Anchor1.Style[text-decoration]=none;Anchor1.Style[font-style]=italic;}}第5章HTML控件和Web服务器控件27小结：通过使用标记Script.../Script和%...%，ASP.NET代码得以和HTML标记隔离开来。大多数代码都应该放在前一个标记中，因为这些代码将被编译，并消除了代码令人眼花缭乱的问题。注释由下述三组标记之一：!--...--用于注释HTML代码；“‘”用于VB；”//”用于C#;而％--…--%用于服务器端。这些注释通常用于解释代码，它们不影响代码的执行。使用连行符（_）可以将长语句分成多行，在字符串中使用该字符时，务必用双引号括起字符串的前半部分，并在后面加上“和”符号。第5章HT