Apresentando Páginas da Web do ASP.NET – Exibindo dados

por Tom FitzMacken

Este tutorial mostra como criar um banco de dados no WebMatrix e como exibir dados de banco de dados em uma página quando você usa Páginas da Web do ASP.NET (Razor). Ele pressupõe que você concluiu a série por meio de Introdução à Programação Páginas da Web do ASP.NET.

O que você aprenderá:

• Como usar ferramentas WebMatrix para criar um banco de dados e tabelas de banco de dados.
• Como usar ferramentas WebMatrix para adicionar dados a um banco de dados.
• Como exibir dados do banco de dados em uma página.
• Como executar comandos SQL em Páginas da Web do ASP.NET.
• Como personalizar o WebGrid auxiliar para alterar a exibição de dados e adicionar paginação e classificação.

Recursos/tecnologias discutidos:

• Ferramentas de banco de dados WebMatrix.
• WebGrid Auxiliar.

O que você vai construir

No tutorial anterior, você foi apresentado ao Páginas da Web do ASP.NET (arquivos .cshtml), aos conceitos básicos da sintaxe Razor e aos auxiliares. Neste tutorial, você começará a criar o aplicativo Web real que usará para o restante da série. O aplicativo é um aplicativo de filme simples que permite exibir, adicionar, alterar e excluir informações sobre filmes.

Quando terminar este tutorial, você poderá exibir uma listagem de filmes semelhante a esta página:

Mas, para começar, você precisa criar um banco de dados.

Uma breve introdução aos bancos de dados

Este tutorial fornecerá apenas a introdução mais breve aos bancos de dados. Se você tiver experiência no banco de dados, poderá ignorar esta breve seção.

Um banco de dados contém uma ou mais tabelas que contêm informações , por exemplo, tabelas para clientes, pedidos e fornecedores, ou para alunos, professores, aulas e notas. Estruturalmente, uma tabela de banco de dados é como uma planilha. Imagine um catálogo de endereços típico. Para cada entrada no catálogo de endereços (ou seja, para cada pessoa), você tem várias informações, como nome, sobrenome, endereço, endereço de email e número de telefone.

(Às vezes, as linhas são chamadas de registros e as colunas às vezes são chamadas de campos.)

Para a maioria das tabelas de banco de dados, a tabela precisa ter uma coluna que contenha um valor exclusivo, como um número de cliente, número da conta e assim por diante. Esse valor é conhecido como a chave primária da tabela e você a usa para identificar cada linha na tabela. No exemplo, a coluna ID é a chave primária do catálogo de endereços mostrado no exemplo anterior.

Grande parte do trabalho que você faz em aplicativos Web consiste em ler informações do banco de dados e exibi-los em uma página. Muitas vezes, você também coletará informações dos usuários e as adicionará a um banco de dados ou modificará os registros que já estão no banco de dados. (Abordaremos todas essas operações no decorrer deste conjunto de tutoriais.)

O trabalho do banco de dados pode ser extremamente complexo e pode exigir conhecimento especializado. Para este conjunto de tutoriais, porém, você precisa entender apenas os conceitos básicos, que serão explicados conforme o uso.

Criar um banco de dados

O WebMatrix inclui ferramentas que facilitam a criação de um banco de dados e a criação de tabelas no banco de dados. (A estrutura de um banco de dados é conhecida como esquema do banco de dados.) Para este conjunto de tutoriais, você criará um banco de dados que tem apenas uma tabela — Filmes.

Abra o WebMatrix se você ainda não fez isso e abra o site WebPagesMovies que você criou no tutorial anterior.

No painel esquerdo, clique no workspace Banco de dados.

A faixa de opções é alterada para mostrar tarefas relacionadas ao banco de dados. Na faixa de opções, clique em Novo Banco de Dados.

O WebMatrix cria um banco de dados ce SQL Server (um arquivo .sdf) que tem o mesmo nome do seu site — WebPagesMovies.sdf. (Você não fará isso aqui, mas pode renomear o arquivo para o que quiser, desde que ele tenha uma extensão .sdf .)

Criando uma tabela

Na faixa de opções, clique em Nova Tabela. O WebMatrix abre o designer de tabela em uma nova guia. (Se a opção Nova Tabela não estiver disponível, verifique se o novo banco de dados está selecionado no modo de exibição de árvore à esquerda.)

Na caixa de texto na parte superior (onde a marca d'água diz "Inserir nome da tabela"), insira "Filmes".

O painel abaixo do nome da tabela é onde você define colunas individuais. Para a tabela Filmes neste tutorial, você criará apenas algumas colunas: ID, Título, Gênero e Ano.

Na caixa Nome , insira "ID". Inserir um valor aqui ativa todos os controles da nova coluna.

Tab até a lista Tipo de Dados e escolha int. Esse valor especifica que a coluna ID conterá dados inteiros (número).

Observação

Não o chamaremos mais aqui (muito), mas você pode usar gestos padrão de teclado do Windows para navegar nessa grade. Por exemplo, você pode tab entre campos, basta começar a digitar para selecionar um item em uma lista e assim por diante.

Pressione Tab após a caixa Valor Padrão (ou seja, deixe-a em branco). Tab até a caixa Marcar é chave primária e selecione-a. Essa opção informa ao banco de dados que a coluna ID conterá os dados que identificam linhas individuais. (Ou seja, cada linha terá um valor exclusivo na coluna ID que você pode usar para localizar essa linha.)

Escolha a opção É Identidade . Essa opção informa ao banco de dados que ele deve gerar automaticamente o próximo número sequencial para cada nova linha. (A opção Is Identity só funcionará se você também tiver selecionado a opção É Chave Primária .)

Clique na próxima linha de grade ou pressione Tab duas vezes para concluir a linha atual. Qualquer gesto salva a linha atual e inicia a próxima. Observe que a coluna Valor Padrão agora diz Null. (Null é o valor padrão para o valor padrão, por assim dizer.)

Quando você terminar de definir a nova coluna de ID , o designer terá esta ilustração:

Para criar a próxima coluna, clique na caixa na coluna Nome . Insira "Título" para a coluna e selecione nvarchar para o valor Tipo de Dados . A parte "var" de nvarchar informa ao banco de dados que os dados dessa coluna serão uma cadeia de caracteres cujo tamanho pode variar de registro para registro. (O prefixo "n" representa "nacional", o que indica que o campo pode conter dados de caracteres para qualquer alfabeto ou sistema de gravação , ou seja, o campo contém dados Unicode.)

Quando você escolhe nvarchar, outra caixa é exibida onde você pode inserir o comprimento máximo para o campo. Insira 50, sob a suposição de que nenhum título de filme com o qual você trabalhará neste tutorial terá mais de 50 caracteres.

Ignore Valor Padrão e desmarque a opção Permitir Nulos . Você não quer que o banco de dados permita que nenhum filme seja inserido no banco de dados que não tenha um título.

Quando terminar e passar para a próxima linha, o designer terá esta ilustração:

Repita essas etapas para criar uma coluna chamada "Gênero", exceto pelo comprimento, defina-a como apenas 30.

Crie outra coluna chamada "Year". Para o tipo de dados, escolha nchar (não nvarchar) e defina o comprimento como 4. Para o ano, você usará um número de 4 dígitos, como "1995" ou "2010", para não exigir uma coluna de tamanho variável.

Veja como é a aparência do design concluído:

Pressione Ctrl+S ou clique no botão Salvar na barra de ferramentas de Acesso Rápido. Feche o designer de banco de dados fechando a guia.

Adicionando alguns dados de exemplo

Posteriormente nesta série de tutoriais, você criará uma página na qual poderá inserir novos filmes em um formulário. Por enquanto, no entanto, você pode adicionar alguns dados de exemplo que podem ser exibidos em uma página.

No workspace Banco de Dados no WebMatrix, observe que há uma árvore que mostra o arquivo .sdf que você criou anteriormente. Abra o nó do novo arquivo .sdf e abra o nó Tabelas .

Clique com o botão direito do mouse no nó Filmes e escolha Dados. O WebMatrix abre uma grade em que você pode inserir dados para a tabela Filmes :

Clique na coluna Título e insira "Quando Harry Conheceu Sally". Vá para a coluna Gênero (você pode usar a tecla Tab) e insira "Comédia Romântica". Vá para a coluna Ano e insira "1989":

Pressione Enter e WebMatrix salva o novo filme. Observe que a coluna ID foi preenchida.

Insira outro filme (por exemplo, "Gone with the Wind", "Drama", "1939"). A coluna ID é preenchida novamente:

Insira um terceiro filme (por exemplo, "Caça-Fantasmas", "Comédia"). Como um experimento, deixe a coluna Ano em branco e pressione Enter. Como você desmarcada a opção Permitir Nulos , o banco de dados mostra um erro:

Clique em OK para voltar e corrigir a entrada (o ano de "Caça-Fantasmas" é 1984) e pressione Enter.

Preencha vários filmes até ter 8 ou mais. (Inserir 8 facilita o trabalho com paginação posteriormente. Mas se isso for demais, insira apenas alguns por enquanto.) Os dados reais não importam.

Se você inseriu todos os filmes sem erros, os valores de ID serão sequenciais. Se você tentou salvar um registro de filme incompleto, os números de ID podem não ser sequenciais. Se sim, tudo bem. Os números não têm nenhum significado inerente, e a única coisa que é importante é que eles são exclusivos na tabela Filmes .

Feche a guia que contém o designer de banco de dados.

Agora você pode se voltar para exibir esses dados em uma página da Web.

Exibindo dados em uma página usando o Auxiliar do WebGrid

Para exibir dados em uma página, você usará o WebGrid auxiliar. Esse auxiliar produz uma exibição em uma grade ou tabela (linhas e colunas). Como você verá, você poderá refinar a grade com formatação e outros recursos.

Para executar a grade, você precisará escrever algumas linhas de código. Essas poucas linhas servirão como uma espécie de padrão para quase todo o acesso a dados que você faz neste tutorial.

Observação

Na verdade, você tem muitas opções para exibir dados em uma página; o WebGrid auxiliar é apenas um. Escolhemos para este tutorial porque é a maneira mais fácil de exibir dados e porque ele é razoavelmente flexível. No próximo conjunto de tutoriais, você verá como usar uma maneira mais "manual" de trabalhar com dados na página, o que fornece controle mais direto sobre como exibir os dados.

No painel esquerdo no WebMatrix, clique no workspace Arquivos .

O novo banco de dados criado está na pasta App_Data . Se a pasta ainda não existia, o WebMatrix a criou para seu novo banco de dados. (A pasta poderia ter existido se você já tivesse instalado auxiliares.)

No modo de exibição de árvore, selecione a raiz do site. Você deve selecionar a raiz do site; caso contrário, o novo arquivo poderá ser adicionado à pasta App_Data.

Na faixa de opções, clique em Novo. Na caixa Escolher um Tipo de Arquivo , escolha CSHTML.

Na caixa Nome , nomeie a nova página "Movies.cshtml":

Clique no botão OK. O WebMatrix abre um novo arquivo com alguns elementos de esqueleto nele. Primeiro, você escreverá um código para obter os dados do banco de dados. Em seguida, você adicionará a marcação à página para realmente exibir os dados.

Escrevendo o código de consulta de dados

Na parte superior da página, entre os @{ caracteres e } , insira o código a seguir. (Insira esse código entre as chaves de abertura e fechamento.)

var db = Database.Open("WebPagesMovies");
var selectedData = db.Query("SELECT * FROM Movies");
var grid = new WebGrid(source: selectedData);

A primeira linha abre o banco de dados que você criou anteriormente, que é sempre a primeira etapa antes de fazer algo com o banco de dados. Você informa o Database.Open nome do método do banco de dados para abrir. Observe que você não inclui .sdf no nome. O Open método pressupõe que está procurando um arquivo .sdf (ou seja, WebPagesMovies.sdf) e que o arquivo .sdf está na pasta App_Data . (Anteriormente, observamos que a pasta App_Data é reservada; esse cenário é um dos locais em que ASP.NET faz suposições sobre esse nome.)

Quando o banco de dados é aberto, uma referência a ele é colocada na variável chamada db. (Que pode ser nomeado qualquer coisa.) A db variável é como você vai acabar interagindo com o banco de dados.

A segunda linha realmente busca os dados do banco de dados usando o Query método . Observe como esse código funciona: a db variável tem uma referência ao banco de dados aberto e você invoca o Query método usando a db variável (db.Query).

A consulta em si é uma instrução SQL Select . (Para obter um pouco de informações sobre o SQL, consulte a explicação mais tarde.) Na instrução , Movies identifica a tabela a ser consultada. O * caractere especifica que a consulta deve retornar todas as colunas da tabela. (Você também pode listar colunas individualmente, separadas por vírgulas.)

Os resultados da consulta, se houver, são retornados e disponibilizados na selectedData variável. Novamente, a variável pode ser nomeada qualquer coisa.

Por fim, a terceira linha informa ASP.NET que você deseja usar uma instância do WebGrid auxiliar. Você cria (instancia) o objeto auxiliar usando o new palavra-chave e passa os resultados da consulta por meio da selectedData variável. O novo WebGrid objeto, juntamente com os resultados da consulta de banco de dados, são disponibilizados na grid variável . Você precisará desse resultado em um momento para realmente exibir os dados na página.

Nesta fase, o banco de dados foi aberto, você obteve os dados desejados e preparou o WebGrid auxiliar com esses dados. Em seguida, é criar a marcação na página.

Dica

Linguagem SQL

SQL é uma linguagem usada na maioria dos bancos de dados relacionais para gerenciar dados em um banco de dados. Ele inclui comandos que permitem recuperar dados e atualizá-los e que permitem criar, modificar e gerenciar dados em tabelas de banco de dados. O SQL é diferente de uma linguagem de programação (como C#). Com o SQL, você informa ao banco de dados o que deseja e é trabalho do banco de dados descobrir como obter os dados ou executar a tarefa. Aqui estão exemplos de alguns comandos SQL e o que eles fazem:

Select * From Movies

SELECT ID, Name, Price FROM Product WHERE Price > 10.00 ORDER BY Name

A primeira Select instrução obtém todas as colunas (especificadas por *) da tabela Filmes .

A segunda Select instrução busca as colunas ID, Nome e Preço de registros na tabela Produto cujo valor de coluna Preço é superior a 10. O comando retorna os resultados em ordem alfabética com base nos valores da coluna Nome. Se nenhum registro corresponder aos critérios de preço, o comando retornará um conjunto vazio.

INSERT INTO Product (Name, Description, Price) VALUES ('Croissant', 'A flaky delight', 1.99)

Esse comando insere um novo registro na tabela Produto , definindo a coluna Nome como "Croissant", a coluna Descrição como "Uma delícia esfarrapada" e o preço como 1,99.

Observe que quando você está especificando um valor não numérico, o valor é colocado entre aspas simples (não aspas duplas, como em C#). Você usa essas aspas em torno de valores de texto ou data, mas não em relação a números.

DELETE FROM Product WHERE ExpirationDate < '01/01/2008'

Esse comando exclui registros na tabela Produto cuja coluna de data de validade é anterior a 1º de janeiro de 2008. (O comando pressupõe que a tabela Product tenha essa coluna, é claro.) A data é inserida aqui no formato MM/DD/YYYY, mas deve ser inserida no formato usado para sua localidade.

Os Insert comandos e Delete não retornam conjuntos de resultados. Em vez disso, eles retornam um número que informa quantos registros foram afetados pelo comando.

Para algumas dessas operações (como inserir e excluir registros), o processo que está solicitando a operação precisa ter permissões apropriadas no banco de dados. É por isso que, para bancos de dados de produção, geralmente você precisa fornecer um nome de usuário e uma senha ao se conectar ao banco de dados.

Há dezenas de comandos SQL, mas todos eles seguem um padrão como os comandos que você vê aqui. Você pode usar comandos SQL para criar tabelas de banco de dados, contar o número de registros em uma tabela, calcular preços e executar muitas outras operações.

Adicionando marcação para exibir os dados

Dentro do <head> elemento , defina o conteúdo do <title> elemento como "Filmes":

<head>
    <meta charset="utf-8" />
    <title>Movies</title>
</head>

Dentro do <body> elemento da página, adicione o seguinte:

<h1>Movies</h1>
<div>
    @grid.GetHtml()
</div>

É isso. A grid variável é o valor que você criou quando criou o WebGrid objeto no código anteriormente.

No modo de exibição de árvore WebMatrix, clique com o botão direito do mouse na página e selecione Iniciar no navegador. Você verá algo parecido com esta página:

Clique em um link de título de coluna para classificar por essa coluna. Ser capaz de classificar clicando em um título é um recurso integrado ao auxiliar do WebGrid .

O GetHtml método, como o nome sugere, gera marcação que exibe os dados. Por padrão, o GetHtml método gera um elemento HTML <table> . (Se desejar, você pode verificar a renderização examinando a origem da página no navegador.)

Modificando a aparência da grade

Usar o WebGrid auxiliar como você acabou de fazer é fácil, mas a exibição resultante é simples. O WebGrid auxiliar tem todos os tipos de opções que permitem controlar como os dados são exibidos. Há muitos para explorar neste tutorial, mas esta seção lhe dará uma ideia de algumas dessas opções. Algumas opções adicionais serão abordadas em tutoriais posteriores nesta série.

Especificando colunas individuais a serem exibidas

Para começar, você pode especificar que deseja exibir apenas determinadas colunas. Por padrão, como você viu, a grade mostra todas as quatro colunas da tabela Filmes .

No arquivo Movies.cshtml , substitua a @grid.GetHtml() marcação que você acabou de adicionar pelo seguinte:

@grid.GetHtml(
    columns: grid.Columns(
        grid.Column("Title"),
        grid.Column("Genre"),
        grid.Column("Year")
    )
)

Para informar ao auxiliar quais colunas exibir, inclua um columns parâmetro para o GetHtml método e passe uma coleção de colunas. Na coleção, especifique cada coluna a ser incluída. Especifique uma coluna individual a ser exibida incluindo um grid.Column objeto e passe o nome da coluna de dados desejada. (Essas colunas devem ser incluídas nos resultados da consulta SQL — o WebGrid auxiliar não pode exibir colunas que não foram retornadas pela consulta.)

Inicie a página Movies.cshtml no navegador novamente e, desta vez, você receberá uma exibição como a seguinte (observe que nenhuma coluna de ID é exibida):

Alterando a aparência da grade

Há mais algumas opções para exibir colunas, algumas das quais serão exploradas em tutoriais posteriores neste conjunto. Por enquanto, esta seção apresentará as maneiras pelas quais você pode definir o estilo da grade como um todo.

Dentro da <head> seção da página, logo antes da marca de fechamento </head> , adicione o seguinte <style> elemento:

<style type="text/css">
  .grid { margin: 4px; border-collapse: collapse; width: 600px; }
  .grid th, .grid td { border: 1px solid #C0C0C0; padding: 5px; }
  .head { background-color: #E8E8E8; font-weight: bold; color: #FFF; }
  .alt { background-color: #E8E8E8; color: #000; }
</style>

Essa marcação CSS define classes chamadas grid, heade assim por diante. Você também pode colocar essas definições de estilo em um arquivo .css separado e vinculá-las à página. (Na verdade, você fará isso mais adiante neste conjunto de tutoriais.) Mas, para facilitar as coisas para este tutorial, elas estão dentro da mesma página que exibe os dados.

Agora você pode obter o WebGrid auxiliar para usar essas classes de estilo. O auxiliar tem várias propriedades (por exemplo, tableStyle) apenas para essa finalidade– você atribui um nome de classe de estilo CSS a elas e esse nome de classe é renderizado como parte da marcação renderizada pelo auxiliar.

Altere a grid.GetHtml marcação para que ela agora se pareça com este código:

@grid.GetHtml(
    tableStyle: "grid",
    headerStyle: "head",
    alternatingRowStyle: "alt",
    columns: grid.Columns(
        grid.Column("Title"),
        grid.Column("Genre"),
        grid.Column("Year")
    )
)

As novidades aqui são que você adicionou tableStyleos parâmetros , headerStylee alternatingRowStyle ao GetHtml método . Esses parâmetros foram definidos para os nomes dos estilos CSS que você adicionou há um momento.

Execute a página e, desta vez, você verá uma grade que parece muito menos simples do que antes:

Para ver o que o GetHtml método gerou, você pode examinar a origem da página no navegador. Não entraremos em detalhes aqui, mas o ponto importante é que, especificando parâmetros como tableStyle, você fez com que a grade gerasse marcas HTML como a seguinte:

<table class="grid">

A <table> marca teve um class atributo adicionado a ele que faz referência a uma das regras CSS que você adicionou anteriormente. Esse código mostra o padrão básico – parâmetros diferentes para o GetHtml método permitem referenciar classes CSS que o método gera junto com a marcação . O que você faz com as classes CSS cabe a você.

Adicionando paginação

Como a última tarefa deste tutorial, você adicionará paginação à grade. No momento, não há problema em exibir todos os seus filmes de uma só vez. Mas se você adicionasse centenas de filmes, a exibição da página ficaria longa.

No código da página, altere a linha que cria o WebGrid objeto para o seguinte código:

var grid = new WebGrid(source: selectedData, rowsPerPage: 3);

A única diferença de antes é que você adicionou um rowsPerPage parâmetro definido como 3.

Execute a página. A grade exibe três linhas por vez, além de links de navegação que permitem percorrer os filmes em seu banco de dados:

Próximo passo a seguir

No próximo tutorial, você aprenderá a usar o código Razor e C# para obter a entrada do usuário em um formulário. Você adicionará uma caixa de pesquisa à página Filmes para que possa encontrar filmes por título ou gênero.

Página Lista completa para filmes

@{
    var db = Database.Open("WebPagesMovies");
    var selectedData = db.Query("SELECT * FROM Movies");
    var grid = new WebGrid(source: selectedData, rowsPerPage: 3);
}

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Movies</title>
        <style type="text/css">
          .grid { margin: 4px; border-collapse: collapse; width: 600px; }
          .grid th, .grid td { border: 1px solid #C0C0C0; padding: 5px; }
          .head { background-color: #E8E8E8; font-weight: bold; color: #FFF; }
          .alt { background-color: #E8E8E8; color: #000; }
        </style>
    </head>
    <body>
        <h1>Movies</h1>
        <div>
            @grid.GetHtml(
                tableStyle: "grid",
                headerStyle: "head",
                alternatingRowStyle: "alt",
                columns: grid.Columns(
                    grid.Column("Title"),
                    grid.Column("Genre"),
                    grid.Column("Year")
                )
            )
        </div>
    </body>
</html>

Recursos adicionais

• Introdução a O ASP.NET que programa usando a sintaxe razor

AnteriorAvançar