Acesso à Dados com ASP.NET - Parte 7 - C# Brasil http://csharpbrasil.com.

br/acesso-a-dados-com-asp-net-parte-7/

Acesso à Dados com ASP.NET – Parte 7

Publicado 22 de agosto de 2011 | Por Wellington Camargo | Um comentário

Olá pessoal, chegamos a última parte de nossa série de artigos sobre acesso ao banco de dados com ASP.NET usando a
linguagem C#. Nesta parte final iremos terminar nosso GridView aplicando algumas configurações nele e usarei outros
controles, como o DetailsView, View e o MultiView.

Como você pode perceber, nossa página está mais parecida com uma página real de, por exemplo, produtos de uma
determinada empresa. Clique em Alterar em algum registro e note que os campos automaticamente entram em modo de
edição, com exceção do ProductID, já que o mesmo é uma chave primária e não permite que seja excluído.

PS: Mais pra frente irei criar alguns artigos falando sobre os tipos de dados do SQL Server, também dos tipos de chaves
que temos, como a chave primária e a chave estrangeira, e também dos tipos de relacionamentos por meio de
constraints. Envie idéias de artigos para que eu possa posteriormente fazer um ou mais sobre determinado assunto!

Automaticamente, nosso GridView configura a propriedade ReadOnly do campo ProductID para true, para que o
mesmo seja somente leitura. Note também os campos SupplierID e CategoryID, que são chaves primárias das tabelas
Suppliers e Categories, que indicam o fornecedor e a categoria do produto, respectivamente. Dessa forma, é
complicado para o usuário saber qual é o ID do fornecedor ou da categoria a qual o produto pertence.

Essa é uma informação do sistema, usada para manter o relacionamento entre as tabelas, mais não há a necessidade do
usuário vê-las. Além disso, as colunas com os nomes dos fornecedores e das categorias devem ser limitadas a um
conjunto pré-definido de valores. É mais interessante que o usuário possa escolher o fornecedor ou a categoria a partir
de uma lista de nomes, ao invés de deixarmos que ele digite qualquer texto. Para isso, o primeiro passo é adicionarmos
mais dois SqlDataSources, que serão responsáveis por retornar as listas de categorias e fornecedores disponíveis.
Nomeie estes controles como dsCategorias e dsFornecedores, respectivamente. Altere a propriedade
DataSourceMode para DataReader, já que neste caso só disponibilizaremos a lista para o usuário escolher um dos
possíveis valores, como mostra a imagem abaixo:

Através da smart tag, configure os novos Data Sources, como foi feito no exemplo anterior, mas, neste caso, escolha a
opção Specify columns from a table or view, já que utilizaremos dados de uma única tabela em cada SqlDataSource.
Utilize as seguintes querys para cada Data Source:

Na imagem abaixo com o DataSource de Categorias, selecionei a tabela respectiva e cliquei em Order By. Faça isso
também com a de Fornecedores.

No GridView, vamos ocultar as colunas ProductID, SupplierID e CategoryID e transformar as colunas relativas aos
campos CompanyName e CategoryName em TemplateFields, que são um tipo de campo especial que permite
personalização. Acesse a smart tag do GridView e escolha a opção Edit Columns. Em Selected fields, selecione o campo
ProductID e configure a propriedade Visible para False, como mostra imagem abaixo. Faça o mesmo procedimento
para os campos SupplierID e CategoryID para que, assim, os campos referentes ao ID sejam “escondidos” do usuário.

Agora, selecione o campo relativo a CompanyName/Fornecedor e clique no link Convert this field into a
TemplateField, que fica acima do botão OK. Faça o mesmo com o campo CategoryName/Categoria e clique no botão
OK. Acesse novamente a smart tag do GridView e escolha a opção Edit Templates. O editor do Visual Studio é alterado
para o modo de edição de templates. Através da smart tag, podemos escolher qual template vamos customizar. Como
queremos personalizar a interface de edição, selecione o template EditItemTemplate, da coluna Fornecedor, como
mostrado na imagem abaixo:

Por padrão, a edição deste campo é feita através de um controle do tipo TextBox, que é apresentado quando
escolhemos o template EditItemTemplate. Apague o TextBox e adicione em seu lugar um controle do tipo
DropDownList. Abra a smart tag do DropDownList e escolha a opção Choose Data Source. Como fonte de dados,
escolha o Data Source dsFornecedores. Em Select a data field to display in the DropDownList, devemos escolher
o campo do Data Source cujo valor será mostrado na página. Neste caso, escolha CompanyName, como mostra a
imagem a seguir:

Na última opção, Select a data field for the value of the DropDownList, definimos qual é o campo que será
utilizado para recuperar o valor da opção escolhida na lista. Aqui escolhemos SupplierID. Ainda na smart tag do
DropDownList, acesse a opção Edit DataBindings. Na janela que se abre, devemos escolher a qual campo do
DataSource a propriedade SelectedValue do DropDownList estará vinculada. Em Bound to, escolha o campo
SupplierID e clique no botão OK.

Para personalizar o template de edição da coluna Categorias, acesse o respectivo EditItemTemplate e repita a
operação, escolhendo o Data Source dsCategorias para o novo DropDownList, e os campos CategoryName e
CategoryID. Acesse Edit DataBindings na smart tag e associe a propriedade SelectedValue ao campo CategoryID,
clicando o botão OK em seguida. Para finalizar a edição dos templates, clique em End Template Editing na smart tag.

Execute a aplicação e clique no link Alterar. Veja que agora, no modo de edição do GridView, os campos SupplierID e
CategoryID aparecem com o controle DropDownList, tornando a interface bem mais amigável que a versão anterior.
Além disso, os campos ProductID, SupplierID e CategoryID não são mais exibidos:

Para concluir nosso exemplo, vamos desenvolver a interface para inclusão de novos produtos. O controle GridView não
oferece suporte para inclusão de registros. Para essa finalidade, iremos utilizar o controle DetailsView. Esse controle do
ASP.NET apresenta os dados de um único registro por vez e também possui várias funcionalidades, como navegação
entre registros, inclusão, exclusão e atualização. Neste caso, iremos somente utilizar a função de inclusão, pois as demais
operações já são feitas pelo GridView.

Também iremos utilizar o novo controle MultiView, que por sua vez contém controles do tipo View. Esses controles
permitem gerenciar partes da página que devem ser mostradas ou não, fornecendo visões diferentes para a mesma
página de acordo com o contexto. A idéia é que a página tenha duas Views (ou visões): uma com o GridView
gvProdutos e outra com o DetailsView, responsável pela inclusão de novos produtos. Enquanto uma estiver sendo
exibida, a outra ficará oculta.

Em nossa página adicione um controle do tipo MultiView e, dentro dele, adicione dois controles View, como mostra a
imagem a seguir.

Configure a propriedade ActiveViewIndex do MultiView para 0. Essa propriedade indica qual a View ativa, que neste
caso é a primeira View (o número 0 aqui representa o primeiro elemento). Arraste o GridView gvProdutos para dentro
do primeiro View, chamado View1, junto com o Label, o TextBox txtPreco e o Button. Ainda dentro desta View, adicione
um controle LinkButton e configure sua propriedade Text para Incluir novo produto.

Na View2, adicione um controle DetailsView (na Toolbox, aba Data). Altere a propriedade ID para dvProdutos e a
propriedade DefaultMode para Insert. Desta forma, quando o DetailsView for mostrado, estará no modo de inclusão de
registro. Através da smart tag do DetailsView, escolha o DataSource dsProdutos. Nesta mesma smart tag, selecione a
opção Enable Inserting, para que a inclusão de registros seja aceita. A página deve estar parecida com as imagens
abaixo:

Dê um duplo clique no controle LinkButton para irmos ao evento Click do mesmo. Adicione o código abaixo para que,
no momento que clicarmos neste botão, a segunda View (que contém o DetailsView com os dados do banco) se torne a
View ativa.

Volte para o design da página. Note que, abaixo do DetailsView, há dois links, Insert e Cancel, que como o próprio
nome diz, são responsáveis por inserir os dados do registro no banco e cancelar a operação. Como no GridView,
podemos personalizar estes textos, deixando-os mais intuitivos e amigáveis.

Para isso, abra a smart tag do DetailsView e escolha a opção Edit Fields. É aberta então uma janela para edição dos
campos, igual à janela Edit Columns do GridView. Em Selected Fields , selecione o campo New, Insert, Cancel, que
1 de 2 representa os links mostrados abaixo do DetailsView. Na janela de propriedades à direita, altere as propriedades 23/10/2015 11:56
Acesso à Dados com ASP.NET - Parte 7 - C# Brasil http://csharpbrasil.com.br/acesso-a-dados-com-asp-net-parte-7/

podemos personalizar estes textos, deixando-os mais intuitivos e amigáveis.

Para isso, abra a smart tag do DetailsView e escolha a opção Edit Fields. É aberta então uma janela para edição dos
campos, igual à janela Edit Columns do GridView. Em Selected Fields , selecione o campo New, Insert, Cancel, que
representa os links mostrados abaixo do DetailsView. Na janela de propriedades à direita, altere as propriedades
CancelText para Cancelar, e InsertText para Salvar. Também podemos configurar os títulos dos campos através da
propriedade HeaderText. Faça as configurações que achar necessário.

Como no GridView, os campos Fornecedor e Categoria são representados como controles TextBox. Para que sejam
mostrados controles do tipo DropDownList, podemos fazer a mesma operação feita no GridView, ou seja, transformar
esses campos em TemplateFields. A partir daqui, a operação é muito semelhante a que foi feita no GridView. Selecione
os campos (CompanyName e CategoryName) e, para cada um deles, clique no link Convert this field into a
TemplateField. Além disso, vamos aproveitar para ocultar os campos ProductID, CategoryID e SupplierID,
configurando a propriedade Visible deles para False. Volte para a smart tag do DetailsView e escolha a opção Edit
Templates. Na smart tag, escolha InsertItemTemplate do campo Fornecedor. Este é o template que será utilizado
quando o DetailsView for exibido em modo de inclusão de dados.

Apague o TextBox e adicione um DropDownList, cujo DataSource deve ser configurado para dsFornecedores. Em
Select a data field to display in the DropDownList, escolha o campo CompanyName. Na última opção, Select a
data field for the value of the DropDownList, escolha SupplierID. Acesse a smart tag do DropDownList e escolha
a opção Edit DataBindings. Na janela que se abre, devemos escolher a qual campo do DataSource a propriedade
SelectedValue do DropDownList estará vinculada. Em Bound to, escolha o campo SupplierID e clique no botão OK.
Agora, acesse o InsertItemTemplate do campo CategoryID e repita a operação, escolhendo o Data Source
dsCategorias para o novo DropDownList, e os campos CategoryName e CategoryID. Na smart tag do DropDownList
escolha a opção Edit DataBindings e em Bound to, escolha o campo CategoryID.

Para finalizar a edição dos templates, clique em End Template Editing na smart tag da edição de templates.

Para dar um aspecto mais profissional ao DetailsView, vá para a opção da smart tag Auto Format e escolha um dos
formatos disponíveis. Por fim, selecione o DetailsView e acesse a janela de propriedades. Em seguida, clique no ícone
com o símbolo de um raio, para que seja exibida a lista dos eventos deste controle. Dê um duplo clique no evento
ItemInserted. Este evento é chamado sempre que um novo registro é inserido. No momento em que isto acontecer,
mudaremos a View ativa para a View1, ou seja, o GridView é novamente exibido.

Volte para a janela de propriedades do DetailsView e dê um duplo clique no evento ItemCommand. Este é o evento
disparado quando se clica no link Cancelar do DetailsView. Nele iremos escrever o mesmo código do evento
ItemInserted, responsável por ativar a View que contém o GridView:

Execute a aplicação e clique no link Incluir novo produto. Nesse momento, a View que contém o DetailsView torna-se
ativa, permitindo que possamos incluir um novo produto. Note que os campos Fornecedor e Categoria são exibidos
como uma lista de nomes na qual podemos selecionar o fornecedor e a categoria, sem a necessidade de digitarmos os
códigos que os representam. Forneça alguns dados fictícios e clique em Salvar. Nesse instante, as informações são
salvas no banco de dados e a View que contém o GridView torna-se ativa novamente. Perceba que o novo produto já
aparece no GridView. As imagens abaixo mostram como devem ficar nossas duas View’s:

Finalizamos a última parte de nossa série de artigos. Ao longo deles mostramos como, de forma simples, podemos usar
os controles do ASP.NET e, sem praticamente uso algum de códigos, conseguimos conectar nossa aplicação ao banco de
dados sem problemas. Lembrando que há algumas desvantagens de se fazer isso e é praticamente inviável de isso
acontecer em grandes aplicações que usam, por exemplo, o conceito de camadas. Para fins de aprendizado é um bom
começo. Mais à frente irei criar alguns artigos desenvolvendo aplicações Web e Desktop em Camadas. Me
cobrem!

Quaisquer dúvidas, enviem um email para wellingtonbalbo@gmail.com ou comente neste post.

Até o próximo artigo!

2 de 2 23/10/2015 11:56