Criando um carrinho de compras usando Visual Basic – Parte 02

Na primeira parte deste artigo, foram definidos os requisitos do nosso web site e também foram criados o modelo de dados, além das classes do nosso domínio. Nós ainda criamos as páginas Pedidos.aspx e Carrinho.aspx. Vamos continuar definindo o código da página Pedido.aspx e também o layout 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 as 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 o 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

Nesse código, verificamos se não é um PostBack e vinculamos o DropDowList aos produtos selecionados na tabela Produtos.

Lembre-se de que estamos fazendo o acesso nessa 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

Esse método retorna um Produto selecionado a partir do controle DropDownList (ddlProdutos). Para isso, estamos usando um DataView, no qual 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 disso, tenha em mente que um DataView não pode ser tratado com uma tabela e além disso não permite visões de tabelas combinadas. Não permite também que se incluam ou se excluam colunas que não existam na tabela original.

Observação: Em meu artigo Uma visão geral – Parte 03: 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 índice 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, um DataRowView vazio será retornado.

Após isso, criamos um objeto Produto e atribuímos a ele 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

Esse código define um variável do tipo ItemLista, que vai ser usada no 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 layout da página Carrinho.aspx

Vamos definir o layout da página Carrinho.aspx, que será a página que representa o nosso carrinho de compras e contém os itens selecionados pelo cliente. Na figura abaixo, temos o layout 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>

Essa página deverá exibir os itens selecionados, 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 mostram a sequência de execução em que 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 Carrinho.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 e 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

Esse código verifica se existem itens no controle ListBox, depois verifica se existe um item selecionado e remove o item da lista para então 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 está vazio e remove todos os itens do controle. Para concluir, o código do botão Encerrar apenas mostra a mensagem de que a rotina não está 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 pude mostrar como implementar um carrinho de compras bem simples usando ASP .NET Web Forms.

O objetivo foi mostrar os recursos básicos envolvidos nesse 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.

Você pode pegar o projeto completo aqui: CarrinhoCompras.zip

Até a próxima!

De 0 a 10, o quanto você recomendaria este artigo para um amigo?

Powered by: