65.9K
CodeProject 正在变化。 阅读更多。
Home

ASP .NET Kick Start 第 3 章：创建基本 Web 表单页面

Sams Publishing
starIconstarIcon
emptyStarIcon
starIcon
emptyStarIconemptyStarIcon

2.88/5 (17投票s)

2003年4月27日

37分钟阅读

viewsIcon

138897

在本章中，您将学习如何构建 Web 表单页面。

Sample Image - 0672324768.jpg
作者 Stephen Walther
标题 ASP .NET Kick Start
出版社 Sams
出版日期 2002年12月
ISBN 0672324768
价格 34.99 美元
页数 624

创建基本 Web 表单页面

本章内容

  • Web 表单页面概述

  • 添加服务器控件

  • 处理事件

在本章中，您将学习如何构建 Web 表单页面。与标准静态 HTML 页面不同，Web 表单页面可以包含动态内容。您可以使用 Web 表单页面来验证表单数据、显示和编辑数据库数据等。Web 表单页面是您使用 Visual Studio .NET 构建的任何 Web 应用程序中最重要的部分。

在本章中，您将学习

  • 如何创建简单的 Web 表单页面

  • 如何向 Web 表单页面添加服务器控件

  • 如何处理 Web 表单页面中的事件

Web 表单页面概述

虽然 Web 表单页面可以包含动态内容，但任何 Web 表单页面的基础都是标准 HTML。您可以使用第 2 章“使用 Visual Studio .NET 设计器”中学习到的相同方法来创建 Web 表单页面的所有静态部分。

然而，Web 表单页面可以包含静态 HTML 页面无法包含的两个内容。Web 表单页面可以包含服务器控件和应用程序逻辑。

您可以将服务器控件视为服务器端 HTML 标签。当您向页面添加服务器控件时，该控件将在您的 Web 服务器上执行，并生成发送到 Web 浏览器的内容。

服务器控件相对于普通 HTML 标签的优势在于您可以对服务器控件进行编程。服务器控件具有您可以在代码中操作的属性、方法和事件。

在本章中，您将了解用于构建表单元素的基本服务器控件的概述。例如，您将学习如何向 Web 表单页面添加 Textbox 和 Button 控件。

Web 表单页面还可以包含应用程序逻辑。您可以向 Web 表单页面添加编程代码，该代码在每次请求页面时执行。例如，您可以编写 Visual Basic .NET 代码，从数据库表中检索数据并在服务器控件中显示数据。

在本章中，您将学习如何向 Web 表单页面添加应用程序逻辑，以处理不同的页面事件。例如，您将学习如何根据用户在表单中选择的选项在页面上显示不同的消息。

创建简单的 Web 表单页面

我们将从一个简单的 Web 表单页面开始。我们将创建一个随机显示一句格言的页面。

注意 - 您应该将 Web 表单页面添加到现有的 ASP.NET 项目中。要了解如何创建新项目，请参阅第 1 章“熟悉开发环境”。

首先，我们需要通过以下操作将 Web 表单添加到项目中：

  1. 选择“项目”菜单，然后选择“添加 Web 表单”。

  2. 在“添加新项”对话框中，在“名称”文本框中输入 Web 表单的名称 Fortune.aspx。

  3. 点击“打开”。

现在您已经创建了一个 Web 表单页面，您可以从“Web 表单”工具箱中向页面添加服务器控件。我们将通过以下步骤向页面添加一个 Label 控件：

  1. 如果“工具箱”窗口尚未打开，请选择“视图”菜单，然后选择“工具箱”。

  2. 从“工具箱”中的“Web 表单”选项卡下将 Label 控件拖到设计器界面上。

添加 Label 控件后，您的屏幕应类似于图 3.1


图 3.1
向 Web 表单页面添加 Label 控件。

下一步是向页面添加一些应用程序逻辑。我们希望从一个包含多句格言的 ArrayList 中检索一句随机格言，并在 Label 控件中显示该格言。为此，请执行以下步骤：

  1. 双击设计器界面以切换到代码编辑器。

  2. 为 Page_Load() 方法输入以下代码：

    C#

    private void Page_Load(object sender, System.EventArgs e)
{
 // Put user code to initialize the page here
 ArrayList colFortunes = new ArrayList();
 Random objRan = new Random();

 colFortunes.Add("Good things will happen!");
 colFortunes.Add("Future looks bright!");
 colFortunes.Add("Stay in bed!");

 Label1.Text = colFortunes[ objRan.Next( 3 ) ].ToString();
}

    VB.NET

    Private Sub Page_Load(ByVal sender As System.Object, _
                      ByValue As System.EventArgs) Handles MyBase.Load
 'Put user code to initialize the page here
 Dim colFortunes As New ArrayList()
 Dim objRan As New Random()

 colFortunes.Add("Good things will happen!")
 colFortunes.Add("Future looks bright!")
 colFortunes.Add("Stay in bed!")

 Label1.Text = colFortunes(objRan.Next(3))
End Sub

最后，我们准备好编译并查看我们的 Web 表单页面了。右键单击“解决方案资源管理器”窗口中的 Web 表单，然后选择“生成并浏览”。Web 表单页面将在浏览器中打开，您应该会看到一句格言（参见图 3.2）。每次您单击“刷新”按钮时，都会随机选择并显示一句新格言。

提示 - 如果在构建代码时收到错误，请从“构建”菜单中选择“构建解决方案”。“任务列表”窗口中将弹出代码中的错误列表。您可以双击错误以直接跳转到代码中的错误位置。


图 3.2
显示随机格言的 Web 表单页面。

Web 表单页面的两个部分

创建 Web 表单页面时，通常需要使用三种不同的接口处理页面。在设计 Web 表单页面的视觉元素时，您可以使用设计器中的“设计视图”或“HTML 视图”。在开发 Web 表单页面的应用程序逻辑时，您可以使用“代码编辑器”。

实际上，Web 表单页面由两个文件组成。一个文件，即表示页面，包含 Web 表单的所有用户界面元素，例如 HTML 标签和 Web 服务器控件。该文件必须以 .aspx 扩展名结尾。这是您在 Web 浏览器中打开页面时实际请求的页面。

Web 表单还使用第二个文件，称为代码隐藏文件，其中包含页面所有应用程序逻辑。默认情况下，代码隐藏文件不会出现在“解决方案资源管理器”窗口中。要查看此文件，您必须从“项目”菜单中选择“显示所有文件”。代码隐藏文件的名称与表示页面相同，并附加了 .cs 或 .vb 扩展名。代码隐藏文件以 .cs 或 .vb 扩展名结尾，因为它是一个 C# 或 VB.NET 类文件。

在处理 Web 表单的用户界面元素时，您可以使用设计器窗口中的“设计视图”或“HTML 视图”。要向页面添加应用程序逻辑，您可以使用“代码编辑器”。您可以通过以下任何一种方法在设计器和代码编辑器之间切换：

  • 双击设计器界面以切换到代码编辑器。

  • 从“视图”菜单中选择“代码”以切换到代码编辑器，或从“视图”菜单中选择“设计”以切换到设计器窗口。

  • 使用键盘快捷键 Shift+F7 和 F7。

  • 在设计器窗口中，右键单击页面并选择“查看代码”。

  • 在“解决方案资源管理器”窗口中，右键单击页面并选择“查看代码”或“查看设计器”。

编译和查看 Web 表单页面

由于 Web 表单页面的一部分是 C# 或 Visual Basic .NET 类文件，因此您必须先编译 Web 表单页面，然后才能在 Web 浏览器中查看它。如果您在浏览器中打开页面之前不编译 Web 表单，您将收到图 3.3 中显示的错误。


图 3.3
未编译 Web 表单页面而查看时出现的错误。

您可以通过右键单击“解决方案资源管理器”窗口中的页面并选择“构建并浏览”来编译项目中的所有文件并查看特定 Web 表单页面的输出。页面将被编译并显示在默认的 Visual Studio .NET Web 浏览器中。这将是本书中编译和查看页面的首选方法。

提示 - 如果您更喜欢使用键盘，可以通过按 Ctrl+F8 来构建并浏览当前页面。

理解在项目中无法只构建单个页面是很重要的。当您执行构建时，项目中包含的所有文件都会被编译。这意味着，如果项目中任何页面存在任何错误，您将无法构建任何其他页面。

提示 - 您可以通过右键单击“解决方案资源管理器”中的页面并选择“从项目中排除”来暂时将页面从项目中排除。当页面有错误但您想在修复它之前处理另一个页面时，您需要这样做。您可以通过从“项目”菜单中选择“显示所有文件”，然后右键单击文件名并选择“包含在项目中”来恢复排除的页面。

或者，您可以构建解决方案或项目中的所有文件，而无需在 Web 浏览器中打开页面。您可以从“构建”菜单中选择以下任何一个选项：

  • 构建解决方案——编译当前解决方案中自上次执行 Build 命令以来所有已修改的项目中的所有文件

  • 重新构建解决方案——编译当前解决方案中所有项目中的所有文件，无论自上次执行 Build 命令以来文件是否已修改

  • 构建项目名称——编译特定项目中自上次执行 Build 命令以来所有已修改的文件

  • 重新构建项目名称——编译特定项目中自上次执行 Build 命令以来所有已修改的文件

当您使用这些方法中的任何一种编译项目文件时，会打开一个“输出”窗口，显示编译期间生成的消息。编译结束时，“输出”窗口应显示成功构建的文件数量。

如果在构建项目或解决方案时遇到任何错误，“任务”窗口将打开并显示错误列表。您可以双击“任务列表”中的任何错误，直接转到包含错误的页面。

注意 - 您还可以使用“调试”菜单下的选项编译应用程序中的文件。第 6 章“调试您的 Web 表单页面”详细讨论了调试。

添加服务器控件

与标准 HTML 页面不同，Web 表单页面可以包含 Web 服务器控件。Web 服务器控件表示页面中的用户界面元素。与普通 HTML 标签不同，服务器控件具有您可以在代码中访问的属性、方法和事件。

有两种类型的服务器控件可以添加到 Web 表单页面——HTML 控件或 Web 表单控件。

HTML 控件直接反映现有 HTML 标签。例如，有一个 HTML 控件表示 HTML <form> 标签，一个 HTML 控件表示 HTML <table> 标签，等等。您可以利用 HTML 控件，快速将现有 HTML 文档中的 HTML 元素转换为服务器控件。

Web 控件比 HTML 控件多。Web 控件不直接反映现有 HTML 标签。例如，DataGrid Web 控件使您能够显示和编辑数据库数据，而 Calendar 控件使您能够显示交互式日历。

在以下章节中，您将学习如何将 HTML 控件和 Web 控件添加到 Web 表单页面。

使用 HTML 控件

在设计视图中，您可以将页面中的任何 HTML 元素转换为 HTML 控件。要转换元素，请在设计视图中右键单击该元素，然后选择“作为服务器控件运行”。将 HTML 元素转换为服务器控件后，它将显示一个绿色字形，看起来像 VCR 播放按钮（参见图 3.4）。


图 3.4
将 HTML 文本字段转换为服务器控件。

例如，要将 HTML 文本字段转换为 HTML 控件，请执行以下操作：

  1. 向您的项目添加一个 Web 表单页面并切换到设计视图。

  2. 通过双击工具箱中“HTML”选项卡下的“文本字段”元素，向您的 Web 表单页面添加一个文本字段。

  3. 右键单击设计器界面上的文本字段，然后选择“作为服务器控件运行”。

当您在步骤 2 中将文本字段添加到 Web 表单页面时，以下 HTML 标签被添加到页面中（您可以切换到 HTML 视图查看此标签）：

<INPUT type="text">

将文本字段转换为 HTML 控件后，标签将转换为以下内容：

<INPUT type="text" id=Text1 name=Text1 runat="server">

您应该注意到 HTML 标签中添加了三个新属性：id、name 和 runat。id 属性为控件提供页面中的唯一标识符。name 属性为控件提供表单的名称。最后，也是最重要的是，runat="server" 属性将 HTML 标签标记为服务器控件。

当您将 HTML 标签转换为 HTML 控件时，该标签会自动转换为以下 HTML 控件之一：

  • HtmlAnchor 表示超链接标签

  • HtmlButton 表示按钮标签

  • HtmlForm 表示表单标签

  • HtmlGenericControl 表示未被其他 HTML 控件明确表示的任何 HTML 标签

  • HtmlImage 表示图像标签

  • HtmlInputButton 表示提交或重置按钮

  • HtmlInputCheckbox 表示复选框标签

  • HtmlInputFile 表示文件上传按钮

  • HtmlInputHidden 表示隐藏表单字段

  • HtmlInputImage 表示图像按钮

  • HtmlInputRadioButton 表示单选按钮

  • HtmlInputText 表示文本字段或密码字段

  • HtmlSelect 表示选择标签（下拉列表或列表框）

  • HtmlTable 表示表格标签

  • HtmlTableCell 表示表格单元格标签

  • HtmlTableRow 表示表格行标签

  • HtmlTextArea 表示文本区域

如果您将图像转换为 HTML 控件，图像标签将转换为 HtmlImage 控件。如果您将没有相应控件的标签转换为控件，该标签将转换为 HtmlGenericControl。例如，如果您将 <span> 标签转换为控件，则该控件由 HtmlGenericControl 控件表示。

使用 Web 控件

与 HTML 控件不同，Web 表单控件不直接对应于现有的 HTML 控件。您可以在工具栏的“Web 表单”选项卡下找到所有 Web 表单控件。

Web 表单控件可分为三组。第一组 Web 控件表示基本的表单和页面元素：

  • CheckBox 表示单个复选框

  • CheckBoxList 表示一组多个复选框

  • DropDownList 表示项目下拉列表

  • Hyperlink 表示指向新页面的超链接

  • Image 表示图像

  • ImageButton 表示图像按钮

  • Label 表示标签

  • LinkButton 表示将表单提交到同一页面的超链接

  • Listbox 表示项目列表框

  • Literal 表示页面中的静态文本或 HTML

  • Panel 表示其他控件的容器

  • Placeholder 表示页面上可以添加其他控件的位置

  • RadioButton 表示单个单选按钮

  • RadioButtonList 表示一组多个单选按钮

  • Table 表示 HTML 表格

  • TextBox 表示单行、多行或密码文本框

您将在本章的以下章节中学习如何使用第一组中的许多控件。

还有第二组 Web 控件，使您能够执行表单验证。以下是此组中的控件列表：

  • CompareValidator 使您能够根据固定值或其他表单字段验证表单字段中的数据

  • CustomValidator 使您能够使用自定义子例程验证表单字段中的数据

  • RangeValidator 使您能够根据最小值和最大值验证表单字段中的数据

  • RegularExpressionValidator 使您能够根据正则表达式验证表单字段中的数据

  • RequiredFieldValidator 使您能够通过检查表单字段是否包含值来验证表单字段中的数据

  • ValidationSummary 使您能够在页面上显示验证错误消息的摘要

您将在第 4 章“验证 Web 表单页面”中学习如何使用验证控件验证表单。

还有第三组控件，使您能够格式化、显示和编辑数据：

  • Repeater 使您能够格式化数据源中的项目

  • DataList 使您能够以多列格式化数据源中的项目并创建交互式菜单

  • DataGrid 使您能够格式化、排序、分页和编辑数据源中的项目

您将在本书的第二部分“使用数据库数据”中学习如何利用数据控件。

最后，最后一组控件的成员更难分类。此组中的 Web 控件使您能够执行更专业的任务：

  • AdRotator 可用于随机显示横幅广告

  • Calendar 可用于显示交互式日历

  • CrystalReportViewer 可用于使用 Crystal Reports 显示报表

  • Xml 可用于显示 XML 文档

添加 Label 控件

您可以从“工具箱”中添加两种类型的标签。您可以从“HTML”选项卡添加 HTML 标签，或从“Web 表单”选项卡添加 Label Web 表单控件。重要的是不要混淆这两种类型的标签。

Web 表单 Label 控件与标准 HTML 标签不同，它使您能够动态地为页面区域分配内容。例如，您可以使用 Label 控件显示当前时间，显示数据库表中的记录数，或在验证表单时显示错误。

Label 控件有一个重要的属性——Text 属性。在您的代码中，您可以将任何文本分配给您想要的 Text 属性。例如，在本章前面“创建简单 Web 表单页面”一节中，您使用如下代码行将随机格言分配给 Label 控件：

C#

Label1.Text = colFortunes[ objRan.Next( 3 ) ].ToString();

VB.NET

Label1.Text = colFortunes(objRan.Next(3))

Web 表单 Label 控件有一个可能令人困惑的地方，那就是您不能像为 HTML 标签分配文本那样为它分配文本。如果您想为 HTML 标签分配文本，您可以简单地双击标签并输入文本。另一方面，使用 Web 表单 Label 控件时，您需要显式设置 Text 属性的值。

例如，假设您想向页面添加一个 Label 控件，该控件默认显示文本“Hello World!”。为此，请执行以下步骤：

  1. 双击“Web 表单”选项卡下的 Label 控件，将 Label 控件添加到页面。

  2. 在“属性”窗口的下拉列表中选择该标签。

  3. 在“属性”窗口中找到“Text”属性，并输入值 "Hello World!"。

完成这些步骤后，标签应该显示文本“Hello World!”。

添加按钮控件

您可以向 Web 表单页面添加三种类型的按钮控件：

  • Button 显示普通表单提交按钮

  • ImageButton 显示按钮图像

  • LinkButton 显示按钮的超链接

所有三种类型的按钮都会将表单及其包含的任何信息提交回 Web 服务器。这些按钮仅在外观上有所不同。

例如，假设您要创建一个显示当前时间的页面。但是，您想在页面上添加一个按钮，每次单击该按钮时都可以刷新当前时间。

首先，您需要将必要的控件添加到设计器界面：

  1. 从“项目”菜单中选择“添加 Web 表单”。输入页面名称 RefreshTime.aspx，然后单击“打开”。

  2. 通过将工具栏上“Web 表单”选项卡下的 Label 控件拖到设计器界面上，将 Web 表单 Label 控件添加到页面。

  3. 通过将工具栏上“Web 表单”选项卡下的 Button 控件拖到设计器界面上，将 Button 控件添加到页面。

接下来，您需要向代码编辑器添加代码，该代码在您单击按钮时执行：

  1. 双击设计器界面上的 Button 控件。双击按钮将使您切换到代码编辑器，并且光标应自动出现在名为 Button1_Click() 的方法中。

  2. 在 Button1_Click() 方法中，输入以下代码行：

    C#

    Label1.Text = DateTime.Now.ToString();

    VB.NET

    Label1.Text = DateTime.Now

  3. 右键单击“解决方案资源管理器”窗口中的 Web 表单页面，然后选择“生成并浏览”。

完成这些步骤后，将显示一个类似于图中的页面
图 3.5 应该显示。


图 3.5
向 Web 表单页面添加 Button 控件。

添加 TextBox 控件

TextBox Web 控件表示一个 HTML 文本字段。然而，与标准 HTML 文本字段不同，TextBox 控件具有您可以在代码中操作的属性、方法和事件。

文本框最重要的属性是 Text 属性。您可以使用 Text 属性在代码中为文本框分配默认值。您还可以使用 Text 属性读取用户在文本框中输入的值。

例如，假设您要创建一个包含 Label、TextBox 和 Button 控件的 Web 表单页面。当有人在文本框中输入文本并单击按钮时，文本将从 TextBox 控件复制到 Label 控件。

执行以下步骤以添加必要的控件：

  1. 通过从“项目”菜单中选择“添加 Web 表单”，创建一个名为 CopyField.aspx 的新 Web 表单页面。

  2. 通过双击工具栏上“Web 表单”选项卡下的 Label 控件，将 Label 控件添加到页面。

  3. 通过双击工具栏上“Web 表单”选项卡下的 TextBox 控件，将 TextBox 控件添加到页面。

  4. 通过双击工具栏上“Web 表单”选项卡下的 Button 控件，将 Button 控件添加到页面。

接下来，您需要添加在单击 Button 控件时执行的代码：

  1. 双击设计器界面上的 Button 控件。双击按钮将使您切换到代码编辑器，并且光标应自动出现在名为 Button1_Click() 的方法中。

  2. 在 Button1_Click() 方法中，输入以下代码行：

    C#

    Label1.Text = TextBox1.Text;

    VB.NET

    Label1.Text = TextBox1.Text

  3. 右键单击“解决方案资源管理器”窗口中的 Web 表单页面，然后选择“生成并浏览”。

如果您在 TextBox 控件中输入文本并单击按钮，文本应复制到 Label 控件（参见
图 3.6）。


图 3.6
将 TextBox 控件的值复制到 Label 控件。

TextBox 控件可以表示单行、多行或密码字段。要使用 TextBox 控件显示不同类型的字段，您需要为 TextBox 控件的 TextMode 属性分配不同的值。（您可以在“属性”窗口中修改 TextMode 属性。）

默认情况下，TextMode 属性的值为 SingleLine，并显示单行文本字段。您可以通过为控件的 Columns 属性分配值来指定单行文本框的宽度。您可以使用 MaxLength 属性指定单行文本框的最大长度。（最大长度以字符为单位指定。）

如果您将 Password 值分配给 TextMode 属性，则文本框会显示密码字段。密码文本框的工作方式与单行文本框完全相同，只是输入到文本框中的任何字符都会被隐藏（字符会用星号回显）。

最后，如果您将值 MultiLine 分配给 TextMode 属性，则文本框将呈现一个文本区域。创建多行文本框时，您可以同时为 Columns 和 Rows 属性分配值。但是，分配给 MaxLength 属性的任何值都将被忽略。

在使用多行文本框时，您还可以为 Wrap 属性分配一个值。当 Wrap 的值为 True 时，文本会自动在文本框内自动换行。当 Wrap 为 False 时，文本会继续向右滚动，直到您输入回车符。

添加列表控件

您可以使用以下任何控件来显示项目列表：

  • ListBox

  • DropDownList

  • RadioButtonList

  • CheckBoxList

所有列表控件都具有共同的属性，因为它们都派生自基类 ListControl。其中最重要的属性之一是 Items 属性。Items 属性表示控件显示的单个列表项。

例如，假设您想在 ListBox 控件中显示产品列表。执行以下步骤：

  1. 双击工具箱“Web 表单”选项卡中的 ListBox 控件。

  2. 在“属性”窗口中，单击 Items 属性旁边出现的省略号。

  3. 单击 ListItem 集合编辑器中的“添加”按钮（参见图 3.7）。

  4. 在 ListItem 集合编辑器的 ListItem 属性窗格中，为 Text 属性的值输入 Shaving Cream。

  5. 点击“添加”按钮。

  6. 在 ListItem 集合编辑器的 ListItem 属性窗格中，为 Text 属性的值输入 Shampoo。

  7. 点击“确定”。

  8. 右键单击“解决方案资源管理器”窗口中的 Web 表单页面，然后选择“生成并浏览”。


图 3.7
ListItem 集合编辑器。

完成这些步骤后，列表框将显示两种产品：Shaving Cream 和 Shampoo。

所有列表控件都有一个名为 SelectedItem 的属性，它表示列表控件中当前选定的列表项。您可以使用 SelectedItem.Text 返回列表项的 Text 属性，使用 SelectedItem.Value 返回列表项的 Value 属性。Text 属性表示列表控件显示的文本，而 Value 属性表示与列表项关联的隐藏值。

假设您创建了一个显示产品列表的列表框后，想要在 Label 控件中显示列表框中选定的项目。

执行以下步骤以添加必要的控件：

  1. 通过从“项目”菜单中选择“添加 Web 表单”，创建一个名为 ShowList.aspx 的新 Web 表单页面。

  2. 将工具箱中“Web 表单”选项卡下的 ListBox 控件拖到设计器界面上。

  3. 通过在“属性”窗口中选择 ListBox 并单击 Items 属性旁边的省略号，向 ListBox 添加几个列表项。

  4. 将工具箱中“Web 表单”选项卡下的 Label 控件拖到设计器界面上，以向页面添加一个 Label 控件。

  5. 将工具箱中“Web 表单”选项卡下的 Button 控件拖到设计器界面上，以向页面添加一个 Button 控件。

接下来，添加显示选定列表项的代码：

  1. 双击设计器界面上的 Button 控件。这将使您切换到代码编辑器，并且光标应出现在 Button1_Click() 方法中。

  2. 在 Button1_Click() 方法中输入以下代码行：

    C#

    Label1.Text = ListBox1.SelectedItem.Text;

    VB.NET

    Label1.Text = ListBox1.SelectedItem.Text

  3. 右键单击“解决方案资源管理器”窗口中的 Web 表单页面，然后选择“生成并浏览”。

如果您在列表框中选择一个项目并单击按钮，选定项目的文本将出现在 Label 控件中（参见图 3.8）。


图 3.8
显示 ListBox 控件中的 SelectedItem。

使用 AutoPostBack 属性

一些表示表单元素的 Web 控件，例如列表控件和 TextBox 控件，具有一个名为 AutoPostBack 的特殊属性。当 AutoPostBack 的值为 True 时，对控件的任何更改都会导致包含该控件的表单自动回传到服务器。

注意 - AutoPostBack 属性使用客户端 JavaScript。较旧的浏览器不支持 JavaScript，并且 AutoPostBack 属性在这些浏览器中将无法正常工作。

例如，Web 应用程序中常见的一种用户界面元素是作为导航菜单使用的下拉列表。当您在下拉列表中选择一个选项时，您会自动跳转到新页面，甚至无需单击按钮。更改选定项目就足以导致页面自动回传到服务器。

您可以通过执行以下步骤创建一个自动回传到服务器的 DropDownList 控件。

首先，您需要添加必要的 Web 表单控件：

  1. 通过从“项目”菜单中选择“添加 Web 表单”，创建一个名为 AutoPostForm.aspx 的新 Web 表单页面。

  2. 将工具箱中“Web 表单”选项卡下的 DropDownList 控件拖到设计器界面上，以向页面添加一个 DropDownList 控件。

  3. 在“属性”窗口中，选择 DropDownList 控件并将值 True 分配给 AutoPostBack 属性。

  4. 在“属性”窗口中，通过单击 Items 属性旁边的省略号，打开“ListItem 集合编辑器”对话框。

  5. 添加一个列表项，文本为 Home，值为 home.aspx。

  6. 添加一个列表项，文本为 Products，值为 products.aspx。

  7. 单击“确定”关闭“ListItem 集合编辑器”对话框。

接下来，您需要添加在 DropDownList 控件中选择新项目时执行的代码：

  1. 双击设计器界面上的 DropDownList 控件。这将使您切换到代码编辑器并添加一个名为 DropDownList1_SelectedIndexChanged() 的新方法。

  2. 在 DropDownList1_SelectedIndexChanged() 方法中键入以下代码行：

    C#

    Response.Redirect(DropDownList1.SelectedItem.Value);

    VB.NET

    Response.Redirect(DropDownList1.SelectedItem.Value)

  3. 在“解决方案资源管理器”窗口中，右键单击 Web 表单页面，然后选择“构建并浏览”。

如果您将 DropDownList 控件中的选定项目更改为 Products，Products.aspx 页面将自动加载。（如果 Products.aspx 页面尚未添加到您的项目中，您将收到 404 Not Found 错误。）

使用面板分组控件

您可以使用 Panel 控件将页面上的控件分组在一起。将控件分组到 Panel 控件中的优点是您可以将这些控件作为一个组进行隐藏或显示。

Panel 控件有一个名为 Visible 的属性。当 Visible 属性被分配值 False 时，面板中包含的所有元素都将被隐藏。

例如，假设您想根据用户对前一个表单问题的答案，在 HTML 表单中显示一组问题或另一组问题。您可以将两组独立的问题放置在两个 Panel 控件中。然后，您可以通过修改 Panel 控件的 Visible 属性来选择性地隐藏或显示每个 Panel 控件的内容。

要在单击 Button 控件时隐藏或显示 Panel 控件的内容，请执行以下操作：

首先，您需要将必要的控件添加到页面：

  1. 通过从“项目”菜单中选择“添加 Web 表单”，创建一个名为 ShowPanel.aspx 的新 Web 表单页面。

  2. 通过将工具箱中“Web 表单”选项卡下的 Panel 控件拖到设计器界面上，将 Panel 控件添加到 Web 表单页面。

  3. 在设计器界面上双击 Panel 控件，并擦除文本“Panel”。

  4. 通过用鼠标拖动控件周围出现的句柄，在设计器界面上拉伸 Panel 控件。

  5. 通过选择工具箱中“HTML”选项卡下的标签元素并将其拖到设计器界面上的 Panel 控件上，向 Panel 控件添加一个 HTML 标签。

  6. 点击设计器界面上的 HTML Label 控件，并输入文本 "Hello World!"。

  7. 通过将工具箱中“Web 表单”选项卡下的 Button 控件拖到设计器界面上，将 Button 控件添加到 Web 表单页面。

接下来，您需要添加隐藏或显示面板内容的代码：

  1. 双击设计器界面上的 Button 控件。这将使您切换到代码编辑器并添加一个名为 Button1_Click() 的新方法。

  2. 在 Button1_Click() 方法中输入以下代码行：

    C#

    Panel1.Visible = !Panel1.Visible;

    VB.NET

    Panel1.Visible = Not Panel1.Visible

  3. 在“解决方案资源管理器”窗口中，右键单击 Web 表单页面，然后选择“构建并浏览”。

当您单击按钮时，文本“Hello World!”应该消失。当您再次单击按钮时，文本应该重新出现（参见图 3.9）。


图 3.9
使用 Panel 控件隐藏和显示控件。

注意 - Panel 控件使用流式布局。因此，您无法精确地定位 Panel 控件中的元素。但是，当您想对面板中元素的布局进行更多控制时，您可以向 Panel 控件添加网格布局面板或表格。

在这种情况下，我们只是将一个 HTML Label 控件添加到了页面上的单个面板中。但是，您可以使用相同的技术向页面添加多个 Panel 控件，这些控件包含多个元素，例如 TextBox 和 DropDownList 控件。

格式化 Web 控件

所有 Web 控件都共享一组通用的格式化属性（所有 Web 控件都派生自基类 WebControl）。您可以使用这些属性来修改控件的字体和颜色等属性。您可以在“属性”窗口中修改每个控件的以下属性：

  • AccessKey 控件的键盘快捷键。例如，如果您输入字母 A，您可以通过按键盘上的 Alt+A 导航到该控件。

  • BackColor 控件后面显示的背景颜色。修改此属性将打开“颜色对话框”，使您能够选择自定义、Web 或系统颜色。

  • BorderColor 控件边框使用的颜色。修改此属性将打开“颜色对话框”，使您能够选择自定义、Web 或系统颜色。

  • BorderStyle 控件的边框样式。可能的值包括 Solid、Dashed 和 Groove。

  • BorderWidth 控件边框的大小。此值可以用像素指定，或者，对于较新的浏览器，您可以指定其他单位。

  • CssClass 与控件关联的级联样式表类。

  • Enabled 控件的状态。当 Enabled 为 False 时，控件在某些浏览器（例如 Microsoft Internet Explorer 4.0 或更高版本）上会显示为灰色。

  • Font 控件使用的字体。您可以选择字体的名称（字体类型）和大小，以及字体是否显示为粗体、斜体、上划线、删除线或下划线。

  • ForeColor 控件使用的前景颜色。修改此属性将打开“颜色对话框”，使您能够选择自定义、Web 或系统颜色。

  • Height 控件的高度，以像素为单位，或者，对于较新的浏览器，您可以指定其他单位。

  • TabIndex 控件在控件组中的 Tab 键顺序。在 Internet Explorer 4.0 或更高版本中使用时，修改表单中控件的 Tab 键顺序。

  • ToolTip 将鼠标悬停在控件上方时显示的弹出文本消息。

  • Width 控件的宽度，以像素为单位，或者，对于较新的浏览器，您可以指定其他单位。

例如，您可以使用这些属性创建一个带有虚线红色边框和粉色背景的 Panel 控件（参见
图 3.10）。


图 3.10
使用格式化属性。

您应该了解，并非所有这些属性都适用于所有控件。例如，修改 ImageButton 控件的 Font 属性既无害也无意义。此外，这些属性中的许多，例如 AccessKey 和 TabIndex 属性，仅适用于 Internet Explorer 4.0 及更高版本（这些属性在其他浏览器上被忽略）。

其中一些属性的值，例如 Width 和 Height 属性，是以单位指定的。这些属性的默认单位是像素。例如，如果您输入 120 作为宽度，此值将被解释为 120 像素。

较新的浏览器支持以下额外的度量单位（Internet Explorer 5.0 及更高版本支持所有这些单位）：

  • cm——厘米。

  • em——相对于父元素大小的大小。例如，2em 是父元素大小的两倍。

  • ex——字体大小相对于父字体小写 x 的大小。例如，大小为 2ex 的字体是父字体中所有小写 x 大小的两倍。

  • in——英寸。

  • mm——毫米。

  • %——百分比。

  • pc——一个派卡表示 12 磅。

  • px——像素（默认值）。

  • pt——磅（1/72 英寸）。

同样，并非所有属性都支持所有单位。此外，并非所有浏览器都支持所有这些单位。

处理事件

正如您在前面章节中看到的那样，Web 表单页面中的控件可以引发事件。例如，当您单击按钮时，Button 控件会引发 Click 事件。或者，当您在 ListBox 控件中选择一个新的列表项时，该控件会引发 SelectedIndexChanged 事件。

Web 表单页面本身可以引发事件。例如，您可以使用页面事件在浏览器每次请求页面时执行某些操作。

在以下章节中，您将学习如何处理控件事件和页面事件。

处理控件事件

如果您希望在控件引发事件时执行某些操作，则需要向代码中添加事件处理程序。事件处理程序是在特定事件引发时执行的方法或子例程。

有两种方法可以向代码中添加事件处理程序。首先，您可以双击设计器界面上的控件。双击控件将自动切换到代码编辑器并为控件的默认事件添加事件处理程序。

如果您需要为控件的默认事件以外的事件添加事件处理程序，您需要执行不同的步骤，具体取决于您使用的是 C# 还是 VB.NET。

要使用 C# 添加事件处理程序，您需要从“属性”窗口的下拉列表中选择控件。接下来，单击“属性”窗口顶部标有事件（闪电图标）的图标。单击事件按钮将显示与控件关联的所有事件列表。您可以双击属性窗口中列出的任何事件，为该事件添加事件处理程序。

在 VB.NET 中添加事件处理程序时，您需要切换到代码编辑器（从“视图”菜单中选择“代码”）。从代码编辑器左上方出现的“类名”下拉列表中选择一个控件。如果您从代码编辑器右上方出现的“方法名”下拉列表中选择一个事件，则相应的事件处理程序将自动添加到您的代码中（参见
图 3.11）。


图 3.11
从代码编辑器在 VB.NET 中添加事件处理程序。

在大多数情况下，默认事件是您想要处理的事件。例如，如果您将一个名为 Button1 的 Button 控件添加到页面并在设计器界面上双击该按钮，则以下事件处理程序将添加到代码编辑器中：

C#

private void Button1_Click(object sender, System.EventArgs e)
{
}

VB.NET

Private Sub Button1_Click(ByVal sender As Object, ByValue As System.EventArgs)
        Handles Button1.Click

End Sub

事件处理程序始终接受两个参数——一个 Object 参数和一个 EventArgs 参数。所有事件处理程序，无论事件的性质如何，都具有相同的两个参数。

Object 参数表示引发事件的控件。您可能希望将多个控件与同一个事件处理子例程关联起来。在这种情况下，您可以使用 Object 参数来识别引发事件的控件。

System.EventArgs 参数包含有关引发事件的附加信息。在简单的 Button 控件情况下，此参数无用，因为没有额外的事件信息可以传递给事件处理子例程。

一个具有更有趣的 EventArgs 参数的控件示例是 ImageButton 控件。ImageButton Click 事件的事件处理程序如下所示：

C#

private void ImageButton1_Click(object sender, 
                                System.Web.UI.ImageClickEventArgs e)
{
}

VB.NET

Private Sub ImageButton1_Click(ByVal sender As System.Object, 
    ByValue As System.Web.UI.ImageClickEventArgs) Handles ImageButton1.Click

End Sub

请注意，传递给此事件处理程序的第二个参数是 System.Web.UI.ImageClickEventArgs 参数。此参数有两个您可以在代码中读取的属性——一个 X 属性，表示用户单击位置的 x 坐标，以及一个 Y 属性，表示用户单击位置的 y 坐标。

例如，您可以使用 Label 控件显示 X 和 Y 属性的值，如下所示：

C#

private void ImageButton1_Click(object sender, 
                                 System.Web.UI.ImageClickEventArgs e)
{
 Label1.Text = "You clicked at the following coordinates:";
 Label1.Text += e.X;
 Label1.Text += " and ";
 Label1.Text += e.Y;

}

VB.NET

Private Sub ImageButton1_Click(ByVal sender As System.Object, _
     ByValue As System.Web.UI.ImageClickEventArgs) Handles ImageButton1.Click
 Label1.Text = "You clicked at the following coordinates:"
 Label1.Text &= e.X
 Label1.Text &= " and "
 Label1.Text &= e.Y
End Sub

如果您将此事件处理程序添加到您的 Web 表单页面并单击 ImageButton 显示的图像，则页面将显示在
图 3.12 显示。


图 3.12
使用 ImageClickEventArgs 参数。

处理页面事件

Web 表单页面本身具有您可以在代码中处理的多个事件。其中最重要的事件是 Page_Load 事件。

当您创建 Web 表单页面时，Visual Studio .NET 会自动为您创建一个 Page_Load 事件处理程序来处理 Page_Load 事件。您可以通过切换到代码编辑器来查看此事件处理程序：

C#

private void Page_Load(object sender, System.EventArgs e)
{
 // Put user code to initialize the page here
}

VB.NET

Private Sub Page_Load(ByVal sender As System.Object, _
                      ByValue As System.EventArgs) Handles MyBase.Load
 'Put user code to initialize the page here
End Sub

每当有人请求 Web 表单页面时，此 Page_Load 子例程就会执行。Page_Load 子例程最常用于初始化 Web 表单页面中包含的变量和控件。

例如，假设您希望在每次请求页面时，在一个 Label 控件中显示距离新千年（3001 年）还有多少天、小时、分钟和秒（参见
图 3.13）。


图 3.13
显示距离千年还有多少天。

首先，您需要创建必要的控件：

  1. 通过选择“项目”、“添加 Web 表单”，创建一个名为 ShowDays.aspx 的新 Web 表单页面。

  2. 通过将工具箱中“Web 表单”选项卡下的 Label 控件拖到设计器界面上，将 Label 控件添加到 Web 表单页面。

接下来，您需要添加显示距离下一个千年还有多少天、小时、分钟和秒的代码：

  1. 双击设计器界面以切换到代码编辑器。

  2. 为 Page_Load 方法输入以下代码：

    C#

    private void Page_Load(object sender, System.EventArgs e)
{
 TimeSpan objSpan = 
  DateTime.Parse( "1/1/3001" ) - DateTime.Now;
 Label1.Text = String.Format(
  "Only {0} days, {1} hours, {2} minutes, {3} seconds left!", 
  objSpan.Days,
  objSpan.Hours,
  objSpan.Minutes,
  objSpan.Seconds);
}

    VB.NET

    Private Sub Page_Load(ByVal sender As System.Object, _
                      ByValue As System.EventArgs) Handles MyBase.Load
 Dim objSpan As TimeSpan

 objSpan = _
  DateTime.op_Subtraction(#1/1/3001#, DateTime.Now)
 Label1.Text = String.Format( _
  "Only {0} days, {1} hours, {2} minutes, {3} seconds left!", _
  objSpan.Days, _
  objSpan.Hours, _
  objSpan.Minutes, _
  objSpan.Seconds)
End Sub

  3. 右键单击“解决方案资源管理器”窗口中的页面，然后选择“构建并浏览”。

创建此 Web 表单页面后，每次刷新页面（单击“刷新”按钮）时，Label 控件中都会显示一个新千年倒计时。倒计时会在 Page_Load 事件处理程序中更新。

IsPostBack 属性

位于 Page_Load 子例程中的代码在每次请求页面时都会执行。通常，这不是您想要的。在许多情况下，您只想在首次请求页面时执行代码。

所有控件，包括 HTML 控件和 Web 控件，在回传到 Web 服务器的同一页面之间都会保留其值。例如，如果您为 Label 控件分配文本并单击 Button 控件以重新加载页面，则 Label 控件在重新显示页面时将保留该文本。

注意 - 控件在回传到同一页面之间保留其值的能力称为视图状态。

Data 控件（例如 Repeater 和 DataGrid 控件）也会在回传到服务器之间保留其值。例如，如果您在 Page_Load 事件处理程序中从数据库中获取数据并将数据分配给 DataGrid 控件，即使您反复单击 Button 控件重新加载页面，DataGrid 控件也会自动保留数据。

由于控件在回传到服务器之间会自动保留其值，因此通常您不需要在每次请求页面时都为控件分配值。通常，您只想在首次请求页面时分配值。

您可以使用 IsPostBack 属性检测页面是否是首次请求。IsPostBack 属性在首次请求页面时值为 False，如果页面已至少提交回服务器一次（例如，通过单击 Button 或 LinkButton 控件），则值为 True。

例如，假设您希望在首次请求页面时显示当前日期和时间，而不是在页面回传到自身时显示。

首先，您需要添加必要的控件：

  1. 通过从“项目”菜单中选择“添加 Web 表单”，创建一个名为 DisplayOnce.aspx 的新 Web 表单页面。

  2. 通过将工具箱中“Web 表单”选项卡下的 Label 控件拖到设计器界面上，将 Label 控件添加到 Web 表单页面。

  3. 通过将工具箱中“Web 表单”选项卡下的 Button 控件拖到设计器界面上，将 Button 控件添加到 Web 表单页面。

  4. 从“视图”菜单中选择“代码”以切换到代码编辑器。

接下来，您需要添加显示当前时间的代码：

  1. 双击设计器界面以切换到代码编辑器。

  2. 为 Page_Load() 方法输入以下代码：

    C#

    private void Page_Load(object sender, System.EventArgs e)
{
 if (!IsPostBack)
  Label1.Text = DateTime.Now.ToString();
}

    VB.NET

    Private Sub Page_Load(ByVal sender As System.Object, _
>                      ByValue As System.EventArgs) Handles MyBase.Load
 If Not IsPostBack Then
  Label1.Text = DateTime.Now
 End If
End Sub

  3. 在“解决方案资源管理器”窗口中，右键单击 Web 表单页面，然后选择“构建并浏览”。

首次打开页面时，将显示当前日期和时间（参见图 3.14）。但是，如果单击 Button 控件，则当前日期和时间不会更新。Page_Load 事件处理程序中使用 IsPostBack 属性来防止页面回传到服务器时 Label 控件被更新。


图 3.14
使用 IsPostBack 属性。

摘要

在本章中，您学习了如何创建基本的 Web 表单页面。首先，您了解了 Web 表单页面的工作原理概述。您学习了如何向项目中添加新的 Web 表单页面并进行编译。

接下来，您了解了 HTML 和 Web 控件的概述。您学习了如何将每种类型的控件添加到您的项目中。

最后，您探讨了 Web 表单页面中事件处理这一重要主题。您学习了如何通过向代码中添加事件处理程序来处理控件事件和页面事件。

 

© Pearson Education 版权所有。保留所有权利。
© . All rights reserved.