《ASP.NET动态网页设计 教学课件 ppt 作者 吴逸贤 王晓慧rar 第五章.ppt ASP》由会员分享，可在线阅读，更多相关《ASP.NET动态网页设计 教学课件 ppt 作者 吴逸贤 王晓慧rar 第五章.ppt ASP（68页珍藏版）》请在金锄头文库上搜索。
1、第五章,HTML Server控件,学习目标：,1认识HTML标签与HTML Server控件的不同 2能创建HTML Server控件 3认识HTML Server控件的属性 4能设置HTML Server控件的属性 5认识ASP.NET的事件处理 6能创建HTML Server控件的事件程序 7能创建窗体与表格的内容,5-1 认识HTML Server控件,为了让HTML的标签属性可以由程序来控制，ASP.NET提供了两种Server控件（或称为控制组件），分别是HTML Server控件和Web Server控件，这两种控件都是在服务器端执行的，也都可以产生标准HTML文档。,5-1-1
2、 HTML标签与HTML Server控件,（1）HTML Server控件：HTML Server控件主要是将所有HTML标签变成组件，让程序可以直接控制标签对象的属性。例如：使用Visual Basic或Visual C#等程序语言来控制HTML Server控件。 （2）Web Server控件：Web Server控件是针对HTML Server控件的不足功能而新增加的控件类别，这种控件提供更多内建功能，如月历、数据验证、数据源连接等。,5-1-2 将HTML标签转换为HTML Server控件,将HTML标签转换为HTML Server控件 在Visual Web Developer
3、 2005的设计视图中，可以直接将HTML标签转换为HTML Server控件。以下就是将HTML标签转换为HTML Server控件的操作示范。 先打开练习文件CH0501_02A（Default2.aspx设计视图窗口）,示范,完成后，就会在HTML标签的左上角显示图案，表示已经将HTML标签转换为HTML Server控件了，界面显示如下：,除了在设计视图中创建HTML Server控件，也可以直接在源文件视图中编写程序代码来创建HTML Server控件，其语法如下： ,创建HTML标签的HTML Server控件时，只需加入下面两个属性。 （1）id属性：设置id名称，以便日后编写程
4、序代码时参考该控件。例如：在事件程序中设置该属性。 （2）runat=“server“属性：表示HTML标签被视为HTML Server控件。 创建HTML Server控件时，并不需要使用HTML Server控件的名称。例如：HTML标签不需要使用对应的HtmlImage控件名称。,执行ASP.NET动态服务器网页程序产生HTML文档的流程如下：,通过程序控制HTML Server控件,1. 2. Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) 3. IMG1.Border = 5 设
5、置图片的边框宽度 4. IMG1.Alt = “我是小Baby！“ 设置图片上的提示文字 5. End Sub 6. 7. 8. 9. 01_02B 10. 11. 12. ,5-1-3 HTML Server控件的属性设置,HTML Server控件可分成一般HTML控件、HTML输入控件与HTML容器控件三类。一般来说，每一个HTML Server控件都具有Attributes、Disabled、Style、TagName、Visible等属性；如果控件属于HTML输入控件，如HtmlInputText、HtmlInputButton等，还另外具有Name、Value、Type等属性来设置
6、HTML输入控件；HTML容器控件包括HtmlTable、HtmlTextArea等，其共享的属性包括InnerHtml、InnerText等。,5-1-4 用程序设置控件的样式与属性,HTML Server控件的id名称.Attributes(“属性“)= 属性值 与 HTML Server控件的id名称.Style(“样式属性“)= 属性值 除了Attributes与Style属性以外，在ASP.NET中也可以设置其他属性，其语法如下： HTML Server控件的id名称.属性 = 属性值,完成后，单击启动调试按钮执行程序，网页上的按钮就会套用程序设置的样式与属性，界面显示如下：,1（
7、）下列哪个是标签对应的HTML Server控件？ HtmlAnchor HtmlGenericControl HtmlSelect HtmlInputRadioButton 2（ ）关于HTML Server控件和Web Server控件，下列叙述哪个是错误的？ HTML Server控件主要是将所有HTML标签变成组件 Web Server控件提供了月历与数据验证等控件 在事件程序中可以利用程序控制HTML Server控件 利用HTML标签可以创建HTML Server控件或Web 控件 3（ ）下列哪个是一般HTML控件具有的属性？ Name Attributes Value Inne
8、rText 4（ ）利用HTML标签创建HTML Server控件时，会有许多属性，哪一个属性必须具有唯一性？ Name Runat Id Type 5（ ）什么控件可以使用InnerHtml属性？ 一般HTML控件 HTML输入控件 HTML容器控件 以上皆错,6（ ）什么控件可以使用Type属性？ 一般HTML控件 HTML输入控件 HTML容器控件 以上皆错 7（ ）关于HTML Server控件，下列叙述哪个是错误的？ HTML输入控件可以使用Name、Value与Type属性 执行程序时，若发现runat=“server“属性设置，就会从类别库加载HTML Server控件 HTML
9、标签转换为HTML Server控件，必须加上Id与Runat的属性设置 在浏览器执行后，原始文件中会显示runat=“server“ 8（ ）利用哪一个属性可以设置控件是否可编辑？ Disabled Style Visible InnerHtml 9（ ）下列哪一个子程序是加载网页时会自动加载的事件程序？ Page_Init Page_Unload Page_Load Page_PreInit 10（ ）下列哪一个不属于HTML容器控件？ HtmlAnchor HtmlTableRow HtmlSelect HtmlInputRadioButton,1 新建一个01_EX01的ASP.NET
10、网站程序，然后在网页中创建HtmlInputText与HtmlInputPassword控件，规则如下： HtmlInputText的宽度为10，粗体文字，颜色为purple，内容为“Selina”。 HtmlInputPassword的宽度为15，背景颜色为silver。（提示：设置控件的样式是style属性，可以用CSS样式来设置。,2打开练习文件CH0501_EX02（Default2. aspx），然后设计程序，当加载网页时会设置HtmlAnc- hor与HtmlTextArea控件的属性，规则如下： HtmlAnchor的提示文字为“较高流量网站”，链接网址为“http:/www.y
11、ahoo. cn/”。 HtmlTextArea的列宽为25，行数为4，文字颜色为Maroon，文字长度为15。（提示：利用Attributes(“title“)属性可以设置鼠标移到上面时显示的说明文字。）,5-2 认识事件处理技巧,5-2-1 创建HTML Server控件的事件程序 在程序中，不同的HTML Server控件（对象）会提供不同的事件程序，只要在网页 或对象上双击，就可以在源文件视图中查看或编辑该对象对应的事件程序。下面是创建按钮对象事件程序的操作示范。,创建按钮并在单击后执行响应的程序代码如下：,1. 2. 3. Protected Sub Button1_ServerCl
12、ick(ByVal sender As Object, ByVal e As System.EventArgs) 4. text.InnerText = “单击鼠标左键“ 5. End Sub 6. 7. 8. 9. 10. 02_01 11. 12. 13. 14. 15. 16. 17. 18. ,上述的程序代码分析如下：,（1）第35行是当在按钮上单击时对应的Button1_ServerClick事件程序，其中sender参数会提供引发事件的对象参考，e参数则是传递发生的事件数据。 （2）第14行在HtmlInputButton控件会自动增加属性设置“onserverclick= “Bu
13、tton1_ ServerClick“”，表示单击按钮后，会执行Button1_ServerClick子程序的内容。 （3）第15行设置标签对应的HtmlGenericControl控件，在第4行利用这个控件的InnerText属性显示出文字信息（必须利用Id属性值来存取HtmlGenericControl控件）。,5-2-2 单击不同的按钮,调用不同的子程序,调用同一个子程序,事实上，在同一个子程序内可以接受不同的按钮调用，只要应用sender对象参数的属性，就可以分辨是由哪一个控件所调用，表示方法如下：,5-2-3 HTML标签测试程序,完成后界面显示如下：,1新建一个02_EX01的AS
14、P.NET网站程序，然后编写一个“显示时间”的程序，规则如下： 网页中有一个HtmlInputText与一个HtmlInputButton控件。 单击按钮时，就会在文本框中更新为当前的系统时间。（提示：在HtmlInput- Button的事件程序中设置HtmlInput- Text的Id属性，显示Value值为Now()。）,2打开练习文件CH0502_EX02（Default2. aspx），然后编写一个产生不同背景颜色的程序，规则如下： 网页中有3个HtmlInputButton控件，分别为Green、Silver与Purple。 单击这3个按钮，分别会将标签的背景套用Green、Sil
15、ver与Purple颜色。,5-3 窗体与表格,5-3-1 控制窗体组件 Radio选项按钮具有多选一的特性，单一选项的问题都可以应用这种选项按钮，Checkbox复选框可以用来创建复选问题，而Select下拉列表是另一种设计选项的技巧，它也适用于设计单一选项的问题。这些HTML标签可以利用HtmlInputRadioButton、HtmlInputCheckBox与HtmlSelect控件组件化，使它们能够接受程序的控制。,5-3-2 增加下拉列表的选项,5-3-3 认识IsPostBack,5-3-4 设置表格内容,5-3-5 建 立 表 格,1打开练习文件CH0503_EX01（Default2. aspx），然后编写一个调查问卷的程序，规格如下： 新增3个HtmlInputRadioButton控件，作为影片的选项；新增5个HtmlInputCheckBox控件，作为电视频道的选项。 当用户选择喜爱影片与电视频道后，单击按钮，就会在下面的 text区显示选择结果。,2打开练习文件CH0503_EX02（Default2. aspx），然后编写一个新增星座的程序，当用户在文本框中输入要新增的星座，然后单击按钮，就会在列表中新增指定的星座（星座不可以重复）。,3打开练习文件CH0503_EX03（Default2. aspx），然后编写程序，
