ASP.NET GridView: Exibindo registros no formato master-detail

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
 (0)  (0)

Veja neste artigo como utilizar o controle GridView do ASP.NET para exibir registros no formato master-detail, tornando possível e facilitando a visualização de relacionamentos entre coleções de dados listados em tabela.

Quando desenvolvemos sistemas, sejam web ou desktop, rapidamente nos deparamos com a necessidade de exibir dados para o usuário no formato mestre-detalhe.

Neste artigo, apresentarei uma solução para esse tipo de situação utilizando o controle GridView do ASP.NET. Para tornar esse artigo mais prático, não vou dar ênfase aqui a regras de banco de dados ou design, nem mesmo será necessário escrever código C# ou VB.NET.

Mestre-detalhe?

Neste ponto, suponho que o leitor já saiba de que se trata o modelo mestre-detalhe (ou master-detail, em inglês). Porém, relembrar rapidamente de que se trata.

Este modelo representa um relacionamento “um para muitos” entre duas coleções de dados (geralmente duas tabelas do banco de dados). A ideia e objetivo é listar os registros “filhos” na mesma tabela/grade/lista que os registros “pai”, de forma a deixar claro o relacionamento entre eles.

Um exemplo comum disso é a listagem das vendas de um comércio juntamente com os itens de cada movimentação. A Figura 1 mostra uma ilustração dessa ideia.

Representação do modelo mestre-detalhe

Figura 1: Representação do modelo mestre-detalhe

Então, agora podemos partir para a parte prática e implementar esse modelo em um website ASP.NET.

Para este exemplo, utilizarei o Visual Studio 2010, mas outras versões (desde que possuam os recursos aqui utilizados) podem ser igualmente empregadas.

Banco de dados utilizado

Utilizarei aqui o banco de dados máster do SQL Server 2008 R2 (outra versão pode ser utilizada normalmente).

Serão apenas duas tabelas: VENDAS e ITENS_VENDA. As listagens 1 e 2 mostram os scripts que foram utilizados para criação e povoamento das tabelas.

Listagem 1: Script de criação das tabelas

CREATE TABLE VENDAS(
	ID		INT IDENTITY PRIMARY KEY,
	DATA	DATETIME,
	CLIENTE	VARCHAR(50)
)
GO

CREATE TABLE ITENS_VENDA(
	CODIGO		VARCHAR(10),
	DESCRICAO	VARCHAR(50),
	QUANTIDADE	DECIMAL(18,2),
	PRECO_UNIT	DECIMAL(18,2),
	VENDA		INT FOREIGN KEY REFERENCES VENDAS(ID)
)
GO

Listagem 2: Script de povoamento das tabelas

INSERT INTO ITENS_VENDA VALUES ('0101', 'FEIJÃO', 1, 3, 1)
GO
INSERT INTO ITENS_VENDA VALUES ('0202', 'ARROZ', 1, 2, 2)
GO
INSERT INTO ITENS_VENDA VALUES ('0303', 'SABÃO EM PÓ', 2, 1.7, 2)
GO
INSERT INTO ITENS_VENDA VALUES ('0202', 'ARROZ', 2, 2, 3)
GO
INSERT INTO ITENS_VENDA VALUES ('0404', 'LEITE', 1, 2, 3)
GO
INSERT INTO ITENS_VENDA VALUES ('0101', 'CAFÉ', 2, 1.8, 3)
GO

O projeto na prática

Crie um web site ASP.NET no Visual Studio (File > New > Web Site > ASP.NET web site) e adicione um GridView na página Default.aspx.

Observação: estou ditando aqui os passos para o desenvolvimento de uma aplicação de exemplo. O leitor pode trabalhar em um projeto já encaminhado, porém, indico seguir o procedimento aqui exposto, a nível de aprendizado.

Clique na smart tag do GridView e na opção “Chose Data Source” escolha “”, como mostra a Figura 2.

Adicionando Data Source ao GridView principal

Figura 2: Adicionando Data Source ao GridView principal

Selecione a opção “Database” e dê um nome significativo ao Data Source, como mostra a Figura 3, a seguir.

Selecionando o tipo de Data Source

Figura 3: Selecionando o tipo de Data Source

Configure a conexão de acordo com os parâmetros adequados ao seu banco de dados e clique em Next. Na tela seguinte, dê um nome à ConnectionString e marque a opção para salvá-la, clique então em Next.

Na tela seguinte, selecione a tabela VENDAS e marque todas as colunas. Clique em Next e depois em Finish, finalizando a configuração do Data Source.

Se desejar, clique novamente na smart tag, depois em “Auto Format...” e escolha um estilo visual. Você pode então executar o projeto para testar.

Clique novamente na smart tag e depois na opção “Edit Columns”. Selecione e remova as colunas DATA e CLIENTE. Pode parecer estranho, mas isso é necessário neste ponto. Mais a frente retomaremos estas colunas.

Selecione então a coluna ID e clique na opção “Convert this field into a TemplateField”, no lado direito, e clique em OK.

Mais uma vez, clicando na smart tag do GridView, clique na opção “Edit templates”. Será aberto o template do grid para edição, conforme mostra a Figura 4.

Edição do template da coluna ID

Figura 4: Edição do template da coluna ID

Arraste para dentro da região “Item template” um outro GridView e, clicando na sua smart tag, repita os passos para adição do Data Source. Dessa vez, no momento de configurar a conexão, apenas selecione a ConnectionString previamente criada.

Clicando em Next, selecione a tabela ITENS_VENDA e marque todas as colunas. Clique então no botão “WHERE...” e uma tela semelhante a da Figura 5 será exibida.

Definição de filtro para os itens da venda

Figura 5: Definição de filtro para os itens da venda

No campo “Column”, seleciona a coluna VENDA que é a chave estrangeira na tabela ITENS_VENDA que a relaciona com a tabela VENDAS. Matenha o operador de igualdade no campo seguinte e no campo “Source”, selecione Control. Em “Parameter properties”, do lado direito, selecione o Label1 na caixa de seleção “Control ID”. Clique em Add e em OK.

De volta à tela anterior de configuração do Data Source, clique em Next em Finish.

Se preferir, defina um estilo visual para o grid interno. Farei isso neste exemplo para facilitar a visualização.

Agora, conforme mostra a Figura 6, clique na smart tag do GridView e, em seguida, na opção “End Template Editing”.

Encerrando a edição do template

Figura 6: Encerrando a edição do template

Execute o projeto para ver o resultado, que deve ser semelhante ao que se vê na Figura 7, a seguir.

Resultado visualizado no browser

Figura 7: Resultado visualizado no browser

Complementando o trabalho

O que se vê na Figura 7 já é uma exibição no formato mestre-detalhe, porém, convenhamos que algumas informações da venda foram perdidas. Então clique novamente na opção “Edit Templates”, na smart tag do grid principal, voltando ao ambiente de edição.

Acima do grid secundário, insira um tabela com duas linhas e três colunas. Para isso, use o menu Table > Insert table. Nas três células superiores, insira os textos “ID” “Data” e “Cliente”, respectivamente.

Selecione as mesmas três células e faça algumas configurações de fonte e background. A Figura 8 mostra o layout que utilizei.

Recorte o controle Label1 e cole-o dentro da primeira célula da segunda linha da tabela. Nas outras duas células, insira outros dois controles do mesmo tipo (ver Figura 8).

Configuração do template

Figura 8: Configuração do template

Selecione o segundo label, clique em sua smart tag e na opção “Edit Databindings...”. Selecione o campo Text e marque a opção “Field binding”. No campo “Bound to”, selecione a coluna DATA e, logo abaixo, em “Format”, selecione “Short date – {0:d}”.

Repita esses passos para o terceiro label, dessa vez ligando-o á coluna CLIENTE, sem definir formatação.

Executando novamente o projeto, o resultado agora de assemelhar-se à Figura 9.

Resultado após novas configurações

Figura 9: Resultado após novas configurações

Conclusão

Agora você pode tratar melhor os estilos visuais dos grids, definindo o texto do cabeçalho das colunas e a largura dos elementos. Como o objetivo deste artigo é mostrar como configurar a exibição do modelo mestre-detalhe, não vou me ater a esse tipo de configuração. Porém, a Figura 10 mostra algumas alterações que fiz localmente apenas para melhorar o visual da aplicação.

Visual final da aplicação

Figura 10: Visual final da aplicação

Então, comprovamos que exibir dados em um GridView como um relacionamento mestre-detalhe não é uma tarefa complicada e nos permite, inclusive, obter um visual agradável.

Com as informações contidas nesse material, você poderá adicionar essa funcionalidade aos seus projetos com facilidade.

Com isso, finalizo esse artigo. Esperando que o mesmo possa ser útil no auxílio aos desenvolvedores .NET, agradeço a atenção. Caso surja alguma dúvida ou comentário, a seção de comentários está aberta logo abaixo.

Até a próxima.

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