1 走进ASP.NET 3.5
ASP.NET 3.5是基于.NET 3.5框架的动态页面开发技术,秉承了ASP.NET 2.0的组件开发技术,提供Web开发所需要的大部分组件,如登录、验证、数据源管理、数据显示、网页导航设计等。开发人员使用ASP.NET 3.5,不仅可以开发出美观的界面,还可以通过后台技术,实现数据管理、动态页面更新等。
本章主要介绍最基本的Web开发技术,包括页面的前台设计和后台实现、服务器控件的使用和动态响应等,通过本章的学习,可以开发简单的网站,实现网站的前后台交互和基本界面设计。
1.1 ASP.NET 3.5概述
本节从基本的网站设计入手,介绍如何使用ASP.NET 3.5方便快捷地开发网站。主要从全局入手,介绍网站设计的一些注意事项和基本配置。
1.1.1 ASP.NET 3.5——动态页面开发利器
ASP.NET 3.5是基于C#开发语言的一种动态页面开发技术,因为其提供了一系列网站开发所需要的组件,开发人员只需轻松拖曳就可以完成界面的设计和实现,所以被称为动态页面开发利器。
评判一种开发技术,需要从开发速度和运行效率来考虑。因为ASP.NET 3.5提供丰富的组件,所以其开发速度是普通Web开发技术无法比拟的,在ASP.NET 3.5中,共提供了9类组件,如图1.1所示。最后的“常规”组件为空,不算入其中。
图1.1 ASP.NET 3.5提供的组件
其中各类组件的基本功能如下所示。
○ 标准:提供页面最基本的服务器控件,如按钮、标签、文本框等,这是常用的页面控件。
○ 数据:包括数据显示控件和数据源控件,数据显示控件就是常用的网格控件GridView等,数据源控件就是方便读取数据源的控件,如读取SQL Server数据库的SqlDataSource、支持LINQ查询的LinqDataSource。
○ 验证:用来检查页面上用户的输入。比如有些文本框必须填写、两个密码是否相等的检查。
○ 导航:用来实现页面上的各种导航组件。如常见的菜单、目录树等。
○ 登录:常用的注册、登录、密码找回等控件,方便用户的注册和管理。
○ WebParts:常称为Web部件,可在网页上设计不同的区域,用户也可以自定义网页的区域,效果类似于现在比较流行的Blog。
○ AJAX Extensions:最新的AJAX组件,可支持动态局部刷新页面,还可以从微软的AJAX网站上,下载更多的AJAX组件,实现最新的Web 2.0功能。
○ 报表:封装了最流行的水晶报表组件,可方便地定制各种财务报表。
○ HTML:最普通而又最常用的客户端组件,一般只出现在客户端,而不与服务器交互,如果要与服务器交互,尽量使用标准类中的组件,因为在ASP.NET 3.5中,削弱了HTML控件的服务器处理功能,所以尽量把HTML控件和标准控件区分开。
说明
HTML控件就是常说的客户端控件,标准控件就是常说的服务器端控件。客户端控件通常不与服务器交互,这样可以提高页面运行效率。
1.1.2 创建网站
前面介绍过,网站需要有一个网站地址,这样方便用户查找。本章从一个网站的地址和类型入手,学习创建网站的过程。
打开VS2008,单击“文件|新建|网站”菜单,打开新建网站窗口,如图1.2所示。其中图中标注的两部分需要特别注意:一是ASP.NET 3.5提供的网站模板,另一个是网站的虚拟地址。
图1.2 新建网站窗口
网站模板是一些已经加载好程序集的模板,如果用户创建一个“ASP.NET Web服务”,则会自动生成一个Web服务文件,并且在web.config文件中,加载Web服务所需要的基本程序集。
网站虚拟地址就是用户在浏览器中浏览网站需要输入的地址,本例为“localhost/WebSite”。在浏览器中如果要访问百度网站,只需要输入“www.baidu.com”就可以,如果要访问本例创建的网站,就输入“localhost/WebSite”。
提示
localhost表示服务器在本机。
在图1.2中,还有两个地方需要注意:网站所使用的.NET框架和网站的后台语言。VS2008中提供了3种框架版本:.NET 2.0、.NET 3.0和.NET 3.5,通过图1.2右上方的下拉框选择具体版本。在图的左下方,还提供一个语言下拉框,提供两种网站开发语言:Visual C#和Visual Basic。本书所有实例都选择Visual C#完成。
配置好网站的框架、开发语言和地址后,单击“确定”按钮,就可以创建一个新的网站了。
1.1.3 设计网站
设计网站,包括配置网站的各种属性,管理网站的各个文件夹,设计网站需要的数据等。因为目前学习的网站都比较简单,所以本小节只简单的介绍设计网站所需要的4个方面。
(1)网站安全的设计。
ASP.NET提供了一个可视化工具来管理网站的安全。单击“网站|ASP.NET配置”菜单,会打开一个“应用程序管理”,如图1.3所示。其中“安全”链接就是用来设置网站的相关安全属性,包括网站的用户管理、角色管理和管理规则。
图1.3 应用程序管理
提示
如果要正确使用“安全”链接,必须已经配置好web.config中有关“数据提供者”的信息,这个会在后面介绍Web开发详细知识的时候涉及。
(2)网站个性的设计。
网站个性化设计主要就是Profile的设计,用来保存用户的一些个人信息,如当前用户的购物篮,再如为你自己的Blog定义的样式。这些是Web 2.0时代的特征,即用户个性的体现。要使网站支持个性设计,必须在web.config中启用profile属性“<profile enabled=true”/>。具体的使用会在第18章介绍。
(3)网站数据库的设计。
一个完整的网站,需要保存网站需要的一些数据,如当前网站的用户、当前论坛的所有帖子、当前Blog的所有文章,这些数据都需要一个地方存储。ASP.NET 3.5提供了两类数据存储方案:数据库和文件。其中数据库包括SQL Server和Access,文件主要是XML文件。ASP.NET 3.5中也提供了访问这些数据所需要的控件和类库,开发人员可以非常方便的实现各种数据操作。
(4)网站布局(主题)的设计。
从ASP.NET 2.0开始,就支持母版页和主题的设计,ASP.NET 3.5修订了以前版本中的一些错误,同时提高了母版页的一些嵌套调用功能。因为ASP.NET 3.5提供了母版和主题的模板,开发人员只需要添加简单内容,就可以为网站设计统一的布局,并允许用户自定义各种主题样式,这些详细的内容会在第15~17章介绍。
1.1.4 网站的前台和后台
新网站创建后,默认只有3个文件:web.config、Default.aspx和Default.aspx.cs。其中web.config是网站必需的配置文件,此处不讲,Default.aspx是网站的前台文件,Default.aspx.cs是网站的后台文件。
前台文件其实就是网页的界面设计,一般用于呈现各种网页布局,后台文件用来处理用户与服务器的各种交互,可以处理非常复杂的功能,如读取数据、保存用户的操作等。
1.前台文件
打开“Default.aspx”文件,如图1.4所示,主要分为3部分。
图1.4 前台文件
(1)设置当前网页的开发语言和关联的后台文件。“Language”属性用来设置开发语言是“C#”,“CodeFile”用来设置与当前前台文件关联的后台文件是“Default.aspx.cs ”。
(2)前台文件的3种模式:设计、拆分和源。在设计模式下,以所见即所得的样式,显示当前页面的设计,即程序员看到的样式就是将来网页的最终样式。在源模式下,就是图1.4的显示样式,显示的是当前页面的HTML源代码。在拆分模式下,当前界面被分为上下两部分:一部分是“设计”模式的内容,一部分是“源”模式的内容,这种可以在修改源代码后,立刻显示页面最终布局。
(3)页面的HTML源代码,可以看到被“<html></html>”封装的内容,其中会包含一个窗体“form”,默认名为“form1”,开发人员如果要在页面中添加控件和内容,必须添加在此窗体内。
提示
前台文件,不一定必须是.aspx扩展名的文件,可以是.html扩展名。
2.后台文件
打开“Default.aspx.cs”文件,如图1.5所示,主要包括3部分。
图1.5 后台文件
(1)命名空间的引用。.NET 3.5提供了多个命名空间,用来分类封装一些Web开发的类库,开发人员可以直接调用这些类库中的方法,通过几行代码就实现复杂的功能。应用命名空间使用“using”关键字,分号结束。其中“System”命名空间是最基础的类库,所有的页面和窗体都必须先引用它。
(2)当前页面所属的类。默认类名为“ Default”,可以看到在类定义时,用到了关键字“partial”,其表示这个类定义是整个类的一部分,也就是在其他地方还有此类的其他定义。其他定义被隐藏起来,主要是对页面中相关控件的一些定义,那些定义自动生成,不需要开发人员关注。
(3)默认生成的页面事件“Page Load”,此事件发生在页面被加载的时候,即用户打开页面的时候。所有的事件都必须有两个参数:“sender”和“e”。sender表示事件的发起者,e用来设置事件中需要的一些参数。
用户看到的是前台文件,操作前台文件后,才会调用后台文件的内容,如果当前的界面只是用来显示一些内容,则后台文件不需要定义。如果要调用其他一些类库,如要使用XML文件的类,只需要在“1”标记的地方,使用“using”引用相关的命名空间即可。
1.2 ASP.NET 3.5动态网页剖析
既然是动态网页,那就需要实现网页和用户交互的功能,这就是常说的“事件”处理。事件是一件事情的发生过程,触发事件就是用户操作网页引起的网页和服务器的交互。因为网页一般分为前台和后台,所以本节介绍事件时,分别介绍了前台事件和后台事件。
1.2.1 前台客户端的事件处理
客户端的事件一般在客户端就可以完成,不需要与服务器进行交互,这样就能提高页面的响应能力。要使用客户端事件,就需要使用客户端控件,这些控件包含在工具箱的HTML组件中。本节通过一个实例来演示前台客户端的事件处理。
新建一个测试网站,在Default.aspx前台文件中,设计如下所示的代码。在界面中添加了两个HTML控件:文本框和按钮。其中为按钮添加了单击事件“onclick”,事件必须调用一个JavaScript方法。
1. <html xmlns="http://www.w3.org/1999/xhtml"> 2. <head runat="server"> 3. <title>无标题页</title> 4. <script type="text/javascript"> 5. function test() 6. { 7. alert("您输入的是:"+document.getElementById("Text1").value); 8. } 9. </script> 10. </head> 11. <body> 12. <form id="form1"runat="server"> 13. <div> 14. <input id="Text1"type="text"/> 15. <input id="Button1"type="button"value="提交"onclick="test()"/> 16. </div> 17. </form> 18. </body> 19.</html>
为了测试用户单击后是否向服务器返回数据,需要在后台文件的“Page Load”事件中,添加一个测试项,显示当前的时间,代码如下所示。
1. protected void Page_Load(object sender,EventArgs e) 2. { 3. //显示当前时间 4. Response.Write(DateTime.Now.ToString()); 5. }
运行这个网页,效果如图1.6所示。在文本框中输入内容,单击“提交”按钮,如图1.7所示,这个时候可以看到时间并没有发生变化,即没有触发后台事件,没有与服务器交互。
图1.6 客户端事件实例效果
图1.7 客户端按钮单击后效果
1.2.2 后台服务器端的事件处理
后台服务器端的事件,就会与服务器进行交互。这种事件一般通过服务器控件完成,除HTML控件外,其他的各类组件都是服务器控件,常用的就是“标准”控件组的内容。本节通过对上面实例的扩展,实现一个后台事件的处理。
在Default.aspx下设计与图1.6相似的布局,不同的是前面使用的是HTML控件,本例使用服务器端控件,代码如下所示。这里按钮事件同样是使用“onclick”属性指定,不同的是指定的内容不再是一个JavaScript方法,而是存在于后台文件中的一个事件“Button1 Click”。
1. <html xmlns="http://www.w3.org/1999/xhtml"> 2. <head runat="server"> 3. <title>无标题页</title> 4. </head> 5. <body> 6. <form id="form1"runat="server"> 7. <div> 8. 9. <asp:TextBox ID="TextBox1"runat="server"></asp:TextBox> 10. <asp:Button ID="Button1"runat="server"onclick="Button1_Click"Text="提交"/> 11. 12. </div> 13. </form> 14. </body> 15. </html>
事件“Button1 Click”的代码如下所示,同样是显示一个提示窗口,提示用户的输入内容。
1. protected void Button1_Click(object sender,EventArgs e) 2. { 3. Response.Write("<script language='javascript'> alert('您输入的是:"+ TextBox1.Text+"')</script>"); 4. }
为了明显的查看是否与服务器进行了交互,还要在后台文件的“Page Load”事件中,显示当前的时间,代码参考上一小节的介绍。
运行当前网页,默认运行效果如图1.8所示,这个与图1.6相似。在文本框内输入内容,然后单击“提交”按钮,此时可以看到,时间发生了变化,如图1.9所示。因为只有与服务器交互,时间才会发生变化,从此处可以看出,后台事件处理一定会与服务器进行交互。
图1.8 服务器端事件实例效果
图1.9 服务器端按钮单击后效果
1.2.3 网站处理网页的顺序和原理
既然网页分为前台和后台,那么就会有一个处理顺序的问题,况且前台和后台也不仅仅是只有一个事件。本节介绍一个网页的完整处理过程,其实就是一个事件处理的顺序,整个事件的完整处理过程,就是一个页面的生命周期。
网页的生命周期主要分为10步,也就是10个需要处理的事件。从用户打开网页开始,到网页从服务器获取数据,再到网页的完全显示,总共经历10个事件,下面有序的介绍这10个事件,介绍顺序就是网页的处理顺序。
(1)初始化对象:页面的控件(包括页面本身)的初始状态。通过在后台文件的构造函数中声名所有对象完成,声明对象后,页面就知道要创建多少对象,以及这些对象的类型。页面通过“OnInit”事件完成此操作。
(2)导入ViewState数据:在页面初始化事件后,所有控件就可以通过其ID被程序访问。在LoadViewState这个事件中,所有的控件将获得它们的第一个属性:ViewState属性。这个属性最终将被返回给服务器,以判断这个页面是已经被用户访问完毕,还是仍在被用户访问。其实就是一个缓存控件的功能,在被服务器返回数据的页面中,查看其源代码可以看到一个名为“ VIEWSTATE”的隐藏控件。
(3)用LoadPostData处理Postback数据:在页面创建的这个阶段,服务器对页面上的控件所提交的数据进行处理。当一个页面被提交时,框架就在每个控件上执行一个IPostBackDataHandler接口操作。然后页面执行LoadPostData事件解析页面,找到每个执行了IpostBackDataHandler接口操作的控件,并用postback数据更新这些控件状态。
(4)导入对象:导入对象是在Load事件中,在这里所有对象都被实例化了。所有的对象第一次被布置在DOM页面里。这样,对象就可以从客户端获得各种属性,如宽度、高度、值、可见性等。
(5)RaisePostBackChanged事件:这个事件发生在所有的控件执行了IPostBackDataHandler接口操作,并被正确的postback数据更新后。在这一步中,每个控件都被赋予一个布尔值,来标志该控件有没有被更新。
(6)处理客户端PostBack事件:由postback(回发)数据在服务器端引起的事件处理完后,产生postback数据的对象,就会执行RaisePostBackEvent事件。
(7)预先呈递对象:可以改变对象,并将改变后的对象保存,此时就是这一步——预先呈递对象。可以在这一步对控件的属性、控件树等结构作出最后的修改。在这一步之后,对对象的所有修改将最终被锁定。此步通过OnPreRender事件来完成。
(8)保存ViewState:所有对页面控件的修改完成后viewstate就被保存了。所有对象的状态数据还是保留在一个隐藏控件里,呈现页面的对象状态数据,也是从这一步中获取。在SaveViewState事件中,其值被保存到viewstate对象中,然而这时不允许再在页面对控件进行修改。
(9)呈递给页面:给浏览器输出页面的时候触发的是Render事件。在Render事件中,页面调用其中的对象并将它们呈递给浏览器。这一步仍然可以做一些修改动作,不过已经与服务器无关,只是客户端的一些显示上的变化而已。
(10)销毁对象:服务器把页面呈现给浏览器后,所有的对象都应该被销毁,这通过Dispose事件完成。此时应该销毁所有在建立这个页面时创建的对象。此步骤中,所有的处理已经完毕,所以销毁任何对象都不会产生错误,包括销毁页面对象。
承上启下
■ 学完本章后,读者需要回答:
1.动态网页是如何“动”起来的?
2.作为一种开发动态网页的技术ASP.NET有什么优点?
3.如何创建网站?
4.ASPX页面由哪几部分元素构成?
5.网页的前台和后台分别指什么?
6.如何利用事件对ASPX页面作出动态响应?
7.一个网页的生命周期有多少个事件?
■ 在下一章中,读者将会了解:
1.类和对象的概念。
2.在C#中实现类。
3.用VS.NET管理类。
4.类的属性和方法详述。
5.类的继承和重载机制。
6.接口的相关概念和定义。