Asp.net个性化服务《系列03_购物车》

此示例使用个性化服务的Profile配置与成员资格实现购物车功能。

创建CSS文件

为了使界面不显得过于呆板,创建一个简单的 CSS 文件。

1.在“解决方案资源管理器”中右击网站名称,再单击“新建文件夹”。

2.将文件夹命名为 css 。

3.右击"css”文件夹,点击“添加新项”,添加一个名为 Style.css 的新“样式表”。

4.编写CSS样式,部分代码如下:

Asp.net个性化服务《系列03_购物车》

创建登录页

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.预览

Asp.net个性化服务《系列03_购物车》

创建注册页

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.预览

Asp.net个性化服务《系列03_购物车》

创建主页

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.预览

Asp.net个性化服务《系列03_购物车》

编辑配置文件,允许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。

Asp.net个性化服务《系列03_购物车》

4.切换到或打开 Default.aspx 页。

5.从“工具箱”的“标准”组中,将 HyperLink 控件拖动到页面上。

6.在 HyperLink 控件的“属性”窗口中,将 Text 属性设置为“购物”和将 NavigateUrl 属性设置为 ~/MemberPages/Shopping.aspx 以指向以前创建的页面。

7.切换到或打开 Shopping.aspx 页。

8.将两行两列的表格放置在 fieldset 标签内,以完成布局。设置文本“代售商品列表”,“购物车”。如下图:

Asp.net个性化服务《系列03_购物车》

9.在“工具箱”的“数据”组中,将 GridView 控件拖动到页面的第二行第一列单元格中。

设置GridView控件绑定数据源,数据源将绑定到 Northwind 库中的 Products 表

10.在“GridView 任务”面板中,选择“选择数据库源”并“新建数据源”。

11.在“数据源配置向导”中,选择数据库。

Asp.net个性化服务《系列03_购物车》

12.点击“确定”,然后在新窗口中点击“新建连接”。输入服务器名称和数据库名称。

Asp.net个性化服务《系列03_购物车》

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.取消“自动生成字段”的选中状态。

 Asp.net个性化服务《系列03_购物车》

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属性为“商品名称”、“单价”、“数量”。

Asp.net个性化服务《系列03_购物车》

编写代码,创建商品类(CartItem)

1.在“解决方案资源管理器”中,右击网站的名称,选择“添加Asp.Net文件夹”项并添加“App_Code”文件夹。
   “App_Code”文件夹用于存放程序中的类文件。

2.选择“App_Code”文件夹,右击选择“添加新项”,添加名称为 CartItem.cs 的类。此类是商品信息的实体类。

3.具有 ID, Name , Price , Quantity 属性。ID、Name、Quantity 可读,其他的可读可写。

4.该类可以序列化。

Asp.net个性化服务《系列03_购物车》

编写代码,创建购物车类

1.在“App_Code”文件夹中创建 ShoppingCart.cs 类。

2.该类是购物车类,含有一个HashTable成员变量,添加商品方法、移除商品方法、获得商品总价格方法、获得所有商品方法。

Asp.net个性化服务《系列03_购物车》

设置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 属性。

Asp.net个性化服务《系列03_购物车》

7.完。。。

代码

【明德兄】

转载于:https://www.cnblogs.com/MingDe/archive/2010/02/26/1673986.html