Bagikan melalui

Kedai Belanja

oleh Erik Reitan

Unduh Proyek Sampel Mainan Wingtip (C#) atau Unduh E-book (PDF)

Seri tutorial ini akan mengajari Anda dasar-dasar membangun aplikasi ASP.NET Web Forms menggunakan ASP.NET 4.5 dan Microsoft Visual Studio Express 2013 untuk Web. Proyek Visual Studio 2013 dengan kode sumber C# tersedia untuk menyertai seri tutorial ini.

Tutorial ini menjelaskan logika bisnis yang diperlukan untuk menambahkan ke cart belanja ke sampel Wingtip Toys ASP.NET aplikasi Web Forms. Tutorial ini dibangun pada tutorial sebelumnya "Tampilkan Item Dan Detail Data" dan merupakan bagian dari seri tutorial Wingtip Toy Store. Ketika Anda telah menyelesaikan tutorial ini, pengguna aplikasi sampel Anda akan dapat menambahkan, menghapus, dan memodifikasi produk di kedai belanja mereka.

Yang akan Anda pelajari:

  1. Cara membuat kedai belanja untuk aplikasi web.
  2. Cara memungkinkan pengguna untuk menambahkan item ke kedai belanja.
  3. Cara menambahkan kontrol GridView untuk menampilkan detail keliling belanja.
  4. Cara menghitung dan menampilkan total pesanan.
  5. Cara menghapus dan memperbarui item di kedai belanja.
  6. Cara menyertakan penghitung kedai belanja.

Fitur kode dalam tutorial ini:

  1. Kode Kerangka Kerja Entitas Pertama
  2. Anotasi Data
  3. Kontrol data yang diketik dengan kuat
  4. Pengikatan model

Membuat Kedai Belanja

Sebelumnya dalam seri tutorial ini, Anda menambahkan halaman dan kode untuk melihat data produk dari database. Dalam tutorial ini, Anda akan membuat kedai belanja untuk mengelola produk yang diminati pengguna untuk membeli. Pengguna akan dapat menelusuri dan menambahkan item ke kedai belanja meskipun mereka tidak terdaftar atau masuk. Untuk mengelola akses kelopak belanja, Anda akan menetapkan pengguna yang unik ID menggunakan pengidentifikasi unik global (GUID) saat pengguna mengakses kelopak belanja untuk pertama kalinya. Anda akan menyimpan ini ID menggunakan status Sesi ASP.NET.

Catatan

Status Sesi ASP.NET adalah tempat yang nyaman untuk menyimpan informasi spesifik pengguna yang akan kedaluwarsa setelah pengguna meninggalkan situs. Meskipun penyalahgunaan keadaan sesi dapat memiliki implikasi performa di situs yang lebih besar, penggunaan ringan status sesi berfungsi dengan baik untuk tujuan demonstrasi. Proyek sampel Mainan Wingtip menunjukkan cara menggunakan status sesi tanpa penyedia eksternal, di mana status sesi disimpan dalam proses di server web yang menghosting situs. Untuk situs yang lebih besar yang menyediakan beberapa instans aplikasi atau untuk situs yang menjalankan beberapa instans aplikasi di server yang berbeda, pertimbangkan untuk menggunakan Windows Azure Cache Service. Layanan Cache ini menyediakan layanan penembolokan terdistribusi yang berada di luar situs web dan memecahkan masalah penggunaan status sesi dalam proses. Untuk informasi selengkapnya lihat, Cara Menggunakan Status Sesi ASP.NET dengan Situs Web Windows Azure.

Menambahkan CartItem sebagai Kelas Model

Sebelumnya dalam seri tutorial ini, Anda menentukan skema untuk kategori dan data produk dengan membuat Category kelas dan Product di folder Model . Sekarang, tambahkan kelas baru untuk menentukan skema untuk kedai belanja. Nantinya dalam tutorial ini, Anda akan menambahkan kelas untuk menangani akses data ke CartItem tabel. Kelas ini akan menyediakan logika bisnis untuk menambahkan, menghapus, dan memperbarui item di kedai belanja.

  1. Klik kanan folder Model dan pilih Tambahkan ->Item Baru.

    Kedai Belanja - Item Baru

  2. Kotak dialog Tambahkan Item Baru ditampilkan. Pilih Kode, lalu pilih Kelas.

    Kedai Belanja - Dialog Tambahkan Item Baru

  3. Beri nama kelas baru ini CartItem.cs.

  4. Klik Tambahkan.
    File kelas baru ditampilkan di editor.

  5. Ganti kode default dengan kode berikut:

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

    }
}

Kelas CartItem berisi skema yang akan menentukan setiap produk yang ditambahkan pengguna ke kedai belanja. Kelas ini mirip dengan kelas skema lain yang Anda buat sebelumnya dalam seri tutorial ini. Menurut konvensi, Kode Kerangka Kerja Entitas Pertama mengharapkan bahwa kunci primer untuk CartItem tabel akan berupa CartItemId atau ID. Namun, kode mengambil alih perilaku default dengan menggunakan atribut anotasi [Key] data. Atribut Key properti ItemId menentukan bahwa ItemID properti adalah kunci primer.

Properti CartId menentukan ID pengguna yang terkait dengan item yang akan dibeli. Anda akan menambahkan kode untuk membuat pengguna ID ini saat pengguna mengakses kelopak belanja. Ini ID juga akan disimpan sebagai variabel Sesi ASP.NET.

Memperbarui Konteks Produk

Selain menambahkan CartItem kelas , Anda harus memperbarui kelas konteks database yang mengelola kelas entitas dan yang menyediakan akses data ke database. Untuk melakukan ini, Anda akan menambahkan kelas model yang baru dibuat CartItem ke ProductContext kelas .

  1. Di Penjelajah Solusi, temukan dan buka file ProductContext.cs di folder Model .

  2. Tambahkan kode yang disorot ke file ProductContext.cs sebagai berikut:

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

Seperti disebutkan sebelumnya dalam seri tutorial ini, kode dalam file ProductContext.cs menambahkan System.Data.Entity namespace sehingga Anda memiliki akses ke semua fungsi inti Kerangka Kerja Entitas. Fungsionalitas ini mencakup kemampuan untuk mengkueri, menyisipkan, memperbarui, dan menghapus data dengan bekerja dengan objek yang sangat ditik. Kelas ProductContext menambahkan akses ke kelas model yang baru ditambahkan CartItem .

Mengelola Logika Bisnis Kedai Belanja

Selanjutnya, Anda akan membuat ShoppingCart kelas di folder Logika baru. Kelas ShoppingCart menangani akses data ke CartItem tabel. Kelas juga akan menyertakan logika bisnis untuk menambahkan, menghapus, dan memperbarui item di kedai belanja.

Logika ke cart belanja yang akan Anda tambahkan akan berisi fungsionalitas untuk mengelola tindakan berikut:

  1. Menambahkan item ke kedai belanja
  2. Menghapus item dari kedai belanja
  3. Mendapatkan ID kedai belanja
  4. Mengambil barang dari kedai belanja
  5. Menjumlahkan jumlah semua item kedai belanja
  6. Memperbarui data kedai belanja

Halaman keranjang belanja (ShoppingCart.aspx) dan kelas keranjang belanja akan digunakan bersama untuk mengakses data keranjang belanja. Halaman ke cart belanja akan menampilkan semua item yang ditambahkan pengguna ke kedai belanja. Selain halaman dan kelas keranjang belanja, Anda akan membuat halaman (AddToCart.aspx) untuk menambahkan produk ke keranjang belanja. Anda juga akan menambahkan kode ke halaman ProductList.aspx dan halaman ProductDetails.aspx yang akan menyediakan tautan ke halaman AddToCart.aspx , sehingga pengguna dapat menambahkan produk ke keranjang belanja.

Diagram berikut menunjukkan proses dasar yang terjadi saat pengguna menambahkan produk ke kedai belanja.

Kedai Belanja - Menambahkan ke Kedai Belanja

Ketika pengguna mengklik tautan Tambahkan Ke Keranjang Di halaman ProductList.aspx atau halaman ProductDetails.aspx , aplikasi akan menavigasi ke halaman AddToCart.aspx lalu secara otomatis ke halaman ShoppingCart.aspx . Halaman AddToCart.aspx akan menambahkan produk pilihan ke keranjang belanja dengan memanggil metode di kelas ShoppingCart. Halaman ShoppingCart.aspx akan menampilkan produk yang telah ditambahkan ke keranjang belanja.

Membuat Kelas Kedai Belanja

Kelas ShoppingCart akan ditambahkan ke folder terpisah dalam aplikasi sehingga akan ada perbedaan yang jelas antara model (folder Model), halaman (folder akar) dan logika (folder Logika).

  1. Di Penjelajah Solusi, klik kanan proyek WingtipToysdan pilih Tambahkan>Folder Baru. Beri nama folder baru Logika.

  2. Klik kanan folder Logika lalu pilih Tambahkan ->Item Baru.

  3. Tambahkan file kelas baru bernama ShoppingCartActions.cs.

  4. Ganti kode default dengan kode berikut:

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

Metode ini AddToCart memungkinkan produk individu untuk dimasukkan dalam kedai belanja berdasarkan produk ID. Produk ditambahkan ke keranjang, atau jika keranjang sudah berisi item untuk produk tersebut, jumlahnya akan bertahap.

Metode mengembalikan GetCartId keliru ID untuk pengguna. Ke cart ID digunakan untuk melacak item yang dimiliki pengguna di kedai belanja mereka. Jika pengguna tidak memiliki kelir IDyang ada, kelir baru ID dibuat untuk mereka. Jika pengguna masuk sebagai pengguna terdaftar, ke cart ID diatur ke nama pengguna mereka. Namun, jika pengguna tidak masuk, kelir ID diatur ke nilai unik (GUID). GUID memastikan bahwa hanya satu ke cart yang dibuat untuk setiap pengguna, berdasarkan sesi.

Metode mengembalikan GetCartItems daftar item ke cart belanja untuk pengguna. Nantinya dalam tutorial ini, Anda akan melihat bahwa pengikatan model digunakan untuk menampilkan item keramaian di kedai belanja menggunakan GetCartItems metode .

Membuat Fungsionalitas Add-To-Cart

Seperti disebutkan sebelumnya, Anda akan membuat halaman pemrosesan bernama AddToCart.aspx yang akan digunakan untuk menambahkan produk baru ke keranjang belanja pengguna. Halaman ini akan memanggil AddToCart metode di ShoppingCart kelas yang baru saja Anda buat. Halaman AddToCart.aspx akan mengharapkan bahwa produk ID diteruskan ke dalamnya. Produk ID ini akan digunakan saat memanggil AddToCart metode di ShoppingCart kelas .

Catatan

Anda akan memodifikasi code-behind (AddToCart.aspx.cs) untuk halaman ini, bukan UI halaman (AddToCart.aspx).

Untuk membuat fungsionalitas Add-To-Cart:

  1. Di Penjelajah Solusi, klik kanan proyek WingtipToys, klik Tambahkan ->Item Baru.
    Kotak dialog Tambahkan Item Baru ditampilkan.

  2. Tambahkan halaman baru standar (Formulir Web) ke aplikasi bernama AddToCart.aspx.

    Kedai Belanja - Tambahkan Formulir Web

  3. Di Penjelajah Solusi, klik kanan halaman AddToCart.aspx lalu klik Tampilkan Kode. File AddToCart.aspx.cs code-behind dibuka di editor.

  4. Ganti kode yang ada di addToCart.aspx.cs code-behind dengan yang berikut ini:

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

Saat halaman AddToCart.aspx dimuat, produk ID diambil dari string kueri. Selanjutnya, instans kelas ke cart belanja dibuat dan digunakan untuk memanggil AddToCart metode yang Anda tambahkan sebelumnya dalam tutorial ini. Metode AddToCart , yang terkandung dalam file ShoppingCartActions.cs , mencakup logika untuk menambahkan produk yang dipilih ke keranjang belanja atau menambah jumlah produk dari produk yang dipilih. Jika produk belum ditambahkan ke kedai belanja, produk ditambahkan ke CartItem tabel database. Jika produk telah ditambahkan ke keranjang belanja dan pengguna menambahkan item tambahan dari produk yang sama, jumlah produk akan bertambah dalam CartItem tabel. Terakhir, halaman mengalihkan kembali ke halaman ShoppingCart.aspx yang akan Anda tambahkan di langkah berikutnya, di mana pengguna melihat daftar item yang diperbarui di keranjang.

Seperti yang disebutkan sebelumnya, pengguna ID digunakan untuk mengidentifikasi produk yang terkait dengan pengguna tertentu. Ini ID ditambahkan ke baris dalam CartItem tabel setiap kali pengguna menambahkan produk ke kedai belanja.

Membuat UI Kedai Belanja

Halaman ShoppingCart.aspx akan menampilkan produk yang telah ditambahkan pengguna ke keranjang belanja mereka. Ini juga akan memberikan kemampuan untuk menambahkan, menghapus, dan memperbarui item di kedai belanja.

  1. Di Penjelajah Solusi, klik kanan WingtipToys, klik Tambahkan ->Item Baru.
    Kotak dialog Tambahkan Item Baru ditampilkan.

  2. Tambahkan halaman baru (Formulir Web) yang menyertakan halaman master dengan memilih Formulir Web menggunakan Halaman Master. Beri nama halaman baru ShoppingCart.aspx.

  3. Pilih Site.Master untuk melampirkan halaman master ke halaman .aspx yang baru dibuat.

  4. Di halaman ShoppingCart.aspx , ganti markup yang sudah ada dengan markup berikut:

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

Halaman ShoppingCart.aspx menyertakan kontrol GridView bernama CartList. Kontrol ini menggunakan pengikatan model untuk mengikat data keliling belanja dari database ke kontrol GridView . Saat Anda mengatur ItemType properti kontrol GridView , ekspresi Item pengikatan data tersedia dalam markup kontrol dan kontrol menjadi sangat diketik. Seperti disebutkan sebelumnya dalam seri tutorial ini, Anda dapat memilih detail Item objek menggunakan IntelliSense. Untuk mengonfigurasi kontrol data untuk menggunakan pengikatan model untuk memilih data, Anda mengatur SelectMethod properti kontrol. Dalam markup di atas, Anda mengatur SelectMethod untuk menggunakan metode GetShoppingCartItems yang mengembalikan daftar CartItem objek. Kontrol data GridView memanggil metode pada waktu yang tepat dalam siklus hidup halaman dan secara otomatis mengikat data yang dikembalikan. Metode GetShoppingCartItems ini masih harus ditambahkan.

Mengambil Item Kedai Belanja

Selanjutnya, Anda menambahkan kode ke ShoppingCart.aspx.cs code-behind untuk mengambil dan mengisi UI Keranjang Belanja.

  1. Di Penjelajah Solusi, klik kanan halaman ShoppingCart.aspx lalu klik Tampilkan Kode. File shoppingCart.aspx.cs code-behind dibuka di editor.

  2. Ganti kode yang ada dengan yang berikut ini:

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

Seperti disebutkan di atas, GridView kontrol data memanggil metode pada GetShoppingCartItems waktu yang tepat dalam siklus hidup halaman dan secara otomatis mengikat data yang dikembalikan. Metode ini GetShoppingCartItems membuat instans ShoppingCartActions objek . Kemudian, kode menggunakan instans tersebut untuk mengembalikan item di kedai dengan memanggil GetCartItems metode .

Menambahkan Produk ke Kedai Belanja

Ketika halaman ProductList.aspx atau ProductDetails.aspx ditampilkan, pengguna akan dapat menambahkan produk ke kelopak belanja menggunakan tautan. Ketika mereka mengklik tautan, aplikasi menavigasi ke halaman pemrosesan bernama AddToCart.aspx. Halaman AddToCart.aspx akan memanggil AddToCart metode di ShoppingCart kelas yang Anda tambahkan sebelumnya dalam tutorial ini.

Sekarang, Anda akan menambahkan tautan Tambahkan ke Kelopak ke halaman ProductList.aspx dan halaman ProductDetails.aspx . Tautan ini akan menyertakan produk ID yang diambil dari database.

  1. Di Penjelajah Solusi, temukan dan buka halaman bernama ProductList.aspx.

  2. Tambahkan markup yang disorot dengan warna kuning ke halaman ProductList.aspx sehingga seluruh halaman muncul sebagai berikut:

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

Menguji Kedai Belanja

Jalankan aplikasi untuk melihat bagaimana Anda menambahkan produk ke kedai belanja.

  1. Tekan F5 untuk menjalankan aplikasi.
    Setelah proyek membuat ulang database, browser akan terbuka dan menampilkan halaman Default.aspx .

  2. Pilih Mobil dari menu navigasi kategori.
    Halaman ProductList.aspx ditampilkan memperlihatkan hanya produk yang disertakan dalam kategori "Mobil".

    Kedai Belanja - Mobil

  3. Klik tautan Tambahkan ke Kedai di samping produk pertama yang tercantum (mobil yang dapat dikonversi).
    Halaman ShoppingCart.aspx ditampilkan, memperlihatkan pilihan di keranjang belanja Anda.

    Kedai Belanja - Kelisan

  4. Lihat produk tambahan dengan memilih Bidang dari menu navigasi kategori.

  5. Klik tautan Tambahkan ke Kedai di samping produk pertama yang tercantum.
    Halaman ShoppingCart.aspx ditampilkan dengan item tambahan.

  6. Tutup browser.

Menghitung dan Menampilkan Total Pesanan

Selain menambahkan produk ke kedai belanja, Anda akan menambahkan GetTotal metode ke ShoppingCart kelas dan menampilkan jumlah pesanan total di halaman kedai belanja.

  1. Di Penjelajah Solusi, buka file ShoppingCartActions.cs di folder Logika .

  2. Tambahkan metode berikut GetTotal yang disorot dengan warna kuning ke ShoppingCart kelas , sehingga kelas muncul sebagai berikut:

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

Pertama, GetTotal metode ini mendapatkan ID ke cart belanja untuk pengguna. Kemudian metode mendapatkan total keranjang dengan mengalikan harga produk dengan kuantitas produk untuk setiap produk yang tercantum dalam keranjang.

Catatan

Kode di atas menggunakan jenis nullable "int?". Jenis yang dapat diubah ke null dapat mewakili semua nilai dari jenis yang mendasar, dan juga sebagai nilai null. Untuk informasi selengkapnya lihat, Menggunakan Jenis Yang Dapat Diubah Ke Null.

Memodifikasi Tampilan Kedai Belanja

Selanjutnya Anda akan mengubah kode untuk halaman ShoppingCart.aspx untuk memanggil GetTotal metode dan menampilkan total tersebut di halaman ShoppingCart.aspx saat halaman dimuat.

  1. Di Penjelajah Solusi, klik kanan halaman ShoppingCart.aspx dan pilih Tampilkan Kode.

  2. Dalam file ShoppingCart.aspx.cs , perbarui Page_Load handler dengan menambahkan kode berikut yang disorot dengan warna kuning:

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

Ketika halaman ShoppingCart.aspx dimuat, halaman tersebut memuat objek keranjang belanja lalu mengambil total keranjang belanja dengan memanggil GetTotal metode ShoppingCart kelas . Jika kedai belanja kosong, pesan ke efek tersebut akan ditampilkan.

Menguji Total Kedai Belanja

Jalankan aplikasi sekarang untuk melihat bagaimana Anda tidak hanya dapat menambahkan produk ke kedai belanja, tetapi Anda dapat melihat total ke cart belanja.

  1. Tekan F5 untuk menjalankan aplikasi.
    Browser akan terbuka dan menampilkan halaman Default.aspx .

  2. Pilih Mobil dari menu navigasi kategori.

  3. Klik tautan Tambahkan Ke Kedai di samping produk pertama.
    Halaman ShoppingCart.aspx ditampilkan dengan total pesanan.

    Kedai Belanja - Total Kedai

  4. Tambahkan beberapa produk lain (misalnya, pesawat) ke kelir.

  5. Halaman ShoppingCart.aspx ditampilkan dengan total yang diperbarui untuk semua produk yang telah Anda tambahkan.

    Kedai Belanja - Beberapa Produk

  6. Hentikan aplikasi yang sedang berjalan dengan menutup jendela browser.

Menambahkan Tombol Perbarui dan Checkout ke Kedai Belanja

Untuk memungkinkan pengguna memodifikasi kedai belanja, Anda akan menambahkan tombol Perbarui dan tombol Checkout ke halaman kedai belanja. Tombol Checkout tidak digunakan sampai nanti dalam seri tutorial ini.

  1. Di Penjelajah Solusi, buka halaman ShoppingCart.aspx di akar proyek aplikasi web.

  2. Untuk menambahkan tombol Perbarui dan tombol Checkout ke halaman ShoppingCart.aspx , tambahkan markup yang disorot dengan warna kuning ke markup yang sudah ada, seperti yang diperlihatkan dalam kode berikut:

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

Ketika pengguna mengklik tombol Perbarui , penanganan UpdateBtn_Click aktivitas akan dipanggil. Penanganan aktivitas ini akan memanggil kode yang akan Anda tambahkan di langkah berikutnya.

Selanjutnya, Anda dapat memperbarui kode yang terkandung dalam file ShoppingCart.aspx.cs untuk mengulang item keranjang dan memanggil RemoveItem metode dan UpdateItem .

  1. Di Penjelajah Solusi, buka file ShoppingCart.aspx.cs di akar proyek aplikasi web.

  2. Tambahkan bagian kode berikut yang disorot dengan warna kuning ke file 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();
    }
  }
}

Saat pengguna mengklik tombol Perbarui di halaman ShoppingCart.aspx , metode UpdateCartItems dipanggil. Metode UpdateCartItems mendapatkan nilai yang diperbarui untuk setiap item di keranjang belanja. Kemudian, metode UpdateCartItems memanggil UpdateShoppingCartDatabase metode (ditambahkan dan dijelaskan pada langkah berikutnya) untuk menambahkan atau menghapus item dari keranjang belanja. Setelah database diperbarui untuk mencerminkan pembaruan ke keliling belanja, kontrol GridView diperbarui di halaman keliling belanja dengan memanggil DataBind metode untuk GridView. Selain itu, jumlah total pesanan di halaman ke cart belanja diperbarui untuk mencerminkan daftar item yang diperbarui.

Memperbarui dan Menghapus Item Kedai Belanja

Pada halaman ShoppingCart.aspx , Anda bisa melihat kontrol telah ditambahkan untuk memperbarui kuantitas item dan menghapus item. Sekarang, tambahkan kode yang akan membuat kontrol ini berfungsi.

  1. Di Penjelajah Solusi, buka file ShoppingCartActions.cs di folder Logika .

  2. Tambahkan kode berikut yang disorot dengan warna kuning ke file kelas 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;
    }
  }
}

Metode ini UpdateShoppingCartDatabase , yang dipanggil dari UpdateCartItems metode di halaman ShoppingCart.aspx.cs , berisi logika untuk memperbarui atau menghapus item dari keranjang belanja. Metode ini UpdateShoppingCartDatabase melakukan iterasi melalui semua baris dalam daftar ke cart belanja. Jika item keranjang belanja telah ditandai untuk dihapus, atau jumlahnya kurang dari satu, RemoveItem metode akan dipanggil. Jika tidak, item ke cart belanja diperiksa untuk pembaruan ketika metode dipanggil UpdateItem . Setelah item kedai belanja dihapus atau diperbarui, perubahan database disimpan.

Struktur ShoppingCartUpdates ini digunakan untuk menampung semua barang kedai belanja. Metode ini UpdateShoppingCartDatabase menggunakan ShoppingCartUpdates struktur untuk menentukan apakah salah satu item perlu diperbarui atau dihapus.

Dalam tutorial berikutnya, Anda akan menggunakan EmptyCart metode untuk membersihkan kedai belanja setelah membeli produk. Tetapi untuk saat ini, Anda akan menggunakan GetCount metode yang baru saja Anda tambahkan ke file ShoppingCartActions.cs untuk menentukan berapa banyak item yang ada di keranjang belanja.

Menambahkan Penghitung Kedai Belanja

Untuk mengizinkan pengguna melihat jumlah total item di keranjang belanja, Anda akan menambahkan penghitung ke halaman Site.Master . Penghitung ini juga akan bertindak sebagai tautan ke kedai belanja.

  1. Di Penjelajah Solusi, buka halaman Site.Master .

  2. Ubah markup dengan menambahkan tautan penghitung kelir belanja seperti yang ditunjukkan dalam warna kuning ke bagian navigasi sehingga muncul sebagai berikut:

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

  3. Selanjutnya, perbarui code-behind file Site.Master.cs dengan menambahkan kode yang disorot dengan warna kuning sebagai berikut:

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

Sebelum halaman dirender sebagai HTML, Page_PreRender peristiwa dinaikkan. Dalam handler Page_PreRender , jumlah total ke cart belanja ditentukan dengan memanggil GetCount metode . Nilai yang dikembalikan ditambahkan ke rentang yang cartCount disertakan dalam markup halaman Site.Master . Tag <span> memungkinkan elemen dalam dirender dengan benar. Ketika setiap halaman situs ditampilkan, total ke cart belanja akan ditampilkan. Pengguna juga dapat mengklik total kedai belanja untuk menampilkan kedai belanja.

Menguji Kedai Belanja yang Telah Selesai

Anda dapat menjalankan aplikasi sekarang untuk melihat bagaimana Anda dapat menambahkan, menghapus, dan memperbarui item di kedai belanja. Total kedai belanja akan mencerminkan total biaya semua item di kedai belanja.

  1. Tekan F5 untuk menjalankan aplikasi.
    Browser terbuka dan menampilkan halaman Default.aspx .

  2. Pilih Mobil dari menu navigasi kategori.

  3. Klik tautan Tambahkan Ke Kedai di samping produk pertama.
    Halaman ShoppingCart.aspx ditampilkan dengan total pesanan.

  4. Pilih Bidang dari menu navigasi kategori.

  5. Klik tautan Tambahkan Ke Kedai di samping produk pertama.

  6. Atur kuantitas item pertama di keranjang belanja ke 3 dan pilih kotak centang Hapus Item dari item kedua.

  7. Klik tombol Perbarui untuk memperbarui halaman ke cart belanja dan menampilkan total pesanan baru.

    Kedai Belanja - Pembaruan Kedai

Ringkasan

Dalam tutorial ini, Anda telah membuat kelir belanja untuk aplikasi sampel Wingtip Toys Web Forms. Selama tutorial ini, Anda telah menggunakan Kode Kerangka Kerja Entitas Terlebih Dahulu, anotasi data, kontrol data yang sangat diketik, dan pengikatan model.

Kedai belanja mendukung penambahan, penghapusan, dan pembaruan item yang telah dipilih pengguna untuk dibeli. Selain menerapkan fungsi keliling belanja, Anda telah mempelajari cara menampilkan item keliling belanja dalam kontrol GridView dan menghitung total pesanan.

Untuk memahami cara kerja fungsionalitas yang dijelaskan dalam aplikasi bisnis nyata, Anda dapat melihat contoh nopCommerce - ASP.NET berbasis sumber terbuka kedai belanja eCommerce. Awalnya, ia dibangun di Web Forms dan selama bertahun-tahun pindah ke MVC dan sekarang ke ASP.NET Core.

Informasi Tambahan

Gambaran Umum Status Sesi ASP.NET

SebelumnyaBerikutnya