1.3 第一个ASP.NET网站

1.3.1 ASP.NET网站的基本构建流程

在学习ASP.NET应用程序开发前，需要了解构建一个ASP.NET网站的基本流程。本节将通过一幅具体的流程图说明。

构建一个ASP.NET网站的基本流程如图1.22所示。

图1.22 构建一个ASP.NET网站的基本流程

1.3.2 创建ASP.NET网站并熟悉开发环境

创建ASP.NET网站的步骤如下。

（1）启动Visual Studio 2015集成开发环境后，首先进入“起始页”界面。在菜单栏中选择“文件”/“新建”/“网站”选项，如图1.23所示。

图1.23 选择新建网站

（2）弹出如图1.24所示的“新建网站”对话框。

图1.24 新建网站

（3）选择要使用的．NET框架和“ASP.NET空网站”后，用户可以对所要创建的ASP.NET网站进行命名、选择存放位置的设定，在命名时可以使用用户自定义的名称，也可以使用默认名WebSite1，用户可以单击“浏览”按钮设置网站存放的位置，然后单击“确定”按钮，完成ASP.NET网站的创建，如图1.25所示。

图1.25 创建完成的ASP.NET网站

（4）创建完的ASP.NET网站中只包括一个Web.Config配置文件，选中当前网站名称，单击鼠标右键，在弹出的快捷菜单中选择“添加”/“添加新项”命令，如图1.26所示。

图1.26 选择“添加”/“添加新项”命令

（5）弹出“添加新项”对话框，选择“Web窗体”选项，并输入名称，如图1.27所示。

图1.27 “添加新项”对话框

（6）单击“添加”按钮，即可向当前的ASP.NET网站中添加一个Web网页，添加完Web页面的ASP.NET网站如图1.28所示。

图1.28 添加完Web页面的ASP.NET网站

下面对Visual Studio 2015开发环境中的菜单栏、工具栏、“工具箱”窗口、“属性”窗口、“错误列表”窗口、“输出”窗口等进行介绍。

1．菜单栏

菜单栏显示了所有可用的Visual Studio 2015命令，除了“文件”、“编辑”、“视图”、“窗口”和“帮助”菜单之外，还提供编程专用的功能菜单，如“网站”、“生成”、“调试”、“工具”和“测试”等，如图1.29所示。

图1.29 Visual Studio 2015菜单栏

每个菜单项中都包含若干个菜单命令，分别执行不同的操作，例如，“调试”菜单包括调试网站的各种命令，如“启动调试”、“开始执行”和“新建断点”等，如图1.30所示。

图1.30 “调试”菜单

2．工具栏

为了操作更方便、快捷，菜单项中常用的命令按功能分组分别放入相应的工具栏中。通过工具栏可以快速地访问常用的菜单命令。常用的工具栏有标准工具栏和调试工具栏，下面分别介绍。

（1）标准工具栏包括大多数常用的命令按钮，如新建网站、添加新项、打开文件、保存、全部保存等。标准工具栏如图1.31所示。

图1.31 Visual Studio 2015标准工具栏

（2）调试工具栏包括对应用程序进行调试的快捷按钮，如图1.32所示。

图1.32 Visual Studio 2015调试工具栏

3.“工具箱”窗口

工具箱是Visual Studio 2015的重要工具，每一个开发人员都必须对这个工具非常熟悉。工具箱提供了进行ASP.NET网站开发所必需的控件。通过工具箱，开发人员可以方便地进行可视化的窗体设计，简化了程序设计的工作量，提高了工作效率。根据控件功能的不同，将工具箱划分为12个栏目，如图1.33所示。

图1.33 “工具箱”窗口

单击某个栏目，显示该栏目下的所有控件，如图1.34所示。当需要某个控件时，可以通过双击所需要的控件直接将控件加载到ASP.NET页面中，也可以先单击选择需要的控件，再将其拖动到ASP.NET页面上。“工具箱”窗口中的控件可以通过工具箱右键菜单（图1.35）来控制，例如，实现控件的排序、删除、显示方式等。

图1.34 展开后的“工具箱”窗口

4.“属性”窗口

“属性”窗口是Visual Studio 2015中另一个重要的工具，该窗口中为ASP.NET网站的开发提供了简单的属性修改方式。ASP.NET页面中的各个控件属性都可以由“属性”窗口设置完成。“属性”窗口不仅提供了属性的设置及修改功能，还提供了事件的管理功能。“属性”窗口可以管理控件的事件，方便编程时对事件的处理。

图1.35 工具箱右键菜单

另外，“属性”窗口采用了两种方式管理属性和方法，分别为按分类方式和按字母顺序方式。读者可以根据自己的习惯采用不同的方式。该窗口的下方还有简单的帮助，方便开发人员对控件的属性进行操作和修改，“属性”窗口的左侧是属性名称，相对应的右侧是属性值。“属性”窗口如图1.36所示。

图1.36 “属性”窗口

5.“错误列表”窗口

“错误列表”窗口为代码中的错误提供了即时的提示和可能的解决方法。例如，当某句代码结束时忘记了输入分号时，错误列表中会显示如图1.37所示的错误。错误列表就好像是一个错误提示器，它可以将程序中的错误代码及时地显示给开发人员，并通过提示信息找到相应的错误代码。

图1.37 “错误列表”窗口

6.“输出”窗口

“输出”窗口用于提示项目的生成情况，在实际编程操作中，开发人员会无数次地看到这个窗口，其外观如图1.38所示。“输出”窗口相当于一个记事器，它将程序运行的整个过程以数据的形式进行显示，这样可以让开发者清楚地看到程序各部分的加载与编译过程。

图1.38 “输出”窗口

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.39所示。

图1.39 添加Button控件

代码方法

打开Web窗体的源视图，使用代码添加一个Button控件，例如放置到表格单元格<td>标记中。

        <td>
            <asp:Button ID="Button1" runat="server" Text="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文件夹”命令，在其子菜单中可以看到8个默认的文件夹，选择指定的命令即可，如图1.40所示。

图1.40 ASP.NET默认文件夹

1.3.5 运行应用程序

Visual Studio 2015中有多种方法运行应用程序。可以选择“调试”/“启动调试”命令运行应用程序，如图1.41所示；也可以单击工具栏上的按钮运行程序。

图1.41 在“调试”菜单中选择命令运行应用程序

1.3.6 配置IIS虚拟站点

网站设计完成之后，需要在IE浏览器中进行浏览。IIS作为当今流行的Web服务器之一，提供了强大的Internet和Intranet服务功能，可以发布、测试和维护Web页和Web站点。下面以Windows 7操作系统中的IIS 7.0为例，介绍如何在IIS管理器中配置网站站点。操作步骤如下。

（1）依次打开“控制面板”/“系统和安全”/“管理工具”/“Internet信息服务(IIS)管理器”选项，弹出“Internet信息服务(IIS)管理器”窗口，如图1.42所示。

图1.42 “Internet信息服务(IIS)管理器”窗口

（2）在图1.42所示窗口的左侧列表中选中“网站”/Default Web Site节点，在右侧单击“绑定”超链接，弹出如图1.43所示的“网站绑定”对话框，该对话框中可以添加、编辑、删除和浏览绑定的网站。

图1.43 “网站绑定”对话框

（3）在“网站绑定”对话框中单击“添加”按钮，弹出“添加网站绑定”对话框，该对话框中可以设置要绑定网站的类型、IP地址、端口及主机名等信息，如图1.44所示。

图1.44 “添加网站绑定”对话框

（4）设置完要绑定的网站后，单击“确定”按钮，返回“Internet信息服务(IIS)管理器”窗口，单击该窗口右侧的“基本设置”超链接，弹出“编辑网站”对话框，该对话框中可以设置应用程序池、网站的物理路径等信息，如图1.45所示。

图1.45 “编辑网站”对话框

（5）在“编辑网站”对话框中单击“…”按钮，选择网站路径，然后单击“选择”按钮，弹出“选择应用程序池”对话框，在该对话框的下拉列表中可以选择要使用的．NET版本，如图1.46所示。

图1.46 “选择应用程序池”对话框

（6）依次单击“确定”按钮即可完成IIS虚拟站点的配置。

1.3.7 浏览ASP.NET网页

在“Internet信息服务(IIS)管理器”窗口中，切换到“内容视图”，选中要浏览的．aspx页面，单击鼠标右键，在弹出的快捷菜单中选择“浏览”命令，即可在网页浏览器中浏览该网页，如图1.47所示。

图1.47 浏览ASP.NET网页