第三章第三章 使用 使用 WebWeb 控件控件

模块三、场景及任务分析模块三、场景及任务分析场景

♫公司领导希望了解用户的真正需求以及对本站点的一些建议等。因此，要求为浏览者提供在访问站点时可以发表意见（比如对站点设计的或是产品的意见）的手段。同时，也希望能够对一些新产品进行推广宣传，加大产品的宣传力度，因此，要求能够在站点首页包括产品的广告栏。

任务分析♫见第三章实验任务

内容内容HTML控件Web服务器控件使用 Web服务器控件页面提交处理流程

目标目标对 ASP.NET的控件有个全面的了解使用 HTML控件并可转换成 HTML服务器控件

了解 Web Server控件的常见属性理解 Web Server控件的事件模型使用 Web Server控件使用控件构建复杂的 Web Form理解 Web页面的提交过程

§3.1 §3.1 HTMLHTML 控件控件一、 HTML控件的类型二、 HTML控件常用属性三、 HTML控件的事件

♫演示和练习：给 HTML控件添加事件处理代码四、将 HTML控件转换成 HTML服务器控件

♫演示和练习：将 HTML控件转换成 HTML服务器控件

一、 HTML控件的类型div控件

♫ 基于 HTML div 元素 , 呈现为块，往往包含其他元素。

水平线规则控件♫ 基于 HTML hr 元素，呈现为一条水平直线。

Image控件♫ 基于 HTML img 元素，用于显示一个图像。

输入控件♫ 基于 HTML input 元素，通过设置其 type属性，可分别用来显示按钮、文本框、下拉列表框、单选按钮、复选框。

一、 HTML控件的类型选择控件

♫ 基于 HTML select 元素，用来呈现一个下拉列表框。表格控件

♫ 基于 HTML table、 tr、 td 元素，呈现为一个表格。默认情况下，将 Table 控件添加到 HTML 页或 Web 窗体页时，表将占据三行乘三列的范围。您可以使用“布局”菜单上的命令自定义列数和行数。

文本区域控件♫ 基于 HTML textarea 元素，该元素建立一个文本区

在 Visual Studio 中从工具箱添加到页面上的 HTML 服务器控件只不过是已设置了某些属性的 HTML 元素。也可以通过键入标记在“源”视图中创建 HTML 元素。

二、二、 HTMLHTML 控件常用属性控件常用属性InnerHtml 和 InnerText 属性 (093)

♫ 这两个属性主要是用来设定控件所要显示的文字。只不过 InnerHtml会将内容作为 HTML代码解释，而 InnerText会将内容直接显示出来。

Disabled 属性♫ 通过该属性可以关闭 HTML控件的功能，让它无法执行工作。

Visible 属性♫ 通过该属性可以显示或者隐藏控件。

二、二、 HTMLHTML 控件常用属性控件常用属性Attributes 属性

♫有两个方法可以指定对象的属性，第一种是前面常用的“对象 . 属性”的方式，而另外一种就是通过“对象 .Attributes[”属性名称“ ]”来设置或获取属性 。如：

btnHtml.Attributes["value"] = " 这是服务器端代码！ ";

Style 属性♫可以用来设定控件的样式。

三、三、 HTMLHTML 控件的事件控件的事件

事件 说 明onclick 当鼠标单击控件时触发该事件，如按钮

的单击onchange 当内容改变时被触发，如文本框内容发

生变化时触发该事件ondbclick 当用鼠标双击控件时触发该事件onfocus 获得焦点时该事件被触发，不过控件必

须能够获得焦点onkeydown 当按下键盘键时触发该事件onkeypress 当按键盘键时触发该事件

三、 三、 HtmlHtml 控件的事件控件的事件事件 说 明

onkeyup 当按键恢复原状（未按下）时触发该事件

onmousedown 当鼠标按下时触发该事件onmouseup 当鼠标按下后放弃按下时触发该事件onmousemove 当鼠标在控件区域移动时触发该事件onmouseover 当鼠标滑过控件区域时触发该事件onmouseout 当鼠标移出控件区域时触发该事件

示例：在示例：在 VS2005VS2005 中为中为 HTMLHTML 控件控件添加事件添加事件

演示和练习：给演示和练习：给 HTMLHTML 控件添加事控件添加事件处理代码件处理代码

四、将四、将 HTMLHTML 控件转换成控件转换成 HTMLHTML 服服务器控件务器控件

添加 runat=“server" 属性表明应将 HTML 元素作为服务器控件进行处理

设置元素的 id 属性，使得可以通过编程

方式引用控件

设置属性来声明服务器控件实例上的属性 参数和事件绑定等

<input id="Text1" type="text" runat=" server " />

<input id="Button1" type="button" value="button1" runat=" server " />

<input id="Button1" type="button" value="button1" runat=" server " on serverclick="Button1_ serverClick" />

演示和练习：将演示和练习：将 HTMLHTML 控件变成控件变成HTMLHTML ServerServer 控件控件

§3.2 §3.2 Web Web 服务器控件服务器控件一、什么是 Web 服务器控件二、 Web 服务器控件的分类三、 Web 服务器控件的属性四、 Web 服务器控件的事件模型

一、什么是一、什么是 Web Web 服务器控件服务器控件ASP.NET Web 服务器控件是 ASP.NET 网

页上的对象，在向浏览器请求页和呈现标记时将运行这些对象。

Web 服务器控件与 HTML 服务器控件相比，其设计侧重点不同。除了提供 HTML 服务器控件的功能外，还提供其他一些功能，如类型安全编程，支持主题。

二、二、 Web Web 服务器控件的分类服务器控件的分类 标准控件

♫ 按钮、列表、图像、框、超链接、标签、表和更复杂的控件等 数据控件

♫ 包括数据源控件和格式设置控件，前者可以用于访问数据库中的数据，后者可以用于显示和操作 ASP.NET 网页上的数据。

验证控件♫ 验证控件可用以验证在 Web 窗体中用户的输入。

导航控件♫ 可以使用这些控件在 ASP.NET 网页上创建菜单和其他导航辅助

功能。 登录控件

♫ 包括可以生成登录页的控件、使用户可以在您的网站上注册的控件、对登录用户和匿名用户显示不同信息的控件。

三、三、 Web Web 服务器控件的属性服务器控件的属性布局属性可访问性属性链接属性数据属性外观属性杂项属性

三、三、 Web Web 服务器控件的属性服务器控件的属性属性名 说 明

AccessKey 控件的键盘快捷键 (AccessKey) 。此属性指定用户在按住 Alt 的同时可以按下的单个字母或数字。例如，如果希望用户按下 Alt+K 以访问控件，则指定 AccessKey 为“ K” 。仅在 Microsoft Internet Explorer 4.0 及其更高版本中支持快捷键

Attributes 控件上的未由公共属性定义但仍需呈现的附加属性集合，即任何未由 Web 服务器控件定义的属性都将添加到此集合中，从而允许使用未被控件直接支持的 HTML 属性注意：只能在编程时使用此属性；不能在声明控件时设置此属性

BackColor 控件的背景色，可以使用标准的 HTML 颜色标识符来设置：颜色名称（“ black” 或“ red” ）或者以十六进制格式（“ #ffffff” ）表示的 RGB 值

BorderColor 控件的边框颜色，可以使用标准的 HTML 颜色标识符来设置：颜色名称（“ black” 或“ red” ）或者以十六进制格式（“ #ffffff” ）表示的 RGB 值

BorderWidth 控件边框（如果有的话）的宽度，以像素为单位注意：此属性可能不适用于 Internet Explorer 4.0 之前的浏览器中的所有控件。

BorderStyle 控件的边框样式（如果有的话）。可能的值包括 NotSet 、 None 、 Dotted 、 Dashed 、 Solid 、 Double 、 Groove 、 Ridge 、Inset 、 Outset

CssClass 分配给控件的级联样式表 (CSS) 类Style 作为控件的外部标记上的 CSS 样式属性呈现的文本属性集合

注意：任何使用样式属性（例如 BackColor ）设置的样式值都将自动重写此集合中的对应值，使用此属性设置的值不会自动反映在强类型样式属性中。某些控件支持允许将样式属性应用于控件的各个元素的样式对象。这些属性将重写使用 Style 属性进行的任何设置

Enabled 当此属性设置为 true （默认值）时使控件起作用。当此属性设置为 false 时禁用控件注意： 禁用控件将使该控件变灰并使之处于非活动状态，但不会隐藏控件。

EnableTheming

当此属性设置为 true （默认值）时对控件启用主题，为 false 时对该控件禁用主题

三、三、 Web Web 服务器控件的属性服务器控件的属性属性名 说 明

EnableViewState

当此属性设置为 true （默认值）时对控件启用视图状态持久性，为 false 时对该控件禁用视图状态持久性

Font 为正在声明的 Web 服务器控件提供字体信息。此属性包含子属性，您可以在 Web 服务器控件元素的开始标记中使用属性 -子属性语法来声明这些子属性。例如，可以通过在 Web 服务器控件文本的开始标记中包含 Font-Bold 属性而使该文本以粗体显示

ForeColor 控件的前景色注意：此属性可能不适用于 Internet Explorer 4.0之前的浏览器中的所有控件。

Height 控件的高度注意：此属性可能不适用于 Internet Explorer 4.0之前的浏览器中的所有控件。

SkinID 要应用于控件的外观

TabIndex 控件的位置 ( 按 Tab 键顺序 ) ，如果未设置此属性，则控件的索引为 0 。具有相同选项卡索引的控件可以按照它们在网页中的声明顺序用 Tab 键导航

注意：此属性只适用于 Internet Explorer 4.0 及更高版本。ToolTip 当用户将鼠标指针定位在控件上方时显示的文本

注意： ToolTip 属性并不适用于所有浏览器，请检查浏览器的兼容性。

Width 控件的固定宽度。可能的单位包括：Pixel 、 Point 、 Pica 、 Inch 、 Mm 、 Cm 、 Percentage 、 Em 、 Ex

注意：默认单位是像素，并非所有浏览器都支持每种单位类型。

四、四、 Web Web 服务器控件的事件模型服务器控件的事件模型ASP.NET Web 控件事件模型

♫ 在客户端捕获事件♫ 通过 HTTP POST 将事件消息传输到服务器♫ASP.NET 页面解释该 POST 以确定所发生的事

件，然后再调用相应方法 服务器控件和页的事件

♫多数服务器控件要求到服务器的往返行程才能处理，这可能影响页的性能；还会触发页生命周期事件

事件参数♫ 表示触发事件的对象（ Object ）以及包含任何

事件特定信息的事件对象（ *EventArgs ）。

四、四、 Web Web 服务器控件的事件模型服务器控件的事件模型服务器控件中的回发和非回发事件

♫ 在服务器控件中，某些事件（通常为 Click ）事件会导致页被立即回发。在设计时应充分考虑到事件是否应该回发页面（ AutoPostBack 属性）。

将关联事件到方法♫关联控件事件

对于在页上声明的控件，可以通过在控件的标记中设置属性将事件关联到方法。

♫ 动态关联控件事件 如果要通过代码动态创建控件，则不能使用上述方法

来关联事件，因为编译器在编译时没有对控件的引用。在这种情况下，必须使用显示的事件关联。在 C# 中，可以创建委托并将它与控件的事件关联。

<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />

protected void Page_Load(object sender, EventArgs e) { Button Button2 = new Button(); Button2.Text = " 动态创建控件 "; Button2.Click+=new EventHandler(Button2_Click); this.form1.Controls.Add(Button2); } protected void Button2_Click(object sender, EventArgs e) { Response.Write("你单击了动态创建的控件。 "); }

1 、在控件的标记中设置属性将事件关联到方法

2 、动态关联控件事件

§3.3 §3.3 使用使用 Web Web 服务器控件服务器控件一、如何添加控件到 Web Form二、设置控件的属性三、设置控件的 Tab 键顺序、焦点和访问

键 四、控件和 CSS样式五、使用客户端脚本六、添加服务器端事件七、动态创建控件八、使用常规控件来创建用户注册页面九、使用其他控件

一、如何添加控件到一、如何添加控件到 Web FormWeb Form

1 、控件的语法结构2 、添加控件到 Web Form

♫演示和练习：向 Web Form 添加 Web 服务器控件

11 、控件的语法结构、控件的语法结构Web 服务器控件位于 .aspx 文件的窗体元

素（ <form id="form1”runat="server"></form> ）内

必须具有以下声明：♫ 使用引用 asp 命名空间的 XML 标记声明 ,

如 <asp:Button♫ 控件必须有 runat="server" 属性♫ 必须设置控件的 ID 属性♫ 控件声明必须正确结束

<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />

22 、添加控件到、添加控件到 Web FormWeb Form （（ 8080 ））从工具箱中添加控件以代码方式添加控件

演示和练习：向演示和练习：向 Web FormWeb Form 添加添加WebWeb 服务器控件服务器控件

二、设置控件的属性二、设置控件的属性1 、以声明的方式设置控件属性2 、以编程的方式设置控件属性

♫演示和练习：设置服务器控件属性

11 、以声明的方式设置控件属性、以声明的方式设置控件属性在 VS 2005 的 IDE里面，可以通过在属性窗口中很方便地设置控件的属性

22 、以编程的方式设置控件属性、以编程的方式设置控件属性通过代码设置控件属性

protected void Page_Load(object sender, EventArgs e){ if (!IsPostBack){ DropDown1.Items.Add(" 中专 "); DropDown1.Items.Add("大专 "); DropDown1.Items.Add(" 本科 "); DropDown1.Items.Add(" 高中 "); }}

演示和练习：演示和练习：设置服务器控件属性设置服务器控件属性

三、设置控件的 三、设置控件的 Tab Tab 键顺序、焦键顺序、焦点和访问键（点和访问键（ 8383 ））

1 、什么是 Tab 键顺序、焦点和访问键 2 、如何设置 Tab键顺序、焦点和访问键 演示和练习：设置页面中控件的 Tab 键顺序、焦点和访问键

11 、什么是、什么是 TabTab 键顺序、焦点和访键顺序、焦点和访问键问键

可以指定用户通过按 Tab 键显示 ASP.NET Web 服务器控件的顺序

通过 Tab 键既可按设置顺序在控件中移动焦点，又可以指定最初打开页时页上的哪个控件具有焦点，让页面一打开就可以将焦点定位到某一控件

还可以设置控件的访问键（也称热键），通过“ Alt+ 访问键”即可将光标定位到该控件

22 、如何设置、如何设置 TabTab 键顺序、焦点和键顺序、焦点和访问键访问键

Tab 键顺序♫ 设置控件的 TabIndex 属性

焦点♫调用该控件的 Focus 方法♫调用页的 SetFocus 方法 ♫ 在窗体或面板中设置默认焦点♫ 示例见下页

protected void Page_Load(object sender, EventArgs e) { TextBox1.Focus();//调用该控件的 Focus 方法 }

protected void Page_Load(object sender, EventArgs e) { this.SetFocus("TextBox1");//调用页的 SetFocus 方法 }

22 、如何设置、如何设置 TabTab 键顺序、焦点和键顺序、焦点和访问键访问键

访问键♫ 为特定 ASP.NET Web服务器控件设置访问键

将控件的 AccessKey 属性设置为要和 Alt 键一起用作快捷键的字母或数字即可。

♫ 使用 Label控件设置访问键 如果要通过按 Alt+N切换输入焦点到图中文本框中，

只需对 Label 控件的 AccessKey 、 AssociatedControlID 和Text 属性进行设置即可

演示和练习：设置页面中控件的演示和练习：设置页面中控件的TabTab 键顺序、焦点和访问键键顺序、焦点和访问键

四、控件和四、控件和 CSSCSS 样式样式1 、直接在 .aspx 文件中设置样式属性2 、通过编程设置样式属性

11 、直接在 、直接在 .aspx .aspx 文件中设置样式文件中设置样式属性属性

使用样式对象名与属性之间的连字符约定来声明样式属性

声明显式元素，并在这些元素中声明相应数据类型的属性元素

<asp:Calendar Id="MyCalendar" SelectionMode="DayWeek" runat="server" TitleStyle-Backcolor="#3366ff" TitleStyle-ForeColor="White" />

<asp:Calendar id="Calendar1" SelectionMode="DayWeek" runat="server"> < TitleStyle BackColor="#3366ff" ForeColor="white" /></asp:Calendar>

22 、通过编程设置样式属性、通过编程设置样式属性

protected void Page_Load(object sender, EventArgs e){ Calendar1.DayStyle.BackColor = System.Drawing.Color.Green;}

protected void Page_Load(object sender, EventArgs e){ Style s = new Style(); s.BackColor = System.Drawing.Color.Red; Calendar1.SelectedDayStyle.CopyFrom(s); DataGrid1.HeaderStyle.MergeWith(s);}

五、使用客户端脚本五、使用客户端脚本1 、服务器控件和客户端脚本2 、向 ASP.NET 服务器控件添加客户端脚

本3 、从客户端脚本引用 Web 服务器控件4 、在客户端脚本和服务器代码间共享信息5 、以动态方式向页面添加客户端脚本

♫演示和练习：触发服务器控件的客户端单击事件

11 、服务器控件和客户端脚本、服务器控件和客户端脚本一些 ASP.NET 服务器控件要依赖于客户

端脚本来正常工作，在呈现页面时， ASP.NET Web 服务器控件所需的客户端脚本会自动添加到相应页面中

22 、向、向 ASP.NET ASP.NET 服务器控件添加客服务器控件添加客户端脚本户端脚本

以声明方式添加客户端事件处理程序

在服务器代码中添加属性

<asp:textbox id="TextBox1" runat="server" text="Sample Text" onkeyup="spanCounter.innerText=this.value.length;" />

<script runat="server"> private void Page_Load() { Button1.Attributes.Add ("onclick", "alert('Hello World !')"); Button1.Style.Add ("background-color", "red"); Button1.Attributes ["bgcolor"] = "lightblue"; }</script>

33 、从客户端脚本引用、从客户端脚本引用 WebWeb 服务器服务器控件控件

在浏览器中呈现 ASP.NET 服务器控件时，该控件的 ID 属性 (Property) 作为结果元素的 ID 属性和 name 属性呈现于页面上

在客户端脚本中使用这些属性来引用服务器控件

<input name="TextBox1" type="text" value="Sample Text" id="TextBox1" />

document.forms[0].TextBox1.value = "New value";

44 、在客户端脚本和服务器代码间、在客户端脚本和服务器代码间共享信息（共享信息（ 092092 ））

让客户端脚本和服务器代码间接进行交互♫ 向页面添加 HiddenField 控件

55 、以动态方式向页面添加客户端、以动态方式向页面添加客户端脚本脚本

通过 ClientScriptManager 类的方法可以将客户端脚本或客户端脚本 include 语句插入到页面中♫RegisterClientScriptBlock♫RegisterClientScriptInclude♫RegisterStartupScript♫RegisterOnSubmitStatement

演示和练习：引发服务器控件的演示和练习：引发服务器控件的客户端单击事件客户端单击事件

六、添加服务器端事件六、添加服务器端事件以声明方式添加事件处理

♫打开页面并切换到设计视图♫选择 Server 控件，单击右键并选择属性，将属

性窗口切换到事件页♫ 双击某个事件即可添加事件处理方法的框架， IDE 将自动切换到页面的代码隐藏页

♫ 编写执行代码以编程方式动态添加事件处理

♫ 声明事件方法♫ 将该方法和控件的事件关联

七、动态创建控件七、动态创建控件通过编程方式将控件添加到 Web 网页

♫ 创建控件并设置其属性♫ 通过控件容器的属性 Controls的 Add 方法将

控件添加到页面 动态 Web 服务器控件和视图状态

♫ 在现有控件之间动态插入控件♫ 动态插入控件，并在随后的往返期间使用不同的

值重新插入

八、使用常规控件来构建用户注八、使用常规控件来构建用户注册页面册页面

九、使用其它控件九、使用其它控件 AdRotator 控件

♫ 可从有一条或多条广告记录的数据源读取广告信息

Wizard 控件♫ 可以使用分离的步骤来收集用户输入数据，允

许用户在各步骤之间自主导航，从而获得更完美的用户体验

§3.4 §3.4 页面提交处理流程页面提交处理流程一、回发处理流程二、跨页提交处理流程

♫ 从源页获取信息♫检查目标页中的回发

♫演示和练习：实现跨页提交

一、回发处理流程一、回发处理流程

二、二、 11 、从源页获取信息、从源页获取信息获取源页的控件的值从源页获取公共属性值

二、二、 22 、检查目标页中的回发、检查目标页中的回发在跨页回发过程中，源页控件的内容被发送至目标页，并且浏览器执行 HTTP POST 操作（不是 GET 操作）

通过对 PreviousPage 属性返回的页引用的 IsCrossPagePostBack 属性进行测试，可以确定目标页是否由于跨页发送而正在运行

演示和练习：实现跨页提交演示和练习：实现跨页提交

回顾回顾HTML 控件Web 服务器控件使用 Web 服务器控件页面提交处理流程

实验实验

参照实验手册，并在教师指导下完成实验报告。

习题习题

详见本书第 3章后习题部分，请学生独立完成。