Partilhar via

Passo-a-passo: Exibindo, paginando e classificando dados usando o controle do servidor Web ListView

  • Artigo

Essa explicação passo a passo, você trabalhará com o ListView controle, que permite a você exibir dados de uma fonte de dados em um formato que você Definir usando modelos.Trabalhando com modelos, você pode ter controle completo sobre o layout e a aparência dos dados no controle.O ListView Controlar automaticamente oferece suporte a Editar, inserir e excluir as operações, bem como a funcionalidade de classificação e paginação.

A explicação passo-a-passo ilustra as seguintes tarefas:

  • Usando o ListView Controle para exibir dados de um Banco de Dados.

  • Adicionando funcionalidade de paginação para a ListView o controle.

  • Adicionando funcionalidade para classificar o ListView o controle.

Pré-requisitos

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

  • ou .

  • SQL Server Express Edition.Se você possui o SQL Server instalado, você pode usá-lo, mas deve fazer pequenos ajustes em alguns procedimentos.

  • O banco de dados AdventureWorks instalado no seu computador.Para informações sobre como baixar e instalar o SQL Server Exemplo AdventureWorks banco de dados, consulte Instalando Dados de Exemplo Bases para Express Editions No site da Microsoft SQL Server.

  • Nome de usuário e senha de uma conta do SQL Server que tenha acesso ao banco de dados AdventureWorks.

Criando o Site Web

Se você já tiver Criado um site da Web (por exemplo, por concluir Demonstra Passo a passo: Criando uma página da Web básica no Visual Web Developer , você pode usar esse site e Ir para a Avançar seção.Caso contrário, crie um site e uma página novos, seguindo estas etapas.

Para criar um site do sistema de arquivos

  1. Abrir ou .

  2. Sobre o File Menu, clique em Novoe em seguida, clique em Site.Se você estiver usando. O Visual Web Developer Express EditionNa File Menu, clique em NovoSite.

    O Novo Site da Web caixa de diálogo é exibida.

  3. Em Modelos Visual Studio instaladoClique em Web Site ASP.NET.

  4. No primeiro. Local Caixa de seleção Sistema de arquivose na segunda caixa, digite o nome da pasta w aqui você deseja manter as páginas do site da Web.

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

  5. Na Linguagem lista, clique no linguagem de programação que você prefere trabalhar no.

  6. Clique em OK.

    Cria a pasta e um Nova Página chamado Default.aspx.

Exibindo e paginando com dados no controle do ListView

Para exibir dados em uma página da Web do ASP.NET, será necessário:

  • Uma conexão com uma fonte de dados, como um banco de dados.No procedimento a seguir, você criará uma conexão com o banco de dados AdventureWorks do SQL Server.

  • Um controle de fonte de dados na página, que interage com a fonte de dados (o banco de dados) para ler e gravar dados.Neste exame Através, você usará um SqlDataSource o controle que interage com o banco de dados AdventureWorks SQL Server.

  • Um controle na página para exibir os dados.No procedimento a seguir, você exibirá dados em um ListView controle, que obtém seus dados a partir de SqlDataSource o controle.

Para exibir e página através de dados no controle ListView.

  1. Se o site não tiver uma pasta App_Data, no. Explorer soluçãoClique com o botão direito do mouse no projeto, clique em Adicionar pasta ASP.NETe em seguida, clique em App_Data.

  2. Em Explorer soluçãoClique com o botão direito do mouse na pasta App_Data e em seguida, clique em Adicionar item existente.

    O Adicionar item existente caixa de diálogo é exibida.

  3. Digite o local do arquivo de banco de dados AdventureWorks (AdventureWorks_Data.mdf).

    Por padrão, o arquivo .mdf é instalado no caminho c:\Arquivos de Programas\Microsoft SQL Server\MSSQL.1\MSSQL\Data\AdventureWorks_Data.mdf.

    Observação:

    Esse procedimento criará uma cópia do arquivo de banco de dados no projeto.O arquivo de banco de dados é grande.Se for inviável fazer uma cópia do banco de dados, você pode conectar-se a ele usando um método alternativo, como anexar o arquivo de banco de dados diretamente.No entanto, o procedimento para fazer isso não é abordado nessa explicação passo a passo.

  4. Alterne para ou abra o arquivo Default.aspx

  5. Switch Para Design Exiba.

  6. A partir de Dados Guia das ToolboxArraste um ListView controlar até a página.

  7. Sobre o Tarefas comuns de lista Exibir Menu, in a ChooseData Source Soltar-Para Baixo Lista, clique em < novo Fonte de Dados … >.

    O Configuração de fonte de dados assistente é exibido.

  8. Clique em Banco de dados.

    Isso especifica que você deseja obter dados de um banco de dados que suporta instruções SQL, que inclui o SQL Server e outros banco de dados OLE-DB compatíveis.

  9. Na Especificar uma identificação para o fonte de dados Caixa, um nome padrão controle da fonte de dados SqlDataSource1é exibida.Você pode deixar esse nome.

  10. Clique em OK.

    O Configurar fonte de dados assistente é exibido.

  11. Em **Que conexão de dados o aplicativo deve usar para se conectar a um banco de dados?**Selecionar AdventureWorks_Data.mdf da lista.

  12. Clique em Next.

    O assistente exibe uma página onde você pode especificar que você deseja armazenar a seqüência de conexão no arquivo de configuração.Armazenar a seqüência de conexão no arquivo de configuração possui duas vantagens:

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

    • Você pode usar a mesma seqüência de conexão em várias páginas

  13. Certifique-se que o Sim, salvar esta conexão como Caixa de seleção está selecionada e em seguida, clique em Next.Você pode deixar o nome de seqüência de conexão padrão.

    O assistente irá exibir uma página onde você pode especificar quais dados você deseja recuperar do banco de dados.

  14. Selecione o Especifique um personalizado Instrução SQL ou procedimento armazenado Opção.

    Observação:

    Normalmente, você poderia usar a opção Especificar colunas de uma tabela ou modo de exibição.No entanto, como o banco de dados AdventureWorks tem nomes de esquema, você criará uma Instrução SQL personalizada nessa explicação passo a passo.

  15. Clique em Next

  16. Na Definir procedimentos armazenados ou instruções personalizadas página, digite a seguinte consulta SQL, que recupera dados de contato a partir de AdventureWorks o banco de dados.

    SELECT IDContato, Nome, Sobrenome, EndereçoDeEmail do Person.Contact

    Você também pode clicar em Construtor de consultas e usar o Construtor de consultas Janela para criar uma consulta e, em seguida, vali Data-lo usando o Executar consulta Botão.

    Observação:

    O assistente permite que você especifique critérios de seleção (cláusulas WHERE) e outras opções de consulta SQL.Para esta explicação passo a passo, você criará uma instrução simples sem critérios de seleção ou classificação.

  17. Clique em Next.

  18. Clique em Teste de consulta Para certificar-se que você estiver recuperando os dados que você deseja.

  19. Clique em Finish.

    O assistente cria um SqlDataSource Controle e o adiciona à página.O ListView controle que você Adicionado anteriormente está vinculado ao SqlDataSource o controle.

    Se você exibir as propriedades para o SqlDataSource o controle, você verá que o assistente possui Criado valores para o ConnectionString() e SelectCommand Propriedades.

  20. Clique com o botão direito do mouse o ListView Controle, clique em Mostrar marcas inteligentes.

  21. Sobre o Tarefas comuns de lista Exibir Menu, clique em Configurar ListView.

    O Configurar ListView caixa de diálogo é exibida.

  22. Select Habilitar paginação.

    Observação:

    Também convém selecionar um estilo diferente, que pode facilitar a exibição dos dados.Para fazer isso, em Selecione um estiloSelecione um estilo, como Colorido.

    O assistente cria os modelos para o ListView controle com base nas colunas na consulta.Você pode personalizar o layout, editando os modelos que contêm os elementos de layout, controles e expressões de ligação.

  23. Clique em OK.

Antes de prosseguir, você pode testar o ListView o controle.

Para testar o controle ListView

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

    O ListView o controle é exibido com IDContato, Nome, Sobrenomee EmailAddress Colunas.

  2. Clique na Primeiro, Previous, Nexte Last botões na parte inferior da página na ordem a página através de dados.

  3. Quando você terminar, feche o navegador.

Adicionando recurso de classificação ao controle ListView

Agora você adicionará capacidade de Classificar para o ListView o controle.Você pode fornecer esse recurso adicionando um botão para o ListView o controle e configurando o botão.

Para adicionar recurso de classificação ao controle ListView

  1. No arquivo Padrão.aspx, clique com o botão direito do mouse o ListView Controle e em seguida, clique em Mostrar marcas inteligentes.

  2. Sobre o Tarefas comuns de lista Exibir Menu, in a Exibir atual lista, selecione um modo de exibição para editar o LayoutTemplate modelo, como ItemTemplate.

    Observação:

    não é Uma exibição específica para editar o LayoutTemplate o modelo.Você pode editar este modelo em qualquer um dos Exibições apresentado a Exibir atual Na lista, exceto para o Exibir tempo de execução e EmptyDataTemplate.

  3. A partir de Padrão Guia das ToolboxArraste dois Button Controles para a parte inferior do controle, onde a paginação controles são .

  4. Na Propriedades janela, alterar as propriedades dos botões da seguinte maneira:

    • Para o primeiro botão, defina o Texto Propriedade como " Classificar por Primeiro nome ", o CommandName Propriedade para "classificação" e o CommandArgument para "Nome".

    • Para o segundo botão, defina o Texto Propriedade como " Classificar por Último nome ", o CommandName Propriedade para "classificação" e o CommandArgument Para "sobrenome".

    Do botão CommandArgument() As propriedades são definidas como uma expressão de Classificar.Para dados do banco de dados, isso é geralmente o nome de uma coluna.

  5. Salve a página.

Agora você pode testar a página.

Para testar a classificação

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

  2. Clique na Classificar por Primeiro nome e Classificar por Último nome botões para classificar os dados de maneiras diferentes.

  3. Clique em um botão repetidamente para alternar a ordem de classificação entre crescente e decrescente.

Próximas etapas

Este exame Através mostrou as etapas básicas para usar um ListView Controle para exibir, página e classificar os registros de dados usando um dos layouts fornecidos para o controle.Você pode querer fazer experiências com recursos adicionais das ListView Controlar e Explore cenários diferentes.Por exemplo, convém editar, excluir e inserir registros.Para obter mais informações, consulte Passo-a-passo: modificando dados usando o controle do servidor Web ListView.

Consulte também

Tarefas

Como Para: Proteger seqüências de caracteres de conexão quando usando controles de Origem de dados

Explicação passo a passo: Acesso básico a dados em páginas da Web

Conceitos

Visão Geral sobre o Controle do Servidor Web ListView