
2.3 构建ASP.NET窗体
安装、学习Visual Studio 2015的核心目的是编写ASP.NET程序,ASP.NET的主要功能是制作网页和编写应用程序,本节将详细讲解ASP.NET窗体的组成。
2.3.1 构建Web页面
用Visual Studio 2015构建Web页面时,首先启动Visual Studio 2015,依次选择“文件|新建|项目”命令,出现如图2-13所示的界面。

图2-13 ASP.NET新建项目界面
1.选择.NET Framework版本
图2-13所示页面的中上部分用于选择.NET Framework的版本,一般情况下,下拉列表框中包含了Visual Studio 2015安装在计算机中所有的.NET Framework版本。在实际使用时,一般不用选择此项,使用系统默认即可。
2.选择项目模板
在图2-13所示界面左侧的模板中选择“Web”,在中间选择“ASP.NET Web应用程序”,界面下部填写项目名称并选择存储位置。单击“确定”按钮,则出现如图2-14所示的页面,所示页面的中间部分是已经安装的模板,常用的模板为“Empty”“Web Forms”“MVC”。

图2-14 ASP.NET选择项目模板界面
1)Empty:空Web网站。用于创建一个空ASP.NET网站,但不创建任何文件夹结构。
2)Web Forms:用于建立一个ASP.NET网站,建立时将自动创建相应的文件夹及必要的文件。
3)MVC:用于建立一个MVC类型的Web项目,MVC模式将在后面章节讲解。
3.新建Web页面
在图2-14所示界面中选择“Empty”,单击“确定”按钮,则会建立一个空的Web项目,项目中仅存在Web项目中的最基本结构,如图2-15所示。界面中右侧的“解决方案资源管理器”中列出了该Web项目的基本结构。在这个例子中,解决方案名称和项目名称都为“WebApplication4”。

图2-15 资源管理器中显示的项目结构
在项目名称“WebApplication4”上单击右键,弹出右键菜单,选择“添加(D)”,在下一级菜单中选择“新建项(W)”,弹出如图2-16所示界面。选择“Web窗体”,在界面下部填入Web窗体的名称“Default.aspx”,单击“添加”按钮。则一个Web窗体被成功加入到项目当中,如图2-17所示。

图2-16 添加新项目窗口

图2-17 添加Web窗体到项目中
2.3.2 Web页面结构
上述Web页面Default.aspx建立成功之后,双击该页面,出现如图2-18所示的界面。
1.@Page页面指令
@Page页面指令用于网站的页面设置,该指令只能在Web窗体中使用,每个.aspx文件只能包含一条@Page指令,每条@Page指令只能定义一个Language属性,如表2-2所示。

图2-18 ASP.NET页面内容
表2-2 @Page页面指令

2.<!DOCTYPE>声明
<!DOCTYPE>声明位于<html>标签之前,其功能是告知浏览器文档所使用的HTML或XHTML规范。
2.3.3 Web页面代码存在形式
ASP.NET代码共有三种存在形式,即嵌入代码方式、单一文件方式和代码分离方式。嵌入代码方式是将ASP.NET代码放在<%...%>之间,HTML代码与ASP.NET代码完全混合在一个文件中,如图2-19所示;单一文件方式是指ASP.NET代码与HTML代码混合在一个文件中,但ASP.NET代码放在HTML代码前面,用<Script>和</Script>标记,如图2-20所示;代码分离方式是指ASP.NET的代码与HTML界面代码分别用两个文件存储,如图2-21所示。

图2-19 嵌入代码方式

图2-20 单一文件方式

图2-21 代码分离方式
代码分离方式是Visual Studio2015建立新的Web窗体时的默认生成方式。
2.3.4 ASP.NET代码编写
ASP.NET窗体共有设计视图、源视图和拆分视图三种视图方式,编程时在设计视图中添加控件、设计页面风格,然后在设计视图的控件上双击,代码编辑过程如图2-22所示,在光标处输入程序代码即可完成该控件功能的编写工作。

图2-22 ASP.NET代码编辑过程
ASP.NET代码编写窗口如图2-23所示。
双击控件后,进入代码编辑窗口,以按钮Button1为例,将出现如下代码。


图2-23 ASP.NET代码编写窗口
第一行是每个事件都将给出的内容,具体说明如下。
1)protected是类的访问修饰符。ASP.NET共有四种修饰符:private、protected、internal和public。protected的访问范围限定于它所属的类或从该类派生的类。
2)void表示该事件函数的执行无返回值。
3)Button1_Click()是事件名称,ASP.NET的事件名称由控件名称Button1和事件动作Click连接而成。
4)(object sender,EventArgs e),sender参数传递指向引发事件类的实例引用,而e是EventArgs类型的参数,包含了事件所携带的信息。也就是说,如果单击按钮Button1,那么sender就是Button1,e则是按钮Button1所携带的信息。举例说来,当单击一个按钮,程序怎么知道应该用哪个函数来处理这个动作呢?EventHandler会告诉程序:Button1(sender)被单击了,请调用对应的处理函数。当然这个函数是谁,这个函数要做什么,是由程序员自己在该行语句下面编写的按钮事件决定,例如,处理代码为:TextBox1.Text="我爱我的祖国!"。