 |
||||||||
|
|
||||||||
|
||||||||
 |
 |
 |
 |
 |
 |
 |
||
|
||||||||
|
|
||||||||
|
|
||||||||
|
|
|
|
|
|
|
||
| com exemplos em VB |
| Componente para deixar forms em Vb semelhantes às telas do winnamp |
| Componente para colocar sua aplicação VB no Systray |
| Componente para transformar sua aplicação VB em serviço |
| Ferramentas úteis para quem usa Olap Server |
 |
|
||||||||||||||||||||||||||||||||
Pesquisa personalizada
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 :
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 :
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 |
||||||||||||||||||||||||||||||||
|
Veja abaixo os comentários já enviados :
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 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 • e-Mail: contato@bufaloinfo.com.br
