1.2.4 创建ASP.NET网站的基本步骤

在Visual Studio中创建一个简单的ASP.NET网站，一般需要经过以下6个步骤。

1）根据用户需求进行问题分析，设计出合理的程序设计思路。

2）创建一个新的ASP.NET网站。

3）设计网站中包含的所有Web页面的外观。

4）设置页面中所有控件对象的初始属性值。

5）编写用于响应系统事件或用户事件的代码。

6）试运行并调试程序，纠正存在的错误，调整程序界面，提高容错能力和操作的便捷性，使程序更符合用户的操作习惯，通常将这一过程称为提高程序的“友好性”。

1.创建一个ASP.NET网站

本节将通过一个简单ASP.NET网站的创建过程，介绍在Visual Studio环境中使用Visual C#语言创建ASP.NET网站的基本步骤。

【演练】设计一个能显示当前时间数据的ASP.NET网站。

（1）设计要求及设计方法分析

设计要求：要求在Visual Studio环境中设计一个ASP.NET网站，程序启动后页面中显示当前系统时间，单击“更新时间”按钮显示新的时间数据。

设计方法分析：这是一个简单的单页面应用程序，页面可由一个标签（Label）控件和一个命令按钮控件（Button）组成，在页面显示（发生Load事件）时和用户单击命令按钮控件（发生命令按钮的Click事件）时，调用用于返回系统时间的Now方法，并将返回值显示到标签控件中。

（2）创建ASP.NET网站

启动Visual Studio后，选择“文件”→“新建”→“网站”命令，在弹出的“新建网站”对话框中选择Visual C#模板下的“ASP.NET空网站”，指定站点保存位置，然后单击“确定”按钮。默认情况下，系统将网站保存在“文件系统”（本地硬盘）中，用户也可以直接将网站以HTTP或FTP方式保存在远程Web服务器中。

（3）设计Web页面

创建好一个ASP.NET空网站后，在解决方案资源管理器中右击项目名称，在弹出的快捷菜单中选择“添加”→“Web窗体”命令，并将其命名为Default，单击“确定”按钮。命令执行后系统将向解决方案中添加一个空白Web页面文件Default.aspx及对应的程序代码文件Default.aspx.cs，该页面通常为网站的默认主页（HomePage）。

默认情况下，系统会将Default.aspx以源视图方式在Web窗体编辑区打开，选择编辑区下方的“设计”选项卡，可切换到设计视图方式。

首先，将光标移动到系统在页面中自动创建的div层中。在工具箱的“标准”选项卡中分别双击标签控件图标Label和命令按钮图标Button，将这两个控件添加到页面中。

通过在两个控件之间按〈Enter〉键的方法将控件分别放置在两行中，并在两行间添加一个空行（将光标移动到标签控件的后面，连续按两次〈Enter〉键）。

将光标放置在div层中的任一位置，按图1-14所示选择对齐方式中的“居中”选项，得到如图1-15所示的页面设计结果。这种设计使得页面显示时无论窗口如何缩放，控件都会显示在所在行的中间。

（4）设置对象属性

在设计视图中单击选中标签控件，在“属性”窗口中可以看到控件各属性的默认值。控件的Text属性表示需要显示到控件中的文本，ID属性表示控件在程序中使用的名称。

如图1-16和图1-17所示，本例将标签控件的Text属性设置为“请单击按钮”，ID属性设置为lblShowTime；将按钮控件的Text属性设置为“更新时间”，ID属性设置为btnUpdate。控件的Text属性设置完毕后，在设计视图中可立即看到更改的结果。

这里为控件命名时采用了控件类型前缀的方法，即用控件类型名或缩写加上若干英文单词来命名控件。使用这种方法可以使程序员阅读程序时能快速理解代码的含义，增强程序的可读性。

（5）编写程序代码

切换到代码窗口最简单的方法就是直接在设计视图中双击窗体或控件，Visual Studio会根据用户双击对象的不同而自动创建其默认事件处理程序的框架。

如图1-18所示，双击窗体中的按钮控件后系统自动切换到代码编辑窗口，并创建了页面载入（Page_Load）和按钮单击（btnUpdate_Click）两个事件处理方法。

所谓“事件”，是指系统或用户执行了某个操作所引起的情况，如系统将页面载入、用户单击了按钮等。而“事件处理方法”是指当发生某事件时需要执行的程序代码集合，是响应系统或用户事件的程序功能实现。这种程序设计方法称为“事件驱动式”设计方法。

程序员只须在方法框架中填写必要的代码即可。

需要程序员编写的两条语句的含义说明如下。

表示设置Web窗体（网页）的Title属性值为指定的文字，即系统将页面载入并打开时在浏览器标题栏中显示指定的文字。

表示设置标签控件的Text属性为一个字符串常量连接DateTime对象的Now属性值，即当用户单击按钮时，在标签中显示带有当前系统时间数据的提示信息。

程序中用“//”引导的文本为注释文本（绿色的文本），用于增强代码的可读性。注释文本在程序运行时不会被执行。

（6）运行和调试程序

Visual Studio中提供了一个名为IIS Express的组件，它可以使用户的ASP.NET网站在发布到Web服务器之前于本地进行测试，而且不要求在本地的计算机中安装IIS服务器。

单击工具栏中的“启动”按钮或按〈F5〉键，启动ASP.NET网站应用程序，在该按钮旁有一个下拉列表框，其中列出了当前计算机中安装的所有浏览器版本，如图1-19所示。用户可以通过它选择希望在哪种浏览器中预览自己的网站。这一功能可以方便地检测页面设计在不同浏览器中的表现情况。

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

2.保存和打开ASP.NET项目

（1）保存项目

打开到IDE的项目文件被编辑修改后，其文件名的后面会出现一个“∗”标记，表示文件尚未保存。在Visual Studio环境中保存项目文件可通过以下几种方式进行。

1）单击工具栏中的“全部保存”按钮，保存项目中的所有文件。

2）选择“文件”→“保存全部”命令，保存项目中的所有文件。

3）单击工具栏中的“启动”按钮运行程序时，系统将自动执行保存操作。

4）单击“关闭”按钮退出IDE环境时，若文件尚未保存，将弹出如图1-22所示的对话框，单击“是”按钮，保存所有文件。

（2）项目及文件重命名

在如图1-23所示的“解决方案资源管理器”窗口中列出了当前解决方案名称、网站名称及其中包含的所有文件。如果希望更改解决方案或文件的名称，可右击该对象，在弹出的快捷菜单中选择“重命名”命令，输入新的名称后按〈Enter〉键即可。

（3）打开网站和项目

要在Visual Studio环境中打开已保存的网站并进行修改，可通过以下几种方式进行。

1）启动Visual Studio，在“起始页”的“最近”列表框中列出了最近使用过的项目（网站）名称，选择需要的项目即可将其打开。

2）在“起始页”的“开始”列表框中单击“打开项目”按钮或选择“文件”→“打开”→“项目/解决方案”命令，弹出如图1-24所示的对话框，选择解决方案文件（.sln）后单击“打开”按钮。

默认情况下，系统并没有将解决方案文件（.sln）保存在网站文件夹中，而是将其存放在“C：\用户\当前系统登录用户名\文档\Visual Studio 2015\Projects”文件夹下的同名子文件夹中（Windows 10环境）。选择“工具”→“选项”命令，在弹出的如图1-25所示的对话框中选择“项目和解决方案”下的“常规”选项，在对话框中可更改默认的文件保存位置（项目位置、用户项目模板位置和用户项模板位置）。

3）通过“Windows资源管理器”或“计算机”打开项目所在的文件夹，双击其中扩展名为“.sln”的解决方案文件打开网站，该文件为IDE环境提供关于项目、项目项和解决方案项在磁盘上的位置信息，并将它们组织到解决方案中。

4）选择“文件”→“打开”→“网站”命令，弹出如图1-26所示的对话框，用户可按“文件系统”“本地IIS”“FTP站点”或“源代码管理”方式打开指定的网站到Visual Studio集成开发环境中。这种方式下，对话框中选择的文件夹是网站文件夹，而不是网站解决方案（.sln）所在的文件夹。