ショッピング カート
作成者 : Erik Reitan
Wingtip Toys サンプル プロジェクトのダウンロード (C#) または 電子書籍のダウンロード (PDF)
このチュートリアル シリーズでは、ASP.NET 4.5 と Microsoft Visual Studio Express 2013 for Web を使用した ASP.NET Web Forms アプリケーションの構築の基本について説明します。 このチュートリアル シリーズでは、C# ソース コードを含むVisual Studio 2013 プロジェクトを使用できます。
このチュートリアルでは、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 Cache Service の使用を検討してください。 このキャッシュ サービスは、Web サイトの外部にある分散キャッシュ サービスを提供し、インプロセス セッション状態を使用する問題を解決します。 詳細については、「 Windows Azure Web サイトでセッション状態 ASP.NET 使用する方法」を参照してください。
CartItem をモデル クラスとして追加する
このチュートリアル シリーズの前半では、Models フォルダーに クラスと Product クラスをCategory作成して、カテゴリと製品データのスキーマを定義しました。 次に、新しいクラスを追加して、ショッピング カートのスキーマを定義します。 このチュートリアルの後半では、テーブルへのデータ アクセスを処理するクラスを CartItem 追加します。 このクラスは、ショッピング カート内のアイテムを追加、削除、更新するためのビジネス ロジックを提供します。
Models フォルダーを右クリックし、[追加] ->[新しい項目] の順に選択します。
[新しい項目の追加] ダイアログ ボックスが表示されます。 [ コード] を選択し、[ クラス] を選択します。
![ショッピング カート - [新しい項目の追加] ダイアログ](shopping-cart/_static/image2.png)
この新しいクラス に 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が または IDのいずれかCartItemIdであることが想定されます。 ただし、コードは、データ注釈 [Key] 属性を使用して既定の動作をオーバーライドします。 ItemId プロパティの属性は Key 、プロパティが ItemID 主キーであることを指定します。
プロパティは CartId 、購入するアイテムに ID 関連付けられているユーザーの を指定します。 ユーザーがショッピング カートにアクセスしたときにこのユーザー ID を作成するコードを追加します。 これは ID 、ASP.NET Session 変数としても格納されます。
製品コンテキストを更新する
クラスを 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 ファイルのコードは名前空間を System.Data.Entity 追加して、Entity Framework のすべてのコア機能にアクセスできるようにします。 この機能には、厳密に型指定されたオブジェクトを操作して、データのクエリ、挿入、更新、削除を行う機能が含まれます。 クラスは ProductContext 、新しく追加されたモデル クラスへのアクセスを追加 CartItem します。
ショッピング カートのビジネス ロジックの管理
次に、新しい Logic フォルダーに クラスを作成ShoppingCartします。 クラスは ShoppingCart 、テーブルへのデータ アクセスを CartItem 処理します。 クラスには、ショッピング カート内のアイテムを追加、削除、更新するためのビジネス ロジックも含まれます。
追加するショッピング カート ロジックには、次のアクションを管理するための機能が含まれます。
- ショッピング カートへの項目の追加
- ショッピング カートからアイテムを削除する
- ショッピング カート ID の取得
- ショッピング カートからアイテムを取得する
- すべてのショッピング カート項目の合計
- ショッピング カート データの更新
ショッピング カート ページ (ShoppingCart.aspx) とショッピング カート クラスを一緒に使用して、ショッピング カート データにアクセスします。 ショッピング カート ページには、ユーザーがショッピング カートに追加したすべてのアイテムが表示されます。 ショッピング カートのページとクラスに加えて、商品をショッピング カートに追加するページ (AddToCart.aspx) を作成します。 また、 ProductList.aspx ページと ProductDetails.aspx ページにコードを追加し、 AddToCart.aspx ページへのリンクを提供して、ユーザーがショッピング カートに製品を追加できるようにします。
次の図は、ユーザーがショッピング カートに製品を追加するときに発生する基本的なプロセスを示しています。
ユーザーが ProductList.aspx ページまたは ProductDetails.aspx ページの [カートに追加] リンクをクリックすると、アプリケーションは AddToCart.aspx ページに移動し、自動的に ShoppingCart.aspx ページに移動します。 AddToCart.aspx ページでは、ShoppingCart クラスのメソッドを呼び出すことによって、選択した製品がショッピング カートに追加されます。 [ShoppingCart.aspx] ページには、ショッピング カートに追加された製品が表示されます。
ショッピング カート クラスの作成
クラスは ShoppingCart 、モデル (Models フォルダー)、ページ (ルート フォルダー) とロジック (ロジック フォルダー) を明確に区別できるように、アプリケーション内の別のフォルダーに追加されます。
ソリューション エクスプローラーで WingtipToysプロジェクトを右クリックし、[ Add-New Folder]\(新しいフォルダーの追加\>) を選択します。 新しいフォルダーに 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 という名前の処理ページを作成します。 このページでは、先ほど作成した AddToCart クラスの ShoppingCart メソッドを呼び出します。 AddToCart.aspx ページでは、製品IDが渡されると想定されます。 この製品 ID は、 クラスの メソッドを AddToCart 呼び出すときに ShoppingCart 使用されます。
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 ページには、 という名前の GridView コントロールがCartList含まれています。 このコントロールは、モデル バインドを使用して、データベースから 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> </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 ページが表示され、"Cars" カテゴリに含まれる製品のみが表示されます。
表示されている最初の製品 (コンバーチブル カー) の横にある [ カートに追加] リンクをクリックします。
[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 ページが読み込まれると、ショッピング カート オブジェクトが読み込まれた後、 クラスの メソッドをGetTotal呼び出してショッピング カートの合計をShoppingCart取得します。 ショッピング カートが空の場合は、その効果に対するメッセージが表示されます。
ショッピング カートの合計のテスト
今すぐアプリケーションを実行して、ショッピング カートに製品を追加するだけでなく、ショッピング カートの合計を確認する方法を確認します。
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 ファイルに含まれるコードを更新して、カート項目をループ処理し、 メソッドと UpdateItem メソッドをRemoveItem呼び出すことができます。
ソリューション エクスプローラーで、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; } } }
UpdateShoppingCartDatabaseShoppingCart.aspx.cs ページの メソッドからUpdateCartItems呼び出された メソッドには、ショッピング カートからアイテムを更新または削除するロジックが含まれています。 メソッドは 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"> </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 コントロールでショッピング カート項目を表示し、注文の合計を計算する方法を学習しました。
実際のビジネス アプリケーションで説明されている機能がどのように機能するかを理解するために、e コマース ショッピング カートに基づく nopCommerce - ASP.NET の例オープンソース表示できます。 もともとはWeb Forms上に構築され、長年にわたってMVCに移り、今では ASP.NET Core。
追加情報
フィードバック
以下は間もなく提供いたします。2024 年を通じて、コンテンツのフィードバック メカニズムとして GitHub の issue を段階的に廃止し、新しいフィードバック システムに置き換えます。 詳細については、「https://aka.ms/ContentUserFeedback」を参照してください。
フィードバックの送信と表示