Criando uma cesta de compras com ASP.NET 2.0

Publicado em: 12 de abril de 2007

Por Dennes Torres

MCAD,MCSD,MCSE,MCDBA

Dennes@bufaloinfo.com.br

Nesta página

Introdução
Página de Produtos
Página de cesta de compras
Conclusão

Introdução

Uma cesta de compras sem dúvida é um exemplo que traz muitos desafios e com isso nos mostra muitas características das tecnologias de desenvolvimento para web.

Vamos utilizar o banco NorthWind. Neste banco temos uma tabela de produtos - products - que servirá como excelente exemplo. Você precisará do Visual Studio 2005 e do SQL Server 2000 ou 2005. O SQL Server 2000 já possui o banco Northwind instalado, mas caso você esteja utilizando SQL Server 2005 precisará instalar este banco de exemplo baixando as bases de https://www.microsoft.com/downloads/details.aspx?FamilyID=06616212-0356-46a0-8da2-eebc53a68034&displaylang=en e realizando a instalação.

Ao entrar no Visual Studio, selecione a opção "Create new webSite"

Precisaremos criar duas páginas : Uma página para exibir os produtos e gravar os pedidos do usuário e uma página para listar os pedidos do usuário, deixar que ele altere e concluir o pedido.

Página de Produtos

Primeiro passo : Criar um SQL DataSource apontando para a tabela products.

Passo simples, sem mistérios. É sem dúvida interessante observar que o SQL Data Source sugere que a string de conexão seja gravada no web.config

(Tela do Wizard do SQL DataSource, na qual você chegará selecionando o SQL DataSource, clicando na seta em seu canto superior direito - a smartTag - e selecionando "Configure DataSource")

Nesta tela vemos a escolha da conexão. Ao contrário do que muitos pensam, o sqlDataSource não é exclusivo para SQL Server, mas serve para qualquer banco servidor. Se clicar em "new connection" terá a opção de montar strings de conexão para quaisquer outros bancos, inclusive escolhendo o data provider do ADO.NET que deseja utilizar.

É interessante também observar a existencia de um novo provider OLEDB para SQL Server, o SQLNCLI - SQL Server Native Client. Este provider libera para uso via OLEDB os novos recursos existentes no SQL Server 2005.

(tela seguinte do Wizard)

Nesta tela nos é dada a opção de gravar a string de conexão recem criada no web.config, garantindo assim que a string de conexão ficará centralizada para toda a aplicação.

Optando por salvar a string de conexão, o que é a opção default, da próxima vez que for criado um dataSource a string de conexão aparecerá como opção na tela anterior.

O novo web.config permite que as chaves possam ser criptografadas. Mas isso não pode ser feito diretamente pela interface, precisa ser feito por código. Você pode conferir um outro artigo sobre isso em http://www.bufaloinfo.com.br/artigos/coluna31.asp

Nesta tela, a seguinte no wizard, podemos escolher os dados que iremos trazer na query. Podemos montar dinâmicamente a seleção dos campos, o where, order by e até mesmo pedir um distinct.

Para querys mais avançadas podemos alterar a opção do radio button e teremos a opção de utilizar um query builder completo para a montagem da query, como mostra a tela a seguir. Precisaremos fazer isso para a nossa query.

Observe que nesta query especificamente estamos trazendo um campo a mais, Quant, como zero, de forma fixa. Este campo não existe na tabela. Mais adiante você poderá observar o truque que criaremos com esse campo.

Por fim, na tela seguinte do wizard, podemos testar a query. Se houver algum parâmetro, esta tela nos solicitará os parâmetros da query para poder realizar o teste.

Segundo Passo : Criar e configurar uma gridView

Também é uma tarefa bem simples, bastando inserir a gridView na página e liga-la com o dataSource. Selecionamos então os campos que desejamos exibir : ProductName e UnitPrice .

Podemos determinar a formatação do campo unitprice definindo a DataFormatingExpression como {0:C}, uma expressão de formatação para números em formato monetário.

Podemos também pedir que a coluna de unitPrice seja toda alinhada a direita, já que trata-se de valores numéricos.

(Gridview já configurada - através da opção edit columns - mostrando sua smartTag já ligada ao SQLDataSource1)

Terceiro passo : Caixa com quantidade

Agora precisamos inserir uma caixa de texto para o usuário poder digitar a quantidade que deseja de cada produto. Para isso precisaremos inserir uma template column. Pedimos para editar a coluna de template e inserimos uma textbox no itemTemplate.

(Edição do template - depois de inserido - na qual se chega com click do botão direito na gridView - Edit Templates)

(Resultado da Gridview após a edição do template)

Mas existe um detalhe a mais em relação a esta caixa de quantidade : Vamos fazer um vinculo de dados desta caixa com o campo Quant. Isso mesmo, aquele campo inexistente no qual estamos trazendo zero.

Mais adiante você entenderá melhor a finalidade deste truque.

(Vinculo de dados com o campo quant - clica-se na smartTag da textBox do template e seleciona-se dataBindings)

Quarto passo : Validação dos dados

A caixa de quantidade de cada produto precisa ser validada conforme o usuário solicitar a compra. Mas haverão muitos produtos na gridView e não vamos validar todas as caixas de quantidade, mas apenas a caixa do produto que o usuário deseja comprar.

Podemos utilizar os validadores para testar os dados, mas como garantir que só o objeto de validação correto vai ser disparado ?

Simples : O validationGroup. Essa nova propriedade serve exatamente para que possamos agrupar os validadores, controlando quais grupos serão disparados a cada momento.

Mas como fazer com que cada linha da grid tenha um validationGroup diferente ?

Mais uma vez, simples : Podemos fazer databinding com a propriedade validationGroup, vinculando o validationGroup com a chave primária da tabela.

(O template já com os validadores)

(O dataBinding do validationGroup. Observe a opção "Show all properties" marcada)

Quinto passo : Botão de gravação

Vamos criar um botão para que o usuário possa, após digitar a quantidade, inserir o item na cesta de compras. Para isso vamos inserir uma nova templateColumn e um ImageButton.

Para evitarmos a codificação, vamos utilizar um truque : vamos definir a propriedade CommandName como Update. Isso irá disparar o processo de Update da gridview. Isso mesmo, a gridView não precisa estar em modo de edição, se o botão tem o CommandName de Update a griview irá disparar o processo de Update.

Precisaremos também definir o validationGroup do botão. Para isso iremos também fazer o vinculo de dados com o botão.

(O template, já com o botão inserido)

Sexto Passo : Configurar a query de update no SQLDataSource

Devido ao fato do ImageButton que utilizamos na gridView estar com o CommandName de update, quando clicado ele irá disparar automaticamente o update no SQLDataSource.

Configurando então o update, teremos um resultado imediato com o mínimo de codificação. Mas não precisamos criar uma query de update : O update no dataSource pode fazer um insert na tabela de cesta de compras.

De fato a grid já possui 2 dos campos que vamos desejar inserir : o id do produto e a quantidade. Lembra-se do truque que fizemos com a quantidade ? Esse truque garantirá que ela seja preenchida automaticamente pela gridView.

Precisaremos apenas adicionar o identificador. do usuário e pronto, temos nossa inserção na cesta de compras pronta.

(Tela do wizard de configuração do sqlDataSource, na qual chegamos pela smartTag deste objeto - "configure datasource")

Uma questão importante a definir é o que usar como identificador do usuário. Antigamente utilizavamos o código de sessão concatenado com algo mais para se tornar um identificador de usuário.

Uma das novidades do .NET 2.0 é que não precisamos mais disso. Quando o usuário está logado o identificador dele é o login. Quando não está o .NET cria para o usuário um identificador anônimo, que servirá como identidade anônima do usuário.

A identidade anônima, porém, precisa ser habilitada no web.config. Veja como fica :

	<anonymousIdentification enabled="true" />
	

Neste exemplo a identidade anônima será mantida na forma de um cookie. Porém temos também a opção de desativar o uso de cookies. Neste caso a identidade do usuário, quando gerada, passa a trafegar pela URL requisitada pelo usuário. Veja um exemplo :

	<anonymousIdentification enabled="true" cookieless ="AutoDetect" />
	

A opção cookieLess, que existe também em outras tags além desta, aceita os seguintes valores :

AutoDetect	Detectar automaticamente se o client aceita cookies. O ASP.NET tenta fazer o envio de um cookie para descobrir isso
UseCookies	Utilizar cookies
UseDeviceProfile	Utilizar a identificação (profile) do browser client para determinar quando devem ou não ser utilizados cookies. Esses profiles também podem ser configurados no web.config
UseURI	Utilizar a URL para transmitir a identificação do usuário, não usar cookies

Por fim, precisamos apenas garantir que o campo IdUsuario seja preenchido quando o update ocorrer. Para isso vamos utilizar um evento da gridView, rowUpdating . Veja como fica :

(Utilize a janela de propriedades para programar o evento)

Observe o uso da propriedade AnonymousID, no objeto Request, para recuperar o ID anônimo do usuário gerado pelo ASP.NET .Com isso nossa inserção na cesta de compras já estará funcionando.

Página de cesta de compras

Primeiro Passo : Criar o SQL DataSource

Teremos 3 atividades de banco nesta página : Ler as informações da cesta de compras, alterar a quantidade na cesta de compras e eliminar uma quantidade da cesta de compras.

Assim sendo nosso SQL DataSource deverá estar configurado com uma instrução SELECT, uma instrução UPDATE e uma instrução DELETE.

(Tela de configuração do sqlDataSource - pela qual já haviamos passado anteriormente)

A instrução SELECT precisará trazer o cálculo de total do item comprado pelo usuário . Além disso a instrução SELECT precisa de um parâmetro, a identificação do usuário, de forma que traga apenas os pedidos de um usuário específico.

Observem que tanto a instrução de UPDATE como a instrução de DELETE utilizam como argumento o id do usuário e o id do produto, afinal ambos são a chave da tabela.

Segundo Passo : Configurar a gridView

Vincular a gridView com o dataSource é um passo muito simples. Mas o dataSource precisa de um parâmetro para exibir os dados, a identificação do usuário. Assim sendo precisaremos programar o evento Selecting do dataSource para garantir a exibição correta dos dados.

(Utilize a janela de propriedades para programar o evento Selecting)

O id do produto e o identificador do usuário são as chaves desta tabela cesta, você precisa garantir que estejam definidos na propriedade DataKeyNames da gridView. Mais um de nossos truques.

Terceiro Passo : Calcular o total

O usuário pode ter adquirido muitos produtos, então deveremos fazer o cálculo de total dos produtos adquiridos. Para isso devemos programar o evento rowDataBinding da gridView.

(Utilize a janela de propriedades para programar o evento RowDataBound)

Além disso precisaremos de um local para inserir o total. Devemos então alterar a propriedade showFooter para podermos exibir o rodapé da gridView.

Quarto Passo : Configurar a alteração de quantidade

Precisaremos de uma caixa de texto, validadores (required, compare e summary), um imageButton e mais uma vez faremos uso do truque do validationGroup, vinculado com o código de produto.

Tudo acaba sendo identico ao que fizemos na gridview anterior. Mas como desta vez temos os dois campos que precisamos definidos como dataKeys da gridview, não precisaremos codificar nada.

(Resultado da gridView na página de cesta de compras - já com a atualização de dados)

Quinto Passo : Configurar a deleção de um item da gridView

Precisaremos de mais uma coluna, uma ButtonColumn. Vamos adicionar adicionar a coluna e configura-la com o commandName Delete. A gridView junto com o sqlDataSource fará o resto para nós.

(Resultado da gridview na página de cesta de compras, já com o botão de deleção)

Conclusão

Com pequenos truques montamos nossa interface com um mínimo de código. Essa é a idéia da interface gráfica no ASP.NET 2.0