Share via

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

  • 项目

更新：2007 年 11 月

本演练对 Microsoft Visual Web Developer 进行了简单介绍。它指导您使用 Visual Web Developer 来创建简单页，演示了创建新页、添加控件以及编写代码的基本技术。

本演练阐释以下任务：

  • 创建文件系统网站。

  • 熟悉 Visual Web Developer。

  • 在 Visual Web Developer 中创建单文件的 ASP.NET 页。

  • 添加控件。

  • 添加事件处理程序。

  • 使用 Visual Web Developer 中的 Web 服务器运行页。

先决条件

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

  • Visual Web Developer

  • .NET Framework

创建网站和网页

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

在本演练中，您将创建一个不需要使用 Microsoft Internet 信息服务 (IIS) 的文件系统网站。相反，您将在本地文件系统中创建和运行页。

文件系统网站是这样一个网站，即在您选择的位于本地计算机上某个位置的文件夹中存储页面和其他文件。其他网站选项包括本地 IIS 网站，它将您的文件存储在本地 IIS 根目录（通常是 \Inetpub\Wwwroot\）的子文件夹中。FTP 网站将文件存储在远程服务器上，您可以使用文件传输协议 (FTP) 通过 Internet 访问该服务器。远程网站将文件存储在您能够跨越本地网络访问的远程服务器上。有关更多信息，请参见演练：在 Visual Web Developer 中通过 FTP 编辑网站。网站文件也可以存储在诸如 Visual SourceSafe 这样的源代码管理系统中。有关更多信息，请参见源代码管理简介。

创建文件系统网站

  1. 打开 Visual Web Developer。

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

    出现**“新建网站”**对话框，如下面的屏幕快照所示。

    “新建网站”对话框
    “新建网站”对话框屏幕快照

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

    创建网站时需要指定一个模板。每个模板创建包含不同文件和文件夹的 Web 应用程序。在本演练中，您将基于**“ASP.NET 网站”**模板创建网站，该模板创建一些文件夹和几个默认文件。

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

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

  5. 在**“语言”列表中，选择“Visual Basic”或“Visual C#”**。

    您选择的编程语言将是网站的默认语言。但可以通过以不同的编程语言创建页面和组件，以便在同一个 Web 应用程序中使用多种语言。

  6. 单击**“确定”**。

    Visual Web Developer 创建该文件夹和一个名为 Default.aspx 的新页。新页创建后，Visual Web Developer 默认以“源”视图显示该页，在该视图下您可以查看页面的 HTML 元素。下面的屏幕快照显示了一个默认网页的“源”视图。

    默认页的“源”视图
    源视图中的默认页

Visual Web Developer 教程

在您继续使用页之前，先熟悉一下 Visual Web Developer 开发环境是很有用的。下面的插图显示了在 Visual Web Developer 中可用的窗口和工具。

Visual Web Developer 环境的关系图
IDE 窗口和工具图解

熟悉 Visual Web Developer 中的 Web 设计器

  • 检查上面的插图并将插图中的文本与下面的列表相互对应起来，该列表描述了最常用的窗口和工具。（并不是您看到的所有窗口和工具都列在这里，列出的只是上图中标记的那些窗口和工具。）

    • 工具栏。提供用于格式化文本、查找文本等的命令。一些工具栏只有在“设计”视图下才可用。

    • 解决方案资源管理器。显示网站中的文件和文件夹。

    • 文档窗口。显示您正在选项卡式窗口中处理的文档。单击选项卡可以实现在文档间切换。

    • 属性窗口。允许您更改页、HTML 元素、控件及其他对象的设置。

    • 视图选项卡。向您展示同一文档的不同视图。“设计”视图是一种近似 WYSIWYG 的编辑界面。“源”视图是页的 HTML 编辑器。拆分视图可同时显示文档的“设计”视图和“源”视图。您将在本演练的后面部分使用“设计”和“源”视图。如果要在“设计”视图中打开网页，请在“工具”菜单上单击“选项”，选择**“HTML 设计器”节点，然后更改“起始页位置”**选项。

    • 工具箱。提供可以拖到页上的控件和 HTML 元素。**“工具箱”**元素按常用功能分组。

    • 服务器资源管理器/数据库资源管理器。显示数据库连接。如果**“服务器资源管理器”在 Visual Web Developer 中不可见，请在“视图”菜单上单击“服务器资源管理器”或“数据库资源管理器”**。

      k4cbh4dh.alert_note(zh-cn,VS.90).gif说明：

      您可以按自己的喜好重新排列窗口和调整窗口大小。“视图”菜单允许您显示附加窗口。

创建一个新的 Web 窗体页

当您创建新的网站时，Visual Web Developer 将添加一个名为 Default.aspx 的 ASP.NET 页（Web 窗体页）。您可以使用 Default.aspx 页作为网站的主页。但是在本演练中，您将创建并使用一个新页。

将页添加到网站

  1. 关闭 Default.aspx 页。为此，右击包含文件名的选项卡并选择**“关闭”**。

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

  3. 在**“Visual Studio 已安装的模板”下单击“Web 窗体”。下面的屏幕快照显示了“添加新项”**对话框。

    “添加新项”对话框
    “添加新项”对话框

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

  5. 在**“语言”列表中，选择您希望使用的编程语言（“Visual Basic”、“C#”或“J#”**）。创建网站时您已指定了一种默认语言。但是，每次为网站创建新页或组件时，可以更改默认语言。可以在同一网站中使用不同的编程语言。

  6. 清除**“将代码放在单独的文件中”**复选框。

    在本演练中，您将创建一个代码和 HTML 在同一页的单文件页。ASP.NET 页的代码可以在页或单独的类文件中找到。要了解有关在独立文件中保存代码的更多信息，请参见演练：在 Visual Web Developer 中通过代码分离创建基本网页。

  7. 单击**“添加”**。

    Visual Web Developer 创建新页并以“源”视图打开。

将 HTML 添加到页

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

向页中添加文本

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

    “设计”视图以类似 WYSIWYG 的方式显示您正在使用的页。此时，页上没有任何文本或控件，因此页是空白的。

  2. 在页上键入“欢迎使用 Visual Web Developer”。

    下面的屏幕快照显示了您在“设计”视图中键入的文本。

    在“设计”视图中看到的欢迎文本
    设计视图中的欢迎文本

  3. 切换到“源”视图。

    可以看到通过在“设计”视图中键入而创建的 HTML，如下面的屏幕快照所示。

    在“源”视图中看到的欢迎文本
    源视图中的欢迎文本

运行该页

在继续向该页添加控件之前，可以尝试运行该页。要运行页，需要一个 Web 服务器。在成品网站中，要使用 IIS 作为 Web 服务器。但是要测试页，可以使用 ASP.NET Development Server，它在本地运行因此不需要 IIS。对于文件系统网站，Visual Web Developer 中的默认 Web 服务器是 ASP.NET Development Server。

运行该页

  1. 按 Ctrl+F5 运行该页。

    Visual Web Developer 启动 ASP.NET Development Server。工具栏上出现一个图标，指示 Visual Web Developer Web 服务器正在运行，如下面的屏幕快照所示。

    Visual Web Developer Web 服务器图标
    开发 Web 服务器图标

    该页显示在浏览器中。虽然创建的页的扩展名为 .aspx，但是它当前像任何 HTML 页一样运行。

    k4cbh4dh.alert_note(zh-cn,VS.90).gif说明：

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

  2. 关闭浏览器。

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

在本演练的这一部分中，您将向页中添加一个 Button、一个 TextBox 和一个 Label 控件，并编写处理 Button 控件的 Click 事件的代码。

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

将控件添加到页

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

  2. 按几次 Shift+Enter 以留出一些空间。

  3. 从**“工具箱”的“标准”**组中将下列三个控件拖到页上：TextBox 控件、Button 控件和 Label 控件。

  4. 将插入点放在 TextBox 控件之上，然后键入“输入您的名字：”。

    此静态 HTML 文本是 TextBox 控件的标题。可以在同一页上混合放置静态 HTML 和服务器控件。下面的屏幕快照显示了这三个控件在“设计”视图中如何放置。

    “设计”视图中的控件
    设计视图中的三个控件

设置控件属性

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

设置控件属性

  1. 选择 Button 控件，然后在“属性”窗口中，将**“文本”**设置为“显示名称”，如下面的屏幕快照所示。

    更改的按钮控件文本
    设置按钮文本

  2. 切换到“源”视图。

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

    控件属性 (Property) 声明为属性 (Attribute)。例如，当您在第 1 步中设置 Button 控件的 Text 属性 (Property) 时，实际是在设置该控件标记中的 Text 属性 (Attribute)。

    注意，所有控件都在一个 <form> 元素之内，该元素也包含属性 <form>。控件标记的 runat="server" 属性和 asp: 前缀将对控件进行标记，以便页运行时服务器上的 ASP.NET 对它们进行处理。<form runat="server"> 和 <script runat="server"> 元素外部的代码作为客户端标记或代码发送到浏览器，这就是 ASP.NET 代码必须位于其开始标记包含 runat="server"> 属性的元素内部的原因。

  3. 将插入点放在 <asp:label> 标记内的空白处，然后按空格键。

    将出现一个下拉列表，该列表显示可以为 Label 控件设置的属性列表。此功能（称为 IntelliSense）在“源”视图中帮助您了解服务器控件、HTML 元素和页上其他项的语法。下面的屏幕快照显示了 Label 控件的 IntelliSense 下拉列表。

    “标签”控件的 IntelliSense
    IntelliSense 属性

  4. 选择 ForeColor，然后键入一个等号 (=)。IntelliSense 将显示一个颜色列表。

    k4cbh4dh.alert_note(zh-cn,VS.90).gif说明：

    可以在任何时候按 Ctrl+J 来显示 IntelliSense 下拉列表。

  5. 为 Label 控件的文本选择一种颜色。

    ForeColor 属性由您选择的颜色完成。

对 Button 控件编程

在本演练中，您将编写实现下列功能的代码：读取用户输入到文本框中的名称并将其显示在 Label 控件中。

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

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

  2. 双击 Button 控件。

    Visual Web Developer 切换到“源”视图并为 Button 控件的默认事件（Click 事件）创建一个主干事件处理程序。

    k4cbh4dh.alert_note(zh-cn,VS.90).gif说明：

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

  3. 在处理程序内键入以下内容：

    Label1。

    Visual Web Developer 显示一个 Label 控件的可用成员的列表，如下面的屏幕快照所示。

    可用的 Label 控件成员
    代码视图中的 IntelliSense

  4. 完成该按钮的 Click 事件处理程序，如下面的代码示例所示。

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    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!";
}

  5. 向下滚动到 <asp:Button> 元素。注意，<asp:Button> 元素现在具有属性 OnClick="Button1_Click"。此属性将按钮的 Click 事件绑定到您在第 4 步中编写的处理程序方法。

    事件处理程序方法可以具有任意名称；您看到的名称是 Visual Web Developer 创建的默认名称。重要的是 OnClick 属性的名称必须与页中某个方法的名称匹配。

    k4cbh4dh.alert_note(zh-cn,VS.90).gif说明：

    如果您是使用 Visual Basic 代码分离，Visual Web Developer 不会添加一个显式的 OnClick 属性。相反，是通过在处理程序声明本身中使用 Handles 关键字来将该事件绑定到处理程序方法。

运行该页

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

运行该页

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

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

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

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

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

    在页的源代码中，看到的只是普通 HTML；看不到您正在“源”视图中使用的 <asp:> 元素。当页运行时，ASP.NET 会处理服务器控件并将执行表示控件的功能的 HTML 元素呈现到页上。例如，<asp:Button> 控件作为 HTML 元素 <input type="submit"> 呈现。

  4. 关闭浏览器。

使用附加控件

在本演练的这一部分中，您将使用 Calendar 控件，该控件一次显示一个月的日期。Calendar 控件是比您使用过的按钮、文本框和标签更加复杂的控件，并且阐释了服务器控件的一些其他功能。

在本节中，您将向页中添加一个 Calendar 控件并为其设置格式。

添加“日历”控件

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

  2. 从**“工具箱”的“标准”**部分中，将一个 Calendar 控件拖到页上：

    显示该日历的智能标记面板。该面板显示一些命令，这些命令使您能够很容易地对选定控件执行一些最常见的任务。下面的屏幕快照显示了在“设计”视图中呈现的 Calendar 控件。

    “设计”视图中的“日历”控件
    设计视图中的 Calendar 控件

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

    显示**“自动套用格式”对话框，该对话框允许您为该日历选择一种格式设置方案。下面的屏幕快照显示了 Calendar 控件的“自动套用格式”**对话框。

    “日历”控件的“自动套用格式”对话框
    “自动套用格式”对话框（Calendar 控件）

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

  5. 切换到“源”视图。

    您会看到 <asp:Calendar> 元素。此元素比您先前创建的简单控件的元素要长很多。它还包含表示各种格式设置的子元素，如 <WeekEndDayStyle>。下面的屏幕快照显示了“源”视图中的 Calendar 控件。

    “源”视图中的“日历”控件
    源视图中的 Calendar 控件

对“日历”控件编程

在本节中，您将对 Calendar 控件编程以显示当前选定的日期。

对“日历”控件编程

  1. 在**“设计”**视图中双击 Calendar 控件。

    在**“源”**视图中创建新事件处理程序。

  2. 使用下面突出显示的代码完成 SelectionChanged 事件处理程序。

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

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

运行该页

现在可以测试日历了。

运行该页

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

  2. 单击日历中的一个日期。

    您单击的日期显示在 Label 控件中。

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

    注意，Calendar 控件已作为表格呈现给该页，每一天都作为一个包含 <td> 元素的 <a> 元素。

  4. 关闭浏览器。

后续步骤

本演练阐释了 Visual Web Developer 页设计器的基本功能。现在您已了解了如何在 Visual Web Developer 中创建和编辑网页，您可能希望了解其他一些功能。例如，您可能希望：

请参见

任务

演练：在 Visual Web Developer 中创建本地 IIS 网站

演练：在 Visual Web Developer 中通过 FTP 编辑网站

概念

ASP.NET 概述

使用 Visual Web Developer