1.3 构建第一个ASP.NET网站
视频讲解
1.3.1 ASP.NET网站的基本构建流程
在学习ASP.NET应用程序开发前，需要了解构建一个ASP.NET网站的基本流程。本节将通过一个具体的流程图进行说明。
构建一个ASP.NET网站的基本流程如图1.21所示。
图1.21 构建一个ASP.NET网站的基本流程
1.3.2 创建ASP.NET网站并熟悉开发环境
创建ASP.NET网站的步骤如下。
（1）启动Visual Studio 2017集成开发环境后，首先进入“起始页”界面。在菜单栏中选择“文件”→“新建”→“项目”命令，如图1.22所示。
图1.22 选择新建项目
（2）弹出如图1.23所示的“新建项目”对话框，在该对话框中选择Visual C#下的Web，然后在中间选择创建ASP.NET网站，这里提供了多种创建ASP.NET网站的模板，为了讲解方便，这里选择“先前版本”中的“ASP.NET空网站”。
图1.23 新建网站
（3）用户可以对所要创建的ASP.NET空网站进行命名并设定存放位置，在命名时可以使用用户自定义的名称，也可以使用默认名WebSite1，用户可以单击“浏览”按钮设置网站存放的位置，然后单击“确定”按钮，完成ASP.NET网站的创建，如图1.24所示。
图1.24 创建完成的ASP.NET网站
（4）创建完的ASP.NET网站中只包括两个配置文件和一个Bin引用文件夹，选中当前网站名称，单击鼠标右键，在弹出的快捷菜单中选择“添加”→“添加新项”命令，如图1.25所示。
图1.25 选择“添加”→“添加新项”命令
（5）弹出“添加新项”对话框，选择“Web窗体”，并输入名称，如图1.26所示。
图1.26 “添加新项”对话框
（6）单击“添加”按钮，即可向当前的ASP.NET网站中添加一个Web网页，添加完Web页面的ASP.NET网站如图1.27所示。
图1.27 添加完Web页面的ASP.NET网站
下面对Visual Studio 2017开发环境中的菜单栏、工具栏、“工具箱”窗口、“属性”窗口、“错误列表”窗口、“输出”窗口等进行介绍。
1. 菜单栏
在菜单栏中显示了所有可用的Visual Studio 2017命令，除了“文件”“编辑”“视图”“窗口”“帮助”菜单之外，还提供了编程专用的功能菜单，如“网站”“生成”“调试”“工具”“测试”等，如图1.28所示。
每个菜单项中都包含若干个菜单命令，分别用来执行不同的操作，例如，“调试”菜单中包括调试网站的各种命令，如“开始调试”“开始执行（不调试）”“新建断点”等，如图1.29所示。
图1.28 Visual Studio 2017菜单栏
图1.29 “调试”菜单
2. 工具栏
为了操作更方便、快捷，将菜单项中常用的命令按功能分组分别放入了相应的工具栏中。通过工具栏可以快速访问常用的菜单命令。常用的工具栏有标准工具栏和调试工具栏，下面分别介绍。
（1）标准工具栏中包含大多数常用的命令按钮，如新建项目、打开文件、保存、全部保存等，如图1.30所示。
图1.30 Visual Studio 2017标准工具栏
（2）调试工具栏包含对网站进行调试的快捷按钮，如图1.31所示。
图1.31 Visual Studio 2017调试工具栏
说明
在调试程序或运行程序的过程中，通常可用以下4种快捷键来进行操作。
（1）按F5键实现调试运行程序。
（2）按Ctrl+F5快捷键实现不调试运行程序。
（3）按F11键实现逐语句调试程序。
（4）按F10键实现逐过程调试程序。
3. “工具箱”窗口
工具箱是Visual Studio 2017的重要工具，每一个开发人员都必须对这个工具非常熟悉。工具箱提供了进行ASP.NET网站开发所必需的控件。通过工具箱，开发人员可以方便地进行可视化的窗体设计，简化了程序设计的工作量，提高了工作效率。根据控件功能的不同，将工具箱划分为10个栏目，如图1.32所示。
单击某个栏目，将显示该栏目下的所有控件，如图1.33所示。当需要某个控件时，可以通过双击的方式直接将控件加载到ASP.NET页面中，也可以先单击需要的控件，再将其拖动到ASP.NET页面上。“工具箱”窗口中的控件可以通过工具箱右键菜单（如图1.34所示）来控制，例如，实现控件的排序、删除、显示方式等。
图1.32 “工具箱”窗口
图1.33 展开后的“工具箱”窗口
图1.34 工具箱右键菜单
4. “属性”窗口
“属性”窗口是Visual Studio 2017中另一个重要的工具，该窗口为ASP.NET网站的开发提供了简单的属性修改功能。对ASP.NET页面中的各个控件属性的修改都可以通过“属性”窗口完成。“属性”窗口不仅提供了属性的设置及修改功能，还提供了事件的管理功能。通过“属性”窗口可以管理控件的事件，方便编程时对事件的处理。
另外，“属性”窗口采用了两种方式管理属性和方法，分别为按分类方式和按字母顺序方式。读者可以根据自己的习惯采用不同的方式。该窗口的下方还有简单的帮助，方便开发人员对控件的属性进行操作和修改，“属性”窗口的左侧是属性名称，相对应的右侧是属性值。“属性”窗口如图1.35所示。
5. “错误列表”窗口
“错误列表”窗口为代码中的错误提供了即时的提示和可能的解决方法。例如，当某句代码结束时忘记输入分号，那么“错误列表”中会显示如图1.36所示的提示。“错误列表”就好像是一个错误提示器，它可以将程序中的错误代码及时地显示给开发人员，并通过提示信息找到相应的错误代码。
图1.35 “属性”窗口
图1.36 “错误列表”窗口
说明
双击“错误列表”中的某项，Visual Studio 2017开发平台会自动定位到发生错误的语句。
6. “输出”窗口
“输出”窗口用于提示项目的生成情况，在实际编程操作中，开发人员会无数次地看到这个窗口，其外观如图1.37所示。“输出”窗口相当于一个记事器，它将程序运行的整个过程序以数据的形式进行显示，这样可以让开发者清楚地看到程序各部分的加载与编译过程。
图1.37 “输出”窗口
1.3.3 设计Web页面
1. 布局页面
通过两种方法可以实现布局Web页面，一个是用Table表格布局Web窗体，另一个是用CSS+DIV布局Web窗体。使用Table表格布局Web窗体需要在Web窗体中添加一个html格式表格，然后根据位置的需要，向表格中添加相关文字信息或服务器控件。使用CSS+DIV布局Web窗体需要通过CSS样式控制Web窗体中的文字信息或服务器控件的位置，这需要精通CSS样式，在此不做详细介绍。
2. 添加服务器控件
服务器控件既可以通过拖曳的方式添加，也可以通过ASP.NET网页代码添加。例如，通过这两个方法添加一个Button按钮。
- ☑ 拖曳方法
首先打开工具箱，在“标准”栏中找到Button控件选项，然后按住鼠标左键，将Button按钮拖动到Web窗体中指定位置或表格单元格中，最后放开鼠标左键即可，如图1.38所示。
图1.38 添加Button控件
- ☑ 代码方法
打开Web窗体的源视图，将Button按钮放置到指定位置，例如，放置到表格单元格的<td>标记中。
1.3.4 添加ASP.NET文件夹
ASP.NET应用程序包含7个默认文件夹，分别为Bin文件夹、App_Code文件夹、App_GlobalResources文件夹、App_LocalResources文件夹、App_WebReferences文件夹、App_Browsers文件夹和“主题”文件夹。每个文件夹都存放了ASP.NET应用程序不同类型的资源，具体说明如表1.2所示。
表1.2 ASP.NET应用程序文件夹说明
添加ASP.NET默认文件夹的方法是：在解决方案资源管理器中，选中方案名称并单击鼠标右键，在弹出的快捷菜单中选择“添加ASP.NET文件夹”命令，在其子菜单中可以看到7个默认的文件夹，选择指定的命令即可，如图1.39所示。
图1.39 ASP.NET默认文件夹
1.3.5 运行应用程序
Visual Studio 2017中有多种方法可运行应用程序。可以选择菜单栏中的“调试”→“开始调试”命令运行应用程序，如图1.40所示；也可以单击工具栏上的
按钮运行程序。
图1.40 通过“调试”菜单运行应用程序