实验1在VWD中创建网页课件.docx

1、实验1在VWD中创建网页课件实验一 在 Visual Web Developer 中创建基本网页（2学时）实验目的基本要求： 熟悉VWD开发环境，了解ASP.NET网页基本构成，掌握创建新页、添加控件以及编写代码的基本技术。重 点： 熟悉ASP.NET页的创建方法。难 点：理解ASP.NET代码分离的编程原理。实验内容 一、 理论复习1. 静态网页与动态网页的区别是什么？2. ASP.NET引擎的目的是什么？3. 请观察ASP.NET网页，说明Page指令的作用是什么？它是否会在浏览器中显示？在Page中提供了哪些网页信息？4. 请用500字左右比较一下目前最流行的动态网页技术。二、 综合演练

2、 在 Visual Web Developer 中创建基本网页。综合演练实验步骤 在 VWD中创建基本网页(一) 创建网站和网页在本练习中，将创建一个网站并为其添加新页。还将添加 HTML 文本并在 Web 浏览器中运行该页。本练习创建一个不需要使用 Microsoft Internet 信息服务 (IIS) 的文件系统网站，将在本地文件系统中创建和运行页。创建文件系统网站1. 打开 Visual Web Developer。2. 在“文件”菜单上指向“新建”，然后单击“网站”。出现“新建网站”对话框，如下面的屏幕快照所示。“新建网站”对话框3. 在“Visual Studio 已安装的模板”

3、之下单击“ASP.NET 网站”。创建网站时需要指定一个模板。每个模板创建包含不同文件和文件夹的 Web 应用程序。在本练习中，您将基于“ASP.NET 网站”模板创建网站，该模板创建一些文件夹和几个默认文件。4. 在“位置”框中选择“文件系统”框，然后输入要保存网站网页的文件夹的名称。 例如，键入文件夹名“C:BasicWebSite”。 5. 在“语言”列表中单击 “Visual C#”。您选择的编程语言将是网站的默认语言。但是，可以通过使用不同的编程语言创建页和组件而在同一个 Web 应用程序中使用多种语言。6. 单击“确定”。Visual Web Developer 创建该文件夹和一个

4、名为 Default.aspx 的新页。新页创建后，Visual Web Developer 默认以“源”视图显示该页，在该视图下您可以查看页面的 HTML 元素。下面的屏幕快照显示了一个默认网页的“源”视图。默认页的“源”视图补充：Visual Web Developer 教程在继续使用页之前，先熟悉一下 Visual Web Developer 开发环境是很有用的。下面的插图显示了在 Visual Web Developer 中可用的窗口和工具。Visual Web Developer 环境的关系图熟悉 Visual Web Developer 中的 Web 设计器 检查上面的插图并将插图

5、中的文本与下面的列表相互对应起来，该列表描述了最常用的窗口和工具。（并不是您看到的所有窗口和工具都列在这里，列出的只是上图中标记的那些窗口和工具。） 工具栏。提供用于格式化文本、查找文本等的命令。一些工具栏只有在“设计”视图中工作时才可用。 解决方案资源管理器。显示网站中的文件和文件夹。 文档窗口。显示您正在选项卡式窗口中处理的文档。单击选项卡可以实现在文档间切换。 属性窗口。允许您更改页、HTML 元素、控件及其他对象的设置。 视图选项卡。向您展示同一文档的不同视图。“设计”视图是近似 WYSIWYG 的编辑图面。“源”视图是页的 HTML 编辑器。您将在本练习的后面部分中使用这些视图。如果

6、希望以“设计”视图打开网页，可在“工具”菜单上单击“选项”，选择“HTML 设计器”节点，并更改“起始页位置”选项。 工具箱。提供可以拖到页上的控件和 HTML 元素。工具箱元素按常用功能分组。 服务器资源管理器。显示数据库连接。如果服务器资源管理器在 Visual Web Developer 中不可见，请在“视图”菜单上单击“其他窗口”，然后单击“服务器资源管理器”。创建一个新的 Web 窗体页当创建新的网站时，Visual Web Developer 将添加一个名为 Default.aspx 的 ASP.NET 页（Web 窗体页）。可以使用 Default.aspx 页作为网站的主页。但

7、是在本练习中，将创建并使用一个新页。将页添加到网站1. 关闭 Default.aspx 页。为此，右击包含文件名的选项卡并选择“关闭”。2. 在解决方案资源管理器中，右击网站（例如，“C:BasicWebSite”），然后单击“添加新项”。3. 在“Visual Studio 已安装的模板”之下单击“Web 窗体”。4. 在“名称”框中键入“FirstWebPage”。5. 在“语言”列表中，选择您希望使用的编程语言（ “C#”）。创建网站时您已指定了一种默认语言。但是，每次为网站创建新页或组件时，可以更改默认语言。可以在同一网站中使用不同的编程语言。6. 清除“将代码放在单独的文件中”复选框

8、。下面的屏幕快照显示了“添加新项”对话框。 “添加新项”对话框注：在本练习中，将创建一个代码和 HTML 在同一页的单文件页。ASP.NET 页的代码可以在页或单独的类文件中找到。7. 单击“添加”。Visual Web Developer 创建新页并以“源”视图打开。将 HTML 添加到页在本练习的这一部分中，将向页中添加一些静态文本。(一) 向页中添加文本1. 在文档窗口的底部，单击“设计”选项卡以切换到“设计”视图。“设计”视图以类似 WYSIWYG 的方式显示您正在使用的页。此时，页上没有任何文本或控件，因此页是空白的。2. 在页上键入“欢迎使用 Visual Web Develope

9、r”。下面的屏幕快照显示了您在“设计”视图中键入的文本。在“设计”视图中看到的欢迎文本3. 切换到“源”视图。可以看到通过在“设计”视图中键入而创建的 HTML，如下面的屏幕快照所示。在“源”视图中看到的欢迎文本运行该页1. 按 Ctrl+F5 运行该页。Visual Web Developer 启动 ASP.NET Development Server。工具栏右侧出现一个图标，指示 Visual Web Developer Web 服务器正在运行。该页显示在浏览器中。虽然创建的页的扩展名为 .aspx，但是它当前像任何 HTML 页一样运行。2. 关闭浏览器。(二) 添加控件和对控件编程在本

10、练习的这一部分中，将向页中添加一个 Button、一个 TextBox 和一个 Label 控件，并编写处理 Button 控件的 Click 事件的代码。现在将向页中添加服务器控件。服务器控件（包括按钮、标签、文本框和其他常见控件）为 ASP.NET 网页提供了典型的窗体处理功能。但是，可以使用运行在服务器而不是客户端上的代码对控件编程。向页中添加控件1. 单击“设计”选项卡切换到“设计”视图。2. 按几次 Shift+Enter 以留出一些空间。3. 从“工具箱”的“标准”组中将下列三个控件拖到页上：TextBox 控件、Button 控件和 Label 控件。4. 将插入点放在 Text

11、Box 控件之上，然后键入“输入您的名字：”。此静态 HTML 文本是 TextBox 控件的标题。可以在同一页上混合放置静态 HTML 和服务器控件。下面的屏幕快照显示了这三个控件在“设计”视图中如何放置。“设计”视图中的控件设置控件属性Visual Web Developer 提供了各种方式来设置页上控件的属性。在本练习的这一部分中，您将在“设计”视图和“源”视图中设置属性。1. 选择 Button 控件，然后在“属性”窗口中，将“文本”设置为“显示名称”，如下面的屏幕快照所示。更改的按钮控件文本2. 切换到“源”视图。“源”视图显示该页的 HTML，包括 Visual Web Devel

12、oper 为服务器控件创建的元素。控件使用类似 HTML 的语法声明，不同的是标记使用前缀 asp: 并包括属性 runat=server。控件属性 (Property) 声明为属性 (Attribute)。例如，当您在第 1 步中设置 Button 控件的 Text 属性 (Property) 时，实际是在设置该控件标记中的 Text 属性 (Attribute)。注意，所有控件都在一个 元素之内，该元素也包含属性 runat=server。控件标记的 runat=server 属性和 asp: 前缀表明当页运行时它们由 ASP.NET 在服务器端进行处理。 和 元素外部的代码由浏览器作为客

13、户端代码解释，这就是为什么 ASP.NET 代码必须在元素内部的原因。3. 将插入点放在 标记内的空白处，然后按空格键。将出现一个下拉列表，该列表显示可以为 Label 控件设置的属性列表。此功能（称为 IntelliSense）在“源”视图中帮助您了解服务器控件、HTML 元素和页上其他项的语法。下面的屏幕快照显示了 Label 控件的 IntelliSense 下拉列表。“标签”控件的 IntelliSense4. 选择 ForeColor，然后键入一个等号 (=)。IntelliSense 将显示一个颜色列表。注：可以在任何时候按 Ctrl+J 来显示 IntelliSense 下拉列表

14、。5. 为 Label 控件的文本选择一种颜色。ForeColor 属性由您选择的颜色完成。对 Button 控件编程在本练习中，将编写实现下列功能的代码：读取用户输入到文本框中的名称并将其显示在 Label 控件中。 添加默认按钮事件处理程序1. 切换到“设计”视图。2. 双击 Button 控件。 Visual Web Developer 切换到“源”视图并为 Button 控件的默认事件（Click 事件）创建一个主干事件处理程序。注：在“设计”视图中双击控件只是创建事件处理程序的其中一种方法。3. 在处理程序内键入以下内容：Label1. 注：Visual Web Developer

15、将显示一个 Label 控件的可用成员的列表，如下面的屏幕快照所示。可用的 Label 控件成员4. 完成该按钮的 Click 事件处理程序，如下面的代码示例所示。C#protected void Button1_Click(object sender, System.EventArgs e) Label1.Text = TextBox1.Text + , welcome to Visual Web Developer!;5. 向下滚动到 元素。注意， 元素现在具有属性 OnClick=Button1_Click。此属性将按钮的 Click 事件绑定到第 4 步中您编写的处理程序方法。事件处理

16、程序方法可以具有任意名称；您看到的名称是 Visual Web Developer 创建的默认名称。重要的是 OnClick 属性的名称必须与页中某个方法的名称匹配。注：如果您是使用代码分离，Visual Web Developer 不会添加一个显式的 OnClick 属性。相反，是通过在处理程序声明本身中使用 Handles 关键字来将该事件绑定到处理程序方法。运行该页1. 按 Ctrl+F5 在浏览器中运行该页。该页再次使用 ASP.NET Development Server 运行。2. 在文本框中输入名称并单击按钮。输入的名称显示在 Label 控件中。注意，当您单击该按钮时，该页将被

17、发送到 Web 服务器。ASP.NET 然后重新创建该页，运行您的代码（本例中运行的是 Button 控件的 Click 事件处理程序），然后将新页发送到浏览器。如果查看浏览器中的状态栏，可以看到每次您单击该按钮该页都将往返 Web 服务器一次。3. 在浏览器中，查看您正在运行的页的源代码。在页的源代码中，看到的只是普通 HTML；看不到您正在“源”视图中使用的 元素。当页运行时，ASP.NET 会处理服务器控件并将执行表示控件的功能的 HTML 元素呈现到页上。例如， 控件作为 HTML 元素 呈现。4. 关闭浏览器。(三) 使用附加控件在本练习的这一部分中，将使用 Calendar 控件，

18、该控件一次显示一个月的日期。Calendar 控件是比您使用过的按钮、文本框和标签更加复杂的控件，并且阐释了服务器控件的一些其他功能。添加“日历”控件1. 在 Visual Web Developer 中，切换到“设计”视图。2. 从“工具箱”的“标准”部分中，将一个 Calendar 控件拖到页上：显示该日历的智能标记面板。该面板显示一些命令，这些命令使您能够很容易地对选定控件执行一些最常见的任务。下面的屏幕快照显示了在“设计”视图中呈现的 Calendar 控件。“设计”视图中的“日历”控件3. 在智能标记面板中，选择“自动套用格式”。 显示“自动套用格式”对话框，该对话框允许您为该日历选

19、择一种格式设置方案。下面的屏幕快照显示了 Calendar 控件的“自动套用格式”对话框。“日历”控件的“自动套用格式”对话框4. 从“选择方案”列表中选择“简单”，然后单击“确定”。5. 切换到“源”视图。 您会看到 元素。此元素比您先前创建的简单控件的元素要长很多。它还包含表示各种格式设置的子元素，如 。下面的屏幕快照显示了“源”视图中的 Calendar 控件。“源”视图中的“日历”控件对“日历”控件编程在本节中，您将对 Calendar 控件编程以显示当前选定的日期。对“日历”控件编程1. 从“源”视图顶部左侧的下拉列表中，选择“Calendar1”。 该下拉列表显示一个可为其编写代码

20、的所有对象的列表。2. 从右侧的下拉列表中，选择“SelectionChanged”。Visual Web Developer 为 Calendar 控件的 SelectionChanged 事件创建一个主干事件处理程序。现在您已经看到了为控件创建事件处理程序的两种方式。第一种是在“设计”视图中双击控件。第二种是在“源”视图中使用下拉列表选择对象和要为其编写代码的事件。3. 使用下面突出显示的代码完成 SelectionChanged 事件处理程序。C#protected void Calendar1_SelectionChanged(object sender, System.EventArgs e) Label1.Text = Calendar1.SelectedDate.ToString();运行该页1. 按 Ctrl+F5 在浏览器中运行该页。2. 单击日历中的一个日期。您单击的日期显示在 Label 控件中。 3. 在浏览器中查看该页的源代码。注意，Calendar 控件已作为表格呈现给该页，每一天都作为一个包含 元素的 元素。 4关闭浏览器。实验报告（请按照要求提交实验报告电子版）注:截图基于vs2012