本章主要对前面各章所创建的注册页面、登录页面、商品详细信息浏览页面和购物车页面进行优化和完善,同时创建一个页面作为网站的首页,将这些Web页面整合为一个完整的eShop网站,对该网站进行部署与发布。
【教学导航】
教学目标 | (1)掌握web.config文件的配置方法,熟练掌握在web.config文件中配置数据库连接字符串的方法,学会在Web页面中使用web.config文件中的配置数据库连接字符串 (2)学会将多个Web页面整合为一个完整的网站,并对网站进行部署和发布 (3)学会将Web页面中的数据显示代码与业务逻辑代码分离,创建多个类和方法,通过三层架构实现应用程序的功能需求 (4)学会配置ASP.NET的用户数据库ASPNETDB (5)学会使用ASP.NET网站管理工具管理用户和角色 (6)掌握注册与登录控件的功能及主要属性的应用 (7)掌握ObjectDataSource控件的主要属性和功能 (8)了解ASP.NET身份验证的相关类及验证方式 |
课时建议 | 12课时 |
1.创建ASP.NET网站
在Visual Studio 2008主窗口中创建一个ASP.NET网站,该网站的名称为“eShop09”,该网站的存储位置是“D:\ASP.NET网站开发实例教程\\WebSite\\eShop09”,同时会自动创建一个Web页面Default.aspx。
2.准备样式文件和图像文件
在文件夹“eShop09”(其路径为“D:\ASP.NET网站开发实例教程\\WebSite\\eShop09”)新建3个子文件夹,将新建的文件夹重命名为“css”、“images”和“text”。将需要的样式文件、拷贝到子文件夹“css”中,将所需的图像文件拷贝到子文件夹“images”中,将文本文件“蝴蝶e购网服务条款.txt”拷贝到文件夹“text”中。
3.创建主题和外观文件
(1)添加主题文件夹
(2)创建外观文件
(3)在主题中创建样式文件
4.创建自定义Web控件eShop09WebUserControl.ascx
5.创建母版页eShopMasterPage09.master
在【解决方案资源管理器】中,鼠标右键单击网站名称“eShop09”,在弹出的快捷菜单中单击选择【添加新项】命令,打开【添加新项】对话框。在该对话框中的“模板”列表中单击选择“母版页”项,在“名称”文本框中输入母版页的名称“eShopMasterPage09.master”,然后单击【添加】按钮。母片页eShopMasterPage09.master就会被添加到【解决方案资源管理器】中。
接下来对母版页进行设计,在母版页中进入以下操作:
(1)附加外部样式表文件。
(2)在Web页面中添加必要的XHTML代码,实现Web页面的布局结构。
(3)添加所需的Web服务器控件。
(4)拖拽自定义Web控件eShop09WebUserControl.ascx到母版页。
(5)在合适位置插入多个容器控件ContentPlaceHolder。
6.创建默认错误页面eShop09Error.aspx
一个网站要定义至少一个错误页面,配置好后,一旦出现错误,系统自动导航到错误页面。在项目“eShop09”中创建1个基于母版页eShop09MasterPage.master的默认错误页面eShop09Error.aspx,在该页面控件Content3的区域输入必要的文字“出现错误,请重新操作!”即可。单击【标准】工具栏中【保存】按钮,保存页面eShop09Error.aspx。
7.创建浏览服务条款页面eShop09Description.aspx
用户注册时需要浏览一下购物网站的服务条款,在此创建一个专用于浏览服务条款的页面eShop09Description.aspx,该页面也是基于母版页eShop09MasterPage.master创建的。
8.在web.config文件中配置数据库连接字符串
打开项目“eShop09”中的web.config文件,配置数据库连接字符串,代码如表9-5所示。
表9-5 web.config文件中数据库连接对应的代码
行号 | 代码 |
1 2 3 4 5 6 | providerName="System.Data.SqlClient" /> |
使用Visual Studio 2008提供的命令aspnet_regsql,将项目eShop09的数据库eshop2010配置为带有用户权限管理功能的数据库。
(1)启动ASP.NET SQL Server安装向导
(2)选择安装选项
(3)选择服务器和数据库
(4)确认设置
10.使用ASP.NET网站管理工具管理用户和角色
(1)打开ASP.NET网站管理工具
(2)使用“安全设置向导”配置安全性
(3)创建与管理用户
(4)管理角色
(5)创建与管理访问规则
11.设置默认错误页
12.配置web.config文件
(1)配置authentication元素
(2)配置location元素
(3)配置membership元素
(4)配置roleManager元素
(5)配置profile元素
13.创建类及其方法
在【解决方案资源管理器】中右键单击项目名称“eShop09”,在弹出的快捷菜单中单击【添加新项】命令,打开【添加新项】对话框。
在【添加新项】对话框中单击选择模板“类”选项,在“名称”文本框中输入“eShopClass.cs”,然后单击【添加】按钮,在项目“eShop09”中添加了一个新的类。
(1)引入命名空间
引入命名空间的代码为:using System.Data.SqlClient ;
(2)定义属性sqlConn
(3)定义方法getScalarInt()
(4)定义方法getScalar()
(5)定义方法getScalar()
(6)定义方法executeComm()
(7)定义方法executeComm()
(8)定义方法getTable()
(9)定义方法getTable()
(10)定义方法getUserCart()
(11)定义方法getSelectGoods()
(12)定义方法gvDataBind()
(13)定义方法repeaterDataBind()
(14)定义方法fvDataBind()
(15)定义方法dlDataBind()
(16)定义方法ddlDataBind()
【9.2 操作演练】
【任务9-1】创建用户注册页面
【任务描述】
利用ASP.NET 3.5提供的注册控件创建用户注册页面eShop09Register.aspx,该页面的浏览效果如图9-33所示。
图9-33 注册页面eShop09Register.aspx的浏览效果
【任务实施】
1.创建基于母版页eShop09MasterPage.master的页面eShop09Register.aspx
2.在页面中添加ASP.NET 3.5提供的注册控件
切换到页面的“设计”视图,单击工具箱中的“登录”控件组左侧的“+”,展开ASP.NET 3.5提供的所有登录控件,如图9-34所示。
图9-34 “登录”控件组
3.运行Web页面与测试程序功能
将Web页面eShop09Register.aspx设为起始页,运行该页面,其浏览效果如图9-33所示。在该页面输入新用户的相关信息,包括用户名、密码、电子邮件、安全提示问题和安全提示问题的答案,如图9-39所示。然后单击“创建用户”按钮,会弹出如图9-40所示的“已成功创建帐户”的提示信息页面。
图9-39 输入新用户的相关信息
图9-40 “已成功创建帐户”的提示信息页面
【任务9-2】创建用户登录页面
【任务描述】
利用ASP.NET 3.5提供的登录控件创建用户登录页面eShop09Login.aspx,该页面的浏览效果如图9-41所示。
图9-41 登录页面eShop09Login.aspx的浏览效果
【任务实施】
1.创建基于母版页eShop09MasterPage.master的页面eShop09Login.aspx
2.在页面中添加ASP.NET 3.5提供的登录控件
3.运行Web页面与测试程序功能
将Web页面eShop09Login.aspx设为起始页,运行该页面,其浏览效果如图9-41所示。在该页面中输入用户名和密码,选择复选框“下次记住我”,如图9-42所示。然后单击“登录”按钮,如果能够成功登录,则会自动导航Default.aspx页面。
图9-42 在“登录”页面输入用户名和密码
【任务9-3】创建网站首页Default.aspx
【任务描述】
创建网站的首页Default.aspx,首页中分页显示商品的搜索结果、畅销商品榜、购物车中已选购商品的总数量和总金额,首页中还包含顶部导航栏、商品导航栏和购物导航栏。该页面的布局设计示意图如图9-43所示,其浏览效果如图9-44所示。
图9-43 网站首页Default.aspx的布局设计示意图
图9-44 网站首页Default.aspx的浏览效果
【任务实施】
1.在网站eShop09中添加一个Web页面Default.aspx
2.Web页面Default.aspx的布局设计
(1)在页面当前位置添加1个SiteMapPath控件。
(2)在页面的搜索区域添加了1个DropDownList控件、1个TextBox控件、1个Button控件和1个HyperLink控件,对应的代码如表9-26所示。
(3)中间分为左右两个区域,其主体的XHTML代码如表9-27所示。
3.在页面“Default.aspx”中添加Web控件
(1)在Web页面“Default.aspx”中添加PlaceHolder控件,在该容器控件中添加2个Label控件,且输入一些提示文字,对应代码如表9-28所示。
(2)在“Default.aspx”页面中添加SiteMapDataSource控件和TreeView控件
(3)在Web页面“Default.aspx”中添加Repeater控件
(4)在Web页面“Default.aspx”中添加DataList控件
4.编写程序代码,实现程序功能
(1)引入命名空间
引入所需要的命名空间,代码如下:
using System.Data.SqlClient;
(2)定义方法getCartInfo()
(3)定义方法cartSum()
(4)定义方法cartTotal()
(5)定义方法repeaterBind()
(6)定义方法dropDownListBind ()
(7)定义方法setEnable()
(8)定义属性currentPage
(9)定义方法dataListBind()
(10)编写搜索按钮btnSearch的Click事件过程的程序代码
(11)编写“首页”按钮linkbtnFirst的Click事件过程的程序代码
(12)编写“上一页”按钮linkbtnPrevious的Click事件过程的程序代码
(13)编写“下一页”按钮linkbtnNext的Click事件过程的程序代码
(14)编写“末页”按钮linkbtnLast的Click事件过程的程序代码
(15)编写Default.aspx页面Page对象Load事件过程的程序代码
(16)编写“退出登录”按钮lbtnOutLogin的Click事件过程的程序代码
5.运行Web页面与测试程序功能
将Web页面Default.aspx设为起始页,运行该页面,其浏览效果如图9-44所示。单击该页面顶部的超链接“登录”,打开“登录”页面进行登录操作,登录成功后重新返回首页Default.aspx,且搜索“三星”手机,结果如图9-45所示。
图9-45 登录用户的搜索结果
【任务9-4】创建浏览商品详细信息页面
【任务描述】
创建浏览商品详细信息页面eShop09ProductDetails.aspx,该页面主要用于浏览用户选购商品的详细信息,其布局与第6章创建的Web页面eShop060501.aspx相似,而不同的是页面eShop09ProductDetails.aspx是基于母版页eShop09MasterPage.master创建Web页面。
【任务实施】
1.在网站eShop09中添加一个Web页面eShop09ProductDetails.aspx
2.Web页面的布局设计与添加Web控件
(1)在各个Content控件区域添加XHTML代码和Web控件
(2)添加ObjectDataSource控件
3.编写程序代码,实现程序功能
(1)定义方法getCartInfo ()
(2)定义方法cartSum()
(3)编写eShop09ProductDetails.aspx页面Page对象Load事件过程的程序代码
6.运行Web页面与测试程序功能
将Web页面Default.aspx设为起始页,运行该页面,其浏览效果如图9-44所示。
(1)匿名用户访问商品详细信息页面
在Web页面Default.aspx直接单击商品展示区域的图片,导航到商品详细信息页面,如图9-50所示。
图9-50 匿名用户访问商品详细信息页面的浏览效果
(2)登录用户访问商品详细信息页面
Web页面Default.aspx运行时,单击顶部的“登录”按钮导航到“登录页面”进行用户登录操作,例如以“金海”的身份登录,登录成功后自动导航到Web页面Default.aspx。然后单击商品展示区域的图片,导航到商品详细信息页面,如图9-51所示。
图9-51 登录用户“金海”访问商品详细信息页面
由图9-51可以看出,当前登录用户“金海”的购物车中已选购了5件商品,已是第6次浏览商品详细信息。
【9.3 技术提升】
【任务9-5】创建购物车页面
【任务描述】
创建购物车页面eShop09Cart.aspx,该页面主要用于查看当前登录用户已选购的商品和向购物车中新增或删除商品,在该页面还可以修改购物数量,显示当前登录用户的购物车中选购商品的总计金额和节省的金额。
【任务实施】
1.在网站eShop09中添加一个Web页面eShop09Cart.aspx
2.Web页面的布局设计与添加Web控件
(1)在各个Content控件区域添加XHTML代码和Web控件
(2)添加ObjectDataSource控件
5.编写程序代码,实现程序功能
(1)引入命名空间
引入所需要的命名空间,代码如下:
using System.Data.SqlClient;
(2)定义方法getCartInfo()
(3)定义方法cartTotal()
(4)定义方法saveTotal()
(5)定义方法updateCart()
(6)定义方法gridViewBind()
(7)编写GridView1控件的RowEditing事件过程的程序代码
(8)编写GridView1控件的RowCancelingEdit事件过程的程序代码
(9)编写GridView1控件的RowUpdating事件过程的程序代码
(10)编写GridView控件的RowDeleteing事件过程的程序代码
(11)编写GridView1控件的RowDataBound事件过程的程序代码
(12)编写eShop09Cart.aspx页面Page对象Load事件过程的程序代码
6.运行Web页面与测试程序功能
(1)登录成功后查看用户的购物车中选购的商品
单击首页中的“查看购物车”超链接,导航到购物车页面浏览购物车已选购的商品信息,如图9-54所示。
图9-54 登录用户浏览购物车已选购的商品信息
(2)登录成功后往购物车中添加新的商品
先在首页Default.aspx的商品展示区域单击“购买”按钮,然后导航到商品详细信息浏览页面eShop09ProductDetails.aspx单击“加入购物车”按钮,导航到购物车页面同时往购物车中添加刚才所选购的2件商品,同步更新登录用户的购物总金额和节省总额,数据更新后的购物车如图9-55所示。
图9-55 购物车中新增加2件商品
(3)修改购物数量
在如图9-55所示的购物车的最后一行中,单击“修改数量”超链接,数量进入可编辑状态,且显示对应的文本框,输入数字“3”,然后单击“更新”按钮,更新结果如图9-56所示。
图9-56 成功修改购物车中的商品数量
【任务9-6】部署与发布网站
【任务描述】
对蝴蝶e购网调试完成后,将此网站进行部署与发布。
【任务实施】
1.设置起始页
将网站eShop09中的Web页面Default.aspx设为起始页。
2.复制网站
在“解决方案资源管理器”的工具栏中单击“复制网站”按钮,或者单击“网站”菜单中的“复制网站”命令即可开始启动复制操作。ASP.NET中有4种发布位置可选择,包括文件系统、本地IIS、FTP站点和远程站点。复制站点时,IDE可自动检查是否有文件更新。
3.生成网站
在“解决方案资源管理器”中右键单击网站名称“eShop09”,在快捷菜单中单击“生成网站”命令生成网站,如图9-57所示。
图9-57 生成网站
4.发布网站
在“解决方案资源管理器”中右键单击网站名称“eShop09”,在快捷菜单中单击“发布网站”命令(快捷菜单如图9-57所示),在弹出的“发布网站”对话框中选择网站发布的目标位置,如图9-58所示。
图9-58 发布网站
5.安装与配置IIS7.0
由于ASP.NET3.5最匹配的IIS版本是IIS7.0,先在Windows Server 2008操作系统上安装配置好IIS7.0,其操作方法已在第1章介绍过。
6.在IIS 7.0中部署蝴蝶e购网
打开IIS7.0,展示左侧的第2个服务器节点,右键单击“网站”节点,在弹出的快捷菜单中单击“添加网站”命令,打开“添加网站”对话框,在“添加网站”对话框中输入“网站名称”(即“蝴蝶e购网”)、“物理路径”、“IP地址”和“端口”等内容,如图9-59所示。
图9-59 “添加网站”对话框
7.在IE浏览器中浏览发布的网站
打开IE浏览器,在地址栏中输入http://localhost:8098/,按回车键即可浏览网站的首页。