ASP.NET - Criando um carrinho de compras

<%@ Page debug=true Language="VB" ContentType="text/html" ResponseEncoding="iso-8859-1" %>

Criando um carrinho de compras

Que tal um carrinho de compras ? Carrinho de compras ??? Sim , um carrinho de compras feito em ASP.NET para você adaptar ao seu negócio e incluir no seu site. Além de aprender conceitos importantes de relacionados a tecnologia ASP.NET vai economizar uma grana.

Neste artigo eu vou mostrar como criar e implementar um carrinho de compras . Vamos usar os seguintes ingredientes :

Session
DataSet
DataGrid
DataTable

O objetivo deste artigo é mostrar a você conceitos básicos , tais como :

Criar um interface com o usuário usando os controles de Servidor
Construir uma tabela dinâmica usando a classe DataTable
Exibir os dados selecionados em um DataGrid
Remover itens de um DataGrid
Totalizar o valor dos itens selecionados

Não vou me preocupar com a aparência da interface , deixo esta parte para você incrementar, OK ?

Criando a interface com o usuário

A interface , como já disse , vai ser simples , vamos usar os seguintes componentes :

Um Web Control DropDownList para exibir os produtos que vamos oferecer. O valor de cada produto estará associado a cada item.
Um controle Web TextBox onde o usuário poderá informar a quantidade do produto que deseja.
Um controle Web Button para incluir o pedido no carrinho de compras
Um componente Web DataGrid que irá exibir o conteúdo do carrinho de compras
Um controle Web Label que irá exibir o valor total do pedido

Você pode usar o Visual Studio .NET para criar a interface ; eu vou usar o editor do Visual Studio (você pode usar até Bloco de notas para digitar o código ; se for masoquista...). Veja o código abaixo :

Produto:<br>
<asp:DropDownList id=Produtos runat="server">
<asp:ListItem Value="25,00">Super CD Visual Basic - 2003</asp:ListItem>
<asp:ListItem Value="15,00">Super CD Asp Total - 2003</asp:ListItem>
<asp:ListItem Value="100,00">Sistema - Clinicas Dentárias</asp:ListItem>
<asp:ListItem Value="60,00">Sistema - Escola Infantil</asp:ListItem>
<asp:ListItem Value="70,00">Sistema - Videolocadora</asp:ListItem>
</asp:DropDownList><br>

<br><br>
Total:
<asp:Label id=lblTotal runat="server" />

</form>
</body>
</html>

O código acima preenche o componente DropDownList identificado como produtos (id=produtos) com 5 produtos ; cada item da lista está associado a seu valor.

A caixa de texto - TextBox - txtquantidade - permite que o usuário altere a quantidade dos produtos.

O botão de comando - Button - btnIncluir - possui o texto - Incluir no Carrinho . Perceba o evento - OnClick - associado ao botão que irá chamar a subrotina - IncluirNoCarrinho.

O DataGrid (id=dg) irá exibir os valores que serão criados dinamicamente usando um objeto DataTable . O objeto DataTable será criado via código a cada pedido feito pelo usuário.

O controle label (id=lblTotal) - irá exibir o valor total dos pedidos

O processamento do código acima irá exibir a estrutura básica da interface com o usuário. O resultado é exibida na tela abaixo :

Criando a estrutura da tabela

Nesta etapa vamos usar o objeto DataTable para criar dinamicamente uma representação de uma tabela do banco de dados na memória. Vamos criar uma tabela via código ; as colunas são representadas pela propriedade columns e as linhas pela propriedade rows. Após criar a tabela representada pelo objeto DataTable basta vinculá-la ao objeto DataGrid para exibir os dados nela contido.

A estrutura da nossa tabela será bem simples , mas servirá aos nossos propósitos , ela será a seguinte :

Coluna	Tipo de Dados	Autoincrementar	Unico
Codigo	Inteiro	Sim	Sim
Quantidade	Inteiro	Não	Não
Produto	String	Não	Não
Custo	Decimal	Não	Não

O campo - Codigo - foi definido com a propriedade - Autoincrementar - igual a SIM - desta forma ele será automaticamente incrementado a cada inclusão.

A tabela deverá ser criada quando a página for carregada pela primeira vez. Somente não iremos definir as linhas da tabela , elas serão criadas quando o usuário , selecionar um produto na página. O código para criar a estrutura básica da tabela é o seguinte :

O início do código do arquivo - cesta.aspx - deverá ser o seguinte :

<%@ Page debug=true Language="VB" ContentType="text/html" ResponseEncoding="iso-8859-1" %>
<html>
<head>
<title>Carrinho de Compras</title>
<script runat="server">

'cria um nova instância dos objetos Datatable e DataRow
Dim objDT As System.Data.DataTable
Dim objDR As System.Data.DataRow

Nele estamos ativando o modo de depuração , definindo a linguagem usada (VB .NET) e declarando as variáveis objeto do tipo DataTable e DataRow.

A seguir o código associado ao evento Load da página onde iremos invocar a função - CriaCarrinhoDeCompras() - que irá criar a tabela.

Private Sub Page_Load(s As Object, e As EventArgs)
    If Not IsPostBack Then
          CriaCarrinhoDeCompras()
    End If
End Sub

O código da função - CriaCarrinhoDeCompras() - :

Function CriaCarrinhoDeCompras()
    objDT = New System.Data.DataTable("Carrinho")
    objDT.Columns.Add("Codigo", GetType(Integer))
    objDT.Columns("Codigo").AutoIncrement = True
    objDT.Columns("Codigo").AutoIncrementSeed = 1

    objDT.Columns.Add("Quantidade", GetType(Integer))
    objDT.Columns.Add("Produto", GetType(String))
    objDT.Columns.Add("Custo", GetType(Decimal))

   Session("Carrinho") = objDT
End Function

No código definimos as colunas da tabela e armazenamos o objeto na sessão identificada com o nome de - Carrinho.

Incluindo os itens selecionados no carrinho de compras e totalizando

Para incluir itens no carrinho de compras temos que criar novas linhas e então incluí-las na posição apropriada da tabela. O código da função IncluirNoCarrinho é dado a seguir:

Sub IncluirNoCarrinho(s As Object, e As EventArgs)

objDT = Session("Carrinho")

Dim Produto = Produtos.SelectedItem.Text

Dim blnMatch As Boolean = False

For Each objDR In objDT.Rows
   If objDR("Produto") = Produto Then
        objDR("Quantidade") += txtQuantidade.Text
        blnMatch = True
        Exit For
   End If
Next

If Not blnMatch Then
   objDR = objDT.NewRow
   objDR("Quantidade") = txtQuantidade.Text
   objDR("Produto") = Produtos.SelectedItem.Text
   objDR("Custo") = Decimal.Parse(Produtos.SelectedItem.Value)
   objDT.Rows.Add(objDR)
End If

Session("Carrinho") = objDT

dg.DataSource = objDT
dg.DataBind()

lblTotal.Text = FormatCurrency(GetItemTotal(),2)

End Sub

O código acima é executado quando o usuário clica no botão - incluir no carrinho . O evento onClick chama o procedimento - IncluirNoCarrinho.

objDT = Session("Carrinho")

Dim Produto = Produtos.SelectedItem.Text

As linhas acima do código obtém o carrinho da sessão , se ele existir , e retorna o produto selecionado da caixa de listagem - dropdownlist. Como já foi criada uma nova instância da classe DataRow no início do código, podemos criar novas linhas para incluir no objeto DataTable.

For Each objDR In objDT.Rows
   If objDR("Produto") = Produto Then
        objDR("Quantidade") += txtQuantidade.Text
        blnMatch = True
        Exit For
   End If
Next

O código acima verifica se o produto selecionado já existe na tabela e incrementa a sua quantidade.

If Not blnMatch Then
   objDR = objDT.NewRow
   objDR("Quantidade") = txtQuantidade.Text
   objDR("Produto") = Produtos.SelectedItem.Text
   objDR("Custo") = Decimal.Parse(Produtos.SelectedItem.Value)
   objDT.Rows.Add(objDR)
End If

Neste código estamos incluindo a linha na tabela , a condição existe , pois somente podemos incluir um produto que ainda não exista na tabela.

A última linha de código : lblTotal.Text = FormatCurrency(GetItemTotal(),2) faz a totalização dos valores dos produtos chamando o procedimento - GetItemTotal() , cujo código é o seguinte :

Function GetItemTotal() As Decimal
Dim intCounter As Integer
Dim decTotal As Decimal

For intCounter = 0 To objDT.Rows.Count - 1
objDR = objDT.Rows(intCounter)
decTotal += (objDR("Custo") * objDR("Quantidade"))
Next

Return decTotal
End Function

Excluindo itens do carrinho de compras

Para encerrar vamos mostrar como excluir itens do carrinho de compras , assim o usuário poderá considerar e voltar atrás na compra de um produto. A rotina é a seguinte :

Sub Exclui_Item(s As Object, e As DataGridCommandEventArgs)
objDT = Session("Carrinho")
objDT.Rows(e.Item.ItemIndex).Delete()
Session("Carrinho") = objDT

dg.DataSource = objDT
dg.DataBind()

lblTotal.Text = FormatCurrency(GetItemTotal(),2)
End Sub

Estou usando o método Delete do objeto Rows e a seguir atribuindo o objeto a sessão definida. Em seguida vinculamos o objeto ao DataGrid e exibimos o valor total na label do formulário.

A linha de código definida no DataGrid que ativa a exclusão é a seguinte :

<asp:buttoncolumn buttontype="LinkButton" commandname="Delete" text="Remover Item" />

O código completo é dado a seguir :

<%@ Page debug=true Language="VB" ContentType="text/html" ResponseEncoding="iso-8859-1" %>
<html>
<head>
<title>Carrinho de Compras</title>
<script runat="server">

Dim objDT As System.Data.DataTable
Dim objDR As System.Data.DataRow

Private Sub Page_Load(s As Object, e As EventArgs)
   If Not IsPostBack Then
      CriaCarrinhoDeCompras()
   End If
End Sub

Function CriaCarrinhoDeCompras()
objDT = New System.Data.DataTable("Carrinho")
objDT.Columns.Add("Codigo", GetType(Integer))
objDT.Columns("Codigo").AutoIncrement = True
objDT.Columns("Codigo").AutoIncrementSeed = 1

objDT.Columns.Add("Quantidade", GetType(Integer))
objDT.Columns.Add("Produto", GetType(String))
objDT.Columns.Add("Custo", GetType(Decimal))

Session("Carrinho") = objDT
End Function

Sub IncluirNoCarrinho(s As Object, e As EventArgs)
objDT = Session("Carrinho")
Dim Produto = Produtos.SelectedItem.Text
Dim blnMatch As Boolean = False

For Each objDR In objDT.Rows
      If objDR("Produto") = Produto Then
         objDR("Quantidade") += txtQuantidade.Text
         blnMatch = True
         Exit For
      End If
Next

If Not blnMatch Then
     objDR = objDT.NewRow
     objDR("Quantidade") = txtQuantidade.Text
     objDR("Produto") = Produtos.SelectedItem.Text
     objDR("Custo") = Decimal.Parse(Produtos.SelectedItem.Value)
     objDT.Rows.Add(objDR)
End If

Session("Carrinho") = objDT

dg.DataSource = objDT
dg.DataBind()

lblTotal.Text = FormatCurrency(GetItemTotal(),2)

End Sub

Function GetItemTotal() As Decimal
Dim intCounter As Integer
Dim decCalculaTotal As Decimal

For intCounter = 0 To objDT.Rows.Count - 1
    objDR = objDT.Rows(intCounter)
    decCalculaTotal += (objDR("Custo") * objDR("Quantidade"))
Next

Return decCalculaTotal
End Function

Sub Exclui_Item(s As Object, e As DataGridCommandEventArgs)
objDT = Session("Carrinho")
objDT.Rows(e.Item.ItemIndex).Delete()
Session("Carrinho") = objDT

dg.DataSource = objDT
dg.DataBind()

lblTotal.Text = FormatCurrency(GetItemTotal(),2)
End Sub
</script>

</head>
<body>
<form runat="server">
Produto:<br>
<asp:DropDownList id=Produtos runat="server">
<asp:ListItem Value="25,00">Super CD Visual Basic - 2003</asp:ListItem>
<asp:ListItem Value="15,00">Super CD Asp Total - 2003</asp:ListItem>
<asp:ListItem Value="100,00">Sistema - Clinicas Dentárias</asp:ListItem>
<asp:ListItem Value="60,00">Sistema - Escola Infantil</asp:ListItem>
<asp:ListItem Value="70,00">Sistema - Videolocadora</asp:ListItem>
</asp:DropDownList><br>

Quantidade:<br>
<asp:textbox id="txtQuantidade" runat="server" /><br><br>
<asp:Button id=btnIncluir runat="server" Text="Incluir no Carrinho" onClick="IncluirNoCarrinho" /><br><br>
<asp:DataGrid id=dg runat="server" ondeletecommand="Exclui_Item">
<columns>
<asp:buttoncolumn buttontype="LinkButton" commandname="Delete" text="Remover Item" />
</columns>
</asp:DataGrid>
<br><br>
Total:
<asp:Label id=lblTotal runat="server" />
</form>
</body>
</html>

Agora é só você acessar o carrinho de compras no link a seguir e testar...: CarrinhoCompras.

Até breve

Referências:

Seção VB .NET do Site Macoratti.net
Seção C# do site Macoratti.net
Seção ASP .NET do site Macoratti.net
Super DVD .NET - A sua porta de entrada na plataforma .NET
Super DVD Vídeo Aulas - Vídeo Aula sobre VB .NET, ASP .NET e C#

José Carlos Macoratti