ショッピングカート

[アーティクル]
05/30/2024

Wingtip Toys サンプルプロジェクト (C#) のダウンロードまたは電子書籍 (PDF) のダウンロード

このチュートリアルシリーズでは、ASP.NET 4.5 と Microsoft Visual Studio Express 2013 for Web を使用した ASP.NET Web Forms アプリケーション構築の基本について説明します。 Visual Studio 2013 の C# ソースコードを含むプロジェクトは、このチュートリアルシリーズと併せて使用できます。

このチュートリアルでは、ショッピングカートを Wingtip Toys サンプル ASP.NET Web Forms アプリケーションに追加するために必要なビジネスロジックについて説明します。このチュートリアルは、前のチュートリアル「データ項目と詳細の表示」に基づいており、Wingtip Toy Store チュートリアルシリーズの一部です。このチュートリアルを完了すると、サンプルアプリのユーザーは、ショッピングカート内の商品を追加、削除、変更できるようになります。

ここでは、次の内容について学習します。

Web アプリケーション用のショッピングカートを作成する方法。
ユーザーがショッピングカートにアイテムを追加できるようにする方法。
ショッピングカートの詳細を表示する GridView コントロールを追加する方法。
注文合計を計算して表示する方法。
ショッピングカート内のアイテムを削除および更新する方法。
ショッピングカートのカウンターを含める方法。

このチュートリアルのコード機能:

Entity Framework Code First
データの注釈
厳密に型指定されたデータコントロール
モデルバインド

ショッピングカートの作成

このチュートリアルシリーズの前半では、データベースから商品データを表示するためのページとコードを追加しました。このチュートリアルでは、ユーザーが購入に関心のある商品を管理するためのショッピングカートを作成します。ユーザーは、登録またはログインしていない場合でも、アイテムを参照してショッピングカートに追加できます。ショッピングカートへのアクセスを管理するには、ユーザーがショッピングカートに初めてアクセスするときに、グローバル一意識別子 (GUID) を使用してユーザーに一意の ID を割り当てます。この ID は、ASP.NET セッション状態を使用して保存します。

Note

ASP.NET セッション状態は、ユーザー固有の情報を保存するのに便利な場所ですが、ユーザーがサイトを離れると有効期限が切れます。大規模なサイトでは、セッション状態の誤用がパフォーマンスに影響を与える可能性がありますが、デモンストレーション目的の軽度な使用では、セッション状態は問題なく動作します。 Wingtip Toys サンプルプロジェクトは、外部プロバイダーなしでセッション状態を使用する方法を示しています。この場合、サイトをホストしている Web サーバーにセッション状態がインプロセスで保存されます。アプリケーションの複数のインスタンスを提供する大規模なサイト、または異なるサーバー上でアプリケーションの複数のインスタンスを実行するサイトの場合は、Windows Azure キャッシュサービスの使用を検討してください。このキャッシュサービスは、Web サイトの外部にある分散キャッシュサービスを提供し、インプロセスセッション状態の使用の問題を解決します。詳細については、「Windows Azure Web サイトで ASP.NET セッション状態を使用する方法」を参照してください。

CartItem をモデルクラスとして追加する

このチュートリアルシリーズの前半では、Models フォルダー内に Category および Product クラスを作成することで、カテゴリおよび商品データのスキーマを定義しました。ここでは、ショッピングカートのスキーマを定義する新しいクラスを追加します。このチュートリアルの後半では、CartItem テーブルへのデータアクセスを処理するクラスを追加します。このクラスは、ショッピングカート内のアイテムを追加、削除、更新するためのビジネスロジックを提供します。

Models フォルダーを右クリックし、[追加] ->[新しいアイテム] を選択します。
[新しい項目の追加] ダイアログボックスが表示されます。 [コード] を選択し、[クラス] を選択します。
この新しいクラスに CartItem.cs という名前を付けます。
追加をクリックします。
新しいクラスファイルがエディターに表示されます。

既定のコードを以下のコードに置き換えます。

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 Code First では、CartItem テーブルの主キーが CartItemId または ID になることが想定されます。ただし、このコードは、データ注釈 [Key] 属性を使用して既定の動作をオーバーライドします。 ItemId プロパティの Key 属性は、ItemID プロパティが主キーであることを指定します。

CartId プロパティは、購入するアイテムに関連付けられているユーザーの ID を指定します。ユーザーがショッピングカートにアクセスしたときにこのユーザー ID を作成するコードを追加します。この ID は、ASP.NET セッション変数としても保存されます。

商品コンテキストの更新

CartItem クラスの追加に加えて、エンティティクラスを管理し、データベースへのデータアクセスを提供するデータベースコンテキストクラスを更新する必要があります。これを行うには、新しく作成した CartItem モデルクラスを ProductContext クラスに追加します。

ソリューションエクスプローラーで、Models フォルダー内の ProductContext.cs ファイルを見つけて開きます。

次のように、強調表示されたコードを 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 ファイル内のコードでは、ユーザーが Entity Framework のすべてのコア機能にアクセスできるように System.Data.Entity 名前空間を追加します。この機能には、厳密に型指定されたオブジェクトを操作することによってデータのクエリ、挿入、更新、削除を行う機能が含まれています。 ProductContext クラスは、新しく追加された CartItem モデルクラスへのアクセスを追加します。

ショッピングカートのビジネスロジックの管理

次に、新しい Logic フォルダーに ShoppingCart クラスを作成します。 ShoppingCart クラスは、CartItem テーブルへのデータアクセスを処理します。このクラスには、ショッピングカート内のアイテムを追加、削除、更新するためのビジネスロジックも含まれています。

追加するショッピングカートのロジックには、次のアクションを管理する機能が含まれています。

ショッピングカートへのアイテムの追加
ショッピングカートからのアイテムの削除
ショッピングカート ID の取得
ショッピングカートからのアイテムの取得
すべてのショッピングカートアイテムの金額の合計
ショッピングカートのデータの更新

ショッピングカートページ (ShoppingCart.aspx) とショッピングカートクラスは、ショッピングカートのデータにアクセスするために一緒に使用されます。ショッピングカートページには、ユーザーがショッピングカートに追加するすべてのアイテムが表示されます。ショッピングカートページとショッピングカートクラスに加えて、ショッピングカートに商品を追加するページ (AddToCart.aspx) を作成します。また、ユーザーがショッピングカートに商品を追加できるように、AddToCart.aspx ページへのリンクを提供する ProductList.aspx ページと ProductDetails.aspx ページにコードを追加します。

次の図は、ユーザーがショッピングカートに商品を追加するときに発生する基本的なプロセスを示しています。

Shopping Cart - Adding to the Shopping Cart

ユーザーが ProductList.aspx ページまたは ProductDetails.aspx ページの [カートに追加] リンクをクリックすると、アプリケーションは AddToCart.aspx ページに移動してから、ShoppingCart.aspx ページに自動的に移動します。 AddToCart.aspx ページでは、ShoppingCart クラスのメソッドを呼び出すことで、選択した商品がショッピングカートに追加されます。 ShoppingCart.aspx ページには、ショッピングカートに追加された商品が表示されます。

ショッピングカートクラスの作成

モデル (Models フォルダー)、ページ (ルートフォルダー)、ロジック (Logic フォルダー) の区別が明確になるように、ShoppingCart クラスはアプリケーション内の別のフォルダーに追加されます。

ソリューションエクスプローラーで、WingtipToys プロジェクトを右クリックし、[追加] ->[新しいフォルダー] を選択します。新しいフォルダーに Logic という名前を付けます。
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();
    }
  }
}

AddToCart メソッドにより、商品 ID に基づいて個々の商品をショッピングカートに含めることができるようになります。商品がカートに追加されるか、カートにその商品のアイテムが既に含まれている場合は、数量がインクリメントされます。

GetCartId メソッドは、ユーザーの ID カートを返します。カート ID は、ユーザーのショッピングカートに入っているアイテムを追跡するために使用されます。ユーザーに既存のカート ID がない場合は、新しいカート ID が作成されます。ユーザーが登録済みユーザーとしてサインインしている場合、カート ID はそのユーザー名に設定されます。ただし、ユーザーがサインインしていない場合、カート ID は一意の値 (GUID) に設定されます。 GUID により、セッションに基づいて、ユーザーごとに 1 つのカートのみが作成されるようになります。

GetCartItems メソッドは、ユーザーのショッピングカートアイテムのリストを返します。このチュートリアルの後半では、モデルバインドを使用して、GetCartItems メソッドを使用してショッピングカート内のカートアイテムを表示する方法を示します。

カートへの追加機能の作成

前述のように、AddToCart.aspx という名前の処理ページを作成します。このページを使用して、ユーザーのショッピングカートに新しい商品を追加します。このページでは、先ほど作成した ShoppingCart クラス内の AddToCart メソッドが呼び出されます。 AddToCart.aspx ページでは、このメソッドに商品 ID が渡されることが想定されます。この商品 ID は、ShoppingCart クラス内の AddToCart メソッドを呼び出すときに使用されます。

Note

このページのページ UI (AddToCart.aspx) ではなく、分離コード (AddToCart.aspx.cs) を変更します。

カートへの追加機能を作成するには:

ソリューションエクスプローラーで WingtipToys プロジェクトを右クリックし、[追加] ->[新しいアイテム] をクリックします。
[新しい項目の追加] ダイアログボックスが表示されます。
AddToCart.aspx という名前の標準の新しいページ (Web フォーム) をアプリケーションに追加します。
ソリューションエクスプローラーで AddToCart.aspx ページを右クリックし、[コードの表示] をクリックします。 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 ページが読み込まれると、クエリ文字列から商品 ID が取得されます。次に、ショッピングカートクラスのインスタンスが作成され、このチュートリアルで前に追加した AddToCart メソッドを呼び出すために使用されます。 AddToCartShoppingCartActions.cs ファイルに含まれるメソッドには、選択した商品をショッピングカートに追加するか、選択した商品の商品数量をインクリメントするロジックが含まれています。商品がショッピングカートに追加されていない場合、商品はデータベースの CartItem テーブルに追加されます。商品がショッピングカートに既に追加されているときに、ユーザーが同じ商品の追加アイテムを追加する場合、商品の数量は CartItem テーブル内でインクリメントされます。最後に、このページは、次の手順で追加する ShoppingCart.aspx ページにリダイレクトし戻されます。このページには、カート内のアイテムの更新されたリストが表示されます。

前述のように、ユーザー ID は、特定のユーザーに関連付けられている商品を識別するために使用されます。この ID は、ユーザーがショッピングカートに商品を追加するたびに、CartItem テーブルの行に追加されます。

ショッピングカート UI の作成

ShoppingCart.aspx ページには、ユーザーがショッピングカートに追加した商品が表示されます。また、ショッピングカート内のアイテムを追加、削除、更新する機能も提供されます。

ソリューションエクスプローラーで WingtipToys を右クリックし、[追加] ->[新しいアイテム] をクリックします。
[新しい項目の追加] ダイアログボックスが表示されます。
[マスターページを使用した Web フォーム] を選択して、マスターページを含む新しいページ (Web フォーム) を追加します。新しいページに ShoppingCart.aspx という名前を付けます。
Site.Master を選択して、新しく作成した .aspx ページにマスターページをアタッチします。

ShoppingCart.aspx ページで、既存のマークアップを次のマークアップに置き換えます。

<%@ 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 ページには、CartList という名前の GridView コントロールが含まれています。このコントロールでは、モデルバインドを使用して、データベースからショッピングカートのデータを GridView コントロールにバインドします。 GridView コントロールの ItemType プロパティを設定すると、コントロールのマークアップでデータバインディング式 Item を使用できるようになり、コントロールが厳密に型指定されます。このチュートリアルシリーズの前半で説明したように、IntelliSense を使用して Item オブジェクトの詳細を選択できます。モデルバインドを使用してデータを選択するようにデータコントロールを構成するには、コントロールの SelectMethod プロパティを設定します。上記のマークアップでは、CartItem オブジェクトのリストを返す GetShoppingCartItems メソッドを使用するように SelectMethod を設定します。 GridView データコントロールは、ページライフサイクルの適切なタイミングでメソッドを呼び出し、返されたデータを自動的にバインドします。 GetShoppingCartItems メソッドは引き続き追加する必要があります。

ショッピングカートアイテムの取得

次に、ShoppingCart.aspx.cs 分離コードにコードを追加して、ショッピングカートの UI を取得して設定します。

ソリューションエクスプローラーで ShoppingCart.aspx ページを右クリックし、[コードの表示] をクリックします。 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 メソッドを呼び出し、返されたデータを自動的にバインドします。 GetShoppingCartItems メソッドは、ShoppingCartActions オブジェクトのインスタンスを作成します。次に、このコードはそのインスタンスを使用して、GetCartItems メソッドを呼び出してカート内のアイテムを返します。

ショッピングカートへの商品の追加

ProductList.aspx または ProductDetails.aspx ページが表示されると、ユーザーはリンクを使用して商品をショッピングカートに追加できるようになります。ユーザーがリンクをクリックすると、アプリケーションは AddToCart.aspx という名前の処理ページに移動します。 AddToCart.aspx ページでは、このチュートリアルで前に追加した ShoppingCart クラスの AddToCart メソッドが呼び出されます。

ここで、ProductList.aspx ページと ProductDetails.aspx ページの両方に [カートに追加] リンクを追加します。このリンクには、データベースから取得された商品 ID が含まれます。

ソリューションエクスプローラーで、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 ページが表示されます。
カテゴリのナビゲーションメニューから [自動車] を選択します。
ProductList.aspx ページが表示され、"自動車" カテゴリに含まれる商品のみが示されます。
表示されている最初の商品 (オープンカー) の横にある [カートに追加] リンクをクリックします。
ShoppingCart.aspx ページが表示され、ショッピングカート内の選択内容が示されます。
カテゴリナビゲーションメニューから [飛行機] を選択して、別の商品を表示します。
表示されている最初の商品の横にある [カートに追加] リンクをクリックします。
ShoppingCart.aspx ページに別のアイテムが表示されます。
ブラウザーを閉じます。

注文合計の計算と表示

ショッピングカートに商品を追加するだけでなく、GetTotal メソッドを ShoppingCart クラスに追加し、ショッピングカートページに合計注文金額を表示します。

ソリューションエクスプローラーで、Logic フォルダー内の ShoppingCartActions.cs ファイルを開きます。

黄色で強調表示されている次の GetTotal メソッドを ShoppingCart クラスに追加し、クラスが次のように表示されるようにします。

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

最初に、GetTotal メソッドは、ユーザーのショッピングカートの ID を取得します。次に、カートに一覧表示されている各商品の商品数量を商品価格に乗算して、カートの合計を取得します。

Note

上記のコードでは、null 許容型 "int?" が使用されています。 null 許容型は、基になる型のすべての値を、null 値としても表すことができます。詳細については、「Null 許容型の使用」を参照してください。

ショッピングカートの表示の変更

次に、ShoppingCart.aspx ページのコードを変更して、ページの読み込み時に GetTotal メソッドを呼び出し、その合計を ShoppingCart.aspx ページに表示するようにします。

ソリューションエクスプローラーで ShoppingCart.aspx ページを右クリックし、[コードの表示] を選択します。

ShoppingCart.aspx.cs ファイルで、黄色で強調表示されている次のコードを追加して Page_Load ハンドラーを更新します。

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)
    {
      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";
        }
      }
    }

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

ShoppingCart.aspx ページが読み込まれると、ショッピングカートオブジェクトが読み込まれ、ShoppingCart クラスの GetTotal メソッドを呼び出してショッピングカートの合計が取得されます。ショッピングカートが空の場合は、その影響に関するメッセージが表示されます。

ショッピングカートの合計のテスト

今すぐアプリケーションを実行して、ショッピングカートに商品を追加する方法だけでなく、ショッピングカートの合計を表示する方法を確認します。

F5 キーを押してアプリケーションを実行します。
ブラウザーが開き、 Default.aspx ページが表示されます。
カテゴリのナビゲーションメニューから [自動車] を選択します。
最初の商品の横にある [カートに追加] リンクをクリックします。
ShoppingCart.aspx ページに注文合計が表示されます。
その他の商品 (飛行機など) をカートに追加します。
ShoppingCart.aspx ページに、追加したすべての商品の更新された合計が表示されます。
ブラウザーウィンドウを閉じて、実行中のアプリを停止します。

ショッピングカートへの [更新] ボタンと [チェックアウト] ボタンの追加

ユーザーがショッピングカートを変更できるようにするには、[更新] ボタンと [チェックアウト] ボタンをショッピングカートページに追加します。 [チェックアウト] ボタンは、このチュートリアルシリーズの後半まで使用されません。

ソリューションエクスプローラーで、Web アプリケーションプロジェクトのルートにある ShoppingCart.aspx ページを開きます。

[更新ボタン] と [チェックアウト] ボタンを ShoppingCart.aspx ページに追加するには、次のコードに示すように、黄色で強調表示されているマークアップを既存のマークアップに追加します。

<%@ 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>

ユーザーが [更新] ボタンをクリックすると、UpdateBtn_Click イベントハンドラーが呼び出されます。このイベントハンドラーは、次の手順で追加するコードを呼び出します。

次に、ShoppingCart.aspx.cs ファイルに含まれるコードを更新して、カートアイテムをループ処理し、RemoveItem および UpdateItem メソッドを呼び出すことができます。

ソリューションエクスプローラーで、Web アプリケーションプロジェクトのルートにある ShoppingCart.aspx.cs ファイルを開きます。

黄色で強調表示されている次のコードセクションを 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 ページの [更新] ボタンをクリックすると、UpdateCartItems メソッドが呼び出されます。 UpdateCartItems メソッドは、ショッピングカート内の各アイテムの更新された値を取得します。次に、UpdateCartItems メソッドは、UpdateShoppingCartDatabase メソッド (次の手順で追加して説明します) を呼び出し、ショッピングカートのアイテムを追加または削除します。ショッピングカートに対する更新を反映するようにデータベースが更新されると、GridView コントロールは、GridView の DataBind メソッドを呼び出すことで、ショッピングカートページで更新されます。また、ショッピングカートページの合計注文金額は、更新されたアイテムのリストを反映するように更新されます。

ショッピングカートアイテムの更新と削除

ShoppingCart.aspx ページでは、アイテムの数量の更新とアイテムの削除のためのコントロールが追加されたことを確認できます。ここで、これらのコントロールを機能させるコードを追加します。

ソリューションエクスプローラーで、Logic フォルダー内の ShoppingCartActions.cs ファイルを開きます。

黄色で強調表示されている次のコードを 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;
    }
  }
}

ShoppingCart.aspx.cs ページの UpdateCartItems メソッドから呼び出される UpdateShoppingCartDatabase メソッドには、ショッピングカート内のアイテムを更新または削除するロジックが含まれています。 UpdateShoppingCartDatabase メソッドは、ショッピングカートリスト内のすべての行を繰り返します。ショッピングカートアイテムが削除対象としてマークされている場合、または数量が 1 未満の場合は、RemoveItem メソッドが呼び出されます。それ以外の場合は、UpdateItem メソッドが呼び出されたときに、ショッピングカートアイテムが更新のためにチェックされます。ショッピングカートアイテムが削除または更新されると、データベースの変更が保存されます。

ShoppingCartUpdates 構造体は、すべてのショッピングカートアイテムを保持するために使用されます。 UpdateShoppingCartDatabase メソッドは、ShoppingCartUpdates 構造体を使用して、いずれかのアイテムを更新または削除する必要があるかどうかを判断します。

次のチュートリアルでは、EmptyCart メソッドを使用して、商品を購入した後にショッピングカートをクリアします。ただし、ここでは、先ほど ShoppingCartActions.cs ファイルに追加した GetCount メソッドを使用して、ショッピングカート内のアイテムの数を確認します。

ショッピングカートカウンターの追加

ユーザーがショッピングカート内のアイテムの合計数を表示できるようにするには、Site.Master ページにカウンターを追加します。このカウンターは、ショッピングカートへのリンクとしても機能します。

ソリューションエクスプローラーで、Site.Master ページを開きます。

次のように黄色で表示されているショッピングカートカウンターリンクをナビゲーションセクションに追加して、マークアップを変更します。

<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>

次に、次のように黄色で強調表示されたコードを追加して、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 イベントが発生します。 Page_PreRender ハンドラーでは、GetCount メソッドを呼び出すことでショッピングカートの合計数が確認されます。返された値は、Site.Master ページのマークアップに含まれる cartCount スパンに追加されます。 <span> タグを使用すると、内部要素を適切にレンダリングできます。サイトの任意のページが表示されると、ショッピングカートの合計が表示されます。ユーザーは、ショッピングカートの合計をクリックして、ショッピングカートを表示することもできます。

完成したショッピングカートのテスト

ここで、アプリケーションを実行して、ショッピングカート内のアイテムを追加、削除、更新する方法を確認できます。ショッピングカートの合計には、ショッピングカート内のすべてのアイテムの合計コストが反映されます。

F5 キーを押してアプリケーションを実行します。
ブラウザーが開き、Default.aspx ページが表示されます。
カテゴリのナビゲーションメニューから [自動車] を選択します。
最初の商品の横にある [カートに追加] リンクをクリックします。
ShoppingCart.aspx ページに注文合計が表示されます。
カテゴリのナビゲーションメニューから [飛行機] を選択します。
最初の商品の横にある [カートに追加] リンクをクリックします。
ショッピングカートの最初のアイテムの数量を 3 に設定し、2 番目のアイテムの [アイテムの削除] チェックボックスを選択します。
[更新] ボタンをクリックしてショッピングカートページを更新し、新しい注文合計を表示します。

まとめ

このチュートリアルでは、Wingtip Toys Web Forms サンプルアプリケーションのショッピングカートを作成しました。このチュートリアルでは、Entity Framework Code First、データ注釈、厳密に型指定されたデータコントロール、およびモデルバインドを使用しました。

ショッピングカートでは、ユーザーが購入のために選択したアイテムの追加、削除、更新がサポートされています。ショッピングカート機能の実装に加えて、GridView コントロールにショッピングカートアイテムを表示し、注文合計を計算する方法を学習しました。

説明されている機能が実際のビジネスアプリケーションでどのように機能するかを理解するために、nopCommerce - ASP.NET に基づくオープンソースの eコマースショッピングカートを確認できます。このカートはもともと、Web Forms 上に構築され、長年にわたって MVC に移行し、現在は ASP.NET Core に移行しています。

その他の情報

ASP.NET セッション状態の概要

前へ次へ

次の方法で共有

ショッピングカート

ここでは、次の内容について学習します。

このチュートリアルのコード機能:

ショッピングカートの作成

CartItem をモデルクラスとして追加する

商品コンテキストの更新

ショッピングカートのビジネスロジックの管理

ショッピングカートクラスの作成

カートへの追加機能の作成

カートへの追加機能を作成するには:

ショッピングカート UI の作成

ショッピングカートアイテムの取得

ショッピングカートへの商品の追加

ショッピングカートのテスト

注文合計の計算と表示

ショッピングカートの表示の変更

ショッピングカートの合計のテスト

ショッピングカートへの [更新] ボタンと [チェックアウト] ボタンの追加

ショッピングカートアイテムの更新と削除

ショッピングカートカウンターの追加

完成したショッピングカートのテスト

まとめ

その他の情報

フィードバック

その他のリソース

次の方法で共有

ショッピング カート

ここでは、次の内容について学習します。

このチュートリアルのコード機能:

ショッピング カートの作成

CartItem をモデル クラスとして追加する

商品コンテキストの更新

ショッピング カートのビジネス ロジックの管理

ショッピング カート クラスの作成

カートへの追加機能の作成

カートへの追加機能を作成するには:

ショッピング カート UI の作成

ショッピング カート アイテムの取得

ショッピング カートへの商品の追加

ショッピング カートのテスト

注文合計の計算と表示

ショッピング カートの表示の変更

ショッピング カートの合計のテスト

ショッピング カートへの [更新] ボタンと [チェックアウト] ボタンの追加

ショッピング カート アイテムの更新と削除

ショッピング カート カウンターの追加

完成したショッピング カートのテスト

まとめ

その他の情報

フィードバック

その他のリソース

ショッピングカート

ショッピングカートの作成

CartItem をモデルクラスとして追加する

ショッピングカートのビジネスロジックの管理

ショッピングカートクラスの作成

ショッピングカート UI の作成

ショッピングカートアイテムの取得

ショッピングカートへの商品の追加

ショッピングカートのテスト

ショッピングカートの表示の変更

ショッピングカートの合計のテスト

ショッピングカートへの [更新] ボタンと [チェックアウト] ボタンの追加

ショッピングカートアイテムの更新と削除

ショッピングカートカウンターの追加

完成したショッピングカートのテスト