演练：在 Visual Web Developer 中通过代码分离创建基本网页

更新：2007 年 11 月

创建 ASP.NET 网页并在其中编写代码时，可以从两种用于管理可见元素（控件、文本）和编程代码的模型中进行选择。在单文件模型中，可见元素和代码保存在同一文件中。在另一种称为“代码分离”的模型中，可见元素在一个文件中，代码在另一个称为“代码隐藏”文件的文件中。本演练介绍使用代码分离的网页。

单文件模型在 演练：在 Visual Web Developer 中创建基本网页 中介绍。本演练演示如何创建具有与单文件演练中的页相同的功能的网页，但重点在于使用代码分离。

选择使用单文件页还是使用代码分离的页主要是一个方便和个人喜好问题。在 Microsoft Visual Web Developer 中使用这两种模型的方式类似；两种模型在编辑器中具有大致相等的支持。页运行时两种模型具有相同的性能。通过使用代码分离的页，可让以下这种工作模式变得更加切实可行：程序员在为页创建代码的同时 Web 设计人员处理页布局，因为他们可以分别编辑这两个页。

本演练涉及以下任务：

• 使用 Visual Web Developer 创建使用代码分离的 ASP.NET 页。

• 添加控件。

• 添加事件处理程序。

• 使用 ASP.NET Development Server 运行页。

先决条件

若要完成本演练，您需要：

• Visual Web Developer 与 .NET Framework。

创建网站和网页

在本部分演练中，将创建一个网站并为其添加新页。还将添加 HTML 文本并在 Web 浏览器中运行该页。

如果已经在 Visual Web Developer 中创建了一个网站（例如，按照演练：在 Visual Web Developer 中创建基本网页中的步骤），则可以使用该网站并跳过本演练后面部分的“创建新页”。否则，按照下面的步骤创建一个新的网站和网页。

创建文件系统网站

1. 打开 Visual Web Developer。

2. 在“文件”菜单上单击“新建网站”。

   出现“新建网站”对话框。

3. 在“Visual Studio 已安装的模板”之下单击“ASP.NET 网站”。

4. 在“位置”框中选择“文件系统”，然后输入要保存网站网页的文件夹的名称。

   例如，键入文件夹名“C:\BasicWebSite”。

5. 在“语言”列表中单击“Visual Basic”或“Visual C#”。

   说明：
   Visual Web Developer 当前不支持用 Visual J# 创建代码隐藏页。

   您选择的编程语言将是网站的默认语言，但您可以为每个页分别设置编程语言。

6. 单击“确定”。

   Visual Web Developer 创建该文件夹和一个名为 Default.aspx 的新页。

创建新页

创建新网站时，Visual Web Developer 会添加一个名为 Default.aspx 的页。默认情况下，Visual Web Developer 创建使用代码分离的页。

向网站添加使用代码分离的页

1. 关闭 Default.aspx 页。若要关闭，请右击带有该文件名的选项卡，然后选择“关闭”。

2. 在解决方案资源管理器中，右击网站（例如，C:\BasicWebSite），并选择“添加新项”。

3. 在“Visual Studio 已安装的模板”之下选择“Web 窗体”。

4. 在“名称”框中键入 WebPageSeparated。

5. 从“语言”列表中选择希望使用的编程语言（Visual Basic 或 C#）。

6. 验证已选择了“将代码放在单独的文件中”复选框。

   默认情况下，该复选框是选中的。

7. 单击“添加”。

   Visual Web Developer 创建两个文件。第一个文件 WebPageSeparated.aspx 将包含页的文本和控件，并在编辑器中打开。另一个文件 WebPageSeparated.aspx.vb 或 WebPageSeparated.aspx.cs（取决于所选择的编程语言）是代码文件。通过单击 WebPageSeparated.aspx 文件旁的加号 (+) 可以在解决方案资源管理器中看到这两个文件；代码文件已创建但没有打开。将在本演练稍后部分编写代码时打开它。

将 HTML 添加到页

在本部分演练中，将向 WebPageSeparated.aspx 页添加一些静态 HTML 文本。

向页中添加文本

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

   “设计”视图以类似“所见即所得”的方式显示所处理的页。此时，页上没有任何文本或控件，因此页是空白的。

2. 将插入指针放置在已位于页面上的 div 元素中。

3. 键入文本“欢迎使用采用代码分离的 Visual Web Developer”。

4. 切换到“源”视图。

   可以看到通过在“设计”视图中键入创建的 HTML。在此阶段，该页看起来类似普通的 HTML 页。唯一的区别在于该页顶部的 <%@ Page %> 指令。

添加控件并对控件进行编程

在本部分演练中，将向该页添加一个按钮、文本框和标签控件，并编写代码处理按钮的 Click 事件。服务器控件（包括按钮、标签、文本框和其他常见控件）为 ASP.NET 网页提供了典型的窗体处理功能。但是，可以使用运行在服务器而不是客户端上的代码对控件编程。

将控件添加到页

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

2. 将插入指针放置在先前添加的文本之后。

3. 按几次 Enter 留出一些空间。

4. 从“工具箱”的“标准”选项卡中，将三个控件拖动到页上：TextBox 控件、Button 控件和 Label 控件。

5. 将插入指针放在文本框前，并键入“输入您的姓名：”。

   此静态 HTML 文本是 TextBox 控件的标题。可以在同一页上混合放置静态 HTML 和服务器控件。

设置控件属性

Visual Web Developer 提供了各种方式来设置页上控件的属性。在本部分演练中，将在“设计”视图和“源”视图中处理属性。

设置控件属性

1. 选择 Button 控件，并在“属性”窗口中将其 Text 属性设置为“显示名称”。

2. 切换到“源”视图。

   “源”视图显示该页的 HTML，包括 Visual Web Developer 为服务器控件创建的元素。控件使用类似 HTML 的语法声明，不同的是标记使用前缀 asp: 并包括属性 runat="server"。

   控件属性 (Property) 声明为属性 (Attribute)。例如，在步骤 1 中设置按钮的 Text 属性 (Property) 时，实际是在设置控件标记中的 Text 属性 (Attribute)。

   注意，所有控件都在一个也具有 runat="server" 属性的 form 元素中。控件标记的 runat="server" 属性和 asp: 前缀标记控件，因此该页运行时 ASP.NET 可处理这些控件。

对 Button 控件编程

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

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

1. 切换到“设计”视图

2. 双击 Button 控件。

   Visual Web Developer 在编辑器的单独窗口中打开 WebPageSeparated.aspx.vb 或 WebPageSeparated.aspx.cs 文件。文件包含按钮的主干 Click 事件处理程序。

3. 通过添加下面突出显示的代码完成 Click 事件处理程序。

   Protected Sub Button1_Click(ByVal sender As Object, _
       ByVal e As System.EventArgs) Handles Button1.Click
           Label1.Text = Textbox1.Text & ", welcome to Visual Web Developer!"
   End Sub
   

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

   注意，键入时 IntelliSense 会提供上下文相关的选择向您提供帮助。这和在单文件页中编写代码时的行为相同。

检查页和代码文件

现在您有构成完整 WebPageSeparated 页的两个文件：WebPageSeparated.aspx 和 WebPageSeparated.aspx.vb（或 WebPageSeparated.aspx.cs）。在本部分演练中，将检查这两个文件是如何组织的以及它们彼此的关系。

检查页和代码文件

1. 单击编辑器窗口顶部的“WebPageSeparated.aspx”选项卡切换到该页文件。

2. 切换到“源”视图。

   该页顶部是一条将此页绑定到代码文件的 @ page 指令。该指令看起来类似下面的代码。

   <%@ Page Language="VB" AutoEventWireup="false" CodeFile="WebPageSeparated.aspx.vb" Inherits="WebPageSeparated" %>
   

   <%@ Page Language="C#" AutoEventWireup="true" CodeFile="WebPageSeparated.aspx.cs" Inherits="WebPageSeparated" %>
   

   （编辑器中不换行，语言属性和文件名扩展将匹配所选择的编程语言。）

   页运行时，ASP.NET 动态创建表示页的类的实例。Inherits 属性标识在从中派生 .aspx 页的代码隐藏文件中定义的类。默认情况下，Visual Web Developer 使用页名称作为代码隐藏文件中的类名称的基础。

   CodeFile 属性标识此页的代码文件。简单地说，代码隐藏文件包含页的事件处理代码。

3. 单击“WebPageSeparated.aspx.vb”或“WebPageSeparated.aspx.cs”选项卡切换到代码文件。

   代码文件包含类似类定义的代码。但是，它不是完整的类定义；而是一个“分部类”，其中仅包含用于组成页的完整类的一部分。具体来说，代码文件中定义的分部类包含事件处理程序和您编写的其他自定义代码。运行时，ASP.NET 生成包含用户代码的另一个分部类。然后这一完整类用作用于呈现页的基类。有关更多信息，请参见 ASP.NET 页类概述。

   说明：
   如果熟悉 Microsoft Visual Studio .NET 2003 中使用的代码隐藏模型，您会注意到，在新模型中，除类定义本身以外代码隐藏类不包含任何生成的代码。例如，类不包含页上控件的实例变量。不再需要此类型的生成的代码。

运行该页

现在可以测试页面。

运行该页

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

   该页使用 ASP.NET Development Server 运行。

   说明：
   如果浏览器显示 502 错误或指示页无法显示的错误，可能需要配置浏览器对本地请求跳过代理服务器。有关详细信息，请参见如何：对于本地 Web 请求不使用代理服务器。

2. 在文本框中输入名称并单击按钮。

   输入的名称显示在 Label 控件中。

3. 在浏览器中，查看您正在运行的页的源代码。

4. 关闭浏览器。

   页的工作方式与单文件页完全相同。（如果按照演练：在 Visual Web Developer 中创建基本网页中的步骤创建单文件页，可以对这两个页进行比较，看看它们运行时是否相同。）

后续步骤

本演练已演示了如何创建和编辑使用代码分离的网页。从创建和运行页的角度来说，单文件页和使用代码分离的页没有显著的差别。

您可能希望使用其他功能。例如，您可能希望：

• 创建不同类型的网站。除了按照本演练中的步骤创建文件系统网站之外，还可以使用 Microsoft Internet 信息服务 (IIS)、SharePoint 和 FTP 处理网站。有关详细信息，请参见 Visual Web Developer 中的网站类型。

• 向网页添加数据访问。有关详细信息，请参见演练：网页中的基本数据访问。

• 了解有关网页调试器的信息。有关详细信息，请参见演练：在 Visual Web Developer 中调试网页。

• 使用母版页创建一致的网站布局。有关详细信息，请参见演练：在 Visual Web Developer 中创建和使用 ASP.NET 母版页。

请参见

任务

演练：在 Visual Web Developer 中创建基本网页

概念

Visual Web Developer 中的网站类型