Acesso à Dados com ASP.NET - Parte 7

Nesta 7ª e última parte da série de artigos iremos terminar nosso GridView e aplicarmos outros controles, como o DetailsView, View e MultiView.

por Wellington Balbo de Camargo

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 iremos terminar nosso GridView aplicando algumas configurações nele e usaremos 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:

SELECT [CategoryID], [CategoryName] FROM [Categories] ORDER BY [CategoryName]

SELECT [SupplierID], [CompanyName] FROM [Suppliers] ORDER BY [CompanyName]

 

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 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, estou à disposição. Abraços.

Até o próximo artigo!