Demonstra Passo a passo: Exibindo e formatando dados com o controle DataList do servidor Web

Uma tarefa comum em páginas da web é exibir dados — com efeito, para criar relatórios de dados.Neste passo a passo, você trabalhará com o controle DataList, que lhe permite criar de forma livre o layout para registros que você exibe em uma página da Web do ASP.NET.

Durante este passo a passo você aprenderá como:

• Adicionar um DataList controlar e usar modelos para definir o layout que são exibidos por dados aDataList controle.

• Vincule o controle DataList a uma fonte de dados

• Adicione um controle de dados filho e alguns códigos para o controle DataList exibir dados em um relacionamento mestre/detalhes.

Pré-requisitos

A fim de concluir este explicação passo a passo, será necessário:

• Visual Web Developer Microsoft (Visual Studio).

• Acesso ao banco de dados do SQL Server Northwind.Para obter informações sobre como baixar e instalar o banco de dados Northwind de exemplo do SQL servidor, consulte Instalando o banco de dados de exemplo no Microsoft SQL servidor Web site.

  Observação:
  Se você precisa de informações sobre como efetuar o logon para o computador que está executando o SQL Server, contate o administrador do servidor.

• Microsoft Data Access Components (MDAC) versão 2.7 ou posterior.

  Se você está usando o Microsoft Windows XP ou o Windows Server 2003, você já tem MDAC 2.7.Entretanto, se você estiver usando o Microsoft Windows 2000, você deve atualizar o MDAC já instalado no seu computador.Para obter mais informações, consulte "Instalação do Microsoft Data Access Components (MDAC) " na MSDN Library.

Criando o Site Web

Crie um novo site e uma nova página seguindo estas etapas.

Para criar um site do sistema de arquivos

1. Abra o Visual Web Developer.

2. Sobre o Arquivo menu, clicar Novoe, em seguida, clicar Site da Web.If you are using Visual Web Developer Express, on the File menu, click NewWeb Site.

   A caixa de diálogo New Web Site é exibida.

3. Em Modelos Instalados do Visual Studio, selecione ASP.NET Web Site.

4. Na caixa Location, selecione File System e digite o nome da pasta onde você deseja manter as páginas do seu site Web.

   Por exemplo, digite o nome da pasta C:\WebSites\FormatDataList.

5. Na lista Language, clique a linguagem de programação com a qual você prefere trabalhar.

   A linguagem de programação que você escolher será o padrão para o site, mas você pode definir a linguagem de programação para cada página individualmente.

6. Clique em OK.

   Visual Web Developer cria a pasta e uma nova página chamada Default.aspx.

Adicionando um Controle DataList

Para a primeira parte deste passo a passo, você irá adicionar um controle DataList, e então configurar sua fonte de dados.

Para adicionar e configurar um controle DataList para exibir dados em uma grade

1. Alternar para modo Design.

2. NaToolbox a partir do grupoData, arraste um controle DataList para a página.

3. Clique com o botão direito do mouse no controle DataList e clique em Show Smart Tag.

4. No menu DataList Tasks, na lista Choose Data Source, clique em New Data Source.

   O assistente Configure Data Source aparece.

5. Clique em Database.

   Isso especifica que você deseja obter dados de um banco de dados que tem suporte para instruções SQL.(Isso inclui o SQL Server e outros OLE-DB – bancos de dados compatíveis).

6. Na caixa Specify an ID for the data source, um nome de controle da fonte de dados padrão será exibida (SqlDataSource1).Você pode deixar esse nome.

7. Clique em OK.

   O assistente Configure Data Source exibe uma página na qual você pode criar uma conexão.

8. Clique em New Connection.

   • Se a página Choose Data Source aparecer, na lista Data source, selecione o tipo de fonte de dados que você irá utilizar.Para este passo a passo, o tipo da fonte de dados será Microsoft SQL Server.Na lista Data provider, clique em .NET Framework Data Provider for SQL Server, e clique em Continue.

   Aparecerá a página Add Connection.

9. Sobre a página Add Connection, na caixa de texto Server name, digite o nome do computador que executa o banco de dados do SQL Server.

10. Para as credenciais de login, selecione a opção que seja apropriada para acessar o computador que executa o banco de dados do SQL Server (tanto a segurança integrada quanto uma ID específica e senha) e, se necessário, digite um nome de usuário e senha.

11. Selecione a caixa de seleção Save my Password.

12. clicar no selecionar ou digite um nome de banco de dados botão e, em seguida, digite Northwind.

13. Clique em Test Connection, e quando você tiver certeza de que ele funciona, clique em OK.

    O assistente Configure Data Source aparece com as informações de conexão preenchidas.

14. Clique em Next.

    O assistente Configure Data Source exibe uma página em que você pode escolher armazenar a sequência de conexão no arquivo de configuração.Armazenar a sequência de conexão no arquivo de configuração possui duas vantagens:

    • É mais seguro que armazená-la na página.

    • Você pode reutilizar a mesma sequência de conexão em várias páginas.

15. Certifique-se de que a caixa de seleção Yes, save this connection as está marcada, e clique em Next.Você pode deixar a sequência de conexão padrão.

    O assistente Configure Data Source exibe uma página na qual você pode especificar quais dados você deseja para buscar do banco de dados.

16. Certifique-se Specify columns from a table or view esteja marcada.

17. Na lista Name, clique em Categories.

18. Em Columns, selecione as caixas de seleção CategoryID e CategoryName.

    O assistente Configure Data Source exibe a instrução SQL que você está criando em uma caixa na parte inferior da página.

    Observação:
    O Configurar fonte de dados assistente permite que você especifique critérios de seleção (uma cláusula WHERE) e outras opções de consulta SQL.Para essa parte do passo a passo, você criará uma declaração simples sem seleção ou opções de classificação.

19. Clique em Next.

20. Clique em Test Query para certificar-se que você está obtendo os dados que você deseja.

21. Clique em Finish.

    O assistente Configure Data Source fecha e você retorna para o controle SqlDataSource.Se você exibir as propriedades para o controle SqlDataSource, você verá que o assistente Configure Data Source criou valores para as propriedades ConnectionString e SelectQuery.Embora propriedades no Visual Web Developer exiba a sequência de conexão completa, somente o identificador de sequência de conexão é salvo na página (nesse caso, NorthwindConnectionString).

Formatando o layout do controle DataList

Nesse ponto, você tem um controle DataList sobre a página com um layout padrão para informações da tabela Categoriais.A vantagem do controle DataList é que você pode criar um layout de forma livre para os dados.Nesta seção, você irá trabalhar com um modelo e configurá-lo com texto e controles para personalizar a exibição de dados.

Para formatar o layout no controle DataList

1. Clique com o botão direito do mouse no controle DataList, clique em Edit Template, e em seguida, clique em Item Templates.

   O controle DataList alterna para o modo de edição de template e exibe caixas de template para esses templates:

   • ItemTemplate contém o texto e controles que são exibidos por padrão no controle DataList.

   • AlternatingItemTemplate é um modelo opcional no qual você pode criar um layout que é usado para todos os outros registro de dados.Normalmente, a propriedade AlternatingItemTemplate é semelhante à propriedade ItemTemplate, mas a propriedade AlternatingItemTemplate usa uma cor de plano de fundo diferente para um efeito de faixa.

   • SelectedItemTemplate define o layout de um registro de dados explicitamente que está selecionado, usando um clique de botão ou outro gesto.Usos típicos para este modelo são para fornecer uma exibição expandida de um registro de dados ou para servir como o registro mestre para um relacionamento master/detail.Você deve escrever código para oferecer suporte ao colocar um registro no modo selecionado.(Você não fará isso neste passo a passo.Para obter mais informações, consulte Como: Permitir usuários selecionarem itens em controles DataList do servidor Web e Explicação Passo a Passo: Criando Páginas Web Mestre/Detalhes no Visual Studio.)

   • EditItemTemplate , que define o layout para modo de edição de um registro de dados.Normalmente, a propriedade EditItemTemplate inclui controles editáveis, como o TextBox e o CheckBox nos quais os usuários podem modificar o registro de dados.Você deve escrever código para suportar a colocação de um registro em modo de edição e manipular o salvamento do registro quando as edições estiverem concluídas.(Você não fará isso neste passo a passo.Para obter informações sobre como gravar código para editar os registros, consulte Como: Permitir que usuários edição itens nos controles DataList do servidor Web.)

   Por padrão, Visual Web Developer preenche o modelo do item com um controle Label de dados vinculado para cada coluna de dados na fonte de dados.Além disso, o desenvolvedor de Visual Web gera texto estático para cada label atuar como uma legenda.

2. Arraste a alça de redimensionamento direito para ampliar o controle DataList para que ele ocupe a maior parte da largura da página.

3. Edite o modelo do item para reorganizar os controles Label e criar uma nova legenda para que o conteúdo do modelo fique semelhante ao seguinte exemplo de código.

   Name: [CategoryNameLabel] (ID: [CategoryIDLabel])
   

4. Clique no controle CategoryNameLabel.Em Propriedades, expanda o nó Font, e então defina Bold para true.

5. Na modo Design, no controle DataList, clique com botão direito do mouse na barra de título, clique em Edit Template, e clique emSeparator Template.

   O template separador permite a você especificar qual o texto ou outros elementos são exibidos pelos registros de dados.

6. Em Toolbox, a partir do grupoHTML, arraste um elemento Horizontal Rule para o modelo separador.

7. No controle DataList, clique com o botão direito do mouse na barra de título, e clique emEnd Template Editing.

Testando o Controle DataList

Agora você pode testar o layout que você criou.

Para testar o controle DataList

• Pressione CTRL+F5 para executar a página.

  A página exibe uma lista de nomes de categoria e identificações, com uma linha entre cada registro.

Exibindo Informações Relacionadas Dentro do Controle DataList

O controle DataList que você está usando atualmente exibe registros individuais de Categoria, usando o layout personalizado que você definiu anteriormente.Você alterou o layout padrão apenas um pouco, mas você pode ver que por trabalhar com o modelo, você pode organizar texto e controles, formatar o conteúdo e modificar a exibição do registro de dados de outras maneiras.

O layout pode incluir o registro atual e registros relacionados.Nesta parte do passo a passo, você irá alterar o layout para que cada linha exiba uma categoria e os produtos dessa categoria.Na verdade, você irá exibir um relacionamento mestre/detalhe em cada linha do controle DataList.Você precisará escrever um breve trecho de código para ativar este cenário.

Para exibir informações relacionadas dentro do controle DataList

1. Clique com o botão direito do mouse no controle DataList, clique em Edit Templates e em seguida, clique em Item Templates.

2. Em Toolbox, no grupo Standard, arraste um controle BulletedList para o item de template e depois solte o controle BulletedList abaixo da informação de categoria.

   O controle BulletedList pode exibir dados com um coluna de dados por item com marcadores.

3. Clique com o botão direito do mouse no controle BulletedList e clique em Show Smart Tag.

4. Clique em Choose Data Source.

   Você criará um segundo controle da fonte de dados para ler os registros relacionados.

5. Na caixa de diálogo Choose Data Source, na lista Select a data source, clique em New Data Source.

6. Clique em Database.

7. No Especifique uma ID para a fonte de dados caixa, tipo bulletedListDataSource.

   Embora você normalmente possa deixar o nome padrão para a fonte de dados, nesse caso é recomendado atribuir um nome específico, previsível com a fonte de dados para que você possa referência.-lo posteriormente no código

8. Clique em OK.

   O assistente Configure Data Source aparece.

9. Na lista Which data connection should your application use to connect to the database?, clique no nome da conexão que você criou anteriormente neste passo a passo, e em seguida, clique em Next

   O assistente Configure Data Source exibe uma página em que você pode criar uma Instrução SQL.

10. Em Specify columns from a table or view, na caixa Name, clique em Products.

11. Na caixa Columns, selecione a caixa ProductName.

    O controle BulletedList exibe apenas uma coluna.

12. Clique no botão WHERE.

    A caixa de diálogo Add WHERE Clause aparece.

13. Na lista Column, clique em CategoryID.

14. Na lista Operator, clique em =.

15. Na lista Source, clique em None.

    Isso indica que o valor da coluna CategoryID será fornecido em uma variável.

16. Clique em Add, clique em OK, clique em Next, e em seguida, clique em Finish.

    O teste da consulta não funcionará com a variável.

17. Na lista Select a data field to display in the BulletedList, clique em ProductName.Clique em OK.

18. No controle DataList, clique com o botão direito do mouse o barra de título, e clique em End Template Editing.

Escrevendo Código para Configurar a ID da Categoria

A instrução SQL que você criou para o controle bulletedListDataSource parece com o código a seguir:

SELECT [ProductName] FROM [Products] WHERE ([CategoryID] = @CategoryID)

Em time de execução, a DataList controle exibe uma lista de registros de categoria, que inclui o nome da categoria e a ID da categoria. Na seção anterior, você adicionou um BulletedList controle que irá exibir todos os produtos para cada categoria. Como cada registro de categoria está sendo exibido, o controle DataList executa uma consulta para obter os produtos para essa categoria, usando a consulta anterior.

Para cada registro sendo exibido, você deve fornecer a ID da categoria para a consulta.Isso pode ser feito escrevendo um breve trecho de código que obtém a ID da categoria a partir do registro que atualmente estiver sendo exibido, e então passa a ID da categoria como um parâmetro para a consulta no controle bulletedListDataSource.

Para escrever código para definir a ID da categoria

1. Clique no controle DataList, e em Properties, na barra de ferramentas, clique em Events.

2. Clique duas vezes em ItemDataBound para criar um manipulador de eventos para esse evento.

3. Copie o código a seguir para o manipulador.

   If e.Item.ItemType = ListItemType.Item Or _
       e.Item.ItemType = ListItemType.AlternatingItem Then
     Dim ds As SqlDataSource
     ds = CType(e.Item.FindControl("bulletedListDataSource"), _
         SqlDataSource)
     Dim categoryID As String
     categoryID = DataBinder.Eval(e.Item.DataItem, _
         "categoryid").ToString()
     ds.SelectParameters("CategoryID").DefaultValue = _
         categoryID
   End If
   

   if (e.Item.ItemType == ListItemType.Item ||
       e.Item.ItemType == ListItemType.AlternatingItem)
   {
     SqlDataSource ds;
     ds = e.Item.FindControl("bulletedListDataSource")
         as SqlDataSource;
     ds.SelectParameters["CategoryID"].DefaultValue =
         DataBinder.Eval(e.Item.DataItem,
         "categoryid").ToString();
   }
   

   O evento ItemDataBound é disparado para cada registro de dados sendo exibido, fornecendo uma oportunidade para você ler ou modificar os dados.Este código faz o seguinte:

   1. Verifica, para certificar-se, que o evento está ocorrendo enquanto vincula um objetoItemTemplate ou AlternatingItemTemplate (e não um objeto SeparatorTemplate ou outro tipo de modelo)

   2. Usa o método FindControl para obter uma referência à instância do controle SqlDataSource que é criada dentro de cada item do modelo.

   3. Obtém o valor da coluna de dados CategoryID, avaliando a propriedade DataItem atual.

   4. Define a variável CategoryID da consulta parametrizada definindo sua propriedade DefaultValue na coleção SelectParameters.

Testando o código

Agora você pode testar seu código.

Para testar o código para definir a ID da categoria

• Pressione CTRL+F5 para executar a página.

  O controle DataList exibe cada registro da categoria, e para cada registro, também exibe, em uma lista com marcadores, os produtos que pertencem a essa categoria.

Próximas etapas

Este passo a passo ilustrou um cenário simples mas completo para exibir e formatar dados com o controle DataList do servidor Web.Você pode criar páginas mais sofisticadas orientadas a dados e aplicativos, usando as técnicas e controles ilustrados no passo a passo.Por exemplo, você pode desejar:

• Escrever código para permitir que os usuários selecionem itens no controle DataList do servidor Web.Para obter mais informações, consulte Como: Permitir usuários selecionarem itens em controles DataList do servidor Web.

• Criar um registro mestre para um relacionamento master/detail.Para obter mais informações, consulte Explicação Passo a Passo: Criando Páginas Web Mestre/Detalhes no Visual Studio.

• Aprenda como usar saída em cache em seus aplicativos de dados para melhorar o desempenho.Para obter mais informações, consulte Explicação passo a passo: Usando cache de saída para melhorar o desempenho de site da Web.

Consulte também

Tarefas

Como: Permitir usuários selecionarem itens em controles DataList do servidor Web

Explicação Passo a Passo: Criando Páginas Web Mestre/Detalhes no Visual Studio

Referência

DataList