Controles ListView e DataPager em ASP.NET 3.5

Desde o lançamento da primeira versão do ASP.NET a Microsoft incluiu em suas IDEs diversos controle de listagem de dados: DataGrid, GridView, Repeater entre outros. Embora sejam todos controles de listagem de dados, eles tem focos diferentes: o Repeater permite maior controle sobre o conteúdo renderizado, o DataList veio otimizado para exibição de dados em várias colunas etc. A evolução mesmo ficou por conta dos controles “multifuncionais”, inicialmente o DataGrid na versão 1.X, o GridView surgindo na versão 2.0 trazendo novas características e agora, no ASP.NET 3.5, o ListView.

O ListView é tudo de bom: Permite maior controle sobre o conteúdo gerado através de diversos eventos e templates, e, na minha opinião, o mais interessante: agora com um InsertItemTemplate. O que isto significa? As operações de insert para o DataGrid e para o GridView eram órfãs e tinham que ser tratadas a parte. Particularmente, com o GridView, eu colocava um Formview em modo de inserção no EmptyDataTemplate do GridView, e, ao clicar em um botão inserir normalmente colocado sobre o cabeçalho de uma coluna, desconectava o controle de seu datasource. O efeito era que a listagem de dados desaparecia dando lugar ao controle para inserção.Agora finalmente posso ter todas as operações (Select, Insert, Update, Delete) em um mesmo controle! A inserção é por padrão feita próxima ao rodapé do Listview.

ListView na prática

Se você já usou algum ancestral do ListView não terá qualquer dificuldade em se familiarizar com este novo controle. Neste exemplo utilizo a boa e velha base de dados NorthWind, rodando em uma instancia do SQL Server 2005 Express. Vale lembrar que você pode baixar esta base de dados como um download independente a qualquer momento, através do site da Microsoft, ou utilize qualquer base de dados de sua preferência.

Primeiramente abra o Visual Studio 2008, clique em New Web Site. Selecione .NET Framework 3.5 em na parte superior da janela, marque a opção ASP.NET Web Site e escolha a linguagem de sua preferência.

Abra a guia Data na caixa de ferramentas. Neste tutorial vamos trabalhar com três controles: ListView, DataPager e SqlDataSource. Observe na asp3imagem abaixo os controles circulados:

Inicialmente jogue um controle ListView sobre o WebForm.

Na SmartTag do controle, clique em New data source, desta forma o Visual Studio vai criar um novo controle de acesso a dados. Poderíamos ter feito isto manualmente, arrastando um controle SqlDataSource para o WebForm.

É exibido o DataSource Configuration Wizard. Na primeira etapa devemos informar a origem dos dados. Selecione Database e clique em Ok.

Na próxima etapa devemos configurar a conexão:

Clique em New Connection e informe os dados de sua conexão, como no exemplo abaixo:

De volta ao assistente, clique em Next. Nesta etapa você deve informar se deseja salvar a string de conexão no arquivo de configuração da aplicação (Web.config). Marque sim e clique em Next.

Agora é o momento de informar a tabela ou a consulta que vai dar origem aos dados.

No exemplo abaixo selecionei a tabela Employees com algumas colunas.

Antes de prosseguir, clique em Advanced e marque a opção Generate Insert, Update, and Delete statements para que o Visual Studio produza automaticamente as instruções Sql para que o ListVew possa incluir, atualizar e excluir dados automaticamente.

Importante observar que para esta opção estar habilitada é fundamental que entre as colunas selecionadas estejam aquelas que compõem a chave primária da tabela. No exemplo acima trata-se da coluna EmployeeID. 

Clique em Next, nesta última opção do assistente você pode testar a consulta gerada. Clique em Finish.

Se observarmos o código gerado para o ListView até o momento é demasiadamente simples, pois ainda não definimos nenhuma propriedade além de DataSourceID:

<asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1">

 </asp:ListView>

Vamos tratar de configurar o ListView. Voltando a área de design, na Smart tag do ListView clique em configure ListView:

Nesta janela podemos configurar as funcionalidade principais do ListView. Primeiramente um Layout, teste todas as opções e veja o comportamento na janela Preview. Abaixo você pode selecionar um estilo. Em opções devemos informar se o ListView vai ter habilitadas funções de edição, inserção, exclusão e paginação. Para este exemplo deixa marcado todas as opções, com exceção de paginação:

Clique em ok e rode a aplicação. Observe que temos agora uma listagem de dados 100% funcional. Observe que a linha de inserção é incluída no junto ao rodapé da listagem:

DataPager

Assim como seus ancestrais, o ListView tem paginação nativa embutida. Porém agora temos um controle de paginação à parte: O DataPager.

Curioso é que o DataPager funciona apenas com o ListView. Você deve estar se perguntando: Então porque usá-lo ao invés da paginação “embutida” no ListView? Como um controle separado temos mais poder sobre como queremos nossa paginação. Também devemos lembrar que o DataPager não foi concebido para funcionar exclusivamente com o ListView, mas com qualquer controle que implemente a interface IPageableItemContainer. No ambiente do ASP.NET 3.5 este é o único controle nativo que implementa tal interface.

Mãos a obra. Arraste um controle DataPager para o Web Form. Na janela de propriedades do controle, defina PagedControlId para ListView1 e PageSize para 5, pois a tabela que escolhi para o exemplo possui menos que 10 registros:

Na Smart Tag do DataPager, defina um estilo de paginação, que pode ser com botões do tipo próximo/anterior ou mesmo numérica. Para o exemplo escolhi Próximo/anterior:

Neste momento, ao rodar a aplicação, já temos nosso ListView com as funcionalidades de paginação em funcionamento: