Master Detail no ASP.NET 2.0

Por Renato Haddad, Microsoft Most Valuable Professional .NET Mobile Devices. Editor da revista MSDN Magazine Brasil, autor de diversos livros e ministra palestras e treinamentos sobre a tecnologia .NET.

Tecnologias Utilizadas
- ASP.NET 2.0

O uso de Master / Detail em qualquer tipo de aplicação tornou-se comum pela facilidade e necessidade de uso. No entanto, se no ASP.NET 1.1 já era fácil, no 2.0 ficou ainda melhor e muito mais produtivo. Usarei o banco de dados Northwind do SQL Server como exemplo e as tabelas Categorias e Produtos.

Abra o Visual Studio .NET 2005, selecione o menu File / New / Web Site e crie um novo projeto com as seguintes características:

Clique em OK para criar o projeto. Abra o Solution Explorer, clique com o botão direito sobre a solução e selecione Add New Item. Como usaremos conexão com banco de dados e armazenaremos toda a string de conexão em um arquivo de configuração, adicione um arquivo chamado Web.Config.

Novamente, clique com o botão direito sobre a solução e selecione Add New Item. Digite MasterDetail no nome do arquivo, deixe selecionado Web Form em templates, certifique-se de não selecionar o checkbox "Select master page" e clique em Add.

Digite um cabeçalho e o item Categorias. Arraste o controle DropDownList para o corpo da página e note que é exibida uma Smart Tag contendo algumas opções:

Selecione o checkbox "Enable AutoPostBack", o qual submete a página ao servidor assim que uma opção for selecionada. Clique na opção "Choose Data Source". Como não existe ainda nenhuma fonte de dados definida, siga os seguintes passos:

Selecione no DropDownList a opção <New Data Source...>. Será exibida uma janela contendo as possíveis fontes de dados, assim como arquivos XML ou objetos. Selecione a opção Database e clique em OK. Caso queira alterar o ID do data source, basta digitar.

Nesta janela você deverá montar a string de conexão, portanto, clique em New Connection.

Selecione o Microsoft SQL Server para conexões com o SQL Server 7.0 ou superior. Note o provider a ser utilizado e clique em Continue.

Informe o servidor, neste caso é (local) porque estou em uma máquina local, o Login e o banco de dados, que é o Northwind. Por fim, teste a conexão e clique em OK.

O assistente retorna a tela de conexão exibindo toda a string montada. Clique em Next.

Aqui encontramos uma das grandes vantagens do ASP.NET 2.0, o qual permite salvar a conexão para ser utilizada nos demais acessos ao banco de dados. Esta conexão fica armazenada no arquivo Web.Config em XML. Altere o nome para myConnection e clique em Next

Selecione a tabela Categories na lista. Todos os campos serão exibidos na lista para que você selecione aqueles a serem utilizados. Neste caso, selecione o CategoryID e o CategoryName. Clique em Next para continuar.

Caso queira testar para saber se os dados estão ok, assim como a conexão, clique em Test Query. Todos os dados são exibidos na janela. Por fim, clique em Finish.

A próxima janela é fundamental para que a aplicação funcione corretamente. Como o DropDownList contém apenas uma coluna a ser exibida, informe qual é o campo a ser mostrado, neste caso, é o CategoryName. Mas, o mais importante é o campo a ser armazenado, que é o CategoryID, pois o utilizaremos como critério de outra consulta SQL o qual retornará todos os produtos da categoria selecionada. Clique em OK.

Abra o arquivo Web.Config e veja que a string de conexão criada já está armazenada. Caso você não queira armazenar a conexão para ser utilizada futuramente em outros controles, toda a configuração fica armazenada no objeto SqlDataSource do respectivo controle. No entanto, a cada alteração na string você é obrigado a alterar em todos os objetos. Portanto, o modo mais prático e produtivo é armazenar a string de conexão no arquivo Web.Config.

<appSettings/>
<connectionStrings>
    <add name="myConnection" connectionString="Data Source="(local)";Initial Catalog=Northwind;Persist Security Info=True;User ID=sa"
        providerName="System.Data.SqlClient" />
</connectionStrings>

GridView

Uma vez montado o DropDownList, abra a guia Data na Toolbox e arraste o controle GridView abaixo do DropDownList. É exibida a Smart Tag com as opções.

Clique em Auto Format e selecione um formato adequado para o usuário.

Na Smart Tag, selecione em Choose Data Source, a opção <New data source>. Selecione Database, note que o ID é SqlDataSource2 e clique em OK.

Ao invés de montar toda a string de conexão novamente, use a que já foi definida anteriormente chamada myConnection, basta selecioná-la na lista.

Selecione na lista a tabela Products, assim como os respectivos campos marcados na seguinte figura.

Como o objetivo é exibir apenas os produtos da categoria selecionada no DropDownList de categorias, então é preciso aplicar um filtro. Clique no botão Where e informe todos os dados conforme a figura seguinte. Atenção: você não precisa digitar absolutamente nada, basta selecionar as opções nos devidos controles.

Por fim, clique no botão Add para adicionar a condição.

Clique em OK e veja toda a string SQL montada contendo a clausula WHERE.

Clique em Next e Finish para finalizar o assistente. Para quem achava fácil no ASP.NET 1.0 e 1.1 aplicar paginação, veja como que isso é feito no ASP.NET 2.0. Abra a Smart Tag e selecione o checkbox Enable Paging. Aproveitando, habilite o Enable Sorting para proporcionar um sorting nas colunas. Códigos? Que nada, tudo com Smart Tag. Caso queira alterar alguma configuração nas paginações, use a janela de propriedades.

Salve o projeto e pressione CTRL + F5 ou F5 para executá-lo no Browser. Faça os testes selecionando as categorias no Listbox.

Customização do GridView

Neste exemplo, os nomes dos cabeçalhos das colunas, assim como o formato dos campos não estão adequados ao contexto. Selecione o GridView e na Smart Tag, a opção Edit Columns. Existe a propriedade HeaderText para cada coluna, portanto, altere para os seguinte nomes: ID, Produto, Preço e Estoque.

Para o campo UnitPrice (Preço) digite {0:n2} na propriedade DataFormatString. Assim, aplicamos uma formatação para que o campos seja exibido como numérico com duas casas decimais.

E para alinhar o conteúdo totalmente à direita do controle, atribua Right para a propriedade HorizontalAlign localizada em ItemStyle.

Faça o mesmo procedimento para o campo UnitsInStock (Estoque), aplicando o alinhamento e a formatação {0:n0}. Salve o projeto e dê um Refresh no Browser para ver as alterações.

Conclusão

Vocês perceberam que eu não digitei absolutamente nenhuma linha de código? O propósito do ASP.NET 2.0 é diminuir cerca de 70% dos códigos em relação ao 1.1. O GridView é um controle novo que contém muitas funcionalidades e deverá ser o mais utilizado em todas as aplicações, seja pela facilidade de uso, UI, performance e aplicabilidade.

Bons estudos e lembre-se: No Stress, think ASP.NET 2.0

Renato Haddad (rehaddad@msn.com) é MVP, editor da revista MSDN Magazine Brasil, ministra treinamentos e palestras sobre .NETe autor de diversos livros e treinamentos em CD multimídia de ASP.NET, SQL Reporting Services, Visual Studio .NET 2003 e Aplicações Móveis para celulares e Pocket PC, tanto no Brasil como em outros países da América Latina.