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

1、(中职）2022-2023学年SP.NET动态网页设计第五章.ppt ASP课件第五章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控件，这两种控件都

2、是在服务器端执行的，也都可以产生标准HTML文档。5-1-1 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 Ser

3、ver控件在Visual Web Developer 2005的设计视图中，可以直接将HTML标签转换为HTML Server控件。以下就是将HTML标签转换为HTML Server控件的操作示范。先打开练习文件CH0501_02A（Default2.aspx设计视图窗口）示范完成后，就会在HTML标签的左上角显示图案，表示已经将HTML标签转换为HTML Server控件了，界面显示如下：除了在设计视图中创建HTML Server控件，也可以直接在源文件视图中编写程序代码来创建HTML Server控件，其语法如下：创建HTML标签的HTML Server控件时，只需加入下面两个属性。（1）

4、id属性：设置id名称，以便日后编写程序代码时参考该控件。例如：在事件程序中设置该属性。（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.Bo

5、rder = 5 设置图片的边框宽度4. IMG1.Alt = 我是小Baby！ 设置图片上的提示文字5. End Sub. 01_02B-1-3 HTML Server控件的属性设置HTML Server控件可分成一般HTML控件、HTML输入控件与HTML容器控件三类。一般来说，每一个HTML Server控件都具有Attributes、Disabled、Style、TagName、Visible等属性；如果控件属于HTML输入控件，如HtmlInputText、HtmlInputButton等，还另外具有Name、Value、Type等属性来设置HTML

6、输入控件；HTML容器控件包括HtmlTable、HtmlTextArea等，其共享的属性包括InnerHtml、InnerText等。5-1-4 用程序设置控件的样式与属性HTML Server控件的id名称.Attributes(属性)= 属性值与HTML Server控件的id名称.Style(样式属性)= 属性值除了Attributes与Style属性以外，在ASP.NET中也可以设置其他属性，其语法如下：HTML Server控件的id名称.属性 = 属性值完成后，单击启动调试按钮执行程序，网页上的按钮就会套用程序设置的样式与属性，界面显示如下：1（ ）下列哪个是标签对应的HTML

7、Server控件？HtmlAnchorHtmlGenericControlHtmlSelectHtmlInputRadioButton2（ ）关于HTML Server控件和Web Server控件，下列叙述哪个是错误的？ HTML Server控件主要是将所有HTML标签变成组件Web Server控件提供了月历与数据验证等控件在事件程序中可以利用程序控制HTML Server控件利用HTML标签可以创建HTML Server控件或Web 控件3（ ）下列哪个是一般HTML控件具有的属性？ NameAttributesValueInnerText4（ ）利用HTML标签创建HTML Serv

8、er控件时，会有许多属性，哪一个属性必须具有唯一性？ NameRunatIdType5（ ）什么控件可以使用InnerHtml属性？一般HTML控件HTML输入控件HTML容器控件以上皆错 6（ ）什么控件可以使用Type属性？ 一般HTML控件HTML输入控件HTML容器控件以上皆错7（ ）关于HTML Server控件，下列叙述哪个是错误的？ HTML输入控件可以使用Name、Value与Type属性执行程序时，若发现runat=server属性设置，就会从类别库加载HTML Server控件HTML标签转换为HTML Server控件，必须加上Id与Runat的属性设置在浏览器执行后，原

9、始文件中会显示runat=server8（ ）利用哪一个属性可以设置控件是否可编辑？ DisabledStyleVisibleInnerHtml9（ ）下列哪一个子程序是加载网页时会自动加载的事件程序？ Page_InitPage_UnloadPage_LoadPage_PreInit10（ ）下列哪一个不属于HTML容器控件？ HtmlAnchorHtmlTableRowHtmlSelectHtmlInputRadioButton1 新建一个01_EX01的ASP.NET网站程序，然后在网页中创建HtmlInputText与HtmlInputPassword控件，规则如下： HtmlInpu

10、tText的宽度为10，粗体文字，颜色为purple，内容为“Selina”。 HtmlInputPassword的宽度为15，背景颜色为silver。（提示：设置控件的样式是style属性，可以用CSS样式来设置。 2打开练习文件CH0501_EX02（Default2. aspx），然后设计程序，当加载网页时会设置HtmlAnc- hor与HtmlTextArea控件的属性，规则如下： HtmlAnchor的提示文字为“较高流量网站”，链接网址为“http:/www.yahoo. cn/”。 HtmlTextArea的列宽为25，行数为4，文字颜色为Maroon，文字长度为15。（提示：利

11、用Attributes(title)属性可以设置鼠标移到上面时显示的说明文字。） 5-2 认识事件处理技巧5-2-1 创建HTML Server控件的事件程序在程序中，不同的HTML Server控件（对象）会提供不同的事件程序，只要在网页或对象上双击，就可以在源文件视图中查看或编辑该对象对应的事件程序。下面是创建按钮对象事件程序的操作示范。创建按钮并在单击后执行响应的程序代码如下：1.2. 3. Protected Sub Button1_ServerClick(ByVal sender As Object, ByVal e As System.EventArgs)4. text.Inner

12、Text = 单击鼠标左键5. End Sub6. 0. 02_0111.12.13. 14. 15. 16. 17.18.上述的程序代码分析如下：（1）第35行是当在按钮上单击时对应的Button1_ServerClick事件程序，其中sender参数会提供引发事件的对象参考，e参数则是传递发生的事件数据。（2）第14行在HtmlInputButton控件会自动增加属性设置“onserverclick= Button1_ ServerClick”，表示单击按钮后，会执行Button1_ServerClick子程序的内容。（3）第15行设置标签对应的HtmlGenericCont

13、rol控件，在第4行利用这个控件的InnerText属性显示出文字信息（必须利用Id属性值来存取HtmlGenericControl控件）。5-2-2 单击不同的按钮调用不同的子程序调用同一个子程序事实上，在同一个子程序内可以接受不同的按钮调用，只要应用sender对象参数的属性，就可以分辨是由哪一个控件所调用，表示方法如下：5-2-3 HTML标签测试程序完成后界面显示如下：1新建一个02_EX01的ASP.NET网站程序，然后编写一个“显示时间”的程序，规则如下： 网页中有一个HtmlInputText与一个HtmlInputButton控件。 单击按钮时，就会在文本框中更新为当前的系统时

14、间。（提示：在HtmlInput- Button的事件程序中设置HtmlInput- Text的Id属性，显示Value值为Now()。） 2打开练习文件CH0502_EX02（Default2. aspx），然后编写一个产生不同背景颜色的程序，规则如下： 网页中有3个HtmlInputButton控件，分别为Green、Silver与Purple。 单击这3个按钮，分别会将标签的背景套用Green、Silver与Purple颜色。 5-3 窗体与表格5-3-1 控制窗体组件Radio选项按钮具有多选一的特性，单一选项的问题都可以应用这种选项按钮，Checkbox复选框可以用来创建复选问题，而

15、Select下拉列表是另一种设计选项的技巧，它也适用于设计单一选项的问题。这些HTML标签可以利用HtmlInputRadioButton、HtmlInputCheckBox与HtmlSelect控件组件化，使它们能够接受程序的控制。5-3-2 增加下拉列表的选项5-3-3 认识IsPostBack5-3-4 设置表格内容5-3-5 建 立 表 格1打开练习文件CH0503_EX01（Default2. aspx），然后编写一个调查问卷的程序，规格如下： 新增3个HtmlInputRadioButton控件，作为影片的选项；新增5个HtmlInputCheckBox控件，作为电视频道的选项。

16、当用户选择喜爱影片与电视频道后，单击按钮，就会在下面的 text区显示选择结果。 2打开练习文件CH0503_EX02（Default2. aspx），然后编写一个新增星座的程序，当用户在文本框中输入要新增的星座，然后单击按钮，就会在列表中新增指定的星座（星座不可以重复）。 3打开练习文件CH0503_EX03（Default2. aspx），然后编写程序，利用Add方法创建星座与血型下拉列表内的选项，当用户选择星座与血型后，单击按钮，就会在text区显示选择结果。 4打开练习文件CH0503_EX04（Default2. aspx），然后编写一个显示图片的程序，当加载网页时，创建HtmlSe

17、lect控件的选项为“巴里岛”、“澳洲”、“日本”与“尼泊尔”，而选择要显示的图片后，单击按钮，就会在HtmlImage控件中显示指定的图片。 1（ ）下列哪个不属于HTML容器控件？HtmlAnchorHtmlSelectHtmlImageHtmlButton2（ ）下列哪个不属于HTML输入控件的共享属性？TypeStyleValueName3（ ）在HTML Server控件中使用下列哪个属性可以执行事件程序？runat =serveronclick =Button1_ServerClickAttributes(title)onserverclick=Button1_ServerClic

18、k4（ ）关于设置runat =server属性的叙述，下列哪个错误？如果没有此属性设置，会无法显示出HTML标签文件执行后的源代码不会显示出此属性其属性的设置用来加载HTML Server控件可以输出标准HTML文档5（ ）关于Add方法的叙述，下列哪个是错误的？使用Add方法可以用来新增控件的项目增加下拉列表s1选项的语法为s1.Items.Add(润发)新增表格table一个单元格的语法为table.Cells.Add(s1)新增表格table一行的语法为table.Rows.Add(s1)6（ ）关于IsPostBack属性的叙述，下列哪个是错误的？使用IsPostBack属性可以用来判断是否第一次加载程序IsPostBack属性属于Page对象Not IsPostBack表示只有在第一次执行会加载Page.IsPostBack = False则表示可以再度执行或返回数据7（ ）利用下列哪一个属性可以返回HTML Server控件的文字内容？InnerTextInnerHtmlValueAttributes8（ ）在HTML Server控件的事件程序中，可以利用该控件的哪一个属性值参考该控件？RunatIdOnServerClickName1新增一个Q01的ASP.NET网站程序，然后编写程序，规则如下： 创建三个Ht