Carrinho de compras

por Erik Reitan

Baixar o projeto de exemplo WingtipC#Toys () ou baixar o livro eletrônico (PDF)

Esta série de tutoriais ensinará as noções básicas da criação de um aplicativo ASP.NET Web Forms usando o ASP.NET 4,5 e o Microsoft Visual Studio Express 2013 para a Web. Um projeto Visual Studio 2013 com C# código-fonte está disponível para acompanhar esta série de tutoriais.

Este tutorial descreve a lógica de negócios necessária para adicionar um carrinho de compras ao aplicativo ASP.NET Web Forms de exemplo Wingtip Toys. Este tutorial se baseia no tutorial anterior "Exibir itens e detalhes de dados" e faz parte da série de tutoriais da loja Wingtip Toy. Quando você concluir este tutorial, os usuários do aplicativo de exemplo poderão adicionar, remover e modificar os produtos em seu carrinho de compras.

O que você aprenderá:

  1. Como criar um carrinho de compras para o aplicativo Web.
  2. Como permitir que os usuários adicionem itens ao carrinho de compras.
  3. Como adicionar um controle GridView para exibir detalhes do carrinho de compras.
  4. Como calcular e exibir o total do pedido.
  5. Como remover e atualizar itens no carrinho de compras.
  6. Como incluir um contador de carrinhos de compras.

Recursos de código neste tutorial:

  1. Entity Framework Code First
  2. Anotações de dados
  3. Controles de dados com rigidez de tipos
  4. Model binding

Criando um carrinho de compras

Anteriormente nesta série de tutoriais, você adicionou páginas e código para exibir dados de produto de um banco de dado. Neste tutorial, você criará um carrinho de compras para gerenciar os produtos que os usuários estão interessados em comprar. Os usuários poderão procurar e adicionar itens ao carrinho de compras, mesmo que não estejam registrados ou conectados. Para gerenciar o acesso ao carrinho de compras, você atribuirá aos usuários um ID exclusivo usando um GUID (identificador global exclusivo) quando o usuário acessar o carrinho de compras pela primeira vez. Você armazenará esse ID usando o estado de sessão ASP.NET.

Note

O estado de sessão do ASP.NET é um local conveniente para armazenar informações específicas do usuário que expirarão depois que o usuário sair do site. Embora o uso indevido do estado da sessão possa causar implicações de desempenho em sites maiores, o uso leve do estado de sessão funciona bem para fins de demonstração. O projeto de exemplo Wingtip Toys mostra como usar o estado de sessão sem um provedor externo, em que o estado de sessão é armazenado em processo no servidor Web que hospeda o site. Para sites maiores que fornecem várias instâncias de um aplicativo ou para sites que executam várias instâncias de um aplicativo em servidores diferentes, considere o uso do serviço de cache do Windows Azure. Esse serviço de cache fornece um serviço de cache distribuído que é externo ao site e resolve o problema de usar o estado de sessão em processo. Para obter mais informações, consulte como usar o estado de sessão ASP.NET com os sites do Windows Azure.

Adicionar CartItem como uma classe de modelo

Anteriormente nesta série de tutoriais, você definiu o esquema para os dados de categoria e produto criando as classes Category e Product na pasta modelos . Agora, adicione uma nova classe para definir o esquema para o carrinho de compras. Posteriormente neste tutorial, você adicionará uma classe para manipular o acesso a dados à tabela CartItem. Essa classe fornecerá a lógica de negócios para adicionar, remover e atualizar itens no carrinho de compras.

  1. Clique com o botão direito do mouse na pasta modelos e selecione Adicionar -> novo item.

    Carrinho de compras-novo item

  2. A caixa de diálogo Adicionar novo item é exibida. Selecione códigoe, em seguida, selecione classe.

    Carrinho de compras – caixa de diálogo Adicionar novo item

  3. Nomeie essa nova classe CartItem.cs.

  4. Clique em Adicionar.
    O novo arquivo de classe é exibido no editor.

  5. Substitua o código padrão pelo código a seguir:

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

A classe CartItem contém o esquema que definirá cada produto que um usuário adiciona ao carrinho de compras. Essa classe é semelhante às outras classes de esquema que você criou anteriormente nesta série de tutoriais. Por convenção, Entity Framework Code First espera que a chave primária para a tabela CartItem seja CartItemId ou ID. No entanto, o código substitui o comportamento padrão usando o atributo Data Annotation [Key]. O atributo Key da propriedade ItemId especifica que a propriedade ItemID é a chave primária.

A propriedade CartId especifica o ID do usuário que está associado ao item a ser comprado. Você adicionará código para criar esse usuário ID quando o usuário acessar o carrinho de compras. Essa ID também será armazenada como uma variável de sessão ASP.NET.

Atualizar o contexto do produto

Além de adicionar a classe de CartItem, você precisará atualizar a classe de contexto do banco de dados que gerencia as classes de entidade e que fornece acesso a um banco de dado. Para fazer isso, você adicionará a classe de modelo CartItem recém-criada à classe ProductContext.

  1. Em Gerenciador de soluções, localize e abra o arquivo ProductContext.cs na pasta modelos .

  2. Adicione o código realçado ao arquivo ProductContext.cs da seguinte maneira:

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

Conforme mencionado anteriormente nesta série de tutoriais, o código no arquivo ProductContext.cs adiciona o namespace System.Data.Entity para que você tenha acesso a todas as funcionalidades principais do Entity Framework. Essa funcionalidade inclui a capacidade de consultar, inserir, atualizar e excluir dados trabalhando com objetos fortemente tipados. A classe ProductContext Adiciona acesso à classe de modelo de CartItem recém adicionada.

Gerenciando a lógica de negócios do carrinho de compras

Em seguida, você criará a classe ShoppingCart em uma nova pasta lógica . A classe ShoppingCart lida com o acesso a dados para a tabela CartItem. A classe também incluirá a lógica de negócios para adicionar, remover e atualizar itens no carrinho de compras.

A lógica do carrinho de compras que você adicionará conterá a funcionalidade para gerenciar as seguintes ações:

  1. Adicionando itens ao carrinho de compras
  2. Removendo itens do carrinho de compras
  3. Obtendo a ID do carrinho de compras
  4. Recuperando itens do carrinho de compras
  5. Totalizando a quantidade de todos os itens do carrinho de compras
  6. Atualizando os dados do carrinho de compras

Uma página de carrinho de compras (ShoppingCart. aspx) e a classe de carrinho de compras serão usadas em conjunto para acessar dados do carrinho de compras. A página carrinho de compras exibirá todos os itens que o usuário adiciona ao carrinho de compras. Além da página e da classe do carrinho de compras, você criará uma página (addToCart. aspx) para adicionar produtos ao carrinho de compras. Você também adicionará código à página ProductList. aspx e à página ProductDetails. aspx que fornecerá um link para a página addToCart. aspx , para que o usuário possa adicionar produtos ao carrinho de compras.

O diagrama a seguir mostra o processo básico que ocorre quando o usuário adiciona um produto ao carrinho de compras.

Carrinho de compras-adicionando ao carrinho de compras

Quando o usuário clica no link Adicionar ao carrinho na página ProductList. aspx ou na página ProductDetails. aspx , o aplicativo navegará para a página addToCart. aspx e, em seguida, automaticamente para a página ShoppingCart. aspx . A página addToCart. aspx adicionará o produto Select ao carrinho de compras chamando um método na classe ShoppingCart. A página ShoppingCart. aspx exibirá os produtos que foram adicionados ao carrinho de compras.

Criando a classe de carrinho de compras

A classe ShoppingCart será adicionada a uma pasta separada no aplicativo, de forma que haverá uma clara distinção entre o modelo (pasta modelos), as páginas (pasta raiz) e a lógica (pasta lógica).

  1. Em Gerenciador de soluções, clique com o botão direito do mouse no projeto WingtipToyse selecione Adicionar->nova pasta. Nomeie a nova lógicade pasta.

  2. Clique com o botão direito do mouse na pasta lógica e selecione Adicionar -> novo item.

  3. Adicione um novo arquivo de classe chamado ShoppingCartActions.cs.

  4. Substitua o código padrão pelo código a seguir:

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

O método AddToCart permite que produtos individuais sejam incluídos no carrinho de compras com base no IDdo produto. O produto é adicionado ao carrinho ou, se o carrinho já contiver um item para esse produto, a quantidade será incrementada.

O método GetCartId retorna o ID do carrinho para o usuário. O ID do carrinho é usado para acompanhar os itens que um usuário tem em seu carrinho de compras. Se o usuário não tiver um IDde carrinho existente, um novo carrinho ID será criado para eles. Se o usuário estiver conectado como um usuário registrado, o ID do carrinho será definido como seu nome de usuário. No entanto, se o usuário não estiver conectado, o ID do carrinho será definido como um valor exclusivo (um GUID). Um GUID garante que apenas um carrinho seja criado para cada usuário, com base na sessão.

O método GetCartItems retorna uma lista de itens do carrinho de compras para o usuário. Posteriormente neste tutorial, você verá que a associação de modelo é usada para exibir os itens do carrinho no carrinho de compras usando o método GetCartItems.

Criando a funcionalidade de adição a carrinho

Como mencionado anteriormente, você criará uma página de processamento chamada addToCart. aspx que será usada para adicionar novos produtos ao carrinho de compras do usuário. Esta página chamará o método AddToCart na classe ShoppingCart que você acabou de criar. A página addToCart. aspx esperará que um produto ID seja passado para ele. Este ID de produto será usado ao chamar o método AddToCart na classe ShoppingCart.

Note

Você modificará o code-behind (addToCart.aspx.cs) desta página, não a interface do usuário da página (addToCart. aspx).

Para criar a funcionalidade de adição a carrinho:

  1. Em Gerenciador de soluções, clique com o botão direito do mouse no projeto WingtipToys, clique em Adicionar -> novo item.
    A caixa de diálogo Adicionar novo item é exibida.

  2. Adicione uma nova página padrão (Web Form) ao aplicativo chamado addToCart. aspx.

    Carrinho de compras – Adicionar formulário da Web

  3. No Gerenciador de soluções, clique com o botão direito do mouse na página addToCart. aspx e clique em Exibir código. O arquivo code-behind addToCart.aspx.cs é aberto no editor.

  4. Substitua o código existente no código do addToCart.aspx.cs por trás do seguinte:

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

Quando a página addToCart. aspx é carregada, o produto ID é recuperado da cadeia de caracteres de consulta. Em seguida, uma instância da classe de carrinho de compras é criada e usada para chamar o método de AddToCart que você adicionou anteriormente neste tutorial. O método AddToCart, contido no arquivo ShoppingCartActions.cs , inclui a lógica para adicionar o produto selecionado ao carrinho de compras ou incrementar a quantidade de produtos do produto selecionado. Se o produto não tiver sido adicionado ao carrinho de compras, o produto será adicionado à tabela de CartItem do banco de dados. Se o produto já tiver sido adicionado ao carrinho de compras e o usuário adicionar um item adicional do mesmo produto, a quantidade de produtos será incrementada na tabela de CartItem. Por fim, a página redireciona de volta para a página ShoppingCart. aspx que você adicionará na próxima etapa, em que o usuário vê uma lista atualizada de itens no carrinho.

Como mencionado anteriormente, um ID de usuário é usado para identificar os produtos que estão associados a um usuário específico. Essa ID é adicionada a uma linha na tabela CartItem cada vez que o usuário adiciona um produto ao carrinho de compras.

Criando a interface do usuário do carrinho de compras

A página ShoppingCart. aspx exibirá os produtos que o usuário adicionou ao carrinho de compras. Ele também fornecerá a capacidade de adicionar, remover e atualizar itens no carrinho de compras.

  1. Em Gerenciador de soluções, clique com o botão direito do mouse em WingtipToys, clique em Adicionar -> novo item.
    A caixa de diálogo Adicionar novo item é exibida.

  2. Adicione uma nova página (formulário da Web) que inclui uma página mestra selecionando formulário da Web usando a página mestra. Nomeie a nova página ShoppingCart. aspx.

  3. Selecione site. Master para anexar a página mestra à página . aspx recém-criada.

  4. Na página ShoppingCart. aspx , substitua a marcação existente pela marcação a seguir:

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

A página ShoppingCart. aspx inclui um controle GridView chamado CartList. Esse controle usa a associação de modelo para associar os dados do carrinho de compras do banco de dado ao controle GridView . Quando você define a propriedade ItemType do controle GridView , a expressão de vinculação de dados Item está disponível na marcação do controle e o controle se torna fortemente tipado. Conforme mencionado anteriormente nesta série de tutoriais, você pode selecionar detalhes do objeto de Item usando o IntelliSense. Para configurar um controle de dados para usar a associação de modelo para selecionar dados, defina a propriedade SelectMethod do controle. Na marcação acima, você define o SelectMethod para usar o método GetShoppingCartItems, que retorna uma lista de objetos CartItem. O controle de dados GridView chama o método no momento apropriado no ciclo de vida da página e associa os dados retornados automaticamente. O método GetShoppingCartItems ainda deve ser adicionado.

Recuperando os itens do carrinho de compras

Em seguida, você adiciona código ao código-behind ShoppingCart.aspx.cs para recuperar e popular a interface do usuário do carrinho de compras.

  1. No Gerenciador de soluções, clique com o botão direito do mouse na página ShoppingCart. aspx e clique em Exibir código. O arquivo code-behind ShoppingCart.aspx.cs é aberto no editor.

  2. Substitua o código existente pelo seguinte:

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

Como mencionado acima, o controle de dados GridView chama o método GetShoppingCartItems no momento apropriado do ciclo de vida da página e associa os dados retornados automaticamente. O método GetShoppingCartItems cria uma instância do objeto ShoppingCartActions. Em seguida, o código usa essa instância para retornar os itens no carrinho chamando o método GetCartItems.

Adicionando produtos ao carrinho de compras

Quando a página ProductList. aspx ou ProductDetails. aspx for exibida, o usuário poderá adicionar o produto ao carrinho de compras usando um link. Quando eles clicam no link, o aplicativo navega para a página de processamento chamada addToCart. aspx. A página addToCart. aspx chamará o método AddToCart na classe ShoppingCart que você adicionou anteriormente neste tutorial.

Agora, você adicionará um link Adicionar ao carrinho à página ProductList. aspx e à página ProductDetails. aspx . Esse link incluirá o ID do produto que é recuperado do banco de dados.

  1. Em Gerenciador de soluções, localize e abra a página chamada ProductList. aspx.

  2. Adicione a marcação realçada em amarelo à página ProductList. aspx para que a página inteira apareça da seguinte maneira:

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

Testando o carrinho de compras

Execute o aplicativo para ver como você adiciona produtos ao carrinho de compras.

  1. Pressione F5 para executar o aplicativo.
    Depois que o projeto recriar o banco de dados, o navegador será aberto e mostrará a página Default. aspx .

  2. Selecione carros no menu de navegação categoria.
    A página ProductList. aspx é exibida mostrando apenas os produtos incluídos na categoria "carros".

    Carrinho de compras – carros

  3. Clique no link Adicionar ao carrinho próximo ao primeiro produto listado (o carro conversível).
    A página ShoppingCart. aspx é exibida, mostrando a seleção em seu carrinho de compras.

    Carrinho de compras-carrinho

  4. Exiba produtos adicionais selecionando planos no menu de navegação categoria.

  5. Clique no link Adicionar ao carrinho próximo ao primeiro produto listado.
    A página ShoppingCart. aspx é exibida com o item adicional.

  6. Feche o navegador.

Calculando e exibindo o total do pedido

Além de adicionar produtos ao carrinho de compras, você adicionará um método GetTotal à classe ShoppingCart e exibirá o valor total da ordem na página carrinho de compras.

  1. Em Gerenciador de soluções, abra o arquivo ShoppingCartActions.cs na pasta lógica .

  2. Adicione o seguinte método GetTotal realçado em amarelo à classe ShoppingCart, para que a classe seja exibida da seguinte maneira:

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

Primeiro, o método GetTotal Obtém a ID do carrinho de compras para o usuário. Em seguida, o método obtém o total do carrinho multiplicando o preço do produto pela quantidade do produto para cada produto listado no carrinho.

Note

O código acima usa o tipo anulável "int?". Tipos anuláveis podem representar todos os valores de um tipo subjacente e também como um valor nulo. Para obter mais informações, consulte usando tipos anuláveis.

Modificar a exibição do carrinho de compras

Em seguida, você modificará o código da página ShoppingCart. aspx para chamar o método GetTotal e exibirá esse total na página ShoppingCart. aspx quando a página for carregada.

  1. Em Gerenciador de soluções, clique com o botão direito do mouse na página ShoppingCart. aspx e selecione Exibir código.

  2. No arquivo ShoppingCart.aspx.cs , atualize o manipulador de Page_Load adicionando o seguinte código realçado em amarelo:

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

Quando a página ShoppingCart. aspx é carregada, ela carrega o objeto de carrinho de compras e, em seguida, recupera o total do carrinho de compras chamando o método GetTotal da classe ShoppingCart. Se o carrinho de compras estiver vazio, será exibida uma mensagem para esse efeito.

Testando o total do carrinho de compras

Execute o aplicativo agora para ver como você não pode adicionar um produto ao carrinho de compras, mas você pode ver o total do carrinho de compras.

  1. Pressione F5 para executar o aplicativo.
    O navegador será aberto e mostrará a página Default.aspx .

  2. Selecione carros no menu de navegação categoria.

  3. Clique no link Adicionar ao carrinho ao lado do primeiro produto.
    A página ShoppingCart. aspx é exibida com o total do pedido.

    Carrinho de compras-total do carrinho

  4. Adicione alguns outros produtos (por exemplo, um plano) ao carrinho.

  5. A página ShoppingCart. aspx é exibida com um total atualizado para todos os produtos que você adicionou.

    Carrinho de compras – vários produtos

  6. Pare o aplicativo em execução fechando a janela do navegador.

Adicionando botões de atualização e de check-out ao carrinho de compras

Para permitir que os usuários modifiquem o carrinho de compras, você adicionará um botão de atualização e um botão de check-out à página do carrinho de compras. O botão de check-out não será usado até mais tarde nesta série de tutoriais.

  1. No Gerenciador de soluções, abra a página ShoppingCart. aspx na raiz do projeto de aplicativo Web.

  2. Para adicionar o botão de atualização e o botão de check-out à página ShoppingCart. aspx , adicione a marcação realçada em amarelo à marcação existente, conforme mostrado no código a seguir:

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

Quando o usuário clica no botão Atualizar , o manipulador de eventos UpdateBtn_Click será chamado. Esse manipulador de eventos chamará o código que você adicionará na próxima etapa.

Em seguida, você pode atualizar o código contido no arquivo ShoppingCart.aspx.cs para executar um loop pelos itens do carrinho e chamar os métodos RemoveItem e UpdateItem.

  1. No Gerenciador de soluções, abra o arquivo ShoppingCart.aspx.cs na raiz do projeto de aplicativo Web.

  2. Adicione as seguintes seções de código realçadas em amarelo ao arquivo 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();
        }
      }
    }
    

Quando o usuário clica no botão Atualizar na página ShoppingCart. aspx , o método UpdateCartItems é chamado. O método UpdateCartItems Obtém os valores atualizados para cada item no carrinho de compras. Em seguida, o método UpdateCartItems chama o método UpdateShoppingCartDatabase (adicionado e explicado na próxima etapa) para adicionar ou remover itens do carrinho de compras. Depois que o banco de dados tiver sido atualizado para refletir as atualizações para o carrinho de compras, o controle GridView será atualizado na página do carrinho de compras chamando o método DataBind para GridView. Além disso, o valor total do pedido na página do carrinho de compras é atualizado para refletir a lista atualizada de itens.

Atualizando e removendo itens do carrinho de compras

Na página ShoppingCart. aspx , você pode ver que os controles foram adicionados para atualizar a quantidade de um item e remover um item. Agora, adicione o código que fará com que esses controles funcionem.

  1. Em Gerenciador de soluções, abra o arquivo ShoppingCartActions.cs na pasta lógica .

  2. Adicione o seguinte código realçado em amarelo ao arquivo de classe 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;
        }
      }
    }
    

O método UpdateShoppingCartDatabase, chamado a partir do método UpdateCartItems na página ShoppingCart.aspx.cs , contém a lógica para atualizar ou remover itens do carrinho de compras. O método UpdateShoppingCartDatabase itera em todas as linhas dentro da lista de carrinhos de compras. Se um item de carrinho de compras tiver sido marcado para ser removido ou a quantidade for menor que um, o método RemoveItem será chamado. Caso contrário, o item do carrinho de compras será verificado quanto a atualizações quando o método UpdateItem for chamado. Depois que o item do carrinho de compras tiver sido removido ou atualizado, as alterações no banco de dados serão salvas.

A estrutura de ShoppingCartUpdates é usada para manter todos os itens do carrinho de compras. O método UpdateShoppingCartDatabase usa a estrutura ShoppingCartUpdates para determinar se algum dos itens precisa ser atualizado ou removido.

No próximo tutorial, você usará o método EmptyCart para limpar o carrinho de compras depois de comprar produtos. Mas, por enquanto, você usará o método GetCount que acabou de adicionar ao arquivo ShoppingCartActions.cs para determinar quantos itens estão no carrinho de compras.

Adicionando um contador de carrinhos de compras

Para permitir que o usuário exiba o número total de itens no carrinho de compras, você adicionará um contador à página site. Master . Esse contador também funcionará como um link para o carrinho de compras.

  1. Em Gerenciador de soluções, abra a página site. Master .

  2. Modifique a marcação adicionando o link do contador de carrinho de compras, conforme mostrado em amarelo, para a seção de navegação, para que ele apareça da seguinte maneira:

    <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. Em seguida, atualize o código para trás do arquivo site.master.cs adicionando o código realçado em amarelo da seguinte maneira:

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

Antes que a página seja processada como HTML, o evento Page_PreRender é gerado. No manipulador de Page_PreRender, a contagem total do carrinho de compras é determinada chamando o método GetCount. O valor retornado é adicionado ao cartCount span incluído na marcação da página site. Master . As marcas de <span> permitem que os elementos internos sejam processados corretamente. Quando qualquer página do site for exibida, o total do carrinho de compras será exibido. O usuário também pode clicar no total do carrinho de compras para exibir o carrinho de compras.

Testando o carrinho de compras concluído

Você pode executar o aplicativo agora para ver como você pode adicionar, excluir e atualizar itens no carrinho de compras. O total do carrinho de compras refletirá o custo total de todos os itens no carrinho de compras.

  1. Pressione F5 para executar o aplicativo.
    O navegador é aberto e mostra a página Default. aspx .

  2. Selecione carros no menu de navegação categoria.

  3. Clique no link Adicionar ao carrinho ao lado do primeiro produto.
    A página ShoppingCart. aspx é exibida com o total do pedido.

  4. Selecione planos no menu de navegação categoria.

  5. Clique no link Adicionar ao carrinho ao lado do primeiro produto.

  6. Defina a quantidade do primeiro item no carrinho de compras como 3 e marque a caixa de seleção Remover item do segundo item.

  7. Clique no botão Atualizar para atualizar a página do carrinho de compras e exibir o novo total do pedido.

    Carrinho de compras-atualização do carrinho

Resumo

Neste tutorial, você criou um carrinho de compras para o aplicativo de exemplo Web Forms Wingtip Toys. Durante este tutorial, você usou Entity Framework Code First, anotações de dados, controles de dados com rigidez de tipos e Associação de modelo.

O carrinho de compras dá suporte à adição, exclusão e atualização de itens que o usuário selecionou para compra. Além de implementar a funcionalidade de carrinho de compras, você aprendeu como exibir itens de carrinho de compras em um controle GridView e calcular o total do pedido.

Para entender como a funcionalidade descrita funciona em um aplicativo de negócios real, você pode exibir o exemplo de carrinho de compras de software livre baseado em Nopcommerce -ASP.net. Originalmente, ele foi criado em Web Forms e ao longo dos anos movidos para o MVC e agora para ASP.NET Core.

Informações de adição

Visão geral do estado de sessão do ASP.NET