"> آموزش ساخت سبد خرید پیشرفته در ASP.NET | ام اس پی سافت

آموزش ساخت سبد خرید پیشرفته در ASP.NET

Shopping Cart

این مقاله ( آموزش ساخت سبد خرید ) نیاز های منطق کسب و کار (business logic) برای اضافه کردن یک Shopping Cart بهWingtip Toys sample ASP.NET Web Forms application. این مقاله بر اساس آموزش قبل (Display Data Items and Details) است و قسمتی از مجموعه آموزش های Wingtip Toy Store می باشد. وقتی این آموزش کامل شود، کاربران نمونه شما قادر خواهند بود که محصولات کارت خرید خود را اضافه، حذف و اصلاح کنند.

 آموزش ساخت سبد خرید

دلیل آموزش:

چگونگی ساخت یک کارت خرید برای یک اپلیکشین وب (web application)

چگونگی دسترسی دادن به کاربران برای اضافه کردن محصول به کارت خود.

چگونگی اضافه کردن یک GridView control برای نمایش اطلاعات کارت.

چگونگی حساب کردن و نمایش دادن کل سفارش.

چگونگی حذف و بروز کردن محصولات کارت

و چگونگی ایجاد یک شمارنده برای کارت

ویژگی های کد در این آموزش

کد اول Entity Framework (Entity Framework Code First)

تفسیر اطلاعات

کنترل اطلاعات تایپ شده

مدل اتصال (Model binding)

ایجاد یک کارت خرید

پیش از این مجموعه آموزشی، شما برای دیدن اطلاعات محصول از یک پایگاه داده (database) یک صفحه و کد اضافه می کردید. در این مقاله، شما یک کارت خرید برای مدیریت محصولاتی که کاربران به خریدن آنها علاقه مند هستند، ایجاد می کنید. کاربران قادراند که مرور کنند و محصولات مورد پسند را به کارت خود اضافه کنند حتی زمانی که آنها ثبت نام نکرده اند و یا وارد اکانت خود نشده اند. وقتی که کاربران برای اولین بار به کارت خود دسترسی پیدا می کنند برای دسترسی به سند خرید ، شما با استفاده از globally unique identifier (GUID) یک شناسه (ID)منحصر به فرد برای هر کاربر تعیین می کنید. و شما این شناسه را با استفاده از ASP.NET Session state ذخیره می کنید.

ایجاد یک Cart Item به عنوان Model Class

پیش از این مجموعه مقاله های آموزشی، شما یک طرح و یا الگو برای مدل و اطلاعات محصول تعریف می کنید با ایجاد یک کلاس Category و Product در Models folder. حالا یک کلاس جدید برای تعریف طرح برای کارت خرید ایجاد کنید. بعد از این آموزش، شما یک کلاس برای رسیدگی به اطلاعات دسترسی در جدول CartItem اضافه می کنید. این کلاس یک business logic برای اضافه کردن، حذف و بروز رسانی آیتم های موجود در کارت خرید فراهم می کند.

روی Models folder کلیک راست کرده و Add -> New Item را انتخاب کنید.

Shopping Cart

جعبه گفتو گو (دیالوگ) Add New Item نمایان خواهد شد. Code و سپس Class را انتخاب کنید.

Shopping Cart

اسم این کلاس جدید را CartItem.cs بگذارید.

روی Add کلیک کنید.

فایل کلاس جدید در ویراشگر نشان داده خواهد شد.

کد پیش فرض را با کد زیر جا به جا کنید.

using System.ComponentModel.DataAnnotations;

namespace WingtipToys.Models
{
  public class CartItem
  {
    [Key]
    public string ItemId { get; set; }

    public string CartId { get; set; }

    public int Quantity { get; set; }

    public System.DateTime DateCreated { get; set; }

    public int ProductId { get; set; }

    public virtual Product Product { get; set; }

  }
}

 

کلاس CartItem شامل طرحی است که برای هر محصول یک کاربر به کارت خرید تعریف می کند. این کلاس ماننده طرحی است که شما در کلاس آموزش های گذشته ساختید. طبق قرارداد Entity Framework انتظار دارد که کلید اولیه جدول CartItem می تواند هم چنین CartItemId یا ID باشد. اگرچه، این کد رفتار پیش فرض را با استفاده از تفسیر اطلاعات [Key] باطل می کند. این property نشانه ویژگی شناسه آیتم را مشخص می کند که ویژگی ItemID کلید اولیه (primary key) می باشد.

ویژگی CartId، ID کاربری را که در حال خرید یک محصول است مشخص می کند.وقتی کاربر به کارت خرید خود دتسرسی پیدا کرد شما کد را برای اضفه کردن این شناسه (ID) کاربر اضافه می کنید.

بروز رسانی زمینه (Context) محصول

به علاوه، برای اضافه کردن CartItem به کلاس، شما باید کلاس پایگاه داده ای که کلاس های entity را مدیریت می کنند بروز رسانی کنید. برای انجام آن، شما CartItem تازه ساخته شده را به کلاس ProductContext اضافه می کنید.

در Solution Explorer، فایل ProductContext.cs را در پوشه Models پیدا و باز کنید.

کد برجسته شده را به ProductContext.cs اضافه کنید، مثل زیر:

using System.Data.Entity;

namespace WingtipToys.Models
{

public class ProductContext : DbContext
{

public ProductContext()
: base("WingtipToys")
{
}
public DbSet<Category> Categories { get; set; }
public DbSet<Product> Products { get; set; }
public DbSet<CartItem> ShoppingCartItems { get; set; }
}
}

 

همان طور که در قبل گفته شد، کد ProductContext.cs ، namespace System.Data.Entity را اضافه می کند، پس شما به تمام قابلیت های هسته ای Entity Framework دسترسی خواهید داشت. این قابلیت شامل سازگاری با query، insert (الحاق کردن)، بروز رسانی و حذف اطلاعات با کار کردن با objects تایپ شده می شود. کلاس ProductContext دسترسی به CartItem تازه اضافه شده را اضافه می کند.

مدیریت کارت خرید Business Logic

در مرحله بعد، شما یک ShoppingCart در یک پوشه جدید Logic می سازید. کلاس ShoppingCart دسترسی به داده ها را به جدول CartItem منتقل می کند. هم چنین کلاس منطق کسب و کار (business logic) برای اضافه کردن، حذف و بروز کردن آیتم های کارت خرید را شامل می شود.

منطق کارت خریدی که شما اضافه کردید شامل مدیریت کار های زیر خواهد بود:

اضافه کردن محصول به کارت خرید

حذف کردن محصول از کارت خرید

گرفتن شناسه (ID ) کارت خرید

بازیابی محصولات از کارت خرید

مجموع کردن مقدار تمام محصولات کارت ها

بروز رسانی کردن اطلاعات کارت

یک صفحه کارت خرید (ShoppingCart.aspx) و یک کلاس کارت خرید هر دو برای دسترسی به اطلاعات کارت خرید استفاده می شوند. صفحه کارت خرید همیشه آیتم های اضافه شدن کاربر را نمایش می هد. در کنار صفحه و کلاس کارت خرید، شما یک صفحه (AddToCart.aspx) برای اضافه کردن محصول به کارت خود می سازید. هم چنین شما کد را به صفحه ی ProductList.aspx اضافه می کنید و صفحه ProductDetails.aspx یک لینک به این آدرس AddToCart.aspx ارائه می دهد، پس کاربران می توانند محصول مورد نظر را به کارت خود اضافه کنند.

نمودار زیر روند اساسی که کاربر یک محصول به سبد خرید خود اضافه می کند را نشان می دهد.

Shopping Cart

وقتی کاربر روی لینک Add To Cart کلیک می کند در صفحه ی ProductList.aspx یا ProductDetails.aspx، اپلیکیشن به صفحه AddToCart.aspx هدایت می شودو سپس به صورت خودکار به صفحه ShoppingCart.aspx می رود. صفحه AddToCart.aspx محصول انتخاب شده را به کارت اضافه می کند با فرا خواندن یک کلاس در کارت خرید. صفحه ShoppingCart.aspx محصولی را نمایش می دهد که به کارت خرید اضافه شده است.

ایجاد کلاس کارت خرید

کلاس ShoppingCart به یک پوشه جدا در اپلیکیشن اضافه می شود پس در نهایت یک تمایز اساسی بین مدل (Models folder)، صفحه ها (Models folder) و logic (Logic folder).

در Solution Explorer، روی Solution Explorer کلیک راست کنید و Add -> New Folder را انتخاب کنید. اسم پوشه جدید را Logic بگذارید.

روی همان پوشه کلیک راست کنید و Add -> New Item را انتخاب کنید.

یک فایل کلاس جدید انتخاب کنید و اسم آن را ShoppingCartActions.cs بگذارید.

کد زیر را با کد پیش فرض جا به جا کنید.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using WingtipToys.Models;

namespace WingtipToys.Logic
{
  public class ShoppingCartActions : IDisposable
  {
    public string ShoppingCartId { get; set; }

    private ProductContext _db = new ProductContext();

    public const string CartSessionKey = "CartId";

    public void AddToCart(int id)
    {
      // Retrieve the product from the database.           
      ShoppingCartId = GetCartId();

      var cartItem = _db.ShoppingCartItems.SingleOrDefault(
          c => c.CartId == ShoppingCartId
          && c.ProductId == id);
      if (cartItem == null)
      {
        // Create a new cart item if no cart item exists.                 
        cartItem = new CartItem
        {
          ItemId = Guid.NewGuid().ToString(),
          ProductId = id,
          CartId = ShoppingCartId,
          Product = _db.Products.SingleOrDefault(
           p => p.ProductID == id),
          Quantity = 1,
          DateCreated = DateTime.Now
        };

        _db.ShoppingCartItems.Add(cartItem);
      }
      else
      {
        // If the item does exist in the cart,                  
        // then add one to the quantity.                 
        cartItem.Quantity++;
      }
      _db.SaveChanges();
    }

    public void Dispose()
    {
      if (_db != null)
      {
        _db.Dispose();
        _db = null;
      }
    }

    public string GetCartId()
    {
      if (HttpContext.Current.Session[CartSessionKey] == null)
      {
        if (!string.IsNullOrWhiteSpace(HttpContext.Current.User.Identity.Name))
        {
          HttpContext.Current.Session[CartSessionKey] = HttpContext.Current.User.Identity.Name;
        }
        else
        {
          // Generate a new random GUID using System.Guid class.     
          Guid tempCartId = Guid.NewGuid();
          HttpContext.Current.Session[CartSessionKey] = tempCartId.ToString();
        }
      }
      return HttpContext.Current.Session[CartSessionKey].ToString();
    }

    public List<CartItem> GetCartItems()
    {
      ShoppingCartId = GetCartId();

      return _db.ShoppingCartItems.Where(
          c => c.CartId == ShoppingCartId).ToList();
    }
  }
}

 

روش AddToCart محوصلات منحصر به فرد را قادر می سازد که بر پایه شناسه مشمول کارت خرید شوند. اگر یک محصول به سبد اضافه شد، یا یک محصول از قبل در آن بوده مقدار آن نیز اضافه می شود.

روش GetCartId شناسه کارت را برای کاربر ارائه می دهد. شناسه کارت برای پیگیری مواردی است که کاربر در سبد خرید خود دارد. اگر یک کاربر شناسه کارت نداشته باشد، یک شناهس برای آنها ساخته خواهد شد. اگر کاربر به عنوان یک عضو وارد شد، شناسه کارت با نام کاربری او تنظیم می شود. اگرچه کاربر وارد اکانت خود نشده باشد، شناسه کاربری به یک مقدار منحصر به فرد (a GUID) تنظیم می شود. یک GUID تضمین می کند که فقط یک کارت برای هر کاربر ساخته می شود.

روش GetCartItems یک لیست از سبد خرید به کاربر ارائه می دهد. در مراحل بعد، خواهید دید که مدل اتصال برای نمایش موارد موجود در سبد با استفاده از روش GetCartItems استفاده می شود.

ایجاد قابلیت اضافه کردن به سبد خرید

همان طور که اشاره شد، یک صفحه پردازش (processing) ایجاد می کنید و اسم آن را AddToCart.aspx می گذارید که برای اضافه کردن محصولات جدید به کارت خرید کاربر استفاده می شود. صفحه AddToCart.aspx نیاز دارد که شناسه محصول به آن داده شود. شناسه محصول زمانی که AddToCart فرا خوانده شود استفاده می شود.

تذکر: شما کد مقابل AddToCart.aspx.cs را برای این صفحه اصلاح می کنید، نه برای صفحه UI (AddToCart.aspx).

برای ایجاد قابلیت اضافه کردن به کارت:

در Solution Explorer، روی WingtipToys کلیک راست کنید، روی Add -> New Item کلیک کنید.

           جعبه ((باکس) box) گفت گو Add New Item نشان داده می شود.

یک صفحه جدید استاندارد (Web Form) برای اپلیکیشن ایجاد کنید و نام آن را AddToCart.aspx بگذارید.

Shopping Cart

در Solution Explorer، روی صفحه AddToCart.aspx کلیک راست کرده و سپس روی View Code کلیک کنید. فایل کد AddToCart.aspx.cs در ویراشگر باز می شود.

در AddToCart.aspx.cs کد موجود را با کد زیر جا به جا کنید.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Diagnostics;
using WingtipToys.Logic;

namespace WingtipToys
{
  public partial class AddToCart : System.Web.UI.Page
  {
    protected void Page_Load(object sender, EventArgs e)
    {
      string rawId = Request.QueryString["ProductID"];
      int productId;
      if (!String.IsNullOrEmpty(rawId) && int.TryParse(rawId, out productId))
      {
        using (ShoppingCartActions usersShoppingCart = new ShoppingCartActions())
        {
          usersShoppingCart.AddToCart(Convert.ToInt16(rawId));
        }

      }
      else
      {
        Debug.Fail("ERROR : We should never get to AddToCart.aspx without a ProductId.");
        throw new Exception("ERROR : It is illegal to load AddToCart.aspx without setting a ProductId.");
      }
      Response.Redirect("ShoppingCart.aspx");
    }
  }
}

 

زمانی که صفحه AddToCart.aspx بارگذاری شد، شناسه محصول از query string بازیابی می شود. بعد، یک نمونه از کلاس کارت خرید ایجاد شده می شود که برای فرا خواندن متود AddToCart به کار می رود. اگر محصول به سبد خرید اضافه نشود، محصول به جدول CartItem اضافه می شود. اگر محصول از قبل اضافه شده باشد و کاربر یک مورد اضافی از همان محصول را اضافه کند، مقدار محصول در جدول CartItem افزوده می شود. در نهایت، صفحه به ShoppingCart.aspx قبل بازگشت داده می شود که در مرحله بعد آن را اضافه می کنید، جایی که کاربران لسیت بروز شده موارد درون کارت را مشاهده می کنند.

همان طور که قبلا توضیح دادیم، یک شناسه کاربری برای تشخیص دادن محصولاتی است که با یک کاربر خاص مرتبط است. هر بار که کاربر یک محصول به سبد خود اضافه کند، این شناسه کاربری به یک ردیف در جدول CartItem اضافه می شود.

ایجاد کارت خرید UI

صفحه ShoppingCart.aspx محصولاتی را که کاربر به سبد خرید خود اضافه کرده است نمایش می دهد. هم چنین قابلیت اضافه کردن، حذف و بروز کردن موارد کارت خرید را می دهد.

در Solution Explorer، روی WingtipToys کلیک راست کنید، روی Add -> New Item کلیک کنید.

جعبه گفت گو Add New Item نشان داده می شود.

یک صفحه جدید (Web Form) اضافه کنید که بعد از انتخاب کردن Web Form using Master Page شامل یک master page (صفحه اصلی) شود. اسم صفحه را ShoppingCart.aspx بگذارید.

Site.Master را برای ضمیمه کردن صفحه اصلی به صفحه .aspx ایجاد شده انتخاب کنید.

در صفحه ShoppingCart.aspx، markup (نشان گذاری) زیر را با markup موجود جا به جا کنید.

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="ShoppingCart.aspx.cs" Inherits="WingtipToys.ShoppingCart" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <div id="ShoppingCartTitle" runat="server" class="ContentHead"><h1>Shopping Cart</h1></div>
    <asp:GridView ID="CartList" runat="server" AutoGenerateColumns="False" ShowFooter="True" GridLines="Vertical" CellPadding="4"
        ItemType="WingtipToys.Models.CartItem" SelectMethod="GetShoppingCartItems" 
        CssClass="table table-striped table-bordered" >   
        <Columns>
        <asp:BoundField DataField="ProductID" HeaderText="ID" SortExpression="ProductID" />        
        <asp:BoundField DataField="Product.ProductName" HeaderText="Name" />        
        <asp:BoundField DataField="Product.UnitPrice" HeaderText="Price (each)" DataFormatString="{0:c}"/>     
        <asp:TemplateField   HeaderText="Quantity">            
                <ItemTemplate>
                    <asp:TextBox ID="PurchaseQuantity" Width="40" runat="server" Text="<%#: Item.Quantity %>"></asp:TextBox> 
                </ItemTemplate>        
        </asp:TemplateField>    
        <asp:TemplateField HeaderText="Item Total">            
                <ItemTemplate>
                    <%#: String.Format("{0:c}", ((Convert.ToDouble(Item.Quantity)) *  Convert.ToDouble(Item.Product.UnitPrice)))%>
                </ItemTemplate>        
        </asp:TemplateField> 
        <asp:TemplateField HeaderText="Remove Item">            
                <ItemTemplate>
                    <asp:CheckBox id="Remove" runat="server"></asp:CheckBox>
                </ItemTemplate>        
        </asp:TemplateField>    
        </Columns>    
    </asp:GridView>
    <div>
        <p></p>
        <strong>
            <asp:Label ID="LabelTotalText" runat="server" Text="Order Total: "></asp:Label>
            <asp:Label ID="lblTotal" runat="server" EnableViewState="false"></asp:Label>
        </strong> 
    </div>
    <br />
</asp:Content>

 

صفحه ShoppingCart.aspx شامل یک کنترل GridView می شود به نام CartList. این کنترل از model binding (مدل اتصال) برای متصل کردن اطلاعات کارت خرید از پایگاه داده به کنترل GridView استفاده می کند. همان طور که قبلا توضیح دادیم در این مجموعه مقالات شما می توانید جزییات Item را با استفاده ار IntelliSense انتخاب کنید. برای پیکربندی (configure) یک کنترل اطلاعات، به منظور استفاده از مدل اتصال (model binding) برای انتخاب اطلاعات، SelectMethod کنترل را تنظیم می کنید. در markup بالا، SelectMethod را برای استفاده از متود GetShoppingCartItems، که یک لیست از CartItem را بر می گرداند تنظیم کنید. کنترل اطلاعات GridView متود را در زمان مناسب در صفحه life cycle (چرخه زندگی) فرا می خواند و به صورت خودکار اطلاعات برگردانده شده را binds می کند.

باز یابی موارد کارت خرید

در مرحله بعد، کد را به ShoppingCart.aspx.cs، برای بازیابی کارت خرید UI اضافه می کنیم.

در Solution Explorer، روی صفحه ShoppingCart.aspx کلیک راست کنید و سپس روی View Code کلیک کنید.

فایل code-behind ShoppingCart.aspx.cs در ویرایشگر باز می شود.

کد موجود را با کد زیر تعویض کنید:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using WingtipToys.Models;
using WingtipToys.Logic;

namespace WingtipToys
{
  public partial class ShoppingCart : System.Web.UI.Page
  {
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    public List<CartItem> GetShoppingCartItems()
    {
      ShoppingCartActions actions = new ShoppingCartActions();
      return actions.GetCartItems();
    }
  }
}

 

کنترل اطلاعات GridView متود GetShoppingCartItems فرا می خواند در زمان مناسب در صفحه life cycle (چرخه زندگی) و به صورت خودکار اطلاعات بازگشت داده شده را binds می کند. متود GetShoppingCartItems یک نمونه از ShoppingCartActions ایجاد می کند. سپس، کد که از نمونه استفاده می کند برای بازگرداندن موارد درون کارت با فراخواندن متود GetCartItems.

اضافه کردن محصول به کارت خرید

وقتی صفحه ProductList.aspx و یا حتی ProductDetails.asp نشان داده شد، کاربر قادر خواهد بود که با استفاده از لینک محصول را به کارت خود اضافه کند. وقتی روی لینک کلیک کنند، اپ به صفحه در حال پردازش که اسم آن AddToCart.aspx است هدایت می شود.

اکنون، یک لینک Add to Cart برای هر دو صفحه ProductList.aspx و ProductDetails.aspx اضافه کنید. این لینک شامل شناسه محصولی که از پایگاه داده بازتاب داده شد نیز می شود.

در Solution Explorer، صفحه ProductList.aspx را پیدا و باز کنید.

کد های برجسته شده زرد رنگ را به صفحه ProductList.aspx اضافه کنید و در نهایت صفحه به صورت زیر خواهد شد:

<%@ Page Title="Products" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" 
         CodeBehind="ProductList.aspx.cs" Inherits="WingtipToys.ProductList" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <section>
        <div>
            <hgroup>
                <h2><%: Page.Title %></h2>
            </hgroup>

            <asp:ListView ID="productList" runat="server" 
                DataKeyNames="ProductID" GroupItemCount="4"
                ItemType="WingtipToys.Models.Product" SelectMethod="GetProducts">
                <EmptyDataTemplate>
                    <table runat="server">
                        <tr>
                            <td>No data was returned.</td>
                        </tr>
                    </table>
                </EmptyDataTemplate>
                <EmptyItemTemplate>
                    <td runat="server" />
                </EmptyItemTemplate>
                <GroupTemplate>
                    <tr id="itemPlaceholderContainer" runat="server">
                        <td id="itemPlaceholder" runat="server"></td>
                    </tr>
                </GroupTemplate>
                <ItemTemplate>
                    <td runat="server">
                        <table>
                            <tr>
                                <td>
                                    <a href="ProductDetails.aspx?productID=<%#:Item.ProductID%>">
                                        <img src="/Catalog/Images/Thumbs/<%#:Item.ImagePath%>"
                                            width="100" height="75" style="border: solid" /></a>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <a href="ProductDetails.aspx?productID=<%#:Item.ProductID%>">
                                        <span>
                                            <%#:Item.ProductName%>
                                        </span>
                                    </a>
                                    <br />
                                    <span>
                                        <b>Price: </b><%#:String.Format("{0:c}", Item.UnitPrice)%>
                                    </span>
                                    <br />
                                    <a href="/AddToCart.aspx?productID=<%#:Item.ProductID %>">               
                                        <span class="ProductListItem">
                                            <b>Add To Cart<b>
                                        </span>           
                                    </a>
                                </td>
                            </tr>
                            <tr>
                                <td>&nbsp;</td>
                            </tr>
                        </table>
                        </p>
                    </td>
                </ItemTemplate>
                <LayoutTemplate>
                    <table runat="server" style="width:100%;">
                        <tbody>
                            <tr runat="server">
                                <td runat="server">
                                    <table id="groupPlaceholderContainer" runat="server" style="width:100%">
                                        <tr id="groupPlaceholder" runat="server"></tr>
                                    </table>
                                </td>
                            </tr>
                            <tr runat="server">
                                <td runat="server"></td>
                            </tr>
                            <tr></tr>
                        </tbody>
                    </table>
                </LayoutTemplate>
            </asp:ListView>
        </div>
    </section>
</asp:Content>

 

تست کارت خرید

حالا اپلیکیشن را اجرا کنید که ببینید نمی توانید محصولی به سبد خرید اضافه کنید، اما می توانید کل کارت خرید را مشاهده کنید.

برای اجرای اپ کلید F5 را بزنید.

مرورگر صفحه Default.aspx را باز می کند و نمایش می دهد.

Cars (ماشین ها) را از منو navigation (ناوبری) انتخاب کنید.

روی لینک Add To Cart رو به روی محصول اول کلیک کنید.

صفحه ShoppingCart.aspx به همراه کل سفارش نشان داده می شود.

Shopping Cart

چند محصول دیگر (به طور مثال: یک هواپیما) به کارت اضافه کنید.

صفحه ShoppingCart.aspx به صورت بروز شده همه محصولات را نمایش می دهد.

Shopping Cart

اپلیکیشن را با بستن پنجره مرورگر متوقف کنید.

اضافه کردن دکمه Update و Checkout به کارت خرید

برای اجازه دادن به کاربران جهت تغییر دادن کارت خرید خود، باید یک دکمه Update و یک دکمه Checkout به صفحه کارت خرید اضافه کنید.

در Solution Explorer، صفحه ShoppingCart.aspx را در قسمت root پروژه وب اپلیکیشن باز کنید.

برای اضافه کردن دکمه Update و Checkout به صفحه ShoppingCart.aspx، کد را به صورت زیر، به markup خود اضافه کنید:

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="ShoppingCart.aspx.cs" Inherits="WingtipToys.ShoppingCart" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <div id="ShoppingCartTitle" runat="server" class="ContentHead"><h1>Shopping Cart</h1></div>
    <asp:GridView ID="CartList" runat="server" AutoGenerateColumns="False" ShowFooter="True" GridLines="Vertical" CellPadding="4"
        ItemType="WingtipToys.Models.CartItem" SelectMethod="GetShoppingCartItems"  
        CssClass="table table-striped table-bordered" >   
        <Columns>
        <asp:BoundField DataField="ProductID" HeaderText="ID" SortExpression="ProductID" />        
        <asp:BoundField DataField="Product.ProductName" HeaderText="Name" />        
        <asp:BoundField DataField="Product.UnitPrice" HeaderText="Price (each)" DataFormatString="{0:c}"/>     
        <asp:TemplateField   HeaderText="Quantity">            
                <ItemTemplate>
                    <asp:TextBox ID="PurchaseQuantity" Width="40" runat="server" Text="<%#: Item.Quantity %>"></asp:TextBox> 
                </ItemTemplate>        
        </asp:TemplateField>    
        <asp:TemplateField HeaderText="Item Total">            
                <ItemTemplate>
                    <%#: String.Format("{0:c}", ((Convert.ToDouble(Item.Quantity)) *  Convert.ToDouble(Item.Product.UnitPrice)))%>
                </ItemTemplate>        
        </asp:TemplateField> 
        <asp:TemplateField HeaderText="Remove Item">            
                <ItemTemplate>
                    <asp:CheckBox id="Remove" runat="server"></asp:CheckBox>
                </ItemTemplate>        
        </asp:TemplateField>    
        </Columns>    
    </asp:GridView>
    <div>
        <p></p>
        <strong>
            <asp:Label ID="LabelTotalText" runat="server" Text="Order Total: "></asp:Label>
            <asp:Label ID="lblTotal" runat="server" EnableViewState="false"></asp:Label>
        </strong> 
    </div>
  <br />
    <table> 
    <tr>
      <td>
        <asp:Button ID="UpdateBtn" runat="server" Text="Update" OnClick="UpdateBtn_Click" />
      </td>
      <td>
        <!--Checkout Placeholder -->
      </td>
    </tr>
    </table>
</asp:Content>

 

وقتی که کاربر روی دکمه Update کلیک می کند، کنترل کننده رخداد های (event handler) UpdateBtn_Click فرا خوانده می شود.

بعد، می توانید کد شامل فایل ShoppingCart.aspx.cs را برای loop کردن موارد کارت و فراخواندن RemoveItem و UpdateItem بروز رسانی کنید،.

در Solution Explorer، فایل ShoppingCart.aspx.cs را در قسمت root پروژه وب اپلیکیشن باز کنید

و کد نهایی فایل ShoppingCart.aspx.cs به صورت زیر است:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using WingtipToys.Models;
using WingtipToys.Logic;
using System.Collections.Specialized;
using System.Collections;
using System.Web.ModelBinding;

namespace WingtipToys
{
public partial class ShoppingCart : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
using (ShoppingCartActions usersShoppingCart = new ShoppingCartActions())
{
decimal cartTotal = 0;
cartTotal = usersShoppingCart.GetTotal();
if (cartTotal > 0)
{
// Display Total.
lblTotal.Text = String.Format("{0:c}", cartTotal);
}
else
{
LabelTotalText.Text = "";
lblTotal.Text = "";
ShoppingCartTitle.InnerText = "Shopping Cart is Empty";
UpdateBtn.Visible = false;
}
}
}

public List<CartItem> GetShoppingCartItems()
{
ShoppingCartActions actions = new ShoppingCartActions();
return actions.GetCartItems();
}

public List<CartItem> UpdateCartItems()
{
using (ShoppingCartActions usersShoppingCart = new ShoppingCartActions())
{
String cartId = usersShoppingCart.GetCartId();

ShoppingCartActions.ShoppingCartUpdates[] cartUpdates = new ShoppingCartActions.ShoppingCartUpdates[CartList.Rows.Count];
for (int i = 0; i < CartList.Rows.Count; i++)
{
IOrderedDictionary rowValues = new OrderedDictionary();
rowValues = GetValues(CartList.Rows[i]);
cartUpdates[i].ProductId = Convert.ToInt32(rowValues["ProductID"]);

CheckBox cbRemove = new CheckBox();
cbRemove = (CheckBox)CartList.Rows[i].FindControl("Remove");
cartUpdates[i].RemoveItem = cbRemove.Checked;

TextBox quantityTextBox = new TextBox();
quantityTextBox = (TextBox)CartList.Rows[i].FindControl("PurchaseQuantity");
cartUpdates[i].PurchaseQuantity = Convert.ToInt16(quantityTextBox.Text.ToString());
}
usersShoppingCart.UpdateShoppingCartDatabase(cartId, cartUpdates);
CartList.DataBind();
lblTotal.Text = String.Format("{0:c}", usersShoppingCart.GetTotal());
return usersShoppingCart.GetCartItems();
}
}

public static IOrderedDictionary GetValues(GridViewRow row)
{
IOrderedDictionary values = new OrderedDictionary();
foreach (DataControlFieldCell cell in row.Cells)
{
if (cell.Visible)
{
// Extract values from the cell.
cell.ContainingField.ExtractValuesFromCell(values, cell, row.RowState, true);
}
}
return values;
}

protected void UpdateBtn_Click(object sender, EventArgs e)
{
UpdateCartItems();
}
}
}

 

وقتی کاربر در صفحه ی ShoppingCart.aspx روی Update کلیک می کند، متود UpdateCartItems فرا خوانده می شود. متود UpdateCartItems مقادیر بروز شده را برای هر آیتم درون کارت خرید می گیرد. سپس،متود UpdateCartItems روش UpdateShoppingCartDatabase را برای اضافه و یا حذف کردن محصول از کارت فرا می خواند. زمانی که پایگاه داده بروز شد، آپدیت ها را به کارت خرید اضافه می کند، کنترل GridView در صفحه کارت خرید با فرا خواندن روش DataBind بروز می شود. هم چنین، مقدار کل سفارش در صفحه کارت خرید برای منعکس کردن آپدیت ها به محصولات کارت خرید، بروز می شود.

بروز و حذف کردن موارد کارت خرید

در صفحه ShoppingCart.aspx، می توانید کنترل هایی که برای بروز رسانی کردن مقدار آیتم ها و حذف کردن آنها اضافه شده است، مشاهده کنید.

در Solution Explorer، فایل ShoppingCartActions.cs را در پوشه Logic  باز کنید.

کد نهایی کلاس فایل ShoppingCartActions.cs به صورت زیر خواهد بود.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using WingtipToys.Models;

namespace WingtipToys.Logic
{
  public class ShoppingCartActions : IDisposable
  {
    public string ShoppingCartId { get; set; }

    private ProductContext _db = new ProductContext();

    public const string CartSessionKey = "CartId";

    public void AddToCart(int id)
    {
      // Retrieve the product from the database.           
      ShoppingCartId = GetCartId();

      var cartItem = _db.ShoppingCartItems.SingleOrDefault(
          c => c.CartId == ShoppingCartId
          && c.ProductId == id);
      if (cartItem == null)
      {
        // Create a new cart item if no cart item exists.                 
        cartItem = new CartItem
        {
          ItemId = Guid.NewGuid().ToString(),
          ProductId = id,
          CartId = ShoppingCartId,
          Product = _db.Products.SingleOrDefault(
           p => p.ProductID == id),
          Quantity = 1,
          DateCreated = DateTime.Now
        };

        _db.ShoppingCartItems.Add(cartItem);
      }
      else
      {
        // If the item does exist in the cart,                  
        // then add one to the quantity.                 
        cartItem.Quantity++;
      }
      _db.SaveChanges();
    }

    public void Dispose()
    {
      if (_db != null)
      {
        _db.Dispose();
        _db = null;
      }
    }

    public string GetCartId()
    {
      if (HttpContext.Current.Session[CartSessionKey] == null)
      {
        if (!string.IsNullOrWhiteSpace(HttpContext.Current.User.Identity.Name))
        {
          HttpContext.Current.Session[CartSessionKey] = HttpContext.Current.User.Identity.Name;
        }
        else
        {
          // Generate a new random GUID using System.Guid class.     
          Guid tempCartId = Guid.NewGuid();
          HttpContext.Current.Session[CartSessionKey] = tempCartId.ToString();
        }
      }
      return HttpContext.Current.Session[CartSessionKey].ToString();
    }

    public List<CartItem> GetCartItems()
    {
      ShoppingCartId = GetCartId();

      return _db.ShoppingCartItems.Where(
          c => c.CartId == ShoppingCartId).ToList();
    }

    public decimal GetTotal()
    {
      ShoppingCartId = GetCartId();
      // Multiply product price by quantity of that product to get        
      // the current price for each of those products in the cart.  
      // Sum all product price totals to get the cart total.   
      decimal? total = decimal.Zero;
      total = (decimal?)(from cartItems in _db.ShoppingCartItems
                         where cartItems.CartId == ShoppingCartId
                         select (int?)cartItems.Quantity *
                         cartItems.Product.UnitPrice).Sum();
      return total ?? decimal.Zero;
    }

    public ShoppingCartActions GetCart(HttpContext context)
    {
      using (var cart = new ShoppingCartActions())
      {
        cart.ShoppingCartId = cart.GetCartId();
        return cart;
      }
    }

    public void UpdateShoppingCartDatabase(String cartId, ShoppingCartUpdates[] CartItemUpdates)
    {
      using (var db = new WingtipToys.Models.ProductContext())
      {
        try
        {
          int CartItemCount = CartItemUpdates.Count();
          List<CartItem> myCart = GetCartItems();
          foreach (var cartItem in myCart)
          {
            // Iterate through all rows within shopping cart list
            for (int i = 0; i < CartItemCount; i++)
            {
              if (cartItem.Product.ProductID == CartItemUpdates[i].ProductId)
              {
                if (CartItemUpdates[i].PurchaseQuantity < 1 || CartItemUpdates[i].RemoveItem == true)
                {
                  RemoveItem(cartId, cartItem.ProductId);
                }
                else
                {
                  UpdateItem(cartId, cartItem.ProductId, CartItemUpdates[i].PurchaseQuantity);
                }
              }
            }
          }
        }
        catch (Exception exp)
        {
          throw new Exception("ERROR: Unable to Update Cart Database - " + exp.Message.ToString(), exp);
        }
      }
    }

    public void RemoveItem(string removeCartID, int removeProductID)
    {
      using (var _db = new WingtipToys.Models.ProductContext())
      {
        try
        {
          var myItem = (from c in _db.ShoppingCartItems where c.CartId == removeCartID && c.Product.ProductID == removeProductID select c).FirstOrDefault();
          if (myItem != null)
          {
            // Remove Item.
            _db.ShoppingCartItems.Remove(myItem);
            _db.SaveChanges();
          }
        }
        catch (Exception exp)
        {
          throw new Exception("ERROR: Unable to Remove Cart Item - " + exp.Message.ToString(), exp);
        }
      }
    }

    public void UpdateItem(string updateCartID, int updateProductID, int quantity)
    {
      using (var _db = new WingtipToys.Models.ProductContext())
      {
        try
        {
          var myItem = (from c in _db.ShoppingCartItems where c.CartId == updateCartID && c.Product.ProductID == updateProductID select c).FirstOrDefault();
          if (myItem != null)
          {
            myItem.Quantity = quantity;
            _db.SaveChanges();
          }
        }
        catch (Exception exp)
        {
          throw new Exception("ERROR: Unable to Update Cart Item - " + exp.Message.ToString(), exp);
        }
      }
    }

    public void EmptyCart()
    {
      ShoppingCartId = GetCartId();
      var cartItems = _db.ShoppingCartItems.Where(
          c => c.CartId == ShoppingCartId);
      foreach (var cartItem in cartItems)
      {
        _db.ShoppingCartItems.Remove(cartItem);
      }
      // Save changes.             
      _db.SaveChanges();
    }

    public int GetCount()
    {
      ShoppingCartId = GetCartId();

      // Get the count of each item in the cart and sum them up          
      int? count = (from cartItems in _db.ShoppingCartItems
                    where cartItems.CartId == ShoppingCartId
                    select (int?)cartItems.Quantity).Sum();
      // Return 0 if all entries are null         
      return count ?? 0;
    }

    public struct ShoppingCartUpdates
    {
      public int ProductId;
      public int PurchaseQuantity;
      public bool RemoveItem;
    }
  }
}

 

متود UpdateShoppingCartDatabase، از روش UpdateCartItems  در صفحه ShoppingCart.aspx.cs فرا خوانده می شود، که شامل logic برای بروز و حذف کردن موارد کارت می باشد. متود UpdateShoppingCartDatabase در همه ردیف ها و لیست های کارت خرید تکرار می شود. اگر یک محصول برای حذف شدن علامت زده شود، یا مقدار آن کمتر از یک باشد، روش RemoveItem method فرا خوانده می شود، در غیر این صورت زمانی که UpdateItem method فرا خوانده شود موارد کارت خرید برای بروزرسانی چک می شوند. بعد از اینکه آیتم های کارت خرید بروز یا حذف شدند، تغییرات پایگاه داده ذخیره می شوند.

از ساختار ShoppingCartUpdates برای نگهداری همه موارد کارت خرید استفاده می شود. متود UpdateShoppingCartDatabase از ساختار ShoppingCartUpdates برای تعیین کردن اینکه محصولی نیاز به بروزرسانی کردن یا حذف شدن دارد یا خیر استفاده می کند.

اضافه کردن شمارنده (Counter) کارت خرید

برای اجازه دادن به کاربر جهت مشاهده تعداد کل آیتم های کارت خرید، یک شمارنده به صفحه Site.Master اضافه کنید. هم چنین این Site.Master به عنوان یک لینک به کارت خرید نیز عمل می کند.

در Solution Explorer، صفحه Site.Master را باز کنید.

Markup را با اضافه کردن لینک شمارنده کارت خرید اصلاح کنید.

<ul class="nav navbar-nav">
      <li><a runat="server" href="~/">Home</a></li>
      <li><a runat="server" href="~/About">About</a></li>
      <li><a runat="server" href="~/Contact">Contact</a></li>
      <li><a runat="server" href="~/ProductList">Products</a></li>
      <li><a runat="server" href="~/ShoppingCart" ID="cartCount">&nbsp;</a></li>
  </ul>

 

سپس، code-behind فایل Site.Master.cs را با اضافه کردن کد زیر بروز کنید.

using System;
using System.Collections.Generic;
using System.Security.Claims;
using System.Security.Principal;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Linq;
using WingtipToys.Models;
using WingtipToys.Logic;

namespace WingtipToys
{
public partial class SiteMaster : MasterPage
{
private const string AntiXsrfTokenKey = "__AntiXsrfToken";
private const string AntiXsrfUserNameKey = "__AntiXsrfUserName";
private string _antiXsrfTokenValue;

protected void Page_Init(object sender, EventArgs e)
{
// The code below helps to protect against XSRF attacks
var requestCookie = Request.Cookies[AntiXsrfTokenKey];
Guid requestCookieGuidValue;
if (requestCookie != null && Guid.TryParse(requestCookie.Value, out requestCookieGuidValue))
{
// Use the Anti-XSRF token from the cookie
_antiXsrfTokenValue = requestCookie.Value;
Page.ViewStateUserKey = _antiXsrfTokenValue;
}
else
{
// Generate a new Anti-XSRF token and save to the cookie
_antiXsrfTokenValue = Guid.NewGuid().ToString("N");
Page.ViewStateUserKey = _antiXsrfTokenValue;

var responseCookie = new HttpCookie(AntiXsrfTokenKey)
{
HttpOnly = true,
Value = _antiXsrfTokenValue
};
if (FormsAuthentication.RequireSSL && Request.IsSecureConnection)
{
responseCookie.Secure = true;
}
Response.Cookies.Set(responseCookie);
}

Page.PreLoad += master_Page_PreLoad;
}

protected void master_Page_PreLoad(object sender, EventArgs e)
{
if (!IsPostBack)
{
// Set Anti-XSRF token
ViewState[AntiXsrfTokenKey] = Page.ViewStateUserKey;
ViewState[AntiXsrfUserNameKey] = Context.User.Identity.Name ?? String.Empty;
}
else
{
// Validate the Anti-XSRF token
if ((string)ViewState[AntiXsrfTokenKey] != _antiXsrfTokenValue
|| (string)ViewState[AntiXsrfUserNameKey] != (Context.User.Identity.Name ?? String.Empty))
{
throw new InvalidOperationException("Validation of Anti-XSRF token failed.");
}
}
}

protected void Page_Load(object sender, EventArgs e)
{

}

protected void Page_PreRender(object sender, EventArgs e)
{
using (ShoppingCartActions usersShoppingCart = new ShoppingCartActions())
{
string cartStr = string.Format("Cart ({0})", usersShoppingCart.GetCount());
cartCount.InnerText = cartStr;
}
}

public IQueryable<Category> GetCategories()
{
var _db = new WingtipToys.Models.ProductContext();
IQueryable<Category> query = _db.Categories;
return query;
}

protected void Unnamed_LoggingOut(object sender, LoginCancelEventArgs e)
{
Context.GetOwinContext().Authentication.SignOut();
}
}
}

 

قبل از اینکه صفحه به عنوان HTML ارائه شود، Page_PreRender برجسته می شود. در کنترل کننده age_PreRender، تعداد کل کارت خرید با روش GetCount مشخص می شود. و مقدار بازگشت داده شده به محدوده cartCount، اضافه می شود.

تست کردن یک کارت خرید کامل

اکنون می توانید اپلیکیشن را اجرا کنیدکه ببینید چگونه می توانید یک محصول را اضافه، حذف، و بروز رسانی کنید. کل سبد خرید مبلغ کل آیتم های کارت خرید را منعکس می کند.

دکمه F5 را برای اجرای اپلیکیشن فشار دهید.

مرورگر صفحه Default.aspx page را باز و نمایش می دهد.

Cars را در قسمت گروه ها در منو انتخاب کنید.

روی لینک Add To Cart رو به روی اولین محصول کلیک کنید.

صفحه ShoppingCart.aspx به همراه کل سفارش نمایش داده می شود.

Planes را از منو انتخاب کنید.

روی Add To Cart کلیک کنید.

مقدار اولین محصول در کارت خرید را ۳ انتخاب کنید و Remove Item محصول دوم را انتخاب کنید.

روی دکمه Update کلیک کنید که صفحه کارت خرید بروز شود و کل سفارش نشان داده شود.

Shopping Cart

موفق باشید !

  • پسورد: www.mspsoft.com
داریوش فرخی

داریوش فرخی هستم از سال 92 شروع به یادگیری برنامه نویسی و از سال 93 در بخش برنامه نویسی و تولید محتوای سایت mspsoft.com مشغول هستم. فعالیتم نیز بیشتر در زمینه های برنامه نویسی با سی شارپ و asp.net بوده است. اوقات فراغتم را هم غالبا با تماشای فیلم یا بازی های کامپیوتری پر میکنم .

نوشته‌های مرتبط

دیدگاه‌ها

*
*

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.

    مصطفی پاسخ

    با سلام و ارزوی قبولی طاعات و عبادات
    در ابتدای این مقاله نوشتید که در مقاله قبل و یا در اموزش (Display Data Items and Details)
    ما که این اموزش و یا مقاله ها رو پیدا نکردیم و بدون قبلی ها ؛ مقاله سبد خرید رو متوجه نمی شم.
    لطفا ادرس بدهید؟
    با تشکر

    tara پاسخ

    یاسلام و وقت بخیر
    آموزش بسیار جامع و کاملی بود. از مترجم محترم کمال سپاسگزاری و تشکر را دارم
    در ضمن اگر موردی ندارد من این مطلب را در یک جزوه آموزشی استفاده کنم؟
    متشکرم

      مسعود شریفی پاسخ

      خواهش میکنم موفق پیروز باشید.
      مشکلی نیست میتوانید استفاده کنید.

کدیشن ! مارکت پروژه های برنامه نویسی راه اندازی شدیه توکه پا بریم ببینم