ASP .NET - Criando um carrinho de compras II (VB .NET)

Na primeira parte deste artigo foram definidos os requisitos do nosso web site e foram criados o modelo de dados e as classes do nosso domínio; também criamos as páginas Pedidos.aspx e Carrinho.aspx.

Vamos continuar definindo o código da página Pedido.aspx e também o leiaute e o código da página Carrinho.aspx.

Quando a página Pedido.aspx for carregada o dropdownlist da página deverá ser preenchido de forma a exibir o nome dos produtos data tabela Produtos;

Quando um produto for selecionado deverão ser exibidas na página a sua imagem e informações de forma que o cliente possa informar a quantidade desejada e incluir o item no carrinho de compras.

Abaixo vemos a página Pedidos.aspx exibindo um produto:

Definindo o código da página Pedidos.aspx

Vamos agora definir o código da página Pedidos.aspx de forma a permitir que resultado obtido seja o da figura acima.

Selecione o arquivo Pedidos.aspx na janela Solution Explorer e abra o code-behind no arquivo Pedidos.aspx.vb

Como vamos acessar um banco de dados via ADO .NET precisamos definir o seguinte namespace no início do arquivo:

Imports System.Data

Após a definição da classe vamos declarar uma variável do tipo Produto chamada produtoSelecionado que representará um produto selecionado pelo cliente:

Private produtoSelecionado As Produto

Em seguida vamos definir o código no evento Load da página :

 Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not IsPostBack Then
            ddlProdutos.DataBind()
        End If
        produtoSelecionado = Me.GetProdutoSelecionado
        lblNome.Text = produtoSelecionado.Nome
        lblResumo.Text = produtoSelecionado.Resumo
        lblDescricao.Text = produtoSelecionado.Descricao
        lblPreco.Text = FormatCurrency(produtoSelecionado.Preco)
        imgProduto.ImageUrl = "Imagens/" & produtoSelecionado.Imagem
    End Sub

Neste código verificamos se não é um PostBack e vinculamos o DropDowList aos produtos selecionados na tabela Produtos. Lembre-se que estamos fazendo o acesso nesta tabela usando o componente AccessDataSource e vinculando o DropDownList ao componente. Veja abaixo o código da página que faz exatamente isso:

.....
          <asp:DropDownList ID="ddlProdutos" runat="server"  DataSourceID="AccessDataSource1" DataTextField="Nome"
            DataValueField="produtoid" Width="150px" AutoPostBack="True">
        </asp:DropDownList>
        <asp:AccessDataSource ID="AccessDataSource1" runat="server"  DataFile="~/App_Data/Vendas.mdb"
            SelectCommand="SELECT [produtoid], [nome], [resumo],[descricao], [imagem], [preco]
            FROM [Produtos] ORDER BY [nome]">
        </asp:AccessDataSource>
.....

A seguir estou chamando o método GetProdutoSelecionado para obter as informações do produto e exibir essas informações nas Labels da página.

O método GetProdutoSelecionado possui o seguinte código:

Private Function GetProdutoSelecionado() As Produto

        Dim produtoTabela As DataView = CType(AccessDataSource1.Select(DataSourceSelectArguments.Empty), DataView)
        produtoTabela.RowFilter = "ProdutoID = '" & ddlProdutos.SelectedValue & "'"
        Dim productRow As DataRowView = produtoTabela(0)

        Dim produto1 As New Produto
        produto1.ProdutoID = productRow("produtoid").ToString
        produto1.Nome = productRow("Nome").ToString
        produto1.Resumo = productRow("Descricao").ToString
        produto1.Descricao = productRow("Resumo").ToString
        produto1.Preco = CDec(productRow("Preco"))
        produto1.Imagem = productRow("Imagem").ToString
        Return produto1
    End Function

Este método retorna um Produto selecionado a partir do controle DropDownList(ddlProdutos). Para isso estamos usando um DataView onde usando o método RowFilter estamos selecionado o produto pelo seu código obtido do dropdownlist.

Um DataView permite criar diferentes visões dos dados armazenados em um DataTable permitindo diversos critérios para ordenação e filtragem de dados. Apesar disto tenha em mente que um DataView não pode ser tratado com uma tabela e não permite visões de tabelas combinadas. Não permite também que se inclua o exclua colunas que não existam na tabela original.

Em meu artigo - VB .NET - ADO.NET - Uma visão geral III : DataView. - já tratei das principais propriedades do objeto DataView e a forma como podemos criar um DataView.

DataView.RowFilter - Podemos usar um DataView baseado em um Datatable para localizar registros das seguintes formas :
  • Usar a propriedade RowFilter do DataView. Cria um DataView baseado em um DataTable e define RowFilter para uma expressão de filtro.
  • Usar o método Find() do DataView para retornar o indice da linha que coincide com a chave ordenada ou com valores passados como argumentos objetos ou um array de objetos. Se a chave ordenada não existir será retornado Null.
  • Usar o método FindRows() do DataView para retornar um array de objetos DataRowView cujas colunas coincidem com o valor da chave ordenada especificada. Se ela não existir um array DataRowView vazio será retornado.

Após isso criamos um objeto Produto e atribuímos ao mesmo as informações do produto selecionado.

No evento Click do botão - Incluir no Carrinho - vamos definir o seguinte código:

  Protected Sub btnIncluir_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnIncluir.Click
        If Page.IsValid Then
            Dim carrinho As ItemLista = ItemLista.GetCarrinho
            Dim itemCarrinho As Item = carrinho(produtoSelecionado.ProdutoID)
            If itemCarrinho Is Nothing Then
                carrinho.IncluirItem(produtoSelecionado, CInt(txtQuantidade.Text))
            Else
                itemCarrinho.IncluiQuantidade(CInt(txtQuantidade.Text))
            End If
            Response.Redirect("Carrinho.aspx")
        End If
    End Sub

Este código define um variável do tipo ItemLista que vai usa o método GetCarrinho para obter o carrinho da sessão. Veja o código do método GetCarrinho():

 Public Shared Function GetCarrinho() As ItemLista
        If CType(HttpContext.Current.Session("Carrinho"), ItemLista) Is Nothing Then
            HttpContext.Current.Session.Add("Carrinho", New ItemLista)
        End If
        Return CType(HttpContext.Current.Session("Carrinho"), ItemLista)
    End Function

Em seguida verificamos se o item do carrinho é nulo e usamos o método IncluirItem(), mostrado abaixo, para incluir o item selecionado no carrinho.

 Public Sub IncluirItem(ByVal produto As Produto, ByVal quantidade As Integer)
        Dim c As New Item(produto, quantidade)
        itensLista.Add(c)
    End Sub

Ao final redirecionamos o cliente para a página Carrinho.aspx.

Definindo o leiaute da página Carrinho.aspx

Vamos definir o leiaute da página Carrinho.aspx que será a página que representa o nosso carrinho de compras contendo os itens selecionados pelo cliente.

Na figura abaixo temos o leiaute da página:

Controles usados na página Carrinhos.aspx:

  • ListBox (ID= listaCarrinho
  • Button (ID= btnRemover)
  • Button (ID= btnEsvaziar)
  • Button (ID= btnContinuar) - PostBackUrl="~/Pedido.aspx"
  • Button (ID= btnEncerrar)
  • Label

Abaixo temos o código fonte gerado para a página:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Carrinho.aspx.vb" Inherits="Carrinho" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Carrinho de Compras</title>
    <style type="text/css">
        .style1
        {
            width: 100%;
        }
        .style2
        {
            width: 285px;
            height: 155px;
        }
        .style3
        {
            height: 155px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Image ID="Image1" runat="server"  ImageUrl="~/Imagens/maco10.gif" /><br /><br />
        Seu Carrinho de Compras:<br /><br />
        <table class="style1" cellpadding="0" cellspacing="0">
            <tr>
                <td class="style2" valign="top">
                    <asp:ListBox ID="listaCarrinho" runat="server" Height="135px" Width="275px"></asp:ListBox>
                </td>
                <td class="style3" valign="top">
                    <asp:Button ID="btnRemover" runat="server" Text="Remover Item" Width="112px" /><br /><br />
                    <asp:Button ID="btnEsvaziar" runat="server" Text="Esvaziar Carrinho" Width="112px" />
                </td>
            </tr>
        </table>
        <br />
        <asp:Button ID="btnContinuar" runat="server"  PostBackUrl="~/Pedido.aspx" Text="Continuar Comprando" />&nbsp;
        <asp:Button ID="btnEncerrar" runat="server" Text="Encerrar Compras" /><br />
        <br />
        <asp:Label ID="lblMensagem" runat="server" ForeColor="Green" EnableViewState="False"></asp:Label>
    </div>
    </form>
</body>
</html>

Esta página deverá exibir os itens selecionados e permitir que o cliente continue comprando ou encerre as compras (não implementado). O cliente poderá também remover itens selecionados ou esvaziar o carrinho.

Abaixo as figuras que mostra a seqüência de execução onde na página Pedidos.aspx o cliente seleciona um produto e na página Carrinho.aspx o item selecionado é exibido:

Pedidos.aspx

Carrinhos.aspx

Vejamos a seguir o código da página Carrrinho.aspx necessário para implementar o comportamento esperado.

Definindo o código da página Carrinho.aspx

Selecione o arquivo Carrinho.aspx e abra o code-behind no arquivo Carrinho.aspx.vb.

Logo após a declaração do formulário vamos definir uma variável carrinho do tipo ItemLista:

Private carrinho As ItemLista

Em seguida no evento Load da página inclua o código a seguir:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        carrinho = ItemLista.GetCarrinho
        If Not IsPostBack Then
            Me.ExibeCarrinho()
        End If
    End Sub

O código utiliza o método GetCarrinho da classe ItemLista. Esse método obtém um carrinho da sessão.

A seguir, se não for um PostBack, chamamos o método ExibeCarrinho().

O código do método ExibeCarrinho() é dado a seguir:

 Private Sub ExibeCarrinho()
        listaCarrinho.Items.Clear()
        Dim itemCarrinho As Item
        For i = 0 To carrinho.Count - 1
            itemCarrinho = carrinho(i)
            listaCarrinho.Items.Add(itemCarrinho.Exibir)
        Next
    End Sub

No código acima primeiro limpamos o controle ListBox; a seguir declaramos a variável itemCarrinho do tipo Item que representa um item selecionado.

Depois usamos um laço for/next para percorrer o carrinho e incluir os itens no Listbox.

O código do evento Click do botão Remover é mostrado a seguir:

Protected Sub btnRemover_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnRemover.Click
        If carrinho.Count > 0 Then
            If listaCarrinho.SelectedIndex > -1 Then
                carrinho.RemoverEm(listaCarrinho.SelectedIndex)
                Me.ExibeCarrinho()
            Else
                lblMensagem.Text = "Selecione um item que deseja remover."
            End If
        End If
    End Sub

Este código verifica se existem itens no controle ListBox depois verifica se existe um item selecionado e remove o item da lista para depois exibir novamente o carrinho.

O código do botão Esvaziar é exibido abaixo:

Protected Sub btnEsvaziar_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnEsvaziar.Click
        If carrinho.Count > 0 Then
            carrinho.Limpar()
            listaCarrinho.Items.Clear()
        End If
    End Sub

O código verifica se o controle ListBox esta vazio e remove todos os itens do controle.

Para encerrar o código do botão Encerrar apenas mostra a mensagem de que a rotina não esta implementada.

 Protected Sub btnEncerrar_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnEncerrar.Click
        lblMensagem.Text = "Esta funcionalidade ainda não foi construída."
    End Sub

E assim eu mostrei como implementar um carrinho de compras bem simples usando ASP .NET Web Forms. O objetivo foi mostrar os recursos básicos envolvidos neste processado e fornecer subsídios para que você saiba por onde começar , se um dia precisar criar um carrinho de compras usando ASP .NET.

 Pegue o projeto completo aqui: CarrinhoCompras.zip

 "Passará o céu e a terra, mas as minhas palavras jamais passarão." (Mateus 24:35)

Referências:

José Carlos Macoratti