第4章 ASP.NET服务器控件.

Presentation on theme: "第4章 ASP.NET服务器控件."— Presentation transcript:

1 第4章 ASP.NET服务器控件

2 教学目标 了解ASP.NET服务器控件的定义

3 概述 ASP.NET服务器控件是ASP.NET网页上的对象，当客户端浏览器请求服务器端的网页时，这些控件对象将在服务器上运行并向客户端浏览器呈现HTML标记。使用ASP.NET服务器控件，可以大幅减少开发Web应用程序所需编写的代码量，提高开发效率和Web应用程序的性能。

4 4.1 ASP.NET服务器控件概述（1/6） 在网页上经常看到填写信息用的文本框、单选按钮、复选框、下拉列表等元素，它们都是控件。控件是可重用的组件或对象，有自己的属性和方法，可以响应事件。 ASP.NET服务器控件是服务器端ASP.NET网页上的对象，当用户通过浏览器请求ASP.NET网页时，这些控件将运行并把生成的标准的HTML文件发送给客户端浏览器来呈现。

5 4.1 ASP.NET服务器控件概述（2/6） 网站部署在Web服务器上，人们可以通过浏览器来访问这个站点。当客户端请求一个静态的HTML页面时，服务器找到对应的文件直接将其发送给用户端浏览器；而在请求ASP.NET页面时(扩展名为.aspx的页面)，服务器将在文件系统中找到并读取对应的页面，然后将页面中的服务器控件转换成浏览器可以读取的HTML标记和一些脚本代码，再将转换后的结果页面发送给用户。

6 4.1 ASP.NET服务器控件概述 4.1 ASP.NET服务器控件概述（3/6）
在ASP.NET页面上，服务器控件表现为一个标记，例如<asp:textbox…/>。这些标记不是标准的HTML元素，因此如果它们出现在网页上，浏览器将无法理解它们，然而，当从Web服务器上请求一个ASP.NET页面时，这些标记都将动态地转换为HTML元素，因此浏览器只会接收到它能理解的HTML内容。

7 4.1 ASP.NET服务器控件概述（4/6） 在创建.aspx页面时，可以将任意的服务器控件放置到页面上，然而请求服务器上该页面的浏览器将只会接收到HTML和JavaScript脚本代码。 浏览器 服务器 page.aspx 客户端代码 服务器端代码 图4-1 服务器端代码转换为客户端代码

8 4.1 ASP.NET服务器控件概述（5/6） 记住，Web浏览器无法理解ASP.NET。Web浏览器只理解HTML，可能也理解JavaScript——但它不能处理ASP.NET代码。服务器读取ASP.NET代码并进行处理，将所有ASP.NET特有的内容转换为HTML以及(如果浏览器支持的话)一些JavaScript代码，然后将最新生成的HTML发送回浏览器。

9 4.2 HTML服务器控件

10 HTML元素 在VWD2008中，从工具箱添加到页面上的HTML服务器控件只是已设置了某些属性的HTML元素，当然也可通过输入HTML标记在“源”视图中创建HTML元素。 默认情况下，ASP.NET文件中的HTML元素作为文本进行处理，并且不能在服务器端代码中引用这些元素，只能在客户端通过javascript和vbscript等脚本语言来控制。 工具箱的“HTML”选项卡上提供了一些基于HTML INPUT元素的控件。本节通过下列两个控件HTML INPUT元素的使用方法。

11 4.2.1 HTML元素 （1）Input (Button)控件，按钮控件：默认情况下是“INPUT type="button"元素”。
（2）Input (Text) 控件，文本框控件：默认情况下是“INPUT type="text"元素”。 Input(Text)元素创建允许用户在其中输入文本或密码的单行文本框，其主要属性有： （1）Type=text/password：文本框的类型； （2）MaxLength：文本框中最大的输入字节； （3）Size：设定文本框的宽度； （4）Value：设定文本框的值。

12 HTML元素 Input(Button)元素的主要功能是创建一个用来触发事件处理程序的按钮，通过使用onclick属性来表明单击按钮可以触发的处理方法。其主要属性有： （1）ID：此控件的编程名称； （2）value：设置按钮中显示的文字。

13 HTML元素 【例4-1】演示如何使用Input (Text)元素和Input (Button)元素。

14 <input id="Text1" type="text" maxlength ="3"/>  + 
<input id="Button1" type="button" onclick="AddButton_Click();" value="=" />  <input id="Text3" type="text" maxlength="3" /> 图4-2 HTML image 控件

15 HTML服务器控件 在VWD2008中，从工具箱添加到ASP.NET页面上的HTML服务器控件只是已设置了某些属性的HTML元素。 默认情况下，这些添加到ASP.NET文件中的HTML元素被视为传递给浏览器的标记，作为文本进行处理，不能在服务器端的代码中引用这些元素。若要使这些元素能以编程方式进行访问，可以通过添加runat="server"属性表明应将HTML元素作为服务器控件进行处理。还可设置HTML元素的id属性，这样就可使用基于服务器的代码对其进行编程引用了。

16 添加了属性runat="server"的HTML元素就转换为HTML服务器控件了。移除控件标记中的runat="server"属性，HTML服务器控件就转换为HTML元素了。

17 【例4-2】演示如何使用工具箱的Input(Button)服务器控件、Input(Text)服务器控件。

18 典型（1/6） <input id="Text1" type="Text" size="2" maxlength="3" runat="server" /> + <input id="Text2" type="Text" size="2" maxlength="3" runat="server" /> <input id="Button1" type="button" value="=" onserverclick="AddButton_Click" runat="server"/> <input id="Text3" type="Text" size="2" maxlength="3" runat="server" />

19 HTML控件由HTML元素衍生而来，由于HTML元素的属性只能静态地设置，一般在程序执行过程中不能被修改，很不灵活。为了弥补这一不足。ASP
HTML控件由HTML元素衍生而来，由于HTML元素的属性只能静态地设置，一般在程序执行过程中不能被修改，很不灵活。为了弥补这一不足。ASP.NET特地提供HTML控件，这种控件允许在程序中设置其属性，也允许在程序的执行过程中动态地读取及修改其属性，从而可以产生动态的网页。

20 【例4-1】中的HTML Input（Button）元素和【例4-2】HTML服务器控件的比较：
<input id="Button1" type="button" onclick="AddButton_Click();" value="=" /> <input id="Button1" type="button onserverclick="AddButton_Click" runat="server" " value="="/>

21 比较这两个语句，可以看出声明一个HTML服务器按钮控件和声明一个HTML元素有以下几点不同：
（1）服务器按钮控件用onserverclick属性代替了html按钮的onclick属性。 （2）服务器按钮控件多用了一个属性runat＝”server”。

22 说明： （1）ID属性是标识服务器控件的惟一标志，通过它可以像引用一个对象一样来直接在服务器端引用服务器控件。 （2）用OnServerClick属性代替OnClick属性是为了表明响应按钮的单击事件是在服务器端进行处理，而不是客户端。 （3）多出的runat＝server属性是说明该控件为服务器控件，这是区别HTML服务器控件和html元素的惟一方法。

23 4.3 标准服务器控件 ASP.NET包含大量可在ASP.NET网页上使用的标准服务器控件。

24 按钮控件 可使用ASP.NET Button服务器控件为用户提供向服务器发送网页的能力。该控件会在服务器代码中触发一个事件，可以处理该事件来响应回发。 ASP.NET包括三种按钮控件，每种按钮控件在网页上显示的方式都不同，如下表4-1所列：

25 显示一个标准命令按钮，该按钮呈现为一个HTML input元素。
表4-1 按钮控件的比较 控件 说明 Button 显示一个标准命令按钮，该按钮呈现为一个HTML input元素。 LinkButton 呈现为页面中的一个超链接。但是，它包含使窗体被发回服务器的客户端脚本。（可以使用HyperLink 服务器控件创建真实的超链接。） ImageButton 将图形呈现为按钮。这对于提供丰富的按钮外观非常有用。ImageButton控件还提供有关图形内已单击位置的坐标信息

26 （1）按钮事件： 当用户单击任何Button（按钮）服务器控件时，会将该页发送到服务器。这使得在基于服务器的代码中，网页被处理，任何挂起的事件被引发。这些按钮还可引发它们自己的Click事件，可以为这些事件编写“事件处理程序”。 （2）按钮回发行为： 当用户单击按钮控件时，该页回发到服务器。默认情况下，该页回发到其本身，在这里重新生成相同的页面并处理该页上控件的事件处理程序。

27 可以配置按钮以将当前页面回发到另一页面。这对于创建多页窗体可能非常有用。
默认情况下，Button控件使用HTML POST操作提交页面。LinkButton和ImageButton控件不能直接支持HTML POST操作。因此，使用这些按钮时，它们将客户端脚本添加到页面以允许控件以编程方式提交页面。（因此LinkButton和ImageButton控件要求在浏览器上启用客户端脚本。） 在某些情况下，可能希望Button控件也使用客户端脚本执行回发。这在希望以编程方式操作回发（如将回发附加到页面上的其他元素）时非常有用。可以将Button控件的UseSubmitBehavior属性设置为true以使Button控件使用基于客户端脚本的回发。

28 （3）处理Button控件的客户端事件 Button控件既可以引发服务器事件，也可以引发客户端事件。服务器事件在回发后发生，且这些事件在为页面编写的服务器端代码中处理。客户端事件在客户端脚本（通常为ECMAScript(JavaScript)）中处理，并在提交页面前引发。通过向ASP.NET按钮控件添加客户端事件，可以执行一些任务（如在提交页之前显示确认对话框以及可能取消提交）。

29 【例4-3】演示Button控件、LinkButton控件、ImageButton控件的使用。

30 4.3.2 TextBox（文本框）控件 TextBox服务器控件是让用户向ASP.NET网页输入文本的控件。
TextMode属性:SingleLine MultiLine（以textarea呈现） Password Text属性：设置或取得文本

31 TextBox（文本框）控件 安全说明：输入到文本框中的文本没有以任何方式进行加密，在发送其中带有密码的页时，可以使用安全套接字层(SSL)和加密。

32 【例4-4】演示文本框TextBox控件、标签Label控件、按钮Button控件的使用。

33 4.3.3 ListBox控件和DropDownList控件

34 SelectedIndexChanged事件。默认情况下，此事件不会导致向服务器发送页，但可通过将AutoPostBack属性设置为true，强制该控件立即发送。
如果将ListBox控件的属性SelectionMode的值从“Single”改为“Multiple”将允许进行多重选择，用户可以在按住Ctrl或Shift键的同时，单击以选择多个项。

35 【例4-5】演示ListBox控件和DropDownList控件的使用。

36 4.3.4 CheckBox和CheckBoxList控件
CheckBox控件和CheckBoxList控件分别用于向用户提供选项和选项列表。CheckBox控件适合用在选项不多且比较固定的情况，当选项较多或需在运行时动态决定有哪些选项时，使用CheckBoxList控件比较方便。

37 【例4-6】演示复选框控件CheckBox和复选框列表控件CheckBoxLis使用。

38 Image和ImageMap控件 （1）Image服务器控件使您可以在ASP.NET网页上显示图像，并用自己的代码管理这些图像。可以在设计时或运行时以编程方式为Image对象指定图形文件。还可以将控件的ImageUrl属性绑定到一个数据源，以根据数据库信息显示图形。 Image控件不支持任何事件。例如，Image控件不响应鼠标单击事件。实际上，可以通过使用ImageMap或ImageButton控件来创建交互式图像。

39 （2）Imagemap说白了就是一种图形，包括许多不同部分，将鼠标指针指在图形的各个部分，点一下鼠标左键，就可以进入另一个超级链接的页面。
两个元素：图像，它可是任何标准Web图形格式的图形，如.gif、.jpg或.png文件。

40 HotSpot（作用点） HotSpot（作用点）控件集。每个作用点控件都是一个类型为CircleHotSpot、RectangleHotSpot或PolygonHotSpot的不同项。对于每个作用点控件，都要定义用于指定该作用点的位置和大小的坐标。例如，如果创建一个CircleHotSpot控件，则需要定义圆心的x和y坐标以及圆的半径。 响应用户单击：每一个作用点都可以是一个单独的超链接或回发事件。可以指定用户单击作用点时发生的事件，可以将每个作用点配置为可以转到为该作用点提供的URL的超链接。或者，也可以将控件配置为在用户单击某个作用点时执行回发，并可为每个作用点提供一个唯一值。回发会引发ImageMap控件的Click事件。在事件处理程序中，可以读取分配给每个作用点的唯一值。

41 【例4-7】演示Image控件和ImageMap控件的使用。

42 4.3 RadioButton和RadioButtonList

43 单个RadioButton控件使您可以更好地控制单选按钮组的布局。例如，可以在各单选按钮之间加入文本（即非单选按钮文本）。
RadioButtonList控件不允许您在按钮之间插入文本，但如果想将按钮绑定到数据源，使用这类控件要方便得多。

44 1. 对单选按钮分组 单选按钮很少单独使用，而是进行分组以提供一组互斥的选项。 （1）先向页面中添加单个的RadioButton控件，然后将所有这些控件手动分配到一个组中。具有相同组名的所有单选按钮视为单个组的组成部分。 （2）向页面中添加一个RadioButtonList控件。该控件中的列表项将自动进行分组。

45 2. RadioButton事件 RadioButton -CheckedChanged事件：RadioButtonList-SelectedIndexChanged事件 AutoPostBack属性

46 【例4-8】演示单选按钮控件RadioButton和单选按钮列表控件RadioButtonList使用。

47 MultiView和View控件 MultiView和View控件和制作出选项卡的效果，MultiView控件用作一个或多个View控件的外部容器。View控件又可包含标记和控件的任何组合。

48 MultiView和View控件 可以使用ActiveViewIndex属性或SetActiveView方法定义活动视图。如果ActiveViewIndex属性为空，则MultiView控件不向客户端呈现任何内容。

49 ActiveViewIndex属性：用于获取或设置当前被激活显示的View控件的索引值。默认值为－1，表示没有View控件被激活。
SetActiveView方法：用于激活显示特定的View控件。 ActiveViewChanged事件：当视图切换时被激发。 呈现View控件内容：未选择某个View控件时，该控件不会呈现到页面中。但是，每次呈现页面时都会创建所有View控件中的所有服务器控件的实例，并且将这些实例的值存储为页面的视图状态的一部分。

50 无论是MultiView控件还是各个View控件，除当前View控件的内容外，都不会在页面中显示任何标记。这些控件也不支持可以作为一个整体应用于当前View控件的外观属性。但是可以将一个主题分配给MultiView或View控件，控件将该主题应用于当前View控件的所有子控件。 引用控件：每个View控件都支持Controls属性，该属性包含该View控件中的控件集合。也可以在代码中单独引用View控件中的控件。

51 在视图间导航： 若要创建导航按钮，可以向每个View控件添加一个按钮控件（Button、LinkButton或ImageButton）。然后可以将每个按钮的CommandName和CommandArgument属性设置为保留值以使MultiView控件移动到另一个视图。

52 【例4-9】View和MultiView控件示例。

53 4.3.8 AdRotator （广告控件）服务器控件
AdRotator 服务器控件提供一种在ASP.NET网页上显示广告的方法。该控件可显示.gif文件或其他图形图像。当用户单击广告时，系统会将他们重定向到指定的目标URL。 AdRotator 服务器控件可从数据源（通常是XML文件或数据库表）提供的广告列表中自动读取广告信息，如图形文件名和目标URL。您可以将信息存储在一个XML文件或数据库表中，然后将AdRotator控件绑定到该文件。

54 AdRotator控件会随机选择广告，每次刷新页面时都将更改显示的广告。广告可以加权以控制广告条的优先级别，这可以使某些广告的显示频率比其他广告高。也能编写在广告间循环的自定义逻辑。

55 AdRotator控件的所有属性都是可选的。XML文件中可以包括下列属性：
ImageUrl：要显示的图像的URL。 NavigateUrl：单击AdRotator控件时要转到的网页的URL。 AlternateText：图像不可用时显示的文本。 Keyword：可用于筛选特定广告的广告类别。 Impressions：一个指示广告的可能显示频率的数值（加权数值）。在XML文件中，所有Impressions值的总和不能超过2,048,000, 。 Height：广告的高度（以像素为单位）。此值会重写AdRotator控件的默认高度设置。 Width：广告的宽度（以像素为单位）。此值会重写AdRotator控件的默认宽度设置。

56 【例4-10】使用AdRotator 服务器控件显示数据库中的广告

57 Literal控件和Panel控件 Literal控件和Panel控件均可作为容器控件，但二者的适用场合不同，下面分别介绍。

58 1. Literal控件 如果要动态添加内容，则必须将内容添加到容器中。典型的容器有Label控件、Literal控件、Panel控件和PlaceHolder控件。 Literal控件与Label控件的区别在于Literal控件不向文本中添加任何HTML元素。（Label控件呈现一个span元素。）因此，Literal控件不支持包括位置属性在内的任何样式属性。但是，Literal控件允许指定是否对内容进行编码。

59 Panel和PlaceHolder控件呈现为div元素，这将在页面中创建离散块，与Label和Literal控件进行内嵌呈现的方式不同。
Mode属性:用于指定控件对您所添加的标记的处理方式。可以将 Mode 属性设置为以下值：

60 Transform.：将对添加到控件中的任何标记进行转换，以适应请求浏览器的协议。如果向使用HTML外的其他协议的移动设备呈现内容，此设置非常有用。
PassThrough.：添加到控件中的任何标记都将按原样呈现在浏览器中。 Encode：将使用HtmlEncode方法对添加到控件中的任何标记进行编码，这会将HTML编码转换为其文本表示形式。例如，<b>标记将呈现为<b>。当希望浏览器显示而不解释标记时，编码将很有用。编码对于安全也很有用，有助于防止在浏览器中执行恶意标记。显示来自不受信任的源的字符串时推荐使用此设置。

61 【例4-11】演示Literal控件的使用。

62 2. Panel控件 用作静态文本和其他控件的父控件，向该控件添加其他控件和静态文本。 当以编程方法创建内容并需要一种将内容插入到页面中的方法时，此方法尤为适用。 （1）动态生成的控件的容器 Panel控件为在运行时创建的控件提供了一个方便的容器。

63 （2）对控件和标记进行分组 对于一组控件和相关的标记，可以通过把其放置在Panel控件中，然后操作此Panel控件的方式将它们作为一个单元进行管理。例如，可以通过设置面板的Visible属性来隐藏或显示该面板中的一组控件。 （3）具有默认按钮的窗体 可将TextBox控件和Button控件放置在Panel控件中，然后通过将Panel控件的DefaultButton属性设置为面板中某个按钮的ID来定义一个默认的按钮。如果用户在面板内的文本框中进行输入时按Enter，这与用户单击特定的默认按钮具有相同的效果。这有助于用户更有效地使用项目窗体。

64 （4）向其他控件添加滚动条 有些控件（如TreeView控件）没有内置的滚动条。通过在Panel控件中放置滚动条控件，可以添加滚动行为。若要向Panel控件添加滚动条，请设置Height和Width属性，将Panel控件限制为特定的大小，然后再设置ScrollBars属性。

65 （5）页上的自定义区域 创建一个带标题的分组框：可设置GroupingText属性来显示标题。呈现页时，Panel控件的周围将显示一个包含标题的框，其标题是您指定的文本。 说明：不能在Panel控件中同时指定滚动条和分组文本。如果设置了分组文本，其优先级高于滚动条。 在页面上创建具有自定义颜色或其他外观的区域：Panel控件支持外观属性（如BackColor和BorderWidth），可以设置外观属性为页面上的某个区域创建独特的外观。 说明：设置GroupingText属性将自动在Panel控件周围呈现一个边框。

66 【例4-12】演示文件Panel控件的使用。

67 4.4 验证控件 ASP.NET为开发人员提供了一套完整的服务器控件来验证用户输入的信息是否有效，这些控件可与ASP.NET网页上的任何控件（包括HTML和服务器控件）一起使用。

68 常用验证控件 RequiredFieldValidator CompareValidator RangeValidator
RegularExpressionValidator CustomValidator ValidationSummary

69 验证对象模型：通过使用由各个验证控件和页面公开的对象模型，可以与验证控件进行交互。每个验证控件都会公开自己的IsValid属性，可以测试该属性以确定该控件是否通过验证测试。页面还公开一个IsValid属性，该属性总结页面上所有验证控件的IsValid状态。该属性允许您执行单个测试，以确定是否可以继续自行处理。页面还公开一个包含页面上所有验证控件的列表的Validators集合。可以依次通过这一集合来检查单个验证控件的状态。

70 Button控件和验证：如果某一页面包含ASP
Button控件和验证：如果某一页面包含ASP.NET验证控件，则在默认情况下，单击按钮控件会导致验证控件执行检查。如果为验证控件启用了客户端验证，则在验证检查失败时不会提交该页面。下表4-3描述了按钮控件所支持的可以更精确地控制验证过程的属性。 表4-3 Button控件的部分属性 属性 说明 CausesValidation 指定单击按钮是否还执行验证检查。将此属性设置为false可避免验证检查。 ValidationGroup 使您能够指定单击按钮时调用页面上的哪些验证程序。如果未建立任何验证组，则单击按钮会调用页面上的所有验证程序。

71 验证 Web 窗体页中用户输入 【例4-13】验证Web窗体页中的用户输入

72 【例4-14】演示CompareValidator比较验证控件的使用方法。

73 4.5 用户控件 有时可能需要控件具有ASP.NET内置服务器控件没有的功能。在这种情况下，用户可以创建自己的控件。有两个选择，可以创建用户控件和自定义控件。 用户控件：用户控件是能够在其中放置标记和服务器控件的容器。然后，可以将用户控件作为一个单元对待，为其定义属性和方法。 自定义控件：自定义控件是编写的一个类，此类从Control或WebControl派生。 创建用户控件要比创建自定义控件方便很多，因为可以重用现有的控件。用户控件使创建具有复杂用户界面元素的控件极为方便。

74 1.用户控件结构 ASP.NET Web用户控件与完整的ASP.NET网页（.aspx文件）相似，同时具有用户界面页和代码页。可以采取与创建ASP.NET页相似的方式创建用户控件，然后向其中添加所需的标记和子控件。用户控件可以像页面一样包含对其内容进行操作（包括执行数据绑定等任务）的代码。

75 2.用户控件与ASP.NET网页有以下区别： （1）用户控件的文件扩展名为.ascx。 （3）用户控件不能作为独立文件运行。而必须像处理任何控件一样，将它们添加到ASP.NET页中。 （4）用户控件中没有HTML、body或form元素。这些元素必须位于宿主页中。 （5）可以在用户控件上使用与在ASP.NET网页上所用相同的HTML元素（HTML、body或form元素除外）和Web控件。例如，如果您要创建一个将用作工具栏的用户控件，则可以将一系列Button 服务器控件放在该控件上，并创建这些按钮的事件处理程序。

76 【例4-15】演示一个实现微调控件的用户控件。在此微调控件中，用户可以单击“向上”和“向下”按钮以滚动文本框中的一系列选择。