整套教学课件《ASP.NET网站开发实例教程》

1、ASP.NET 网站开发实例教程第1章搭建ASP.NET网站的运行环境 与开发环境 教学环节教学环节【教学导航教学导航 】 1【操作准备操作准备】 2【操作演练操作演练 】 3【技术提升技术提升 】 4【归纳总结归纳总结 】 6【知识集成知识集成 】5【教学导航教学导航】教学目标教学目标（1 1）学会安装与配置）学会安装与配置IISIIS管理器，搭建管理器，搭建ASP.NETASP.NET网站的运行网站的运行环境环境（2 2）学会安装与配置）学会安装与配置Visual Studio 2008Visual Studio 2008，搭建，搭建ASP.NETASP.NET网网站的开发环境站的开发环境

2、（3 3）学会创建简单的）学会创建简单的WebWeb网站网站（4 4）认识）认识ASP.NETASP.NET文档的内容，了解文档的内容，了解ASP.NETASP.NET文档的结构文档的结构（5 5）体验）体验ASP.NETASP.NET网站的运行网站的运行（6 6）了解）了解ASP.NETASP.NET的运行机制和的运行机制和ASP.NETASP.NET的文件类型的文件类型 课时建议课时建议 4 4课时课时【操作演练操作演练 】【任务描述任务描述】【任务任务1-1】安装与配置安装与配置IIS管理器管理器 正确安装与配置正确安装与配置IISIIS管理器，搭建管理器，搭建WebWeb应用程序的运行

3、环境。应用程序的运行环境。【任务实施任务实施】 （1 1）单击）单击Windows Server 2008Windows Server 2008的的【开始开始】，指向菜单，指向菜单【管理工管理工具具】，然后单击菜单命令，然后单击菜单命令【服务器管理器服务器管理器】，打开如图，打开如图1-11-1所示所示【服服务器管理器务器管理器】窗口。在该窗口的右侧分别罗列了服务器摘要、角色摘窗口。在该窗口的右侧分别罗列了服务器摘要、角色摘要、功能摘要以及资源支持等内容。要、功能摘要以及资源支持等内容。 【操作演练操作演练 】【任务实施任务实施】【任务任务1-1】安装与配置安装与配置IIS管理器管理器 （2

4、2）在）在【服务器管理器服务器管理器】窗口的窗口的“角色摘要角色摘要”一栏中，显示了已一栏中，显示了已经安装的角色。在经安装的角色。在【服务器管理器服务器管理器】窗口左侧的单击窗口左侧的单击【角色角色】列表项，列表项，如图如图1-31-3所示所示。 （3 3）在）在【角色摘要角色摘要】中，单击中，单击【添加角色添加角色】按钮，打开按钮，打开【添加角添加角色向导色向导】的的“开始之前开始之前”界面，如图界面，如图1-41-4所示。所示。（4 4）单击）单击【下一步下一步】按钮，进入按钮，进入“选择服务器角色选择服务器角色”界面，选中界面，选中“WebWeb服务器（服务器（IISIIS）”复选框节

5、点，如图复选框节点，如图1-61-6所示。所示。 （5 5）单击）单击【下一步下一步】按钮，进入按钮，进入“WebWeb服务器（服务器（IISIIS）”界面，该界面，该界面对界面对ISSISS作了概括性的介绍，如图作了概括性的介绍，如图1-71-7所示。所示。 【操作演练操作演练 】【任务实施任务实施】【任务任务1-1】安装与配置安装与配置IIS管理器管理器 （6 6）单击）单击【下一步下一步】按钮，进入按钮，进入“选择角色服务选择角色服务”界面。在该界界面。在该界面中可以选取一些需要安装的角色服务。面中可以选取一些需要安装的角色服务。 （7 7）单击）单击【下一步下一步】，进入，进入“确认安

6、装选择确认安装选择”界面，如图界面，如图1-91-9所示。所示。（8 8）单击）单击【安装安装】按钮，进入按钮，进入“安装进度安装进度”界面，并开始安装界面，并开始安装IIS IIS 7.07.0，如图，如图1-101-10所示。所示。 （9 9）等待安装完成后，安装向导自动进入）等待安装完成后，安装向导自动进入“安装结果安装结果”界面。界面。 （1010）单击）单击【关闭关闭】按钮，关闭按钮，关闭【添加角色向导添加角色向导】对话框，返回到对话框，返回到【服务器管理器服务器管理器】窗口。窗口。 【操作演练操作演练 】【任务描述任务描述】【任务任务1-2】安装与配置安装与配置Visual Stu

7、dio 2008 （1 1）安装）安装Visual Studio 2008Visual Studio 2008 （2 2）配置）配置Visual Studio 2008Visual Studio 2008【任务实施任务实施】1 1安装安装Visual Studio 2008Visual Studio 2008 要在要在Visual Studio.NETVisual Studio.NET集成开发环境中开发集成开发环境中开发ASP.NETASP.NET应用程序，必应用程序，必须先安装须先安装Visual Studio.NETVisual Studio.NET。下面介绍在。下面介绍在Windows

8、Server 2008Windows Server 2008系统系统中安装中安装Visual Studio 2008Visual Studio 2008的操作步骤。的操作步骤。 【操作演练操作演练 】【任务实施任务实施】【任务任务1-2】安装与配置安装与配置Visual Studio 2008 （1 1）准备）准备Visual Studio 2008Visual Studio 2008安装文件，运行安装文件，运行Setup.exeSetup.exe文件，文件，启动启动Visual Studio 2008Visual Studio 2008安装程序，如图安装程序，如图1-151-15所示。所示。

9、（2 2）在如图）在如图1-151-15所示的所示的“安装安装Visual Studio 2008Visual Studio 2008的初始界面的初始界面”中单击中单击“安装安装Visual Studio 2008Visual Studio 2008”链接进行安装。于是安装程序开链接进行安装。于是安装程序开始自动加载安装组件，如图始自动加载安装组件，如图1-161-16所示。所示。（3 3）Visual Studio 2008Visual Studio 2008安装程序加载所有的安装组件完成后，安装程序加载所有的安装组件完成后，如图如图1-171-17所示。所示。【操作演练操作演练 】【任务实

10、施任务实施】【任务任务1-2】安装与配置安装与配置Visual Studio 2008 （4 4）在图）在图1-171-17所示的界面中单击所示的界面中单击【下一步下一步】按钮，显示待安装的按钮，显示待安装的组件及许可条款等内容，选中单选按钮组件及许可条款等内容，选中单选按钮“我已阅读并接受许可条款我已阅读并接受许可条款”，并输入产品密钥，如图并输入产品密钥，如图1-181-18所示。所示。 （5 5）单击）单击【下一步下一步】按钮，选择安装方式，在按钮，选择安装方式，在“默认值默认值”、“完完全全”和和“自定义自定义”三种安装方式中选择一种。三种安装方式中选择一种。 （6 6）单击）单击【安

11、装安装】按钮，开始安装按钮，开始安装Visual Studio 2008Visual Studio 2008的组件，的组件，显示正在安装的进程，安装进度如图显示正在安装的进程，安装进度如图1-201-20所示。所示。 （7 7）安装）安装Visual Studio 2008Visual Studio 2008完成后，弹出如图完成后，弹出如图1-211-21所示的对话所示的对话框，表示安装成功。框，表示安装成功。【操作演练操作演练 】【任务实施任务实施】【任务任务1-2】安装与配置安装与配置Visual Studio 2008 2 2配置配置Visual Studio 2008Visual St

12、udio 2008 （1 1）启动）启动Visual Studio 2008 Visual Studio 2008 （2 2）选择）选择【工具工具】【选项选项】命令，打开命令，打开【选项选项】对话框。对话框。【选选项项】对话框默认的对话框默认的6 6个个“选项选项”以及以及“常规常规”选项的默认设置如图选项的默认设置如图1-1-2424所示。所示。（3 3）设置）设置Visual StudioVisual Studio项目位置项目位置（4 4）选择）选择“总是显示解决方案总是显示解决方案”（5 5）设置）设置“自动换行自动换行”功能功能【操作演练操作演练 】【任务描述任务描述】【任务任务1-3

13、】创建简单的创建简单的Web网站网站 （1 1）创建蝴蝶）创建蝴蝶e e购网的欢迎页面，体验购网的欢迎页面，体验Visual Studio 2008Visual Studio 2008的高效。的高效。（2 2）在客户浏览页面中输出用户的登录时间和）在客户浏览页面中输出用户的登录时间和IPIP地址。地址。【任务实施任务实施】1 1创建网站创建网站（1 1）启动）启动Visual Studio 2008Visual Studio 2008之后，在主窗口单击选择之后，在主窗口单击选择【文件文件】【新建网站新建网站】命令，打开命令，打开【新建网站新建网站】对话框。对话框。【操作演练操作演练 】【任务实

14、施任务实施】【任务任务1-3】创建简单的创建简单的Web网站网站 （2 2）在）在【新建网站新建网站】对话框对话框“模板模板”列表中选择列表中选择“ASP.NETASP.NET网站网站”，在在“语言语言”列表框中选择列表框中选择“Visual C#Visual C#”，在网站存放位置列表框输入，在网站存放位置列表框输入创建网站的存储位置，即创建网站的存储位置，即“D:ASP.NETD:ASP.NET网站开发实例教程网站开发实例教程WebSiteeShop01WebSiteeShop01”，如图，如图1-281-28所示。所示。 （3 3）在）在【新建网站新建网站】对话框中单击对话框中单击【确定

15、确定】按钮，按钮，Visual Visual StudioStudio系统会自动创建并配置新建的网站系统会自动创建并配置新建的网站eShop01eShop01，并且会自动创建，并且会自动创建一个一个WebWeb页面页面Default.aspxDefault.aspx，同时在主窗口中显示默认文档，同时在主窗口中显示默认文档Default.aspxDefault.aspx的代码结构，如图的代码结构，如图1-291-29所示。所示。【操作演练操作演练 】【任务实施任务实施】【任务任务1-3】创建简单的创建简单的Web网站网站 2 2设计设计WebWeb页面页面 在页面在页面“代码代码”视图中视图中“

16、”与与“”之间输入网页标之间输入网页标题题“蝴蝶蝴蝶e e购网购网”。 单击单击“编辑窗口编辑窗口”底部的底部的“设计设计”按钮，切换到页面的按钮，切换到页面的“设计设计”视视图，在图，在“divdiv”区域输入文字区域输入文字“欢迎您光临蝴蝶欢迎您光临蝴蝶e e购网购网”，如图，如图1-301-30所所示，然后单击工具栏中的示，然后单击工具栏中的【保存保存】按钮或者按钮或者【全部保存全部保存】按钮，保存按钮，保存新建的页面。新建的页面。3 3预览页面预览页面 直接按直接按F5F5键或者在主窗口中单击选择键或者在主窗口中单击选择【调试调试】【启动调试启动调试】命命令浏览网页。令浏览网页。【操作

17、演练操作演练 】【任务实施任务实施】【任务任务1-3】创建简单的创建简单的Web网站网站 4 4编写程序代码编写程序代码 单击单击“编辑窗口编辑窗口”底部的底部的“设计设计”按钮，切换到页面的按钮，切换到页面的“设计设计”视视图，然后在页面双击切换到程序逻辑代码编辑页面图，然后在页面双击切换到程序逻辑代码编辑页面“Default.asps.csDefault.asps.cs”，在该逻辑代码编辑区域为，在该逻辑代码编辑区域为PagePage对象的对象的LoadLoad事件事件编写功能代码，输出用户的登录时间和客户端主机的编写功能代码，输出用户的登录时间和客户端主机的IPIP地址，如图地址，如图1

18、-1-3434所示。所示。5 5保存保存WebWeb页面页面 在在Visual Studio 2008Visual Studio 2008的主窗口单击的主窗口单击【保存保存】按钮或按钮或【全部保存全部保存】按钮，保存所创建按钮，保存所创建WebWeb页面页面Default.aspxDefault.aspx。【技术提升技术提升 】【任务描述任务描述】【任务任务1-4】分析分析ASP.NET文档文档（1 1）认识）认识ASP.NETASP.NET文档的内容和结构文档的内容和结构（2 2）分析）分析ASP.NETASP.NET页面的功能代码页面的功能代码【任务实施任务实施】1 1打开任务打开任务1-

19、31-3中所创建网站中所创建网站eShop01eShop012 2分析分析WebWeb页面的源代码页面的源代码任务任务1-31-3中所创建网站中所创建网站eShop01eShop01的的WebWeb页面页面Default.aspxDefault.aspx的源代码如的源代码如表表1-1-所示。所示。【技术提升技术提升 】【任务任务1-4】分析分析ASP.NET文档文档表表1-1网站网站eShop01的的Web页面页面Default.aspx的源代码的源代码 行号行号页面代码页面代码01020304050607080910111213141516% %!/TR/xh

20、tml1/DTD/xhtml1-transitional.dtd =/1999/xhtml =server 蝴蝶蝴蝶e e购网购网/ / =server 欢迎您光临蝴蝶欢迎您光临蝴蝶e e购网购网 / / / / 【技术提升技术提升 】【任务实施任务实施】【任务任务1-4】分析分析ASP.NET文档文档（1 1）01-0201-02行代码为页面指令，即行代码为页面指令，即“”指令，主要用来指令，主要用来建立页面的运行环境。建立页面的运行环境。（2 2）04-0504-05行声明文档的类型，说明网页文档使用的行声明文档的类型，说明网页文档使用的XHTMLXHTML

21、是哪一个是哪一个版本，这里使用的是版本，这里使用的是XHTML 1.0XHTML 1.0。（3 3）07-1807-18行的行的HTMLHTML源代码被分为两部分：源代码被分为两部分：之间的之间的网页头部区域和网页头部区域和之间的网页主体部分。之间的网页主体部分。（4 4）表示网页中包含一个表单对象。表示网页中包含一个表单对象。（5 5）表示布局区块，表示布局区块，divdiv是一种是一种XHTMLXHTML的布局标签。的布局标签。（6 6）第）第0808行和行和1212行所出现的行所出现的“runat=server”runat=server”指明该代码在服务指明该代码在服务器端执行。器端执行

22、。【技术提升技术提升 】【任务任务1-4】分析分析ASP.NET文档文档【任务实施任务实施】3 3分析分析WebWeb页面的功能代码页面的功能代码任务任务1-31-3中所创建的中所创建的WebWeb页面引用的代码隐藏文件的功能代码如表页面引用的代码隐藏文件的功能代码如表1-1-2 2所示。所示。【技术提升技术提升 】【任务任务1-4】分析分析ASP.NET文档文档行号行号代码代码0102030405060708091011121314151617181920usingusing System; System;usingusing System.Configuration; System.Con

23、figuration;usingusing System.Data; System.Data;usingusing System.Linq; System.Linq;usingusing System.Web; System.Web;usingusing System.Web.Security; System.Web.Security;usingusing System.Web.UI; System.Web.UI;usingusing System.Web.UI.HtmlControls; System.Web.UI.HtmlControls;usingusing System.Web.UI.

24、WebControls; System.Web.UI.WebControls;usingusing System.Web.UI.WebControls.WebParts; System.Web.UI.WebControls.WebParts;usingusing System.Xml.Linq; System.Xml.Linq;publicpublic partialpartial classclass _Default_Default : System.Web.UI. : System.Web.UI.PagePage protectedprotected voidvoid Page_Load

25、( Page_Load(objectobject sender, sender, EventArgsEventArgs e) e) Response.Write( Response.Write( 客户登录时间为：客户登录时间为： + + DateTimeDateTime.Now+.Now+ ， );); Response.Write( Response.Write( 客户端主机的客户端主机的IPIP地址为：地址为： + Request.UserHostAddress); + Request.UserHostAddress); 表表1-2Web页面的代码文件页面的代码文件Default.aspx

26、.cs中的代码中的代码 【技术提升技术提升 】【任务描述任务描述】【任务任务1-5】体验体验ASP.NET网站的运行网站的运行 （1 1）配置）配置IISIIS虚拟站点。虚拟站点。（2 2）体验）体验ASP.NETASP.NET网站的运行网站的运行【任务实施任务实施】1 1配置配置IISIIS虚拟站点虚拟站点（1 1）打开）打开IIS 7.0IIS 7.0管理器管理器在在【开始开始】菜单中单击选择菜单中单击选择【管理工具管理工具】【InternetInternet信息服务信息服务（IISIIS）管理器）管理器】命令，打开如图命令，打开如图1-381-38所示的所示的【InternetInter

27、net信息服务信息服务（IISIIS）管理器）管理器】窗口。窗口。【技术提升技术提升 】【任务实施任务实施】【任务任务1-5】体验体验ASP.NET网站的运行网站的运行 （2 2）添加网站）添加网站在在【InternetInternet信息服务（信息服务（IISIIS）管理器）管理器】窗口中展开左侧的第一个窗口中展开左侧的第一个节点，然后右键单击节点，然后右键单击“网站网站”节点，在弹出的快捷菜单中单击选择节点，在弹出的快捷菜单中单击选择【添加网站添加网站】命令，如图命令，如图1-391-39所示。打开所示。打开【添加网站添加网站】对话框。对话框。在在【InternetInternet信息服务

28、（信息服务（IISIIS）管理器）管理器】窗口添加网站窗口添加网站eshop01eshop01后，选后，选中该网站节点可以在窗口中间区域看到许多的功能模块，并对网站进中该网站节点可以在窗口中间区域看到许多的功能模块，并对网站进行更加复杂的设置，如图行更加复杂的设置，如图1-411-41所示。所示。在在【InternetInternet信息服务（信息服务（IISIIS）管理器）管理器】窗口中部下侧单击窗口中部下侧单击【内容内容视图视图】按钮，切换到新添加网站按钮，切换到新添加网站eShop01eShop01的内容视图，如图的内容视图，如图1-421-42所示。所示。【技术提升技术提升 】【任务实

29、施任务实施】【任务任务1-5】体验体验ASP.NET网站的运行网站的运行 2 2浏览网页浏览网页切换到网站切换到网站eShop01eShop01的内容视图，在的内容视图，在【InternetInternet信息服务（信息服务（IISIIS）管）管理器理器】窗口右侧窗口右侧“操作操作”列表中单击列表中单击【浏览浏览】超链接，浏览超链接，浏览WebWeb页面页面Default.aspxDefault.aspx，其效果如图，其效果如图1-431-43所示。所示。 【知识集成知识集成 】.1ASP.NETASP.NET运行机制运行机制ASP.NETASP.NET运行时首先是来自客户端的

30、请求，运行时首先是来自客户端的请求，WebWeb服务器的服务器的IISIIS根据根据相应的条件（后缀名）将请求提交给解析器，经过编译、运行，最相应的条件（后缀名）将请求提交给解析器，经过编译、运行，最终将请求结果返回给客户端。终将请求结果返回给客户端。.2ASP.NETASP.NET的文件类型的文件类型由于由于ASP.NETASP.NET支持多种语言开发及控件开发，因此文件类型较多，支持多种语言开发及控件开发，因此文件类型较多，常见的文件类型如表常见的文件类型如表1-31-3所示。所示。【知识集成知识集成 】表表1-3ASP.NET常见的文件类型常见的文件类型文件扩展名文件扩展

31、名功能及说明功能及说明global.asaxASP.NET应用程序级别的逻辑代码和事件处理程序代码一般存放在该文件中应用程序级别的逻辑代码和事件处理程序代码一般存放在该文件中web.config系统环境设置文件系统环境设置文件.aspx包含包含Web页面结构代码的文件，浏览器可执行此类文件，向服务器提出请求页面结构代码的文件，浏览器可执行此类文件，向服务器提出请求.cs或或.vb.cs文件是存放使用文件是存放使用C#语言编写的程序代码，语言编写的程序代码，.vb文件是存放使用文件是存放使用VB.NET语言编写的语言编写的程序代码程序代码.ascx用户控件文件，可包含在多个用户控件文件，可包含在

32、多个.aspx文件中文件中.asmx制作制作Web Service的原始文件的原始文件.sdl或或.wsdlWeb Service的描述文件，以的描述文件，以XML格式保存格式保存【知识集成知识集成 】.3ASP.NETASP.NET的代码后置与代码内嵌的代码后置与代码内嵌创建基于创建基于ASP.NETASP.NET的的WebWeb页面时，页面的功能代码可以放在单独的程页面时，页面的功能代码可以放在单独的程序文件中，也可以嵌入在序文件中，也可以嵌入在.aspx.aspx文件中，在图文件中，在图1-451-45所示的对话框中所示的对话框中可以通过复选框加以选择。可以通过复选框加以

33、选择。图图1-45新建新建web页面时选择页面时选择“将代码放在单独的文件中将代码放在单独的文件中” 【知识集成知识集成 】（1 1）代码后置）代码后置代码后置是微软公司开发的一项技术，这样做可以将程序功能代码代码后置是微软公司开发的一项技术，这样做可以将程序功能代码和页面结构代码分离，使代码更加清晰。和页面结构代码分离，使代码更加清晰。1 1个个webweb页面由页面文件页面由页面文件（.aspx.aspx）和代码文件（）和代码文件（.cs.cs）2 2个文件相互关联构成个文件相互关联构成1 1个页个页面，面，.aspx.aspx文件主要包含文件主要包含XHTMLXHTML代码和控件，在代码

34、和控件，在.cs.cs文件中编写功能文件中编写功能代码，包括事件处理程序、自定义的方法等。在创建代码，包括事件处理程序、自定义的方法等。在创建webweb页面时，页面时，选择选择“将代码放在单独的文件中将代码放在单独的文件中”复选框即可实现，如图复选框即可实现，如图1-451-45所示。所示。（2 2）代码内嵌）代码内嵌代码内嵌则不使用独立的代码内嵌则不使用独立的.cs.cs文件，所有功能代码以文件，所有功能代码以标识直标识直接写在接写在.aspx.aspx文件中，即文件中，即XHTMLXHTML代码、控件代码和程序功能代码位于代码、控件代码和程序功能代码位于同一个文件。在创建同一个文件。在创

35、建webweb页面时，取消页面时，取消“将代码放在单独的文件中将代码放在单独的文件中”复选框的选中状态即可实现。复选框的选中状态即可实现。【归纳总结归纳总结 】本章主要介绍了如何安装与配置本章主要介绍了如何安装与配置IISIIS，搭建，搭建ASP.NETASP.NET的运行环境，的运行环境，以保证以保证ASP.NETASP.NET应用程序能正确运行。介绍了应用程序能正确运行。介绍了Visual Studio 2008Visual Studio 2008的安装与配置，搭建合适的的安装与配置，搭建合适的WebWeb应用程序开发环境。通过创建一个应用程序开发环境。通过创建一个简单的简单的WebWeb

36、网站，熟悉网站，熟悉ASP.NETASP.NET集成开发环境，认识集成开发环境，认识ASP.NETASP.NET文档的文档的内容，了解内容，了解ASP.NETASP.NET文档的结构，体验文档的结构，体验ASP.NETASP.NET网站的运行。网站的运行。ASP.NET 网站开发实例教程第2章使用控件高效创建网站页面 教学环节教学环节【教学导航教学导航 】 1【操作准备操作准备】 2【操作演练操作演练 】 3【技术提升技术提升 】 4【归纳总结归纳总结 】 6【知识集成知识集成 】5【教学导航教学导航】教学目标教学目标（1 1）学会使用）学会使用HTMLHTML服务器控件创建服务器控件创建We

37、bWeb页面页面（2 2）学会使用）学会使用WebWeb标准服务器控件创建标准服务器控件创建WebWeb页面页面（3 3）学会使用数据验证控件验证）学会使用数据验证控件验证WebWeb页面中输入的数据页面中输入的数据（4 4）学会创建自定义）学会创建自定义WebWeb用户控件用户控件（5 5）熟练掌握常用）熟练掌握常用WebWeb标准服务器控件的功能、属性和事件标准服务器控件的功能、属性和事件（6 6）熟练掌握常用数据验证控件的功能和属性）熟练掌握常用数据验证控件的功能和属性 课时建议课时建议 8 8课时课时【操作准备操作准备 】 1创建创建ASP.NET网站网站 （1 1）启动）启动Visu

38、al Studio 2008Visual Studio 2008之后，在主窗口选择之后，在主窗口选择【文件文件】【新建网站新建网站】命令，打开命令，打开【新建网站新建网站】对话框。对话框。（2 2）在）在【新建网站新建网站】对话框对话框“模板模板”列表中选择列表中选择“ASP.NETASP.NET网站网站”，在在“语言语言”列表框中选择列表框中选择“Visual C#”Visual C#”，在网站存放位置列表框输，在网站存放位置列表框输入创建网站的存储位置，即入创建网站的存储位置，即“D:ASP.NETD:ASP.NET网站开发实例教程网站开发实例教程WebSiteeShop02”WebSit

39、eeShop02”。 （3 3）在）在【新建网站新建网站】对话框中单击对话框中单击【确定确定】按钮，按钮，Visual Visual StudioStudio系统会自动创建并配置新建的网站系统会自动创建并配置新建的网站eShop02eShop02，同时会自动创建，同时会自动创建1 1个个WebWeb页面页面Default.aspxDefault.aspx。【操作准备操作准备 】 2准备样式文件和图像文件准备样式文件和图像文件 在文件夹在文件夹“eShop02”eShop02”（其路径为（其路径为“D:ASP.NETD:ASP.NET网站开发实例教网站开发实例教程程WebSiteeShop02”

40、WebSiteeShop02”）新建两个子文件夹，将新建的文件夹重命名）新建两个子文件夹，将新建的文件夹重命名为为“css”css”和和“images”images”。将已有的样式文件将已有的样式文件“style02.cssstyle02.css”拷贝到子文件夹拷贝到子文件夹“csscss”中。将中。将所需的图像文件拷贝到子文件夹所需的图像文件拷贝到子文件夹“imagesimages”中。中。【操作演练操作演练 】【任务描述任务描述】【任务任务2-1】使用使用Dreamweaver CS4创建静态网页创建静态网页eShop02.html 使用使用Dreamweaver CS4Dreamweav

41、er CS4创建静态网页创建静态网页eShop02.htmleShop02.html，该网页主要包，该网页主要包括括LogoLogo、导航栏、搜索、购物指南、版权信息等内容。该网页中元素、导航栏、搜索、购物指南、版权信息等内容。该网页中元素的样式主要由外部样式文件的样式主要由外部样式文件style02.cssstyle02.css控件。网页控件。网页eShop02.htmleShop02.html的的浏览外观如图浏览外观如图2-12-1所示。所示。图图2-1网页网页eShop02.html的浏览效果的浏览效果 【操作演练操作演练 】【任务实施任务实施】【任务任务2-1】使用使用Dreamwea

42、ver CS4创建静态网页创建静态网页eShop02.html 使用使用Dreamweaver CS4Dreamweaver CS4可以更方便、快捷地设计网页，可以更方便、快捷地设计网页，定义网页的样式。在定义网页的样式。在Dreamweaver CS4Dreamweaver CS4中创建中创建1 1个网页文档个网页文档eShop02.htmleShop02.html，该网页的样式文件，该网页的样式文件style02.cssstyle02.css存放在子存放在子文件夹文件夹“css”css”中，网页中所需的图像文件存放在子文件中，网页中所需的图像文件存放在子文件夹夹“images”images

43、”中。网页中。网页eShop02.htmleShop02.html的的XHTMLXHTML代码如表代码如表2-12-1所示，样式文件所示，样式文件style02.cssstyle02.css的的CSSCSS代码如表代码如表2-22-2所示。所示。 【操作演练操作演练 】【任务描述任务描述】【任务任务2-2】使用使用HTML服务器控件创建系统提示信息页面服务器控件创建系统提示信息页面 借用借用Dreamweaver CS4Dreamweaver CS4创建的静态网页创建的静态网页eShop02.htmleShop02.html中的中的XHTMLXHTML代代码和码和CSSCSS样式文件样式文件s

44、tyle02.cssstyle02.css创建系统提示信息页面创建系统提示信息页面eShop0201.aspxeShop0201.aspx，该页面的文本框、图像框、按钮等控件都使用该页面的文本框、图像框、按钮等控件都使用HTMLHTML服务器控件。服务器控件。WebWeb页面页面eShop0201.aspxeShop0201.aspx的浏览效果如图的浏览效果如图2-12-1所示。所示。【操作演练操作演练 】【任务实施任务实施】【任务任务2-2】使用使用HTML服务器控件创建系统提示信息页面服务器控件创建系统提示信息页面 1 1重命名重命名WebWeb页面文件的名称页面文件的名称2 2设计设计W

45、ebWeb页面页面3 3认识认识WebWeb页面中的页面中的HTMLHTML控件控件静态网页静态网页eShop02.htmleShop02.html中的表单控件对应于中的表单控件对应于WebWeb页面中页面中的的HTMLHTML控件，控件，eShop0201.aspxeShop0201.aspx页面包含了多个页面包含了多个HTMLHTML控件。控件。这些这些HTMLHTML控件如表控件如表2-32-3所示。所示。【操作演练操作演练 】【任务实施任务实施】【任务任务2-2】使用使用HTML服务器控件创建系统提示信息页面服务器控件创建系统提示信息页面 4 4将将HTMLHTML控件作为服务器控件运

46、行控件作为服务器控件运行HTMLHTML控件直接在客户端映射为控件直接在客户端映射为HTMLHTML代码，如果需要将代码，如果需要将HTMLHTML控件作为控件作为服务器控件运行，可以添加代码服务器控件运行，可以添加代码“runat=server”runat=server”，代码示例如下，代码示例如下所示。所示。5 5保存保存WebWeb页面页面单击单击【标准标准】工具栏中工具栏中【保存保存】按钮，保存创建的按钮，保存创建的WebWeb页面。页面。【操作演练操作演练 】【任务描述任务描述】【任务任务2-3】使用使用Web标准服务器控件创建注册页面标准服务器控件创建注册页面 使用使用WebWeb

47、标准服务器控件创建标准服务器控件创建注册页面注册页面eShop0202.aspxeShop0202.aspx，该，该WebWeb页面的主体页面的主体XHTMLXHTML代码和代码和CSSCSS样式文件借用样式文件借用Dreamweaver CS4Dreamweaver CS4创建的静态网页创建的静态网页eShop02.htmleShop02.html中中的的XHTMLXHTML代码和代码和CSSCSS样式文件样式文件style02.cssstyle02.css。其局部浏览效果。其局部浏览效果如图如图2-22-2所示。所示。图图2-2Web页面页面eShop0202.aspx的局部浏览效果的局部

48、浏览效果 【操作演练操作演练 】【任务描述任务描述】【任务任务2-3】使用使用Web标准服务器控件创建注册页面标准服务器控件创建注册页面 （1 1）注册页面使用的）注册页面使用的WebWeb标准服务器标准服务器注册页面中注册页面中LogoLogo标识图像、联系电话图像和帮助图像使用标识图像、联系电话图像和帮助图像使用ImageImage控件，控件，商品分类使用商品分类使用DropDownListDropDownList控件，商品名称、用户名称、控件，商品名称、用户名称、E-mailE-mail地址、密地址、密码、确认密码、用户的真实姓名、邮政编码、手机号码等数字输入框使用码、确认密码、用户的真

49、实姓名、邮政编码、手机号码等数字输入框使用TextBoxTextBox控件，输入提示信息使用多个控件，输入提示信息使用多个LabelLabel控件，控件，“搜索搜索”和和“重新填写重新填写”按钮使用按钮使用ButtonButton控件，控件，“立即注册立即注册”使用使用ImageButtonImageButton控件，控件，“高级搜索高级搜索”和和“获取帮助获取帮助”按钮使用按钮使用LinkButtonLinkButton控件，是否填写附加信息和性别使用控件，是否填写附加信息和性别使用RadioButtonRadioButton控件，是否接受用户手册使用控件，是否接受用户手册使用CheckBo

50、xCheckBox控件，控件，“查看查看用户协用户协议议”使用使用HyperLinkHyperLink控件，附加信息区域使用了控件，附加信息区域使用了PanelPanel控件，用户注册区控件，用户注册区域使用了两个嵌套的域使用了两个嵌套的TableTable控件。控件。WebWeb页面页面eShop0202.aspxeShop0202.aspx中各个控件的主中各个控件的主要属性设置如表要属性设置如表2-42-4所示。所示。 【操作演练操作演练 】【任务描述任务描述】【任务任务2-3】使用使用Web标准服务器控件创建注册页面标准服务器控件创建注册页面 （2 2）初始状态下附加信息区域的）初始状态

51、下附加信息区域的PanelPanel控件为隐藏状态，控件为隐藏状态，WebWeb页面页面运行时，当选择单选按钮运行时，当选择单选按钮“填写填写”时，附加信息区域才可见。时，附加信息区域才可见。（3 3）WebWeb页面运行时，初始状态下页面运行时，初始状态下“立即注册立即注册”按钮为按钮为“不可用不可用”状态，只有当用户接受状态，只有当用户接受用户协议用户协议并单击选中了并单击选中了“我已看过并接我已看过并接受受用户协议用户协议”复选框时，复选框时，“立即注册立即注册”按钮才变为按钮才变为“可用可用”状状态。态。 【操作演练操作演练 】【任务描述任务描述】【任务任务2-3】使用使用Web标准服

52、务器控件创建注册页面标准服务器控件创建注册页面 （4 4）WebWeb页面运行状态下，当用户单击页面运行状态下，当用户单击“立即注册立即注册”按钮时，分别检验按钮时，分别检验“用户名用户名”、“E-mailE-mail”、“密码密码”和和“确认密码确认密码”对应的文本框中输入的对应的文本框中输入的数据。如果某个文本框为空，则出现数据。如果某个文本框为空，则出现“不能为空不能为空”相应的提示信息；如果两相应的提示信息；如果两次输入的密码不一致，则出现相应的提示信息；同时也验证输入的次输入的密码不一致，则出现相应的提示信息；同时也验证输入的E-mailE-mail地地址是否符合规定格式，当用户填写

53、附加信息时，则验验邮政编码和手机号码址是否符合规定格式，当用户填写附加信息时，则验验邮政编码和手机号码是否符合要求（输入的字符必须为数字，且长度不能超过规定长度）。当用是否符合要求（输入的字符必须为数字，且长度不能超过规定长度）。当用户重新输入符合规定要求的数据时，相应的提示信息也还原为初始状态的内户重新输入符合规定要求的数据时，相应的提示信息也还原为初始状态的内容。容。（5 5）WebWeb页面运行状态下，当用户单击页面运行状态下，当用户单击“重新填写重新填写”按钮时，将按钮时，将“用户用户名名”、“E-mail”E-mail”、“密码密码”和和“确认密码确认密码”对应文本框中输入的数据清空

54、，对应文本框中输入的数据清空，如果用户填写了附加信息，将相应的附件信息也如果用户填写了附加信息，将相应的附件信息也全部清空。全部清空。 【操作演练操作演练 】【任务实施任务实施】【任务任务2-3】使用使用Web标准服务器控件创建注册页面标准服务器控件创建注册页面 1 1在解决方案在解决方案“eShop02eShop02”中添加中添加1 1个个WebWeb页面页面eShop0202.aspxeShop0202.aspx2 2在样式文件在样式文件style02.cssstyle02.css中增加必要的样式中增加必要的样式打开样式文件打开样式文件style02.css，为用户注册界面设计必要的样式，

55、新增加的，为用户注册界面设计必要的样式，新增加的样式定义如表样式定义如表2-5所示。所示。3 3从静态网页从静态网页eShop02.htmleShop02.html中拷贝必要的中拷贝必要的XHTMLXHTML代码到代码到WebWeb页面中页面中4 4将现有将现有WebWeb页面中的图像替换为页面中的图像替换为ImageImage服务器控件服务器控件5 5将现有将现有WebWeb页面中的超链接替换为页面中的超链接替换为HyperLinkHyperLink服务器控件服务器控件6 6将现有将现有WebWeb页面中的页面中的SubmitSubmit控件替换为控件替换为ButtonButton服务器控件

56、服务器控件7 7将现有将现有WebWeb页面中的页面中的TextText控件替换为控件替换为TextBoxTextBox服务器控件服务器控件【操作演练操作演练 】【任务实施任务实施】【任务任务2-3】使用使用Web标准服务器控件创建注册页面标准服务器控件创建注册页面 8 8将现有将现有WebWeb页面中的页面中的SelectSelect列表控列表控件替换为件替换为DropDownListDropDownList服务器控件服务器控件9 9在在WebWeb页面中添加页面中添加divdiv1010在在WebWeb页面中添加表格页面中添加表格1111在在WebWeb页面中添加必要的控件制页面中添加必要

57、的控件制作用户注册界面作用户注册界面用户注册界面的设计效果如图用户注册界面的设计效果如图2-17所所示，用户注册界面的代码如表示，用户注册界面的代码如表2-6所示。所示。图图2-17用户注册界面的设计效果用户注册界面的设计效果 【操作演练操作演练 】【任务实施任务实施】【任务任务2-3】使用使用Web标准服务器控件创建注册页面标准服务器控件创建注册页面 1212添加必要的控件制作用户注册的附加信息界面添加必要的控件制作用户注册的附加信息界面（1）在表格的第）在表格的第7行合并的单元格中插入行合并的单元格中插入1个个Panel服务器控件服务器控件（2）在）在Panel服务器控件中插入服务器控件中

58、插入1个个4行行3列的表格列的表格（3）设置）设置4行行3列表格的属性列表格的属性（4）设置表格）设置表格tableInfo的列宽和对齐方式的列宽和对齐方式（5）在表格）在表格tableInfo的第的第1列的各个单元格中输入文字列的各个单元格中输入文字（6）在表格）在表格tableInfo第第1、3、4行的第行的第2个单元格中插入个单元格中插入TextBox服务器控件服务器控件（7）在表格）在表格tableInfo第第2行的第行的第2个单元格中插入个单元格中插入1个个RadioButtonList控件控件（8）在表格）在表格tableInfo第第3行和第行和第4行的第行的第3个单元格中插入个单

59、元格中插入Label服务器控件服务器控件【操作演练操作演练 】【任务实施任务实施】【任务任务2-3】使用使用Web标准服务器控件创建注册页面标准服务器控件创建注册页面 用户注册的附加信息界用户注册的附加信息界面的设计效果如图面的设计效果如图2-202-20所所示，用户注册的附加信息示，用户注册的附加信息界面的代码如表界面的代码如表2-72-7所示。所示。图图2-20用户注册的附加信息界面的设计效果用户注册的附加信息界面的设计效果 【操作演练操作演练 】【任务实施任务实施】【任务任务2-3】使用使用Web标准服务器控件创建注册页面标准服务器控件创建注册页面 1313编写程序代码，实现用户注册的功

60、能编写程序代码，实现用户注册的功能（1）编写）编写Page_Load事件过程的程序代码事件过程的程序代码（2）定义）定义1个个bool型变量型变量（3）编写程序控制）编写程序控制【立即注册立即注册】按钮是否为可用状态按钮是否为可用状态（4）编写程序验证必须输入内容的文本输入框是否为空）编写程序验证必须输入内容的文本输入框是否为空（5）编写程序验证两次输入的密码是否一致）编写程序验证两次输入的密码是否一致（6）编写程序控制用户注册的附加信息界面是否显示）编写程序控制用户注册的附加信息界面是否显示（7）判断用户输入的）判断用户输入的E-mail地址、邮政编码和手机号码是否合法地址、邮政编码和手机号