Personalizando campos no Detailsview do ASP .NET

Personalizando campos no Detailsview do ASP .NET

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.

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

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.

Figura 3 – Novo SqlDataSource para bancos.

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

Figura 5 – Salvando a string de conexão.

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.

Figura 7 – Gerando os comandos básicos automaticamente.

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.

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.

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.

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.

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.

Figura 13 – Menu de tarefas detailsview.

Quando clicamos em Edit templates temos a seguinte janela.

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.

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.

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.

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

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

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.

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!