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

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› ASP.NET›ASP.NET编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

此示例使用个性化服务的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位，并且至少包含一个特殊字符如：(!@#$%)”。

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();
    }
}