使用 Visual Studio 2013 创建 Basic ASP.NET 4.5 Web Forms 页面

作者 ：Erik Reitan

对于新的 Web 应用程序开发，建议使用 Razor Pages。 有关详细信息，请参阅 Razor Pages 入门。

本演练介绍了 Microsoft Visual Studio 2013 和 Microsoft Visual Studio Express 2013 for Web 中的 Web 开发环境。 本演练将指导你创建一个简单的 ASP.NET Web Forms页，并说明创建新页面、添加控件和编写代码的基本技术。

本演练涉及以下任务：

• 创建Web Forms应用程序项目的文件系统。
• 熟悉 Visual Studio。
• 创建 ASP.NET 页。
• 添加控件。
• 添加事件处理程序。
• 从 Visual Studio 运行和测试页面。

先决条件

若要完成本演练，你将需要：

• Microsoft Visual Studio 2013 或 Microsoft Visual Studio Express 2013 for Web。 将自动安装.NET Framework。

  注意

  在本教程系列中，Microsoft Visual Studio 2013 和 Microsoft Visual Studio Express 2013 for Web 通常称为 Visual Studio。

  如果使用的是 Visual Studio，本演练假定你在首次启动 Visual Studio 时选择了 设置的 Web 开发 集合。 有关详细信息，请参阅 如何：选择 Web 开发环境设置。

创建 Web 应用程序项目和页面

在本演练的这一部分中，你将创建一个 Web 应用程序项目，并向其添加新页面。 还将添加 HTML 文本并在浏览器中运行页面。

创建 Web 应用程序项目

1. 打开 Microsoft Visual Studio。

2. 在“文件”菜单中，选择“新建项目”。
   

   此时将出现“新建项目” 对话框。

3. 选择左侧的 “模板 ->Visual C# ->Web 模板”组。

4. 在中心列中选择 ASP.NET Web 应用程序 模板。

5. 将项目命名为 BasicWebApp ，然后单击“ 确定” 按钮。
   

6. 接下来，选择Web Forms模板，然后单击“确定”按钮创建项目。
   

   Visual Studio 创建一个新项目，其中包含基于 Web Forms 模板的预生成功能。 它不仅提供 Home.aspx 页面、 About.aspx 页面、 Contact.aspx 页面，还包含注册用户并保存其凭据以便用户登录网站的成员身份功能。 创建新页面时，默认情况下，Visual Studio 会在 “源 ”视图中显示页面，你可以在其中查看页面的 HTML 元素。 下图显示了如果创建了名为 BasicWebApp.aspx 的新网页，将在“源”视图中看到的内容。
   

Visual Studio Web 开发环境教程

在继续修改页面之前，熟悉 Visual Studio 开发环境非常有用。 下图显示了 Visual Studio 和 Visual Studio Express for Web 中可用的窗口和工具。

注意

此图显示了默认窗口和窗口位置。 “ 视图 ”菜单允许显示其他窗口，以及根据自己的偏好重新排列和调整窗口大小。 如果已对窗口排列进行了更改，则你看到的内容与图示不匹配。

Visual Studio 环境

熟悉 Web 设计器

检查上面的插图，并将文本与以下列表相匹配，其中描述了最常用的窗口和工具。 (此处未列出你看到的所有窗口和工具，仅列出上图中标记的窗口和工具。)

• 工具栏。 提供用于设置文本格式、查找文本等的命令。 某些工具栏仅在你在 “设计” 视图中工作时可用。
• 解决方案资源管理器窗口。 显示 Web 应用程序中的文件和文件夹。
• 文档窗口。 显示在选项卡式窗口中处理的文档。 可以通过单击选项卡在文档之间切换。
• “属性” 窗口。 允许更改页面、HTML 元素、控件和其他对象的设置。
• 视图选项卡。 提供同一文档的不同视图。 设计 视图是一个接近所求所得的编辑图面。 源 视图是页面的 HTML 编辑器。 拆分 视图同时显示文档的 “设计 ”视图和 “源 ”视图。 在本演练的后面部分，你将使用“设计”和“源”视图。 如果希望在“设计”视图中打开网页，请在“工具”菜单上单击“选项”，选择“HTML Designer”节点，然后更改“起始页位于”选项。
• ToolBox。 提供可拖到页面上的控件和 HTML 元素。 工具箱 元素按通用函数分组。
• S erver Explorer。 显示数据库连接。 如果服务器资源管理器不可见，请在“视图”菜单上单击“服务器资源管理器”。

创建新的 ASP.NET Web Forms页

使用 ASP.NET Web 应用程序项目模板创建新的Web Forms应用程序时，Visual Studio 将添加一个名为 Default.aspx 的 (Web Forms页) 一个 ASP.NET 页，以及几个其他文件和文件夹。 可以使用 Default.aspx 页作为 Web 应用程序的主页。 但是，在本演练中，你将创建并使用新页面。

向 Web 应用程序添加页面

1. 关闭 Default.aspx 页。 为此，请单击显示文件名的选项卡，然后单击关闭选项。
2. 在 解决方案资源管理器中，右键单击 Web 应用程序名称 (在本教程中，应用程序名称为 BasicWebSite) ，然后单击“添加 ->新建项”。
   随即出现“添加新项”对话框。
3. 选择左侧的 “Visual C# ->Web 模板”组。 然后，从中间列表中选择“ Web 窗体 ”并将其命名为 FirstWebPage.aspx。
   
4. 单击“ 添加 ”将网页添加到项目。
   Visual Studio 将创建新页面并将其打开。

向页面添加 HTML

在本演练的这一部分中，将向页面添加一些静态文本。

向页面添加文本

1. 在文档窗口底部，单击“ 设计 ”选项卡切换到 “设计 ”视图。

   设计视图以类似 WYSIWYG 的方式显示当前页。 此时，页面上没有任何文本或控件，因此页面为空白，但虚线显示矩形。 此矩形表示页面上的 div 元素。

2. 在虚线轮廓的矩形内单击。

3. 键入 “欢迎使用 Visual Web 开发人员” ，然后按 Enter 两次。

   下图显示了在 “设计” 视图中键入的文本。

   

4. 切换到 “源” 视图。

   可以在“ 源 ”视图中查看在“ 设计 ”视图中键入时创建的 HTML。
   

运行页面

在继续向页面添加控件之前，可以先运行它。

运行页面

1. 在“解决方案资源管理器”中，右键单击“FirstWebPage.aspx”，然后选择“设为起始页”。

2. 按 Ctrl+F5 运行页面。

   页面显示在浏览器中。 尽管创建的页的文件扩展名为 .aspx，但它目前运行方式与任何 HTML 页面类似。

   若要在浏览器中显示页面，还可以在解决方案资源管理器中右键单击该页面，然后选择“在浏览器中查看”。

3. 关闭浏览器以停止 Web 应用程序。

添加和编程控件

现在，将向页面添加服务器控件。 服务器控件（如按钮、标签、文本框和其他熟悉的控件）为Web Forms页提供典型的表单处理功能。 但是，可以使用在服务器（而不是客户端）上运行的代码对控件进行编程。

你将向页面添加一个 Button 控件、一个 TextBox 控件和一个 Label 控件，并编写代码来处理 Button 控件的 Click 事件。

向页面添加控件

1. 单击“ 设计 ”选项卡切换到 “设计 ”视图。

2. 将插入点放在 “欢迎使用 Visual Web 开发人员 ”文本的末尾，然后按 Enter 五次或多次，以在 div 元素框中留出一些空间。

3. 在 “工具箱”中，展开“ 标准 ”组（如果尚未展开）。
   请注意，可能需要展开左侧的 “工具箱” 窗口才能查看它。

4. 将 TextBox 控件拖到页面上，并将其拖放到第一行中包含“欢迎使用 Visual Web 开发人员”的 div 元素框中间。

5. 将 Button 控件拖到页面上，然后将其拖放到 TextBox 控件的右侧。

6. 将 Label 控件拖到绘图页上，并将其拖放到 Button 控件下方的单独一行上。

7. 将插入点置于 TextBox 控件上方，然后键入 “输入姓名： ”。

   此静态 HTML 文本是 TextBox 控件的描述文字。 可以在同一页上混合使用静态 HTML 和服务器控件。 下图显示了三个控件在 “设计” 视图中的显示方式。

   

设置控件属性

Visual Studio 提供了在页面上设置控件属性的各种方法。 在本演练的这一部分中，你将在 “设计 ”视图和 “源” 视图中设置属性。

设置控件属性

1. 首先，通过从“视图”菜单 -“其他窗口>”->“属性”窗口中进行选择来显示“属性”窗口。 也可以选择 F4 以显示 “属性” 窗口。

2. 选择 “按钮” 控件，然后在 “属性” 窗口中，将 “文本” 的值设置为 “显示名称”。 输入的文本显示在设计器中的按钮上，如下图所示。

   

3. 切换到 “源” 视图。

   源 视图显示页面的 HTML，包括 Visual Studio 为服务器控件创建的元素。 控件使用类似于 HTML 的语法进行声明，但标记使用前缀 asp： 并包含属性 runat=“server”。

   控件属性声明为属性。 例如，在步骤 1 中设置 Button 控件的 Text 属性时，实际上是在控件的标记中设置 Text 属性。

   注意

   所有控件都位于窗体元素内，该元素还具有属性 runat=“server”。 runat=“server” 属性和控件标记的 asp： 前缀标记控件，以便在页面运行时由服务器上的 ASP.NET 处理这些控件。 表单 runat=“server”>和脚本 runat=“server”元素之外的<代码将保持不变发送到浏览器，这就是为什么 ASP.NET 代码必须位于其开始标记包含 runat=“server”属性的元素内的原因。><

4. 接下来，将向 Label 控件添加一个附加属性。 将插入点直接放在 asp：Label 标记中的 <asp：Label> 后面，然后按 空格键。

   此时会显示一个下拉列表，其中显示了可为 Label 控件设置的可用属性列表。 此功能（称为 IntelliSense）可帮助你在 源 视图中使用页面上的服务器控件、HTML 元素和其他项的语法。 下图显示了 Label 控件的 IntelliSense 下拉列表。

   

5. 选择“ ForeColor” ，然后键入等号。

   IntelliSense 显示颜色列表。

   注意

   查看代码时，可以通过按 Ctrl+J 随时显示 IntelliSense 下拉列表。

6. 为 Label 控件的文本选择一种颜色。 请确保选择的深色足以在白色背景下阅读。

   使用所选颜色（包括右引号）完成 ForeColor 属性。

对按钮控件进行编程

在本演练中，你将编写代码，读取用户在文本框中输入的名称，然后在 Label 控件中显示该名称。

添加默认按钮事件处理程序

1. 切换到 “设计” 视图。

2. 双击 按钮 控件。

   默认情况下，Visual Studio 将切换到代码隐藏文件，并为 Button 控件的默认事件 Click 事件创建主干事件处理程序。 代码隐藏文件将 UI 标记 (（如 HTML) ）与服务器代码 (（如 C#) ）分开。
   游标定位到为此事件处理程序添加的代码。

   注意

   在 “设计 ”视图中双击控件只是创建事件处理程序的几种方法之一。

3. 在 Button1_Click 事件处理程序中，键入 Label1 ，后跟句点 (.) 。

   在标签 id (Label1) 后键入句点时，Visual Studio 会显示 Label 控件的可用成员列表，如下图所示。 成员通常是属性、方法或事件。

   

4. 完成按钮的 Click 事件处理程序，使其读取，如以下代码示例所示。

   protected void Button1_Click(object sender, System.EventArgs e)
   {    
       Label1.Text = TextBox1.Text + ", welcome to Visual Studio!";
   }
   

   Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
       Label1.Text = Textbox1.Text & ", welcome to Visual Studio!"
   End Sub
   

5. 在解决方案资源管理器中右键单击 FirstWebPage.aspx 并选择“查看标记”，切换回查看 HTML 标记的“源”视图。

6. 滚动到 <asp：Button> 元素。 请注意，<asp：Button> 元素现在具有属性 onclick=“Button1_Click”。

   此属性将按钮的 Click 事件绑定到在上一步中编码的处理程序方法。

   事件处理程序方法可以具有任何名称;你看到的名称是由 Visual Studio 创建的默认名称。 重要的是，HTML 中用于 OnClick 属性的名称必须与代码隐藏中定义的方法的名称匹配。

运行页面

现在可以测试页面上的服务器控件。

运行页面

1. 按 Ctrl+F5 在浏览器中运行页面。 如果发生错误，请重新检查上述步骤。

2. 在文本框中输入一个名称，然后单击“ 显示名称” 按钮。

   输入的名称将显示在 Label 控件中。 请注意，单击按钮时，页面将发布到 Web 服务器。 ASP.NET 然后重新创建页面，运行代码 (在本例中， Button 控件的 Click 事件处理程序) 运行，然后将新页面发送到浏览器。 如果在浏览器中watch状态栏，则可以看到每次单击该按钮时，页面都会往返到 Web 服务器。

3. 在浏览器中，通过右键单击页面并选择“查看源”来查看正在运行的页面 的源。

   在页面源代码中，可以看到没有任何服务器代码的 HTML。 具体而言，在“源”视图中看不到正在使用的 <asp：> 元素。 当页面运行时，ASP.NET 处理服务器控件，并将 HTML 元素呈现到执行表示控件的功能的页面。 例如， <asp：Button> 控件呈现为 HTML <输入 type=“submit”> 元素。

4. 关闭浏览器。

使用其他控件

在本演练的这一部分，你将使用 日历 控件，该控件一次显示一个月的日期。 “日历”控件是一个比你一直使用的按钮、文本框和标签更复杂的控件，它演示了服务器控件的一些进一步功能。

在本部分中，将向页面添加 System.Web.UI.WebControls.Calendar 控件并设置其格式。

添加 Calendar 控件

1. 在 Visual Studio 中，切换到 “设计” 视图。

2. 从“工具箱”的“标准”部分，将日历控件拖到页面上，并将其拖放到包含其他控件的 div 元素下方。

   将显示日历的智能标记面板。 面板显示命令，使你可以轻松地为所选控件执行最常见的任务。 下图显示“设计”视图中呈现的“日历”控件。

   

3. 在智能标记面板中，选择 “自动格式”。

   将显示“ 自动格式 ”对话框，该对话框允许你为日历选择格式设置方案。 下图显示了“日历”控件的“自动格式”对话框。

   

4. 在 “选择方案” 列表中，选择“ 简单 ”，然后单击“ 确定”。

5. 切换到 “源” 视图。

   可以看到 <asp：Calendar> 元素。 此元素比前面创建的简单控件的元素长得多。 它还包括表示各种格式设置的子元素，例如 <WeekEndDayStyle>。 下图显示了“源”视图中的“日历”控件。 (在 源 视图中看到的确切标记可能与图示略有不同。)

   

对日历控件进行编程

在本部分中，你将对 Calendar 控件进行编程，以显示当前所选日期。

对 Calendar 控件进行编程

1. 在 “设计 ”视图中，双击 “日历” 控件。

   将创建一个新的事件处理程序并将其显示在名为 FirstWebPage.aspx.cs 的代码隐藏文件中。

2. 使用以下代码完成 SelectionChanged 事件处理程序。

   protected void Calendar1_SelectionChanged(object sender, System.EventArgs e)
   {    
       Label1.Text = Calendar1.SelectedDate.ToLongDateString();
   }
   

   Protected Sub Calendar1_SelectionChanged(ByVal sender As Object, ByVal e As System.EventArgs)
       Label1.Text = Calendar1.SelectedDate.ToLongDateString()
   End Sub
   

   上述代码将标签控件的文本设置为日历控件的选定日期。

运行页面

现在可以测试日历。

运行页面

1. 按 Ctrl+F5 在浏览器中运行页面。

2. 单击日历中的日期。

   单击的日期将显示在 “标签” 控件中。

3. 在浏览器中，查看页面的源代码。

   请注意， Calendar 控件已作为 表格呈现到页面，每天作为 td 元素。

4. 关闭浏览器。

后续步骤

本演练演示了 Visual Studio 页面设计器的基本功能。 了解如何在 Visual Studio 中创建和编辑Web Forms页面后，可能需要浏览其他功能。 例如，你可能想要执行以下操作：

• 若要详细了解 ASP.NET Web Forms，请遵循使用 ASP.NET 4.5 Web Forms 和 Visual Studio 2013的分步教程系列入门。
• 详细了解 CSS) (级联样式表。 有关详细信息，请参阅 使用 CSS 概述。