Asp.net个性化服务《系列03_购物车》
此示例使用个性化服务的Profile配置与成员资格实现购物车功能。
创建CSS文件
为了使界面不显得过于呆板,创建一个简单的 CSS 文件。
1.在“解决方案资源管理器”中右击网站名称,再单击“新建文件夹”。
2.将文件夹命名为 css 。
3.右击"css”文件夹,点击“添加新项”,添加一个名为 Style.css 的新“样式表”。
4.编写CSS样式,部分代码如下:
创建登录页
1.在“解决方案资源管理器”中,右击 Web 应用程序并选择“添加新项”。将名为 Login.aspx 的“Web窗体”添加到站点。
2.在 Login.aspx 页上切换到“源”视图。
3.在<head>标签内的<title>标签下面,引入 css/Style.css 样式文件。
<head runat="server"> <title>登录</title> <link href="css/Style.css" rel="stylesheet" type="text/css" /> </head> |
4.在<body>中的<div>标签内添加 fieldset 标记
<fieldset class="area"> <legend class="mainTitle">站点登录</legend> </fieldset> |
5.将 Login.aspx 页面切换到“设计”视图。
6.从“工具箱”的“登录”组中,将 Login 控件拖动到页面上的<fieldset>标签内。
Login 控件是一个提示用户输入凭据并进行验证的单个控件。
7.在 Login 控件的“属性”窗口中,将 TextBoxStyle 属性组中的 width 属性设置为160px。
将 CheckBoxStyle 属性组中 HorizontalAlign 属性设置为"Right"。
将 RememberMeText 属性设置文本“下次自动登录”。
将 TitleText 属性值设置为空字符。
将 LoginButtonText 属性设置为“提交”文本。
将 LoginButtonType属性 设置为“Link”。
8.在 Login 控件上,右击并选择“转换为模板”,在“工具箱”中的“标准”组中,将 HyperLink 控件拖放到“提交”按钮的左边,
并在属性窗口中将Text属性设置为“注册”。
9.预览
创建注册页
1.在“解决方案资源管理器”中,右击网站的名称,单击“添加新项”,再添加一个名为 Register.aspx 的新“Web 窗体”。
2.在 Register.aspx 页上,切换到“源”视图并在页面上键入 fieldset 标签(同创建登录页的2、3、4步骤)。
3.从“工具箱”的“登录”组中,将 CreateUserWizard 控件拖动到页面上。
4.在 CreateUserWizard 控件的“属性”窗口中,将 ContinueDestinationPageUrl 属性设置为 ~/Default.aspx。
这将配置该控件,以便创建用户之后用户单击“继续”时,控件可以返回到主页。
5.在CreateUserWizard 控件下的任意地方输入文本,“提示:密码不能少于7位,并且至少包含一个特殊字符 如:([email protected]#$%)”。
6.从“工具箱”的“标准”组中,将 HyperLink 控件拖动到页面上。在 HyperLink 控件的“属性”窗口中,将 Text 属性设置为 Home,
并将 NavigateUrl 属性设置为 ~/Default.aspx。
7.将Login.aspx页面中的“注册”按钮的NavigateUrl 属性设置为 ~/Register.aspx 。
8.预览
创建主页
1.打开或切换到站点的 Default.aspx 页。(如果没有 Default.aspx 页,则可以添加该页或使用其他页。)
2.切换到“设计”视图。
3.从“工具箱”的“登录”组中,将 LoginName 控件拖动到页面上。
4.从“工具箱”的“登录”组中,将 LoginStatus 控件拖动到页面上,并放置在 LoginName 控件的右侧。
默认情况下,LoginStatus 控件呈现为链接。用户单击该控件后,应用程序将显示登录页。
5.键入静态文本(如“欢迎访问我们的站点”)。
6.从“工具箱”的“登录”组中,将 LoginView 控件拖动到页面上。
显示 LoginView 控件,并打开其 AnonymousTemplate 模板。该模板使您可以定义用户在登录前将看到的内容。
7.单击 LoginView 控件的编辑区域以**编辑。
8.在 LoginView 控件的 AnonymousTemplate 模板的编辑区域中,键入“您尚未登录,请单击登录链接以登录。”
9.在“LoginView 任务”面板的“视图”列表中,单击“LoggedInTemplate”。如果没有看到“LoginView 任务”模板,
请右击 LoginView 控件的标题并选择“显示智能标记”。现在定义将向已经登录的用户显示的内容。
10.单击 LoginView 控件的编辑区域以**编辑,然后键入“欢迎,您已经登录。”
11.预览
编辑配置文件,允许Form验证
1.在 Web.config 文件中,将 authentication 配置节的 mode 属性设置为“Forms”,以允许进行程序的表单验证。
<authentication mode="Forms"/> |
2.测试注册、测试登录、测试主页面
配置成员资格
在本演练的稍后部分中,将页面放置到受保护的子目录中(购物车页面)。现在必须创建子目录,以便在本演练的稍后部分中可以为其配置安全性。
向网站添加新文件夹
1.在“解决方案资源管理器”中,右击网站的名称,再单击“新建文件夹”。
2.将文件夹命名为 MemberPages。
在使用 ASP.NET 成员资格之前,必须配置应用程序以启用成员资格和设置用户。可以使用网站管理工具,该工具提供了一个用于配置设置的类似向导
的界面。完成安装向导之后,在项目的 App_Data 文件夹中创建一个名为 ASPNETDB.MDF 的 SQL Server 数据库。
创建成员资格用户
1.在“网站”菜单上单击“ASP.NET 配置”。
2.选择“安全”选项卡,单击指向“使用安全设置向导按部就班地配置安全性”的链接,再单击“下一步”。
3.继续执行向导的第 2 步并选择“通过 Internet”选项。该向导显示一页,从该页中您可以选择网站使用的身份验证方法。该选项指定应用程序将使用
Forms 身份验证,意味着用户将使用创建的登录页登录应用程序。
4.单击“下一步”。该向导会显示一条消息,表明将使用“高级提供程序设置”存储用户信息。默认情况下,成员资格信息存储在网站上 App_Data 文件
夹的 Microsoft SQL Server 速成版数据库文件中。
5.单击“下一步”。该向导显示创建角色的选项。不要选择“为此网站启用角色”复选框。
6.单击“下一步”。
该向导显示一页,您可以在该页中创建新用户。
7.输入定义应用程序用户的信息。将下面的值用作准则
-
“用户名” 您的名称(不要有空格),或示例名称。
-
“密码” 密码。需要严格的密码(该密码包括大写和小写字母以及标点,且长度至少为八个字符)。
-
“电子邮件” 您的个人电子邮件地址。在本演练的稍后部分中,将给您自己发送一则电子邮件,因此需要一个合法的电子邮件地址。
-
“安全提示问题”和“安全答案” 键入可在以后需要恢复密码时使用的问题和答案。
8.单击“创建用户”。该向导显示确认页。
前面创建了一个名为“MemberPages”的文件夹。在演练的此部分中,将创建一条规则,确保只有登录用户才可以访问该文件夹中的页面。
设置 MemberPages 子目录的访问规则
1.在向导中单击“下一步”。该向导显示一页,使您可以创建访问规则。
2.在“添加新访问规则”框中,展开网站的节点。
3.选择“MemberPages”,即前面创建的文件夹。
4.在“规则应用于”下选择“匿名用户”。
5.在“权限”之下选择“拒绝”。正在创建的规则拒绝匿名用户(即未登录的用户)的访问。
6.单击“添加此规则”。新的规则显示在下面的网格中。当用户请求“MemberPages”子目录中的页面时,即会检查该规则以确定是否允许该用户访问该页面。
7.单击“完成”。现在已完成该向导。关闭向导。
创建购物页面
1.在“解决方案资源管理器”中,右击“MemberPages”文件夹,单击“添加新项”,再添加一个名为 Shopping.aspx 的新“Web 窗体”。
2.将 LoginName 控件、LoginStatus 控件拖放到页面中。
3.从“工具箱”的“标准”组中,将 HyperLink 控件拖动到页面上。在 HyperLink 控件的“属性”窗口中,将 Text 属性设置为 Home,
并将 NavigateUrl 属性设置为 ~/Default.aspx。
4.切换到或打开 Default.aspx 页。
5.从“工具箱”的“标准”组中,将 HyperLink 控件拖动到页面上。
6.在 HyperLink 控件的“属性”窗口中,将 Text 属性设置为“购物”和将 NavigateUrl 属性设置为 ~/MemberPages/Shopping.aspx 以指向以前创建的页面。
7.切换到或打开 Shopping.aspx 页。
8.将两行两列的表格放置在 fieldset 标签内,以完成布局。设置文本“代售商品列表”,“购物车”。如下图:
9.在“工具箱”的“数据”组中,将 GridView 控件拖动到页面的第二行第一列单元格中。
设置GridView控件绑定数据源,数据源将绑定到 Northwind 库中的 Products 表
10.在“GridView 任务”面板中,选择“选择数据库源”并“新建数据源”。
11.在“数据源配置向导”中,选择数据库。
12.点击“确定”,然后在新窗口中点击“新建连接”。输入服务器名称和数据库名称。
13.“确定”-->“下一步”-->“下一步”
14.“指定来自表和视图的列”下拉选择Products表。并选择[ProductID], [ProductName], [UnitPrice] 列。
15.“下一步”并“测试查询”,完成绑定。
设置GridView控件的列显示
16.在“GridView 任务”面板,选择“编辑列”。
17.在“可用字段”窗口中,展开 CommandField 节点,然后选上“选择”控件,点击确定按钮。所选的控件将出现在“选定的字段”窗口中。
18.在“选择”控件的属性窗口中,将 ButtonType 属性设置为 Image 。将 SelectImageUrl 属性设置为~/Images/button_buy.gif
19.在“可用字段”窗口中,继续添加两个 BoundField 绑定控件。
20.将第一个 BoundField 控件的 HeaderText 属性设置为“商品名称”,DataField 属性设置为“ProductName”,SortExpression 属性设置为“ProductName”。
21.将第二个 BoundField 控件的 HeaderText 属性设置为“单价”,DataField 属性设置为“UnitPrice”,DataFormatString 属性设置为“{0:C}”
SortExpression 属性设置为“UnitPrice”。
22.取消“自动生成字段”的选中状态。
23.GridView控件的 AllowPaging 属性设置为True,AllowSorting属性设置为True,DataKeyNames属性设置为“ProductID”,width属性设置为300px。
24.完成列设置。
设置显示购物车的GridView
1.在Shopping.aspx页面的表格的第二行第二列处,拖放一个 GridView 控件。
2.在“GridView 任务”面板,选择“编辑列”。
3.添加一个CommandField组中的“选择”控件,并设置 ButtonType 属性为Image,SelectImageUrl属性为~/Images/button_del.gif。
4.分别添加3个BoundFiled,并分别设置HeaderText属性为“商品名称”、“单价”、“数量”。
编写代码,创建商品类(CartItem)
1.在“解决方案资源管理器”中,右击网站的名称,选择“添加Asp.Net文件夹”项并添加“App_Code”文件夹。
“App_Code”文件夹用于存放程序中的类文件。
2.选择“App_Code”文件夹,右击选择“添加新项”,添加名称为 CartItem.cs 的类。此类是商品信息的实体类。
3.具有 ID, Name , Price , Quantity 属性。ID、Name、Quantity 可读,其他的可读可写。
4.该类可以序列化。
编写代码,创建购物车类
1.在“App_Code”文件夹中创建 ShoppingCart.cs 类。
2.该类是购物车类,含有一个HashTable成员变量,添加商品方法、移除商品方法、获得商品总价格方法、获得所有商品方法。
设置Profile配置节
1.打开“Web.config”文件,在<system.web>配置节下加入如下配置:
<profile> <properties> <add name="myShoppingCart" type="ShoppingCart" serializeAs="Binary"/> </properties> </profile>
在<profile>元素的<properties>子元素下添加了一个<add>节点。这个节点代表一个购物车实例,类型是 ShoppingCart 类由 Type 属性指定,实例名为
myShoppingCart 由 name 属性指定,这个实例将会以 Binary 二进制的形式序列化到数据库中。关于 SerializeAs 属性的默认值是 String 格式进行序列化。
在这必须是Binary形式,因为我们要序列化的实例是“ShoppingCart”类类型而不是基本数据类型。
以往我们都是把购物车对象保存到Session中,现在不同了需要把对象保存到数据库中,不仅要在类头处声明[Serializable],注明该类是可以序列化的,还要在配
置文件中注明是以二进制进行序列化。
这个通过<add>节点配置的购物车属性会动态的注入到 ProfileCommon 类中,成为该类的成员。在程序中通过 ProfileCommon 类的实例名为 Profile 的对象
进行访问。 如:Profile.myShoppingCart
如果觉得Profile用起来没有找到技巧,那么用Session保存的键-值对都可以通过配置文件保存到Profile中。Profile中的数据会永久的保存到数据库中,而Seesion
仅仅是保存到内存中。
编写最后的代码
1.转到“Shopping.aspx”页面
2.为 GridView1 与 GridView2 分别添加 SelectedIndexChanged 事件
3.利用 Profile 为购物车绑定选定商品信息
4.添加商品代码
5.移除商品代码
代码如下:
using System; public partial class MemberPages_Shopping : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { BindShoppingCart(); } } //利用 Profile 为购物车绑定选定商品信息 private void BindShoppingCart() { if (Profile.myShoppingCart != null) { GridView2.DataSource = Profile.myShoppingCart.CartItems; GridView2.DataBind(); Label1.Text = "总价:" + Profile.myShoppingCart.Total.ToString("C"); } } //添加商品到购物车 protected void GridView1_SelectedIndexChanged(object sender, EventArgs e) { //获得商品名称 String name = GridView1.SelectedRow.Cells[1].Text; //获得商品价格 decimal price = Decimal.Parse(GridView1.SelectedRow.Cells[2].Text, System.Globalization.NumberStyles.Currency); //获得商品ID //int id = (int)GridView1.DataKeys[GridView1.SelectedIndex].Value; int id = (int)GridView1.SelectedValue; if (Profile.myShoppingCart == null) { Profile.myShoppingCart = new ShoppingCart(); } Profile.myShoppingCart.AddItem(id, name, price); BindShoppingCart(); } //在购物车中删除商品 protected void GridView2_SelectedIndexChanged(object sender, EventArgs e) { int id = (int)GridView2.SelectedValue; Profile.myShoppingCart.RemoveItem(id); BindShoppingCart(); } }
6.为GridView2设置主键为 id ,“商品名称”列绑定 CartItem 类的 name 属性,“单价”列绑定 CartItem 类的 Price 属性,“数量”列绑定 CartItem 类
的 Quantity 属性。
7.完。。。
代码【明德兄】
转载于:https://www.cnblogs.com/MingDe/archive/2010/02/26/1673986.html