创建一个 HelloWorld Web应用程序

创建一个 HelloWorld  Web应用程序

2013-11-19

一、概述

    本实验将创建一个经典的“Hello，World”Web应用程序项目作来全面展示ASP.NET Web应用程序的开发步骤与项目的文件体系结构。并对其中一些地方进行解释性说明。

二、基本流程

1.新建解决方案

2.添加用于登录的网页login.aspx和展示helloworld的网页default.aspx。

3.添加控件并加入事件处理代码。

4.编译运行。

三、具体操作步骤

 1. 使用Visual Studio 2010创建一个空的项目解决方案

 在Microsoft Visual Studio 2010集成开发环境主窗体的工具栏中依次选择“File”→“New”→“Project”选项。 在弹出的“New Project”窗体的“Installed Templates”列表中选择“Other ProjectTypes”节点并展开，选中“Visual Studio Solutions”列表，并在模板列表中选择“Blank Solution”模板。在“Name”文本框中输入解决方案的名称，在“Location”文本框中选择解决方案的存储路径，其他选项采用默认设置，单击“OK”按钮，如图1-1所示。

 

该解决方案目前不包含任何项目和文件，可以说就是一个没有任何实际功能的空架子。

2.在项目解决方案里面添加一个ASP.NET 空Web应用程序项目

  在解决方案资源管理器里选中自己解决方案，右击鼠标，在弹出的快捷菜单里选择“Add”→“New Project”命令。然后在弹出的窗口中选择web结点，在右边的窗口中选择空web应用程序，填写好名称和位置，点击确定。如图所示：

 

这样，一个完整的ASP.NET Web应用程序项目便创建了，资源管理器会多出一个项目文件，如图所示：

 

3.创建“Hello，World”Web页面

（1）添加Login.aspx页面

     用鼠标右击“HelloWorld”项目，在弹出的快捷菜单里选择“添加”→“新项”选项，在弹出的窗口中选择web窗体，填好名称‘login’点击添加，如图所示：

 

（2）打开login.aspx页面，切换到拆分模式。然后在工具箱中找到textbox控件，将其拖到设计窗口中。在它的属性窗口中将ID设为tb_name，width设为166。

     

（3）以同样的方式添加一个button按钮，将ID设为bt_login，text设为‘登录’。整体效果如图所示：

     

（4）为登录按钮添加单击事件

     用鼠标双击Login.aspx页面的“登录”控件，为它添加一个事件bt_login_Click，打开Login.aspx.cs文件，在bt_Login_Click事件里添加代码，如下所示：

    

    //将txt_UserName控件的内容存储到Session

     if (this.tb_name.Text == String.Empty)

        {

          this.Session["name"] = "World!";

        }

      else

         {

           this.Session["name"] = this.tb_name.Text.ToString();

         }

       //将页面转向到Default.aspx

       Response.Redirect("Default.aspx");

4.添加Default.aspx页面

   有上面的登录页面之后，还需要创建一个Default.aspx页面将系统所问候的信息给用户显示出来。

步骤如下：

1) 创建一个Default.aspx页面（步骤同3），并在Default.aspx页面里添加一个Label控件，该控件用于向我们显示友好的问候语。设置Lable控件ID为lb_content。

2) 创建好lb_content控件之后，接下来就是在Default.aspx.cs文件中编写代码让lb_content控件将友好的问候语显示出来，如下所示：

   在page_load方法中添加：

   //将问候语赋给lb_content控件

   this.lb_content.Text = "Hello,"+Session["UserName"].ToString();

5.编译并运行

（1） 设置项目起始页

       当一个启动项目中有多个Web页面的时候，就需要设置其中的一个页面为项目的起始页。设置方法：选择要设置的Web页面并右击鼠标，在弹出的快捷菜单里选择“Set as Start Page”命令。在本项目中，将Login.aspx设置为项目的起始页。值得注意的是，Visual Studio总是将Default.aspx默认为起始页，如果不设置，系统将默认为Default.aspx页面。

（2） 编译运行“Hello，World”

      按“Ctrl+F5”键就可以开始运行该Web项目了。

6.运行结果

 

 

四、结束语

本实验通过创建一个hello worldweb应用程序，旨在对ASP.NET有一个初步的认识。了解开发的一般流程和步骤。下面对实验中的一些地方进行一下说明：

1.ASP.NET Web 应用程序与ASP.NET 空web应用程序

    建ASP.NET Web应用程序项目时，我们选择了“ASP.NET 空web应用程序”模板进行创建。其实，还可以通过另外一种模板，即“ASP.NET Web 应用程序”来创建。

接下来，就来看看两者有什么区别。

1) 使用‘ASP.NET 空web应用程序’模板创建的项目是一个一个非常干净的项目，只拥有一个Web.config文件。它基本上就是一个空架子，没有任何可执行的文件。

2) 使用“ASP.NET Web 应用程序”模板创建ASP.NET Web应用程序项目时，你会发现所创建的ASP.NET Web应用程序项目在其中预先生成了一些目录和文件。

 

它包含了一个Site.Master母版页文件，该文件提供了网站总的布局（含有页眉、页脚等），在Styles文件夹里使用了一个含有所有样式的CSS样式文件Site.css。在Scripts文件夹里面内含了jQuery文件（ASP.NET AJAX可以通过脚本管理控件来提供）。在根目录中，它还包含了基于母版页的“Default.aspx”和“About.aspx”网页。除此之外，还在Account文件夹内包含并实现了基于表单的认证系统的若干网页，可用来登录、注册和改变用户的密码。在这里，你不用编写任何代码或配置文件就可以运行这个项目，得到一个运行正常的网站。

2.一个完整的ASP.NET Web窗体由.aspx、.aspx.cs与.aspx.designer.cs三个文件组成，现在就以Login.aspx页面为例，大致了解一下它们各自的作用，以及它们之间是如何协作运行的。

1) Login.aspx文件。

习惯上把它称为页面文件，它存储的是页面设计描述代码，即Web窗体的HTML代码，我们就是通过它来为用户提供友好的操作界面。

2) Login.aspx.cs文件。

   它是C#代码文件，主要存储的是C#代码，比如与数据库相关的查询、更新、删除操作，还有各个页面按钮的点击事件等。

3) Login.aspx.designer.cs文件。

页面设计代码文件通常存储的是一些页面控件的配置信息，就是注册控件页面。这是页面设计器生成的代码文件，作用是对页面上的控件进行初始化。

4）三者之间的联系。

    它们就是通过Login.aspx文件的“<%@ Page Language="C#" AutoEvent Wireup="true"CodeBehind="Login.aspx.cs" Inherits="HelloWorld.Login" %>”语句将三者有效地联系起来的。其中，Language 用于指定绑定代码的语言类型，CodeBehind 用于指定绑定的.aspx.cs文件，Inherits用于指定绑定的.aspx.designer.cs文件。