Skip Navigation Links



Translate this page now :



»Programação
»Programação.NET
»Banco de Dados
»Webdesign
»Office
» Certificações Microsoft 4
»Treinamentos4
»Programação 4
»Webdesign«
»Office & User Tips«
»Grupos de UsuĆ”rios
»CĆ©lulas AcadĆŖmicas«

Morcegando
Você já está cadastrado e participa do grupo de usuários de sua cidade ? Se não, comente o porque.
 
 
FaƧa um pequeno teste com 10 questƵes de VB
.:.
Teste seus conhecimentos em Visual Basic, SQL Server e ASP 3.0 com nossas provas on-line
.:.
Aprimore seus conhecimentos em programaĆ§Ć£o com nosso treinamento on-line de lĆ³gica de programaĆ§Ć£o
.:.
Veja nosso calendƔrio de treinamentos
Gostou da PƔgina?
Então

para um amigo!

Pesquisa personalizada
Pesquisar Dicas:

 






Criando uma cesta de compras com ASP.NET 2.0

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.

Fizemos um exemplo de cesta de compras no ASP 3 (http://www.bufaloinfo.com.br/Artigos/Artigo2201.asp ), fizemos um exemplo de cesta no .NET 1.1 (http://www.bufaloinfo.com.br/artigos/Artigo2206.asp ) e agora vamos fazer um exemplo de cesta de compras no .NET 2.0 mostrando truques e explorando novidades do ASP.NET.

Vamos utilizar o banco NorthWind. Neste banco temos uma tabela de produtos - products - que servirá como excelente exemplo.

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

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.

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

Na tela seguinte 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 vocês observam na tela acima.

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, 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.

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.

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.

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.

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. Vamos inserir esse botão na coluna de quantidade que já haviamos criado.

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.

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.

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 :

   49     Protected Sub GridView1_RowUpdating(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewUpdateEventArgs) Handles GridView1.RowUpdating

   50 

   51 

   52         e.NewValues.Add("idUsuario", Request.AnonymousID)

   53     End Sub

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.

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.

   49     Protected Sub SqlDataSource1_Selecting(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.SqlDataSourceSelectingEventArgs) Handles SqlDataSource1.Selecting

   50 

   51 

   52         e.Command.Parameters("idUsuario").Value = Request.AnonymousID

   53     End Sub

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.

Primeiramente devemos definir o local no qual iremos inserir o total. Devemos então alterar a propriedade showFooter para podermos exibir o rodapé da gridView.

Por fim, vamos fazer o cálculo do total. Para isso devemos programar o evento rowDataBinding da gridView.

   49     Dim total As Decimal

   50 

   51     Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowDataBound

   52 

   53 

   54         If e.Row.RowType = DataControlRowType.DataRow Then

   55 

   56             total += e.Row.DataItem("TOTAL")

   57 

   58         ElseIf e.Row.RowType = DataControlRowType.Footer Then

   59 

   60             Dim lbl As Label

   61             lbl = e.Row.FindControl("lbltotal")

   62             lbl.Text = String.Format("{0:C}", total)

   63 

   64         End If

   65 

   66     End Sub

 

 

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.

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.

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

 

Dennes Torres
MCAD,MCSD,MCSE,MCDBA





Envie seus comentįrios sobre este artigo

Nome :

E-mail :

Comentários :


Avise-me quando houverem novos comentįrios nesta pįgina

Veja abaixo os comentários já enviados :

Nome : Klenio Leite E-Mail : klenio.leite@siemens.com
Dennes, é muito legal. Atualmente trabalho com o VS 2003, mas assim que estivermos utilizando o 2005 irei treinar essa matéria, pois achei muito legal !!

Um Abraço.


Klenio Leite.
Nome : Daniel Skroski E-Mail : daniel@duplod.com.br
Olá Dennes,

Muito Bom o artigo...

Estou começando agora com o 2005 aqui em Curitiba... qual livro você recomenda para desenvolver uma Loja Virtual no VWD 2005 ??

Fico no aguardo

Abraço

Daniel
Nome : daniel letieri E-Mail : daniel.letieri@itelefonica.com.br
Cara, fera o tutorial!
Parabéns
Nome : Augusto E-Mail : cfontes2@gmail.com
Gostei muito do artigo, achei bastante claro e esclarecedor.
Forte abraço.
Nome : Orbacam E-Mail : orbacam@hotmail.com
Olá Dennes,

Muito legal artigo, porém se eu quiser usar procedures, como ficaria? Você pode fazer um exmplo obrigado.
Nome : Anderson E-Mail : anderson.louzada@saude.gov.br
não esqueça
Nome : gcup zysewobfc E-Mail : pmtkled@mail.com
deubjf zxgow rawv qpmdjax zrdwmpnxh nowerg vxrawhq
Nome : robby E-Mail : catok@hotmail.com
Id4Pp7 ghs85n1gdGnbZ95Iis3f
Nome : robby E-Mail : catok@hotmail.com
Id4Pp7 ghs85n1gdGnbZ95Iis3f
Nome : robby E-Mail : catok@hotmail.com
Id4Pp7 ghs85n1gdGnbZ95Iis3f
Nome : robby E-Mail : catok@hotmail.com
Id4Pp7 ghs85n1gdGnbZ95Iis3f
Nome : LcoqYofOc E-Mail : frychnhf@bmdadyuc.com
8KWfel znnmwjxj vlqzcsem icfpxgdc
Nome : HmIdtfELakwabU E-Mail : mjjzfrpt@bldrjixp.com
7HJraD frwtapfe ydhntllq vioukhyn
Nome : Arcanjo 88 E-Mail : arcanjo88@hotmail.com
Que validadores você utilizou e como acho o o validationGroup
Nome : Dennes E-Mail : dennes@bufaloinfo.com.br
Oi,

Utilizei o requiredfieldvalidator e o comparevalidator.

Validationgroup é uma propriedade dos validadores e do botão, mas a configuração é feita por "edit databindings" conforme mostra uma das imagens no artigo.

[]'s

Dennes
Nome : 1 E-Mail : 1
1
Nome : tM4hXNgI E-Mail : kazk509i1wz@mail.com
Ankit Verma | Editable HTML Tables using JavaScript I was suggested this blog by my coiusn. I am not sure whether this post is written by him as no one else know such detailed about my problem. You're amazing! Thanks! your article about Ankit Verma | Editable HTML Tables using JavaScriptBest Regards Craig
Nome : -1' E-Mail : 1
1
Nome : 1 E-Mail : -1'
1
Nome : 1 E-Mail : 1
1
Nome : 1 E-Mail : 1
1
Nome : 1 E-Mail : 1
1
Nome : 1 E-Mail : 1
-1'
Nome : -1' E-Mail : 1
1
Nome : 1 E-Mail : -1'
1
Nome : 1 E-Mail : 1
1
Nome : 1 E-Mail : 1
1
Nome : 1 E-Mail : 1
1
Nome : -1' E-Mail : 1
1
Nome : 1 E-Mail : -1'
1
Nome : 1 E-Mail : 1
1
Nome : 1 E-Mail : 1
-1'
Nome : -1' E-Mail : 1
1
Nome : 1 E-Mail : -1'
1
Nome : 1 E-Mail : 1
1
Nome : 1 E-Mail : 1
1
Nome : 1 E-Mail : 1
1
Nome : -1' E-Mail : 1
1
Nome : 1 E-Mail : -1'
1
Nome : 1 E-Mail : 1
1
Nome : 1 E-Mail : 1
1
Nome : 1 E-Mail : 1
1
Nome : 1 E-Mail : 1
1
Nome : 1 E-Mail : 1
1
Nome : 1 E-Mail : 1
1
Nome : -1' E-Mail : 1
1
Nome : 1 E-Mail : -1'
1
Nome : 1 E-Mail : 1
1
Nome : 1 E-Mail : 1
1
Nome : 1 E-Mail : 1
1

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Conheça mais sobre o nosso site :

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::



Quer saber mais?
Faça um curso na Búfalo Informática, Treinamento e Consultoria e
Prepare-se para o Mercado!
Veja o que a Búfalo tem para você.

ļæ½ BĆŗfalo InformĆ”tica, Treinamento e Consultoria - Rua Ɓlvaro Alvim, 37 Sala 920 - CinelĆ¢ndia - Rio de Janeiro / RJ
Tel.: (21)2262-1368 (21) 9240-5134 (21) 9240-7281 e-Mail:
contato@bufaloinfo.com.br