任务三 ASP.NET Web常用控件

【任务要点】

1.掌握文本类型控件

2.掌握按钮类控件

3.掌握选择类控件

4.掌握图形显示类控件

5.掌握容器类控件

6.掌握文件上传控件

7.掌握日历选择控件

【案例一】设计简单登录界面

【具体步骤】

（1）打开Webhello后，添加一个Web窗体并命名为Login.aspx。

（2）在页面插入4行2列的表格，如图1-11所示。

（3）拖动两个文本框到表格中，它们的属性见表1-2，设置分别如图1-12～图1-14所示。

（4）将按钮拖动到Login.aspx的视图下，并将其ID设置为“btnLogin”，将其Text设置为“登录”，双击按钮后输入以下代码，如图1-15所示。

（5）选择【调试】→【开始执行】命令，运行结果如图1-16所示。

【案例二】利用DropDownList来选择头像并在图片框中显示

【具体步骤】

（1）新建一个网站并命名为HeadImage，从工具箱里把DropDownList和Image两个控件拖动到Default.aspx的视图下，分别命名为ddlImg和imgHead，此时要注意的是也要把ddlImg的AutoPostBack的属性设置为True，如图1-17和图1-18所示。

　　AutoPostBack 属性用于设置或返回当用户在 TextBox 控件中按 Enter 或 Tab 键时，是否发生自动回传到服务器的操作。如果把该属性设置为 TRUE，则启用自动回传，否则为 FALSE。默认是 FALSE。

• DropDownList.AutoPostBack 属性

　　当使用服务器控件dropdownlist时，如果要用的它的SelectedIndexChanged事件，那么必须把该属性设为true。否则SelectedIndexChanged事件是不会触发的，因为AutoPostBack 为false时，该控件是不会与后端服务器交互的。当把AutoPostBack 设为true时，如果DropDownList中的选择项发生改变，那么就会触发页面的回发，自然SelectedIndexChanged事件就生效了。

• TextBox.AutoPostBack 属性

当TextBox设置AutoPostBack =True时，在控件中按 Enter 或 Tab 键时，都会发生自动回发到服务器的操作。

• Button按钮

Button控件没有AutoPostBack属性，但是Click的事件会自动执行回发操作。

（2）双击Default.aspx页面的空白部分，并输入以下代码，如图1-19所示。

（3）选择【调试】→【开始执行】命令，结果如图1-20所示。但改变DropDownList控件的值后，就会发现DropDownList的值每改变一次，就会增加三个值，如图1-21所示。

（4）修改页面中的代码，如图1-22所示。

 ispostback：就是判断页面是首次加载的，还是数据回发（有get或者post请求过的）后的页面

if(!IsPostBack)

{

    //如果不是POST提交（也就是第一次进入该页面）,则初始化页面或控件等等

}else

{

    //如果是POST提交 （也就是提交表单）执行这里

}

（5）选择【调试】→【开始执行】命令，不断改变值，查看结果如图1-23所示。

【案例三】利用FileUpload上传图片

【具体步骤】

（1）新建一个项目并命名为FileUploadImg，从工具箱里把FileUpload、Image、Button三个控件拖动到Default.aspx的视图下，分别命名为FileUpload1、imgDisplay、btnUpload。

（2）双击Default.aspx页面的空白部分，并输入以下代码，如图1-24所示。

（3）选择【调试】→【开始执行】命令，运行结果如图1-25所示。

【背景知识】

一、ASP.NET服务器控件概述

　　1.ASP.NET服务器控件

　　过去，使用传统ASP的一个难点是，必须根据所编写的服务器端代码对浏览器输出的所有HTML结果负全责。网页浏览请求可能来自同一个浏览器的许多不同版本，所以开发人员常常为用于浏览站点的最低版本开发应用程序。基本上，每个人都把最低版本作为目标。如果应用程序总是为最低版本开发，开发人员就不能利用新浏览器版本提供的高级功能。

　　ASP.NET服务器控件克服了这些障碍。在收到一个请求时，ASP.NET会检查这个请求，确定发出该请求的浏览器类型，以及浏览器的版本，然后输出适合于该浏览器的HTML输出。这个过程通过用户代理从HTTP请求的标题中确定要发送给浏览器的内容来完成。也就是说，可以为最好的浏览器建立应用程序，而不必担心功能是否会在发出请求给应用程序的浏览器上发挥作用。有了这个功能，这些控件就可以称为智能控件。

　　2.服务器控件的类型

 ASP.NET提供了两种不同类型的服务器控件：HTML服务器控件和Web服务器控件。这两种类型的控件大不相同，在使用ASP.NET时，就会看出重点是Web服务器控件。那么，哪种控件比较好-答案完全取决于要获得的结果。               

　　3.用服务器控件建立页面

　　使用服务器控件构建ASP.NET页面有两种方式。可以使用专门为处理ASP.NET 2.0而设计的工具，该工具允许可视化地把控件拖放到设计界面上，操纵该控件的行为。也可以直接通过输入代码来处理服务器控件,在这里仅讲解在设计界面上使用服务器控件。

　　4.处理服务器控件的事件

　　ASP.NET不是使用解释性的代码，而是为页面编写基于事件的结构。

　　5.HTML服务器控件

　　ASP.NET允许提取HTML元素，通过少量的工作，把它们转换为服务器端控件。之后，就可以使用它们控制在ASP.NET页面中实现的元素的行为和操作了。

 二、ASP.NET服务器控件分类

　　1.文本类型控件

　　（1）Label控件，又称为标签控件，主要用于显示文本。

  　　 它的常用属性见表1-3。

　　（2）TextBox控件

　　  TextBox又称文本框控件，用于输入或显示文本。TextBox控件通常用于可编辑文本，但也可以通过设置属性来设置其成为只读控件。它的常用属性见表1-4。

　　2.按钮类型控件

　　（1）Button控件

           Button控件可以分为提交按钮和命令按钮控件。提交按钮控件只是将Web页面回送到服务器，一般情况下，Button控件为提交按钮控件；而命令按钮一般也是与控件相关联的命令，用于处理控件命令事件。

　　（2）LinkButton控件

           LinkButton控件又称为超链接控件，该控件在功能上与Button控件相似，但它以超链接的形式显示。

　　（3） ImageButton控件

           ImageButton控件为图像按钮控件，可用于显示具体的图像，在功能上和Button控件相同。

　　（4）HyperLink控件

　　HyperLink控件又称为超链接控件，该控件只实现导航功能，没有事件功能，只有属性能进行设置，以实现导航链接。

　　3.选择类型控件

　　（1）ListBox控件

 ListBox控件用于显示一组列表项，用户可以从中选择一项或多项。它会自动增加上下滚动条。

　　（2）DropDownList控件

  DropDownList控件与ListBox控件在使用上类似，但DropDownList控件只允许用户每次从列表中选择一项，而且在框中仅显示选定项。        

　　（3）RadioButton控件

　　 RadioButton控件是一种单选按钮，用户可以在页面中添加一组RadioButton控件，通过为所有的单选按钮分配一个相同的GroupName，这样，从一个组里仅能选择一个选项。

　　（4）CheckBox控件

　　 CheckBox控件为某个问题提供多种选项并可以做多种选择。

　　4.图形显示类型控件

　　（1）Image控件

　　 Image控件用于在页面上显示图像，在使用Image控件时，可以在设计时或运行时设置其属性，主要是指定图像文件的位置。

　　（2）ImageMap控件

　　ImageMap控件允许在图片中设置一些热点区域。当用户单击这些热点区域时，将会引发超链接或者单击事件。当需要对图片进行局部交互时，可使用ImageMap控件。

　　5.FileUpload文件上传控件

　　FileUpload控件包括一个文本框和一个浏览按钮。FileUpload控件不会自动上传文件，需要做进一步的设置，主要设置相关的事件处理程序。

案例一 设计简单登录页面

案例二 利用DropDownList选择头像

案例三 利用FileUpload上传图片

Web服务器控件命名规则汇总