Personalizando campos no Detailsview do ASP .NET

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (3)  (0)

O detailsview é um componente ASP .NET que uma vez ligado a um datasource, constrói toda a interface necessária para se fazer operações básicas como visualizar, inserir, deletar e atualizar um registro dentro de uma determinada tabela especificada no datasource.

 

O detailsview é um componente ASP .NET que uma vez ligado a um datasource, constrói toda a interface necessária para se fazer operações básicas como visualizar, inserir, deletar e atualizar um registro dentro de uma determinada tabela especificada no datasource.

 

Porém, quando fazemos referência a um datasource com um detailsview, este último prepara todos os campos da tabela para serem editados através de um componente muito comum: o textbox. Não é sempre que o textbox vai satisfazer a nossa vontade, precisamos personalizar este componente. Este é o objetivo deste artigo. Vejamos agora um exemplo concreto.

 

Temos duas tabelas: uma chamada “bancos” e a outra “agencias”. Queremos cadastrar bancos e agências, mas para cadastrar agências precisamos saber quais são os bancos cadastrados e escolher um destes para que não tenhamos uma agência órfã na nossa base dados.

 

Observe que o relacionamento entre bancos e agencias é particularidade apenas deste artigo, você pode usar outras tabelas, vale lembrar apenas que elas devem se relacionar, sendo que uma tem que ter uma chave estrangeira de outra.

 

Para resolver esse problema vamos criar um detailsview para bancos e outro para agencias. O componente detailsview por padrão, fica localizado no grupo ”Data” da “Toolbox”, encontre-o e arraste duas vezes para o design. A visualização deve ser semelhante à Figura 1.

 

fbpcdanetfig01.jpg 

Figura 1 – Detailsview para as tabelas bancos e agencias.

 

Feito isso, precisamos referenciar datasources para os detailsviews instanciados. Neste exemplo vou utilizar o componente  SqlDataSource, um para “bancos” e outro para “agencias”.

 

Para o SqlDataSource de “bancos”, clique sobre o detailsview de bancos, em seguida clique na seta que surge no canto superior direito para visualizar as tarefas do detailsview e logo após escolha o datasource e na lista clique em “new data source”.

 

fbpcdanetfig02.jpg 

Figura 2 – Escolha de um data source.

 

Em seguida surge a tela do wizard que vai nos ajudar na criação do data source para “bancos”. Como já existe uma tabela “bancos” e outra agencias na minha base de dados eu vou escolher a opção Database, mas você pode ficar à vontade para escolher recuperar dados até mesmo de um arquivo XML. Veja as telas do processo de criação do SqlDataSource para minha tabela bancos.

 

fbpcdanetfig03.jpg 

Figura 3 – Novo SqlDataSource para bancos.

 

fbpcdanetfig04.jpg 

Figura 4 – Escolha a conexão. Caso você ainda não tenha conexão, crie uma em Database Explorer.

 

fbpcdanetfig05.jpg 

Figura 5 – Salvando a string de conexão.

 

fbpcdanetfig06.jpg 

Figura 6 – Escolha a tabela e selecione os campos. É importante criar os comandos de inserir, atualizar e deletar, isso pode ser feito automaticamente clicando em advanced..., e habilitando a opção.

 

fbpcdanetfig07.jpg 

Figura 7 – Gerando os comandos básicos automaticamente.

 

fbpcdanetfig08.jpg 

Figura 8 – Teste da consulta.

 

Depois do wizard ter feito o seu trabalho, o detailsview apresenta um menu de tarefa mais rico. Vamos habilitar as operações de inserção, edição e deleção. Veja a Figura 9.

 

fbpcdanetfig09.jpg 

Figura 9 – Menu de tarefas do detailsview para bancos.

 

Façamos agora o mesmo procedimento para o detailsview da tabela agencias. É importante lembrar que você não deve usar o mesmo datasource você deve criar um novo que faça referencia agora a tabela agencias. O resultado deve ser semelhante ao da Figura 10.

 

fbpcdanetfig10.jpg 

Figura 10 - Detailsviews prontos.

 

Observe na figura 10 que os detailsview já estão mostrando os campos de suas respectivas tabelas.

 

Pressione Ctrl + F5 para executar a sua aplicação. Note que já é possível inserir e realizar as demais operações nas tabelas.

 

Contudo, quando vamos inserir uma nova agencia, não temos a mínima idéia dos bancos cadastrados nem tampouco dos seus códigos. Então vamos colocar a mão na massa novamente.

 

Selecione o detailsview de agencias acesse o menu de tarefas dele e escolha a opção Edit fields, como na Figura 11.

 

fbpcdanetfig11.jpg 

Figura 11 – Editar campos.

 

Na janela de edição de campos em selected fields você pode escolher o campo do detailsview e personaliza-lo conforme a sua necessidade. Vamos escolher o campo que é chave estrangeira de outra tabela, neste caso é o campo NumBanco, depois clicamos em Convert this Field into a TemplateField e logo após damos o OK.

 

fbpcdanetfig12.jpg 

Figura 12 – Convertendo campo para template.

 

Uma vez que o campo agora está convertido para template, você pode editar este template clicando em Edit template que esta no menu de tarefas.

 

fbpcdanetfig13.jpg 

Figura 13 – Menu de tarefas detailsview.

 

Quando clicamos em Edit templates temos a seguinte janela.

 

fbpcdanetfig14.jpg 

Figura 14 – Editando templates.

 

Por padrão a opção display é ItemTemplate, mas como queremos saber os bancos existentes somente na hora de inserir uma nova agência então vamos editar o template somente para inserção, para isto vamos escolher InsertTemplate na opção display.

Delete o textbox e insira um dropdownlist. Verifique as propriedades do novo controle inserido dropdownlist e altere da seguinte forma.

 

Propriedade

Valor

DataSourceID

datasourceBancos (o mesmo que foi usado para o detailsview de bancos)

DataMember

DefaultView

DataTextField

Nome (campo que representa o nome do banco, no caso da tabela que estou usando o nome do campo é Nome)

DataValueField

NumBanco (campo que representa o valor do banco, ou seja, a chave do banco, na tabela que estou usando o código do banco esta no campo NumBanco)

 

 

 

 

 

fbpcdanetfig15.jpg 

Figura 15 – Propriedades do DropDownList.

 

Agora selecione o dropdownlist e acesse o seu menu de tarefas. Escolha a opção Edit DataBindings.

 

Em Bindable Properties, escolha SelectedValue e em Binding for SelectedValue selecione o radiobox Field binding, e em Bound to, você deve escolher o campo da tabela ao qual o controle DropDownLIst vai fazer referência e depois clique em OK.

Veja na figura as minhas alterações.

 

fbpcdanetfig16.jpg 

Figura 16 – DataBinding – fazendo referência do controle ao campo na tabela.

 

Agora você só precisa acessar o menu de tarefas do detailsview e encerrar a edição do template. Clique em End Template Editing.

 

fbpcdanetfig17.jpg 

Figura 17 –Finalizando a edição do template.

 

A visualização do nosso projeto agora é semelhante a esta figura.

 

fbpcdanetfig18.jpg 

Figura 18 – Visualização do projeto finalizado.

 

Execute a sua aplicação e você verá que quando for inserir uma nova agencia o campo da chave estrangeira da outra tabela, não vai ser apenas um textbox, mas sim um dropdownlist que vai trazer todos os registros de bancos cadastrados e, ao ser selecionado um banco, este componente já passa automaticamente o valor do código do banco para o campo devido, na tabela agencias.

 

fbpcdanetfig19.jpg 

Figura 19 – Execução da aplicação.

 

Conclusão

Como você pode perceber você está livre para criar o template que quiser de uma forma bastante simples e intuitiva dentro da sua necessidade e usando as tabelas que lhe sejam de alguma forma úteis.

 

Espero que você, caro leitor DEVMEDIA, não tenha mais problemas de cadastro com relacionamento entre tabelas em ASP .NET. Então é isso, um grande abraço e até breve!

 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Receba nossas novidades
Ficou com alguma dúvida?