1 / 71

第 3 章 ASP.NET 服务器端控件

第 3 章 ASP.NET 服务器端控件. 本章要点 了解 Web Form 的基本概念 了解控件基本概念 了解 HTML 普通控件 了解 HTML 服务器端控件 掌握 Web 控件的使用方法. 3.1 Web Form 的基本概念.

ezhno
Télécharger la présentation

第 3 章 ASP.NET 服务器端控件

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 第3章ASP.NET服务器端控件 • 本章要点 • 了解Web Form的基本概念 • 了解控件基本概念 • 了解HTML普通控件 • 了解HTML服务器端控件 • 掌握Web控件的使用方法

  2. 3.1 Web Form的基本概念 • 在ASP.NET中，一个网页或窗口被看成是一个Web Form(网页表单)。Web Form把Web应用程序的用户界面分割成两部分：可视化用户组件界面(Visual Component)部分和接口逻辑(User Interface Logic)部分。其中，前者指包含HTML标记及服务器端控件声明的部分（也就是浏览器中看到的部分），这部分就好像是一个大容器，开发者可以在其中放入各种ASP.NET控件。而后者是指由开发者编写的用于与网页表单交互的代码。正如第一章所介绍的那样：如果使用普通的文本编辑器进行设计，则上述两个部分放在同一个文件中，并以ASPX作为后缀。如果使用的是Visual Studio.NET进行设计，则可视化组件与接口逻辑将分处于不同的文件中。

  3. 3.2 控件概述 • 控件:普通HTML控件、HTML服务器控件、Web服务器控件、自定义控件 • 在ASP中使用的HTML普通控件有input类型(具体有：button checkbox file hidden image password radio reset submit text)，select和textarea类型，(严格地说，以上所列12种控件仅是HTML标记，还谈不上是控件，在不和Script脚本配合的情况下，仅有属性，不具有对象以及事件和方法的处理)。在ASP.NET中仍然兼容这些控件，同样可以使用原先的这些标注及相应的各种属性，按照语法规则，编写客户端的页面文档

  4. 3.2.1 HTML普通控件 【例3-1】 12种HTML普通控件应用 • 脚本代码如下： • <HTML><HEAD><TITLE>biaodan</TITLE> • <meta content='text/html; charset=gb2312' http-equiv='Content-Type'> • <style type=“text/css”> • body {font-family:宋体; font-size:20px} • </style> • <script language=“JavaScript”> • function fCheck() • { alert(“您输入的姓名：” + document.form1._xm.value); • } • </script></HEAD> • <BODY bgColor=#D9DCFF> • <P align=center><B><FONT color=#8000ff face=华文彩云><big><big><big> • 欢迎您进入紫莎调查网</big></big></big></FONT></B></P> • <FORM action='http://stu.jxyd.net/099/Debug.aspx' method=post name=form1> • <P align=center><B>请输入您的姓名:</B> <INPUT name=_xm type=text size=12></P> • <P align=center><B>请输入通行密码:</B> <INPUT name=2mm type=password size=12></P> 转下页

  5. <P align=center><B>性别:</B> • <INPUT name=3r type=radio value='男' checked>男 • <INPUT name=3r type=radio value='女'>女</P> • <P align=center><B>请选择您喜欢的颜色:</B> • <INPUT name=4c type=checkbox value='红' checked>红 • <INPUT name=4c type=checkbox value='黄'>黄 • <INPUT name=4c type=checkbox value='绿'>绿 • <INPUT name=4c type=checkbox value='蓝' checked> • 蓝 &nbsp;</P> • <P align=center><B>请选择您喜欢的饰物:</B> <SELECT name=5s> • <OPTION selected value='毛绒玩具'>毛绒玩具</OPTION> • <OPTION value='八音盒'>八音盒</OPTION> • <OPTION value='神奇书包'>神奇书包</OPTION></SELECT>&nbsp;</P> • <P align=center><B>请传入文件: <INPUT name=6f type=file size=30></B></P> • <P align=center><B>请输入您的要求和意见: </B>&nbsp; • <BR><TEXTAREA name=7t cols=56 rows=4></TEXTAREA><BR> • <INPUT name=8h type=hidden value='祝老师身体健康，工作顺利!'> • <P align=center> • <INPUT name=ok type=submit value='提交'> • <INPUT name=re-input type=reset value='重选'> • <INPUT name=img type=image src='img\submit.gif'>&nbsp; • <INPUT name=b type=button value='检查姓名输入' onclick='fCheck();'> • </P> • </FORM></BODY></HTML>

  6. 3.2.2 HTML服务器端控件 1、概述 • ASP.NET改进了HTML，将HTML普通控件封装为服务器控件。在Server端，控件被解释成HTML代码，然后再发送到客户端。服务器控件，是在普通控件的标注中加上runat=server的属性项，在客户端形成的页面上多了一些内部的代码。HTML服务器控件是在HTML普通控件和Web服务器控件之间的折衷，它们使用熟悉的HTML元素，提供有限的对象。 • 虽然HTML服务器控件和HTML普通控件在显示的形式上互相对应，但在基于事件的驱动和基于控件的编程方面都有了更大的改变。

  7. 3.2.2 HTML服务器端控件 2、HTML服务器端控件与HTML标记的关系 • HTML服务器端控件由标准的HTML标记衍生而来，几乎与HTML标记有一一对应的关系，因此二者的属性也基本相同。HTML服务器端控件与HTML标记的区别在于：HTML Server控件的功能更为强大且在服务器端运行。将HTML标记转化为HTML Server控件的方法为：在需要转换为HTML服务器端控件的HTML标记中加入runat=“server”及id=“XXX”属性即可。有些还需要在HTML标记结尾处添加上一个“/”作为结束标记。表3-2列出一HTML Server控件与HTML标记的对应关系。由于<Body>、<Font>、<Div>、<Span>、<HR>等标记难以归类，故ASP.NET将它们之统称为HtmlGenericControl控件。

  8. 课堂实训1 • 将HTML标记转换为HTML Server控件。 • 用户输入值，提交后显示输入值。 • 操作分析： • 将HTML中的文本框、提交按钮转换为HTML服务器端控件后，由ASP.NET程序处理这些控件。

  9. 3.2.2 HTML服务器端控件 3、使用HTML服务器端控件的原因 • 1、用于将页面显示代码和页面控制代码分离，更便于页面的编写和维护 • 2、具有”回送”功能 • 3、既支持服务器端事件，又支持客户端事件

  10. 3.2.3 HTML服务器端控件的通用属性 • 1、Attributes属性——获取或设置HTML Server控件的所有属性值 • l语法格式：对象名称. Attributes(“属性名称”)=值 • l使用说明：属性名称是指控件所支持的属性名称而定。对于不同控件可能含有不同的属性名称。

  11. 3.2.3 HTML服务器端控件的通用属性 • 2、Style属性——获取或设置HTML Server控件的CSS样式属性设定值 • l语法格式：对象名称. Style(“CSS属性”)=值 • l使用说明：CSS属性是指控件所支持的CSS属性名称而定。对于不同控件可能含有不同的属性名称。CSS样式所支持的属性的确非常多，但是具有一定的规律。用户可以参考CSS样式表手册（如在VS.NET中以“使用CSS样式”为名的联机帮助）。

  12. 3、Parent属性——引用在执行期间的父对象来源，也可以指向父对象3、Parent属性——引用在执行期间的父对象来源，也可以指向父对象 • 在Web Form网页中设计HTML控件时，采用容器（Container）架构来创建对象，所以在HTML Server控件的引用过程中可以引用父对象。这样既可扩展程序的处理能力，又可在执行期间删除对象。 • l语法格式： • 引用父对象：对象名称. Parent • 获得父对象引用的类的来源：对象名称. Parent.Tostring() • 产生父对象的实例：Dim 对象名称as Object=对象名称. Parent

  13. 课堂实训2 • 通过HTML Server控件的Parent属性引用其父对象。当用户单击“显示父对象所在的类”按钮时，在标签中显示出按钮的父对象（即层myDIV）所在的类名；当用户单击“删除我自己”按钮时，此按钮被删除；当用户单击“添加一个新按钮”按钮时，会在层myDIV中添加一个新按钮。

  14. 3.2.3 HTML服务器端控件的通用属性 • 4、Controls属性——引用指定的HTML Server控件在执行期间的子对象集合 • l语法格式： • 引用某个子对象：对象名称. Controls(i) • 获得子对象引用的类的来源：对象名称. Controls(i).Tostring() • 5、Disabled——用于启用或停用HTML Server控件 • l语法格式：对象名称. Disabled =True | False • l使用说明：Disabled属性设为True时，将指定的HTML Server控件设定为停用状态。 • 6、Visible——用于是否显示一个HTML Server控件 • l语法格式：对象名称. Visible =True | False • l使用说明：Visible属性设为True时，HTML Server处于可见状态。 • 7、HTML Server输入控件的共有属性 • HTML Server控件可分为两类：一类是基于HTML Input标记的输入控件，其余是容器控件。输入控件所共有的属性主要有：Value与Type属性。 • （1）Value——获取或设置与输入控件关联的值。 • （2）type——获取输入控件的类型。

  15. 3.2.3 HTML服务器端控件的通用属性 • 8、HTML Server容器控件的共有属性 • HTML Server容器控件的共有属性为InnerHtml和InnerText属性。这两个属性用于设置<标记>和</标记>之间的HTML内容或纯文本。 • l语法格式：对象名称.InnerHtml=字符串 • 对象名称.InnerText= 字符串 • l使用说明：InnerHtml是用HTML格式来显示标记间的内容, InnerText是用纯文本来显示标记间的内容(包括HTML标记)。

  16. 3.2.4 HTML服务器端控件的主要事件 • 两类主要事件： • 1、ServerClick事件——单击控件时引发； • 2、ServerChange事件——值改变时引发；

  17. 3.2.5 AutoPostBack的传回事件机理 • ASP.NET的一个最大的变革：是改变到事件驱动和基于控件的编程。这一改变允许采用Windows应用程序相同的结构样式创建Internet程序。增加了一个__doPosyBack的客户端Script函数： • <script language="javascript"> • function __doPostBack(eventTarget, eventArgument) { • var theform = document.MyForm; • theform.__EVENTTARGET.value • = eventTarget.split("$").join(":"); • theform.__EVENTARGUMENT • .value = eventArgument; • theform.submit(); • } </script>

  18. 表3-2 HTML服务器控件与HTML标记的对应表示

  19. 3.2.6 HtmlAnchor • HtmlAnchor(如表3-3所列)表示HTML<a>标记的服务器端对应物。这个标记创建到另一个页面的链接或者一个书签。格式如下： • <a id=“MyAnchor” href=“http://www.jxyd.net”name=“bookmarkname” • target=“_blank” title=“My Site” runat=“server”>链接教学园地网 站 • </a> 表3-3 HtmlAnchor成员

  20. 3.2.7 HtmlButton • HtmlButton(如表3-4所列)表示<button>标记的服务器端对应物，它在Internet Explorer 4.0或更高版本中得到支持。它创建一个可包含任何HTML内容、包括图像的标准按钮。在下面的例子中，这个按钮的表面有两个图像、一些粗体文本和两条水平线： • <button id=“MyButton” runat=“server” type=“button”> • <img src=“img/jxyd8831.gif”><hr><b>带横线的按钮</b> • </button> 表3-4 HtmlButton成员

  21. 3.2.8 HtmlForm • HtmlForm(如表3-5所列)表示<form>标记的服务器端对应物。所有的ASP.NET控件必须包含在一个服务器端HtmlForm控件中，以便代码能够访问它们。然而，很少需要和HtmlForm本身直接交互。在写代码时不要遗忘，HtmlInputControl 类控件一定要嵌入在HtmlForm中。格式如下： • <form id=“MyForm” method=“POST” runat=“server”> • [其他HtmlInputControl 类控件或内容布置在这儿.]</form> 表3-5 HtmlForm成员

  22. 3.2.9 HtmlGenericControl • HtmlGenericControl(如表3-6所列)表示其他专用类，如<div>，<span>等所表示的HTML服务器控件。例如： • < div|span|others • id=“MyControl” runat=“server”> • [其他内容布置在这儿.] • </div|span|others> 表3-6 HtmlGenericControl成员

  23. 3.2.10 HtmlImage • HtmlImage(如表3-7所列)表示HTML<img>标记的服务器端对应物，它显示一个图片（典型情况为一个GIF，JPG或PNG文件）。例如： • <img id=“MyImage” alt=“jxydSite” align=“top” border=“3” • src=“img/jxyd8831.gif” runat=“server” /> • 单独的 / 控件闭结束符如果省略，系统会自动补上。 表3-7 HtmlImage成员

  24. 3.2.11 HtmlInputImage • HtmlInputImage(如表3-8所列)表示HTML<input type=“Image”>标记的服务器端对应物。例如： • <input type="Image" id="MyImageButton" src="img/submit.gif" • runat="server" onServerClick=“i_Click” /> 表3-8 HtmlInputImage成员

  25. 3.2.12 HtmlInputButton • HtmlInputButton(如表3-9所列)表示HTML<input type=“button”>，<input type=“submit”>和<input type=“reset”>标记的服务器端对应物。例如： • <input type=“button” id=“MyInputButton” value=“提交” runat=“server” • onServerClick=“b_Click” /> 表3-9 HtmlInputButton成员

  26. 3.2.13 HtmlInputCheckBox • HtmlInputCheckBox(如表3-10所列)表示HTML<input type = “checkbox”>标记的服务器端对应物，它创建一个可被选中或不被选中的复选框。这个控件没有任何相关联的标题文本，相反，需要把内容添加到此控件标记旁。格式如下： • <input type=“checkbox” id=“MyCheckBox1” checked runat=“server” />复选框1的内容。 表3-10 HtmlInputCheckBox成员

  27. 3.2.14 HtmlInputFile • HtmlInputFile(如表3-11所列)表示HTML<input type = “file”>标记的服务器端对应物，它允许用户上传一个文件。格式如下： • <input type=“file” id=“MyFileUploader” accept=“image/*” size=“30” runat = “server” /> 表3-11 HtmlInputFile成员

  28. 3.2.15 HtmlInputHidden • HtmlInputHidden(如表3-12所列)表示HTML<input type=”hidden”>标记的服务器端对应物，它允许你在传回之间存储信息。在ASP.NET编码中，使用page.ViewState集合来存储任何需要保留的信息通常是更容易的。格式如下： • <input type=“hidden” id=“MyHiddenInfo” value=“[隐藏的数据]” runat=“server” /> 表3-12 HtmlInputHidden成员

  29. 3.2.16 HtmlInputRadioButton • HtmlInputRadioButton(如表3-13所列)表示HTML<input type=”radio”>标记的服务器端对应物。通常，你将添加一组单选按钮一遍一次仅允许选中一项。下面的例子显示了称为GenderGroup的一组中的两个单选按钮。注意，这个控件没有任何相关联的标题文本，相反，需要把内容添加到控件标记的旁边。格式如下： • <input type=“radio” id=“MyRadio1” name=“GenderGroup” runat=“server” • checked=”True” />Male • <input type=“radio” id=“MyRadio2” name=“GenderGroup” runat=“server” />Female 表3-13 HtmlInputRadioButton成员

  30. 3.2.17 HtmlInputText • HtmlInputText(如表3-14所列)表示HTML<input type=“text“>标记的服务器端对应物，它允许单行文本框输入。格式如下： • <input type=“text” id=“MyText” maxlength=“20” size=“40” value=“默认文本” • runat=“server” /> 表3-14 HtmlInputText成员

  31. 3.2.18 HtmlSelect • HtmlSelect(如表3-15所列)表示HTML<select>标记的服务器端对应物，它被用于创建一个项目列表。这可以是一个一次显示一项的下拉列表或一个多行列表框。它也可以被设置来允许单个或多个选择。格式如下： • <select id=“MyList” size=“1” runat=“server”> • <option value=“1”>Option 1</option> • <option value=“2”>Option 2</option> • <option value=“3”>Option 3</option></select> 表3-15 HtmlSelect成员

  32. 3.2.19 HtmlTable • 格式如下： • <table id=“programmaticID” align=“left | center | right” • bgcolor=“bgcolor” border=“borderwidth” • bordercolor=“bordercolor” • cellpadding=“spacing_within_cells” • cellspacing=“spacing_between_cells” • height=“tableheight” • width=“tablewidth” runat=“server”> • <tr> • <td></td> • </tr> • </table> 表3-16 HtmlTable成员

  33. 3.2.20 HtmlTextArea • HtmlTextArea(如表3-19所列)类表示一个多行文本框，它是HTML<textarea>标记的服务器端对应物。格式如下： • <textarea id=“MyTextArea“ cols=“40“ rows=“5“ runat=“server“>初始文本 • </textarea> 表3-19 HtmlTextArea成员

  34. 【例3-2】 HTML服务器控件应用

  35. <script language=VB runat=server> Sub i_Click(sender As Object, e As ImageClickEventArgs) Dim ctl as control MyCtl.Innertext = "" For Each ctl In Page.Controls MyCtl.Innertext &= " "& ctl.ID Next For Each ctl In MyForm.Controls MyCtl.Innertext &= " "& ctl.ID Next End Sub Sub b_Click(sender As Object,e As EventArgs) MyCtl.InnerHtml=" " '用InnerHtml而不是用Innertext，可以加html的标识 if MyCheckBox1.checked ="true" then MyCtl.InnerHtml &=" 复选1选中" if MyCheckBox2.checked ="true" then MyCtl.InnerHtml &=" 复选2选中" MyCtl.InnerHtml &=" "& MyFileUploader.value &" "& MyHiddenInfo.value if MyRadio1.checked ="true" then MyCtl.InnerHtml &=" 单选1选中" if MyRadio2.checked ="true" then MyCtl.InnerHtml &=" 单选2选中" MyCtl.InnerHtml &=" <font color=red>"& MyText.value &"</font>" MyCtl.InnerHtml &=" "& MyList.value &" <b>"& MyTextArea.value &"</b>" End Sub </script> <html><body> <!-- HtmlAnchor --> <a id="MyAnchor" href="http://www.jxyd.net" name="bookmarkname" target="_blank" title="My Site" runat="server"> 链接教学园地网站 </a>&nbsp;&nbsp;&nbsp; <!-- HtmlButton --> <button id="MyButton" runat="server"> <img src="img/TIANHAO.GIF"><hr> <b>带横线的按钮</b> </button> <!-- HtmlForm --> <form id="MyForm" method="POST" runat="server"> <!-- HtmlInputCheckBox --> <input type="checkbox" id="MyCheckBox1" runat="server" checked="true" />复选框1的内容 <input type="checkbox" id="MyCheckBox2" runat="server" />复选框2的内容<br> <!-- HtmlInputFile --> <input type="file" id="MyFileUploader" accept="image/*" size="30" runat="server" /><br> <!-- HtmlInputHidden --> <input type="hidden" id="MyHiddenInfo" value="[隐藏的数据]" runat="server" /> <!-- HtmlInputRadioButton --> <input type="radio" id="MyRadio1" name="GenderGroup" runat="server" checked="true" />Male <input type="radio" id="MyRadio2" name="GenderGroup" runat="server" />Female<br> <!-- HtmlInputText --> <input type="text" id="MyText" maxlength="20" size="40" value="默认文本" runat="server" /><br> <!-- HtmlSelect --> <select id="MyList" size="1" runat="server"> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> </select> <!-- HtmlTextArea --> <textarea id="MyTextArea" cols="40" rows="5" runat="server">初始文本 </textarea> <!-- HtmlInputImage --> <input type="Image" id="MyImageButton" src="img/submit.gif" runat="server" OnServerClick="i_Click" /> <!-- HtmlInputButton --> <input type="button" id="MyInputButton" value="提交" runat="server" OnServerClick="b_Click" /><br> <!-- HtmlGenericControl --> <span id="MyCtl" runat="server"> 提交的内容显示在这儿 </span> </form> <!-- HtmlImage --> <img id="MyImage" alt="jxyd site" align="top" border="3" src="img/jxyd8831.gif" runat="server" /> <!-- HtmlTable --> <table id="MyTable" cellSpacing="1" cellPadding="1" width="300" border="1" runat="server"> <tr> <td>Cell 1, 1</td> <td>Cell 1, 2</td> <td>Cell 1, 3</td></tr> <tr> <td>Cell 2, 1</td> <td>Cell 2, 2</td> <td>Cell 2, 3</td></tr> </table> </body></html>

  36. 3.3 Web服务器控件 • ASP.NET的服务器端控件也称为Web控件，是基于更加抽象的、具有更强的面向对象特征的设计模型，它提供了比HTML服务器控件种类更多、功能更强大的控件集合。它位于System.Web.UI.WebControls名称空间中，是从WebControl基类中直接或间接派生出来的。包括传统的表单控件（如：TextBox、Button）以及其他更为抽象更高级的控件（如：Calendar、DataGrid等）。微软官方文件指出：就ASP.NET网页应用而言，HTML服务器控件足以满足要求；但也强调web服务器控件提供了更为强大的功能，拥有类似XML的语法，且其使用规则与VB控件使用规则类似。

  37. 3.3 Web服务器控件 • 1、Web服务器控件的特点 • 对象模型更丰富，提供了类型安全的编程能力。 • 能够自动检查浏览器，根据浏览器类型创建适于浏览器的输出。 • 通过使用模板（如数据列表控件），可以由开发者自定义一些控件的外观。 • 一些控件具有两种事件处理方式：一种是立即传到服务器进行处理（消息回送）；另一种是将信息缓存，等到提交表单时再处理。 • 嵌套控件的事件能够传递到包含它的容器控件。

  38. 3.3 Web服务器控件 • 2、Web服务器控件的基本使用形式 • <asp:控件类型名 属性名1=属性值1 属性名2=属性值2 … runat=“server“ /> • 注：结束标志也可为</asp:控件类型名> • asp:控件类型名要连写，中间不能有空格。 • 3、Web服务器控件的分类 • Web Forms 基本控件 • ListControl列表控件 • BaseDataList 数据列表控件 • 增强控件（多信息控件） • BaseValidator 验证控件

  39. 3.3 Web服务器控件 • 4、Web服务器控件的基本属性

  40. 3.3 Web服务器控件 • 5、Web服务器控件的通用事件

  41. 3.3.1 标签控件Label与Literal控件 • 标签控件用于显示文本，用户不能直接对这些文本进行编辑。 • 1、Label控件 • l语法声明： • <ASP:Label Runat="Server" Id="…" Text="…" /> • 2、Literal控件 • 该控件也是用于显示文本的，其作用主要有：动态填入字符串显示；结合数据字段，将数据字段内容转换成网页字符串直接显示。但与Label控件不同的是：Literal控件不能使用一般Web Server控件的共同属性Style，即不支持CSS。 • l语法声明： • <ASP:Literal Runat="Server" Id="…" Text="…" />

  42. 3.3.2 控钮控件Button、LinkButton、ImageButton • 1、Button控件 • l语法声明： • <ASP:Button Runat="Server" Id="…" text="…" CausesValidation="True | False" • CommandName="…" CommandArgument="…" • OnMouseOver="…" OnMouseOut="…" Onclick="…" /> • l属性说明： • CausesValidation：给出或设置按钮被单击时，是否启动验证控件进行验证。默认情况下，单击Button控件时会执行页的验证操作。 • Text：给出或设置显示在按钮上的文本。 • CommandName：给出或设置Button控件的命令名称。 • CommandArgument：给出或设置Button控件的命令参数。 • l事件说明： • Onclick：设置按钮被单击后所触发的服务器端事件过程的名称，处理常量接收到Eventargs。有时需要对CommandName或CommandArgument属性进行处理。 • OnMouseOver、OnMouseOut事件中可通过style属性对 • onmouseover="this.style.backgroundColor='lightgreen'" onmouseout="this.style.backgroundColor='lightblue'"

  43. 3.3.2 控钮控件Button、LinkButton、ImageButton • 2、LinkButton控件 • 在功能上，LinkButton控件与Button控件完全相同，定义方法也相同。两者之间唯一的区别是，LinkButton控件在外观上显示为超链接。 • l语法声明： • <ASP:LinkButton Runat="Server" Id="…" text="…" CausesValidation="True | False" CommandName="…" CommandArgument="…" OnMouseOver="…" OnMouseOut="…" OnClick="…"… /> • 3、ImageButton控件 • 主要用于动态显示图片，同时可设置其Click事件，单击图片可将Web表单回传至服务器，触发相应的事件处理程序。 • l语法声明： • <ASP:ImageButton Runat="Server" Id="…" ImageUrl="…" CommandName="…" CommandArgument="…" CausesValidation="True| False“ OnMouseOver="…" OnMouseOut="…" OnClick="…"/> • l使用说明： • 在VS.NET的控件工具箱“Web窗体”选项卡中的“ImageButton”控件默认为提交按钮，也就是说它被单击后，会触发表单的客户端事件“OnSubmit”。

  44. 课堂实训3 • 控钮控件Button、LinkButton与ImageButton控件的使用。单击按钮后，会弹出对话框表明表单被提交，同时标签中的字体改为“隶书”。单击图像按钮后，也会会弹出对话框表明表单被提交，同时图像按钮中所显示的图片交替变换。在单击两个链接按钮后，可以显示出单击它们的顺序。 • 操作分析： • 识别对两个链接按钮的单击次序是通过设置链接按钮的CommandName属性实现的。在设计阶段，设置两个链接按钮的CommandName属性均为“first”。当单击第一个按钮时，设置另一个按钮的CommandName属性为“second”。

  45. 3.3.3 文本框控件TextBox • l语法声明： • <ASP:TextBox Runat="Server" Id="…" Text="…" AutoPostBack="True | False" • Columns="…" maxLength="…" ReadOnly="…" Rows="…" • TextMode="Single | Multiline | Password" Wrap="True | False" OnTextChanged="…" /> • l属性说明： • Text：给出或设置控件中的文本。 • TextMode：给出或设置控件的类型，其中Single为单行文本框，Multiline为多行文本框，Password为密码框。该属性的默认值为Single。 • Rows：当TextMode属性为Multiline（多行文本框）时，Rows属性才有效。用于给出或设置控件的高度，单位为行。 • Columns：给出或设置控件的宽度，单位为字符。 • MaxLength：给出或设置控件最多可容纳的字符数。 • ReadOnly：给出或设置控件内容的只读性。 • Wrap：给出或设置当控件内容超过控件宽度时，是否自动换行。 • AutoPostBack：默认值为False。当该属性设为True时，表示当浏览器中的TextBox控件内容变化后，会将Web表单立即回传给服务器，无须等待用户通过单击提交按钮进行表表单提交。 • l事件说明： • OnTextChanged：指定控件中的内容与最近一次上传的内容不同时，所触发事件过程的名称。

  46. 课堂实训4 • 文本框控件TextBox的使用。将输入的文本信息保存到多行文本框中。 • 操作步骤： • （1）新建一个名称为“4-4”的项目，并将该项目下的默认窗体改名为“ex4-4.aspx”。 • （2）界面设计。 • （3）编写事件处理程序

  47. 3.3.4图像框控件Image • Image控件用于在网页中显示图片。由于它本身不具有将网页回传至服务器的能力，也就是说它没有任何用户触发的事件。 • l语法声明： • <ASP:Image Runat="Server" Id="…" ImageUrl="…" AlternateText="…" ImageAlign="…"/> • l属性说明： • AlternateText：用于给出或设置替换文本。 • ImageAlign：指定图形相对于其周围文字的排列方式。可取值有：“NoSet”、“AbsBottom”、“AbsMiddle”、“BaseLine”、“Bottoom”、“Left”、“Middle”、“Right”、“TextTop”和“Top”,默认为“NoSet”。

  48. 3.3.5 超链接控件HyperLink • HyperLink控件用于建立动态的文本或图片超链接。 • l语法声明： • <ASP:HyperLink Runat="Server" Id="…" NavigateUrl="…" Text="…" ImageUrl="…" Target="…" /> • l属性说明： • NavigateUrl：给出或设置所链接文档的URL。 • ImageUrl：给出或设置超链接锚点图片源。 • Text：给出或设置超链接锚点文本。 • Target：给出或设置目标框架（或窗口）名称。例如将Target设为“_blank”，可将所链接的文档显示在新窗口中。

  49. 3.3.6 复选与单选控件 • 1、复选控件CheckBox与CheckBoxList • （1）CheckBox控件 • 用于建立能够在选中和清除两种状态间切换的复选框。当选定该控件时，其Checked属性为True。 • l语法声明： • <ASP:CheckBox Runat="Server" Id="…" Text="…" AutoPostBack="True | False" • Checked="True | False" TextAlign="…" OnCheckedChanged="…" …/> • （2）CheckBoxList控件 • CheckBoxList控件的作用与CheckBox控件类似，它是以成组的形式显示复选框。其功能比CheckBox更为强大，能支持以数据连接方式建立列表。 • l语法声明： • <ASP:ChecktBoxList Runat="Server" Id="…" AutoPostBack="True | False" • RepeatColumns="…" RepeatDirection="…" RepeatLayout="…" TextAlign="…" • OnSelectedIndexChanged="…" …> • <ASP:ListItem Value="…" Selected="…">文本</ASP:ListItem> • …… • <ASP:ListItem Value="…" Selected="…">文本</ASP:ListItem> • </ASP:ChecktBoxList>

  50. 3.3.6 复选与单选控件 • 2、单选控件RadioButton与RadioButtonList • （1）RadioButton控件用于创建单选钮。 • l语法声明： • <ASP:RadioButton Runat="Server" Id="…" AutoPostBack="True | False" Checked="…" • GroupName="…" Text="…" OnCheckedchanged="…" … /> • （2）RadioButtonList控件。 • RadioButtonList控件的作用与RadioButton控件类似，但功能更为强大（如支持以数据连接方式建立列表等）。 • l语法声明： • <ASP:RadioButtonList Runat="Server" Id="…" AutoPostBack="True | False" • OnSelectedIndexchanged="…" … > • <ASP:ListItem Value="…" Selected="…">文本</ASP:ListItem> • …… • <ASP:ListItem Value="…" Selected="…">文本</ASP:ListItem> • </ASP:RadioButtonList>

More Related