(中职）2022-2023学年SP.NET动态网页设计第五章. ASP课件.PPT

《(中职）2022-2023学年SP.NET动态网页设计第五章. ASP课件.PPT》由会员分享，可在线阅读，更多相关《(中职）2022-2023学年SP.NET动态网页设计第五章. ASP课件.PPT（69页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、(中职）2022-2023学年SP.NET动态网页设计第五章.ppt ASP课件第五章HTML Server控件 学习目标：n n1认识HTML标签与HTML Server控件的不同n n2能创建HTML Server控件n n3认识HTML Server控件的属性n n4能设置HTML Server控件的属性n n5认识ASP.NET的事件处理n n6能创建HTML Server控件的事件程序n n7能创建窗体与表格的内容5-1 认识HTML Server控件n n为了让HTML的标签属性可以由程序来控制，ASP.NET提供了两种Server控件（或称为控制组件），分别是HTML Serve

2、r控件和Web Server控件，这两种控件都是在服务器端执行的，也都可以产生标准HTML文档。5-1-1 HTML标签与HTML Server控件n n（1）HTML Server控件：HTML Server控件主要是将所有HTML标签变成组件，让程序可以直接控制标签对象的属性。例如：使用Visual Basic或Visual C#等程序语言来控制HTML Server控件。n n（2）Web Server控件：Web Server控件是针对HTML Server控件的不足功能而新增加的控件类别，这种控件提供更多内建功能，如月历、数据验证、数据源连接等。5-1-2 将HTML标签转换为HTM

3、L Server控件n n将HTML标签转换为HTML Server控件n n在Visual Web Developer 2005的设计视图中，可以直接将HTML标签转换为HTML Server控件。以下就是将HTML标签转换为HTML Server控件的操作示范。n n先打开练习文件CH0501_02A（Default2.aspx设计视图窗口）示范完成后，就会在HTML标签的左上角显示图案，表示已经将HTML标签转换为HTML Server控件了，界面显示如下：除了在设计视图中创建除了在设计视图中创建HTML ServerHTML Server控件，也可以直接在源文控件，也可以直接在源文件视

4、图中编写程序代码来创建件视图中编写程序代码来创建HTML ServerHTML Server控件，其语法如下：控件，其语法如下：n n创建HTML标签的HTML Server控件时，只需加入下面两个属性。n n（1）id属性：设置id名称，以便日后编写程序代码时参考该控件。例如：在事件程序中设置该属性。n n（2）runat=server属性：表示HTML标签被视为HTML Server控件。n n创建HTML Server控件时，并不需要使用HTML Server控件的名称。例如：HTML标签不需要使用对应的HtmlImage控件名称。执行ASP.NET动态服务器网页程序产生HTML文档的流

5、程如下：通过程序控制HTML Server控件n n1.1.n n2.2.Protected Sub Page_Load(ByVal sender As Object,Protected Sub Page_Load(ByVal sender As Object,ByVal e As ByVal e As System.EventArgs)System.EventArgs)n n3.3.IMG1.Border=5 IMG1.Border=5 设置图片的边框宽度设置图片的边框宽度n n4.4.IMG1.Alt=IMG1.Alt=我是小我是小BabyBaby！设置图片上的提示设置图片上的提示文字文字

6、n n5.5.End Sub End Subn n6.6.n n7.7.n n8.8.n n9.9.01_02B 01_02Bn n10.10.n n11.11.img src=image/01_02B.jpg id=IMG1 runat=server/n n12.12.5-1-3 HTML Server控件的属性设置n nHTML Server控件可分成一般HTML控件、HTML输入控件与HTML容器控件三类。一般来说，每一个HTML Server控件都具有Attributes、Disabled、Style、TagName、Visible等属性；如果控件属于HTML输入控件，如HtmlInp

7、utText、HtmlInputButton等，还另外具有Name、Value、Type等属性来设置HTML输入控件；HTML容器控件包括HtmlTable、HtmlTextArea等，其共享的属性包括InnerHtml、InnerText等。5-1-4 用程序设置控件的样式与属性n nHTML Server控件的id名称.Attributes(属性)=属性值n n与n nHTML Server控件的id名称.Style(样式属性)=属性值n n除了Attributes与Style属性以外，在ASP.NET中也可以设置其他属性，其语法如下：n nHTML Server控件的id名称.属性=属性

8、值完成后，单击启动调试按钮执行程序，网页上的按钮完成后，单击启动调试按钮执行程序，网页上的按钮就会套用程序设置的样式与属性，界面显示如下：就会套用程序设置的样式与属性，界面显示如下：n n1 1（）下列哪个是）下列哪个是标签对应的标签对应的HTML ServerHTML Server控件？控件？n nHtmlAnchorHtmlAnchorHtmlGenericControlHtmlGenericControln nHtmlSelectHtmlSelectHtmlInputRadioButtonHtmlInputRadioButtonn n2 2（）关于）关于HTML ServerHTML S

9、erver控件和控件和Web ServerWeb Server控件，下列叙述哪个是错误的？控件，下列叙述哪个是错误的？n nHTML ServerHTML Server控件主要是将所有控件主要是将所有HTMLHTML标签变成组件标签变成组件n nWeb ServerWeb Server控件提供了月历与数据验证等控件控件提供了月历与数据验证等控件n n在事件程序中可以利用程序控制在事件程序中可以利用程序控制HTML ServerHTML Server控件控件n n利用利用HTMLHTML标签可以创建标签可以创建HTML ServerHTML Server控件或控件或Web Web 控件控件n n

10、3 3（）下列哪个是一般）下列哪个是一般HTMLHTML控件具有的属性？控件具有的属性？n nNameNameAttributesAttributesn nValueValueInnerTextInnerTextn n4 4（）利用）利用HTMLHTML标签创建标签创建HTML ServerHTML Server控件时，会有许多属性，哪一个属性必须具有唯一性？控件时，会有许多属性，哪一个属性必须具有唯一性？n nNameNameRunatRunatn nIdIdTypeTypen n5 5（）什么控件可以使用）什么控件可以使用InnerHtmlInnerHtml属性？属性？n n一般一般HTM

11、LHTML控件控件HTMLHTML输入控件输入控件n nHTMLHTML容器控件容器控件以上皆错以上皆错 n n6 6（）什么控件可以使用）什么控件可以使用TypeType属性？属性？n n一般一般HTMLHTML控件控件HTMLHTML输入控件输入控件n nHTMLHTML容器控件容器控件以上皆错以上皆错n n7 7（）关于）关于HTML ServerHTML Server控件，下列叙述哪个是错误的？控件，下列叙述哪个是错误的？n nHTMLHTML输入控件可以使用输入控件可以使用NameName、ValueValue与与TypeType属性属性n n执行程序时，若发现执行程序时，若发现ru

12、nat=serverrunat=server属性设置，就会从类别库加载属性设置，就会从类别库加载HTML ServerHTML Server控件控件n nHTMLHTML标签转换为标签转换为HTML ServerHTML Server控件，必须加上控件，必须加上IdId与与RunatRunat的属性设的属性设置置n n在浏览器执行后，原始文件中会显示在浏览器执行后，原始文件中会显示runat=serverrunat=servern n8 8（）利用哪一个属性可以设置控件是否可编辑？）利用哪一个属性可以设置控件是否可编辑？n nDisabledDisabledStyleStylen nVisib

13、leVisibleInnerHtmlInnerHtmln n9 9（）下列哪一个子程序是加载网页时会自动加载的事件程序？）下列哪一个子程序是加载网页时会自动加载的事件程序？n nPage_InitPage_InitPage_UnloadPage_Unloadn nPage_LoadPage_LoadPage_PreInitPage_PreInitn n1010（）下列哪一个不属于）下列哪一个不属于HTMLHTML容器控件？容器控件？n nHtmlAnchorHtmlAnchorHtmlTableRowHtmlTableRown nHtmlSelectHtmlSelectHtmlInputRad

14、ioButtonHtmlInputRadioButtonn n1 新建一个01_EX01的ASP.NET网站程序，然后在网页中创建HtmlInputText与HtmlInputPassword控件，规则如下：n n HtmlInputText的宽度为10，粗体文字，颜色为purple，内容为“Selina”。n n HtmlInputPassword的宽度为15，背景颜色为silver。（提示：设置控件的样式是style属性，可以用CSS样式来设置。n n2打开练习文件CH0501_EX02（Default2.aspx），然后设计程序，当加载网页时会设置HtmlAnc-hor与HtmlText

15、Area控件的属性，规则如下：n n HtmlAnchor的提示文字为“较高流量网站”，链接网址为“http:/ n HtmlTextArea的列宽为25，行数为4，文字颜色为Maroon，文字长度为15。（提示：利用Attributes(title)属性可以设置鼠标移到上面时显示的说明文字。）5-2 认识事件处理技巧n n5-2-1 创建HTML Server控件的事件程序n n在程序中，不同的HTML Server控件（对象）会提供不同的事件程序，只要在网页n n或对象上双击，就可以在源文件视图中查看或编辑该对象对应的事件程序。下面是创建按钮对象事件程序的操作示范。创建按钮并在单击后执行响

16、应的程序代码如下：n n1.1.n n2.2.n n3.3.Protected Sub Button1_ServerClick(ByVal sender As Object,Protected Sub Button1_ServerClick(ByVal sender As Object,ByVal e As System.EventArgs)ByVal e As System.EventArgs)n n4.4.text.InnerText=text.InnerText=单击鼠标左键单击鼠标左键 n n5.5.End Sub End Subn n6.6.n n7.7.n n8.8.n n9.9.

17、n n10.10.02_01 02_01n n11.11.n n12.12.n n13.13.n n14.14.input id=Button1 runat=server type=button value=onserverclick=Button1_ServerClick/n n15.15.n n16.16.n n17.17.n n18.18.上述的程序代码分析如下：n n（1 1）第）第3 35 5行是当在按钮上单击时对应的行是当在按钮上单击时对应的Button1_ServerClickButton1_ServerClick事件程序，其中事件程序，其中sendersender参数参数会提供

18、引发事件的对象参考，会提供引发事件的对象参考，e e参数则是传递发生参数则是传递发生的事件数据。的事件数据。n n（2 2）第）第1414行在行在HtmlInputButtonHtmlInputButton控件会自动增加控件会自动增加属性设置属性设置“onserverclick=Button1_“onserverclick=Button1_ ServerClick”ServerClick”，表示单击按钮后，会执行，表示单击按钮后，会执行Button1_ServerClickButton1_ServerClick子程序的内容。子程序的内容。n n（3 3）第）第1515行设置行设置标签对应的标签

19、对应的HtmlGenericControlHtmlGenericControl控件，在第控件，在第4 4行利用这个控件行利用这个控件的的InnerTextInnerText属性显示出文字信息（必须利用属性显示出文字信息（必须利用IdId属属性值来存取性值来存取HtmlGenericControlHtmlGenericControl控件）。控件）。5-2-2 单击不同的按钮n n调用不同的子程序调用同一个子程序n n事实上，在同一个子程序内可以接受不同的按钮调用，只要应用sender对象参数的属性，就可以分辨是由哪一个控件所调用，表示方法如下：5-2-3 HTML标签测试程序完成后界面显示如下：

20、n n1新建一个02_EX01的ASP.NET网站程序，然后编写一个“显示时间”的程序，规则如下：n n 网页中有一个HtmlInputText与一个HtmlInputButton控件。n n 单击按钮时，就会在文本框中更新为当前的系统时间。（提示：在HtmlInput-Button的事件程序中设置HtmlInput-Text的Id属性，显示Value值为Now()。）n n2打开练习文件CH0502_EX02（Default2.aspx），然后编写一个产生不同背景颜色的程序，规则如下：n n 网页中有3个HtmlInputButton控件，分别为Green、Silver与Purple。n n

21、 单击这3个按钮，分别会将标签的背景套用Green、Silver与Purple颜色。5-3 窗体与表格n n5-3-1 控制窗体组件n nRadio选项按钮具有多选一的特性，单一选项的问题都可以应用这种选项按钮，Checkbox复选框可以用来创建复选问题，而Select下拉列表是另一种设计选项的技巧，它也适用于设计单一选项的问题。这些HTML标签可以利用HtmlInputRadioButton、HtmlInputCheckBox与HtmlSelect控件组件化，使它们能够接受程序的控制。5-3-2 增加下拉列表的选项5-3-3 认识IsPostBack5-3-4 设置表格内容5-3-5 建 立

22、 表 格n n1打开练习文件CH0503_EX01（Default2.aspx），然后编写一个调查问卷的程序，规格如下：n n 新增3个HtmlInputRadioButton控件，作为影片的选项；新增5个HtmlInputCheckBox控件，作为电视频道的选项。n n 当用户选择喜爱影片与电视频道后，单击按钮，就会在下面的 text区显示选择结果。n n2打开练习文件CH0503_EX02（Default2.aspx），然后编写一个新增星座的程序，当用户在文本框中输入要新增的星座，然后单击按钮，就会在列表中新增指定的星座（星座不可以重复）。n n3打开练习文件CH0503_EX03（Def

23、ault2.aspx），然后编写程序，利用Add方法创建星座与血型下拉列表内的选项，当用户选择星座与血型后，单击按钮，就会在text区显示选择结果。n n4打开练习文件CH0503_EX04（Default2.aspx），然后编写一个显示图片的程序，当加载网页时，创建HtmlSelect控件的选项为“巴里岛”、“澳洲”、“日本”与“尼泊尔”，而选择要显示的图片后，单击按钮，就会在HtmlImage控件中显示指定的图片。n n1 1（）下列哪个不属于）下列哪个不属于HTMLHTML容器控件？容器控件？n nHtmlAnchorHtmlAnchorHtmlSelectHtmlSelectHtmlI

24、mageHtmlImageHtmlButtonHtmlButtonn n2 2（）下列哪个不属于）下列哪个不属于HTMLHTML输入控件的共享属性？输入控件的共享属性？n nTypeTypeStyleStyleValueValueNameNamen n3 3（）在）在HTML ServerHTML Server控件中使用下列哪个属性可以执行事件程序控件中使用下列哪个属性可以执行事件程序？n nrunat=serverrunat=servern nonclick=Button1_ServerClickonclick=Button1_ServerClickn nAttributes(title)A

25、ttributes(title)n nonserverclick=Button1_ServerClickonserverclick=Button1_ServerClickn n4 4（）关于设置）关于设置runat=serverrunat=server属性的叙述，下列哪个错误？属性的叙述，下列哪个错误？n n如果没有此属性设置，会无法显示出如果没有此属性设置，会无法显示出HTMLHTML标签文件标签文件n n执行后的源代码不会显示出此属性执行后的源代码不会显示出此属性n n其属性的设置用来加载其属性的设置用来加载HTML ServerHTML Server控件控件n n可以输出标准可以输出标准

26、HTMLHTML文档文档n n5 5（）关于）关于AddAdd方法的叙述，下列哪个是错误的？方法的叙述，下列哪个是错误的？n n使用使用AddAdd方法可以用来新增控件的项目方法可以用来新增控件的项目n n增加下拉列表增加下拉列表s1s1选项的语法为选项的语法为s1.Items.Add(s1.Items.Add(润发润发)n n新增表格新增表格tabletable一个单元格的语法为一个单元格的语法为table.Cells.Add(s1)table.Cells.Add(s1)n n新增表格新增表格tabletable一行的语法为一行的语法为table.Rows.Add(s1)table.Rows

27、.Add(s1)n n6 6（）关于）关于IsPostBackIsPostBack属性的叙述，下列哪个是错误的属性的叙述，下列哪个是错误的？n n使用使用IsPostBackIsPostBack属性可以用来判断是否第一次加载程序属性可以用来判断是否第一次加载程序n nIsPostBackIsPostBack属性属于属性属于PagePage对象对象n nNot IsPostBackNot IsPostBack表示只有在第一次执行会加载表示只有在第一次执行会加载n nPage.IsPostBack=FalsePage.IsPostBack=False则表示可以再度执行或返回数则表示可以再度执行或返

28、回数据据n n7 7（）利用下列哪一个属性可以返回）利用下列哪一个属性可以返回HTML ServerHTML Server控件控件的文字内容？的文字内容？n nInnerTextInnerTextInnerHtmlInnerHtmlValueValueAttributesAttributesn n8 8（）在）在HTML ServerHTML Server控件的事件程序中，可以利用该控件的事件程序中，可以利用该控件的哪一个属性值参考该控件？控件的哪一个属性值参考该控件？n nRunatRunatIdIdOnServerClickOnServerClickNameNamen n1新增一个Q01的

29、ASP.NET网站程序，然后编写程序，规则如下：n n 创建三个HtmlInputButton控件，其value属性值分别为“星星”、“月亮”、“太阳”。n n 在按钮的下方创建一个HtmlImage控件，其Id属性值为“IMG1”，默认的图片文件来源为image文件夹的image.gif。n n 单击按钮时，会执行同一个事件程序来判断，并在IMG1区显示对应的图片文件。n n2打开练习文件CH05Q02（Default2.aspx），然后编写一个字体预览的程序，规则如下：n n 字体、大小与颜色列表中默认有4个选项，而文本框中默认有一段文字。n n 当用户选择想要设置的字体、大小与颜色后，单

30、击”预览”按钮，就会将文本框中的文字套用指定的字体格式。n n3 3打开练习文件打开练习文件CH05Q03CH05Q03（Default2.aspxDefault2.aspx），），然后编写一个数学加法的程序，规则如下：然后编写一个数学加法的程序，规则如下：n n 程序会在程序会在Text1Text1与与Text2Text2文本框中随机产生两位文本框中随机产生两位数的整数。数的整数。n n 当用户在当用户在Text3Text3文本框输入答案后，单击文本框输入答案后，单击”确定确定”按钮，会在下方的按钮，会在下方的feedbackfeedback区显示答对或答错区显示答对或答错的反馈信息。的反馈信息。n n 总共会出总共会出1010道题的数学加法，当道题的数学加法，当1010道题都进行道题都进行完毕，会在下方显示已经完成测验和测验总分的完毕，会在下方显示已经完成测验和测验总分的信息（信息（n n新增一个Q04的ASP.NET网站程序，然后编写乘法表的程序，用户在文本框内输入乘法数N，接着单击”显示乘法表”按钮后，就会在下面自动产生1N的乘法表格 n n打开练习文件CH05Q05（Default2.aspx），然后编写一个改变图片大小的程序，当用户单击按钮，可以将图片的长宽缩小10像素；当单击按钮时，可以将图片的长宽放大10像素。