1.3.3 实训步骤

1.设计方法分析

网站可由4个独立的ASP.NET网页组成（1个主页和3个班级课表页），各网页之间通过超链接建立联系。

主页中包含分别指向不同班级课表页的3个HyperLink控件，各班级课表页由包含Tabel控件的网页构成。

2.创建ASP.NET网站项目

通过Windows“开始”菜单启动Visual Studio后，在起始页中单击“创建”栏中的“网站”，弹出“新建网站”对话框，在已安装的模板列表中选择“ASP.NET网站”并指定站点保存位置，然后单击“确定”按钮。

默认情况下，系统将网站保存在“文件系统”（本地硬盘）中，用户也可以直接将网站以HTTP或FTP方式保存在远程Web服务器中。本实训选择了适合初学者使用的“文件系统”方式，将网站创建在本地硬盘中。

为了方便在其他计算机中继续使用解决方案文件（.sln）管理尚未完全开发完成的ASP.NET网站，可在创建网站时通过选择“工具”→“选项”命令，弹出Visual Studio选项设置对话框，在左侧窗格的项目列表中选择“项目和解决方案”项，将“Visual Studio项目位置”中的路径设置为将要创建的网站位置。这样可以将解决方案文件和网站文件存放在同一个文件夹，以方便用户使用U盘等移动存储设备将文件复制到其他计算机中继续使用。

Visual Studio的ASP.NET网站开发环境与Windows应用程序开发环境基本相同，主要由工具箱、解决方案资源管理器和属性等子窗口组成。不同的是在Web应用程序中不再有Windows窗体，取而代之的是一个名为“Default.aspx”的空白Web页面（也称为Web窗体），它是ASP.NET网站的第一个页面，也称为默认主页（HomePage）。

3.设计Web页面

该环节的主要任务是对页面布局进行设计，并将需要的各控件添加到Web页面中。例如，本实训希望在默认主页中用3个超链接控件（HyperLink）显示各班级名称，当用户单击超链接文字时跳转到适当的页面。为了页面的美观，可使用HTML表格对各控件进行定位。

设计步骤如下。

（1）向页面中添加文字

如图1-27所示，在Default.aspx的设计视图中，输入页面的标题行文字。如本实训的“曙光学校课表查询”，单击工具栏中“文字对齐”按钮右侧的“▼”标记，在打开的菜单中选择“居中”选项，使文字处于页面的水平正中位置。用户可以像在Office软件中一样使用Visual Studio工具栏中的字体、字形和字号工具设置文字的格式。

（2）向页面中添加HTML表格

为了布局页面，可向网页中添加一个HTML表格。切换到设计视图，选择“表”→“插入表”命令，弹出如图1-28所示的对话框，按需要设置表格为1行3列及其他参数后单击“确定”按钮。

如果对HTML标记语言较为熟悉，可切换到网页的“源”视图，直接通过HTML代码进行表格和其他页面元素的设计。

（3）向页面中添加控件

在页面的设计视图中，将光标分别定位到HTML的3个单元格中，双击工具箱“标准”选项卡中的超链接控件图标，将其添加到单元格中。页面设计效果如图1-29所示。

需要说明的是，在Visual Studio工具箱的“标准”选项卡中所有的控件均为服务器端Web控件，这些控件与HTML控件或HTML表单（HTML Form）相比，除了功能更加强大外，还有一个重要的区别，即它们是在服务器端运行的，用户在浏览器中看到的内容是程序在服务器端运行的结果。这就意味着客户端完全可以不安装.NET框架，甚至可以不使用Windows操作系统（或Linux、UNIX等）。此外，对服务器端控件可以根据用户的操作（事件），编写响应事件的程序代码，这也是服务器端控件与HTML控件的一个关键不同点。

（4）向网站中添加新网页

按照设计目标，本实训网站除了具有系统默认创建的Default.aspx页面外，还需要手动添加其余3个用于显示各班级课表的页面Class1.aspx、Class2.aspx和Class3.aspx。

在解决方案资源管理器中右击网站名称，在弹出的快捷菜单中选择“添加”→“添加新项”命令。在弹出的对话框中选择“Web窗体”模板，设置页面的名称为Class1.aspx，设置完毕后单击“添加”按钮。

在“添加新项”对话框中有一个默认被选中的“将代码放在单独的文件中”复选框，表示采用页面外观设计和程序功能设计分离的方式创建新网页，即一个页面由表示外观设计的.aspx文件和一个仅包含程序代码的.cs文件来描述。使用这种代码分离方式设计页面可对设计人员按各自的特长（外观设计和程序设计）进行分工，以提高网站的设计效率。

新网页添加到网站后，切换到设计视图，参照前面介绍过的方法向页面中添加一个用于布局的HTML表格（4行5列）和内容文字，设计效果如图1-30所示。其他班级的课表页用同样的方法创建，这里不再赘述。

由于其他班级的课表页与Class1.aspx基本相同，为了减少工作量，可在解决方案资源管理器中按住〈Ctrl〉键的同时，将Class1.aspx拖动到其他位置创建其副本，然后重命名为Class2.aspx或Class3.aspx，修改网页中的文字，并将.aspx和.aspx.cs文件中的class1改为class2或class3。

4.设置对象属性

添加到页面中的所有控件都被称为“对象”，对象的属性用来表示其外观特征和一些特殊参数。如本实训中添加到Default.aspx的3个HyperLink控件就需要分别对其Text属性、NavigateUrl属性和Target属性进行设置。

Text属性用于控制HyperLink外观显示的文字信息，NavigateUrl属性用于控制其超链接目标URL，Target属性用于控制超链接的目标框架。

在Default.aspx的设计视图中选择HyperLink1控件后，“属性”窗口将自动显示该控件的所有属性列表，如图1-31所示。用户可直接在Text属性栏中输入文字，如本实训中的“网络一班”。

单击HyperLink1中的Target属性输入栏，可在系统提供的下拉列表框中选择“_blank”选项，表示在新窗口中打开目标网页。

设置HyperLink的NavigateUrl属性时，可直接输入目标网页的URL，也可单击工具栏中的“浏览”按钮，在弹出的如图1-32所示的对话框中选择目标文件，由系统自动转换为相应的URL地址。

5.编写程序代码

ASP.NET创建的应用程序采用了“事件驱动”方式，程序启动后会暂停下来，等待用户进一步的操作。用户的操作或系统对程序的控制称为“事件”，根据事件的触发对象不同可分为“用户事件”（如单击按钮、输入文字和选择列表项等）和“系统事件”（如页面加载、系统退出等）。

程序员的工作主要是编写用于响应各种系统事件和用户事件的程序代码，即当系统或用户触发了某个事件时执行的程序段。这些程序段能够实现某种特定的功能。例如，查询数据库并将符合指定条件的记录显示到屏幕上。

本实训中希望在页面加载（Page_Load）事件发生时，在浏览器标题栏中显示“欢迎访问课表查询系统”的文字信息。

在设计视图中双击Web窗体Default.aspx的空白处，进入其代码编辑窗口，系统自动为Web窗体创建了Page_Load事件的框架，用户只须在框架中书写实现功能的代码即可，如图1-33所示。本实训中程序员书写的代码只有“this.Title="欢迎访问课表查询系统"”一行，可以理解为：在页面显示到浏览器时，将浏览器标题栏中的文字改为指定信息，实际上是为页面对象this的Title属性赋值。

“//”之后的内容为注释内容，不会被系统执行。

6.运行及调试程序

单击Visual Studio工具栏中的“启动”按钮或按〈F5〉键，启动ASP.NET网站应用程序，首次运行时屏幕上会显示一个信息框，提示用户当前尚未启用调试。

若启用调试系统时将调试符号插入到已编译的页面中，这对网站的性能会产生一些影响。因此应在开发过程结束、准备将网站发布到Web服务器时禁用调试。若要关闭调试，用户可在解决方案资源管理器中双击打开站点配置文件web.config，将其中的<compilation debug="true"/>改为<compilation debug="false"/>。

若不希望调试而直接运行程序，可按〈Ctrl+F5〉组合键启动程序，此时将不再出现“未启用调试”对话框。

网站启动后，应当认真测试每一项功能，认真观察页面布局是否美观、大方等。尽可能多地找出不完善之处，并加以修改。对出现的错误，应根据提示并结合Visual Studio提供的调试工具进行相应的修改。