Introdução com ASP.NET

por Tom FitzMacken

Para o desenvolvimento de novos aplicativos Web, recomendamos o Razor Pages. Para obter mais informações, consulte Introdução ao Razor Pages.

Observação

O WebMatrix não é mais recomendado como um ambiente de desenvolvimento integrado para Páginas da Web do ASP.NET. Use o Visual Studio ou Visual Studio Code.

Essa orientação e o aplicativo fornecem uma visão geral do Páginas da Web do ASP.NET (versão 2 ou posterior) e da sintaxe Razor, uma estrutura leve para criar sites dinâmicos. Ele também apresenta o WebMatrix, uma ferramenta para criar páginas e sites.

Nível: novo para Páginas da Web do ASP.NET.
Habilidades assumidas: HTML, CSS (folhas de estilos em cascata) básicas.

O que você aprenderá no primeiro tutorial do conjunto:

• O que Páginas da Web do ASP.NET tecnologia é e para que serve.
• O que é o WebMatrix.
• Como instalar tudo.
• Como criar um site usando o WebMatrix.

Recursos/tecnologias discutidos:

• Microsoft Web Platform Installer.
• Webmatrix.
• Páginas .cshtml

Mike Pope escreveu originalmente este tutorial. Tom FitzMacken atualizou para o Microsoft WebMatrix 3.

Versões de software usadas no tutorial

• Páginas da Web do ASP.NET (Razor) 2
• WebMatrix 3

O que você deve saber?

Estamos supondo que você esteja familiarizado com:

• HTML. Nenhuma experiência aprofundada é necessária. Não explicaremos HTML, mas também não usamos nada complexo. Forneceremos links para tutoriais HTML em que achamos que eles são úteis.
• Folhas de estilos em cascata (CSS). O mesmo que com HTML.
• Ideias básicas do banco de dados. Se você usou uma planilha para dados e classificou e filtrou os dados, esse é o nível de experiência que geralmente estamos assumindo para este conjunto de tutoriais.

Também estamos supondo que você esteja interessado em aprender programação básica. Páginas da Web do ASP.NET usar uma linguagem de programação chamada C#. Você não precisa ter nenhuma experiência em programação, apenas um interesse nele. Se você já escreveu qualquer JavaScript em uma página da Web antes, você tem muitos planos de fundo.

Observe que, se você estiver familiarizado com a programação, poderá descobrir que este conjunto de tutoriais se move inicialmente lentamente enquanto atualizamos novos programadores. No entanto, à medida que passarmos pelos primeiros tutoriais, haverá menos programação básica para explicar e as coisas serão movidas em um clipe mais rápido.

O que você precisa?

Você precisará de:

• Um computador que está executando o Windows 8, Windows 7, Windows Server 2008 ou Windows Server 2012.
• Uma conexão de Internet dinâmica.
• Privilégios de administrador (necessários para o processo de instalação).

O que é Páginas da Web do ASP.NET?

Páginas da Web do ASP.NET é uma estrutura que você pode usar para criar páginas da Web dinâmicas. Uma página da Web HTML simples é estática; seu conteúdo é determinado pela marcação HTML fixa que está na página. Páginas dinâmicas como aquelas que você cria com Páginas da Web do ASP.NET permitem que você crie o conteúdo da página em tempo real, usando código.

As páginas dinâmicas permitem que você faça todo tipo de coisas. Você pode solicitar a entrada de um usuário usando um formulário e, em seguida, alterar o que a página exibe ou a aparência dele. Você pode obter informações de um usuário, salvá-la em um banco de dados e listá-la mais tarde. Você pode enviar emails do seu site. Você pode interagir com outros serviços na Web (por exemplo, um serviço de mapeamento) e produzir páginas que integram informações dessas fontes.

O que é o WebMatrix?

O WebMatrix é uma ferramenta que integra um editor de página da Web, um utilitário de banco de dados, um servidor Web para páginas de teste e recursos para publicar seu site na Internet. O WebMatrix é gratuito e é fácil de instalar e fácil de usar. (Ele também funciona apenas para páginas HTML simples, bem como para outras tecnologias como PHP.)

Na verdade, você não precisa usar o WebMatrix para trabalhar com Páginas da Web do ASP.NET. Você pode criar páginas usando um editor de texto, por exemplo, e páginas de teste usando um servidor Web ao qual você tem acesso. No entanto, o WebMatrix facilita tudo, portanto, esses tutoriais usarão o WebMatrix por toda parte.

Sobre estes tutoriais

Este conjunto de tutoriais é uma introdução a como usar Páginas da Web do ASP.NET. Há 9 tutoriais no total neste conjunto de tutoriais introdutórios. Faz parte de uma série de conjuntos de tutoriais que leva você de Páginas da Web do ASP.NET novato à criação de sites reais e profissionais.

Este primeiro conjunto de tutoriais se concentra em mostrar as noções básicas de como trabalhar com Páginas da Web do ASP.NET. Quando terminar, você poderá trabalhar com conjuntos de tutoriais adicionais que captam onde este termina e que exploram páginas da Web mais detalhadamente.

Nós deliberadamente vamos com calma nas explicações detalhadas. E sempre que mostramos algo, para este conjunto de tutoriais, sempre escolhemos a maneira que achamos mais fácil de entender. Os conjuntos de tutoriais posteriores entram em mais profundidade e mostram abordagens mais eficientes ou mais flexíveis (também mais divertidas). Mas esses tutoriais exigem que você entenda os conceitos básicos primeiro.

O conjunto de tutoriais que você acabou de começar aborda estes recursos do Páginas da Web do ASP.NET:

• Introdução e instalação de tudo. (Isso está no tutorial que você está lendo.)
• As noções básicas de programação Páginas da Web do ASP.NET.
• Criando um banco de dados.
• Criando e processando um formulário de entrada do usuário.
• Adicionar, atualizar e excluir dados no banco de dados.

O que você criará?

Este conjunto de tutoriais e os subsequentes giram em torno de um site em que você pode listar filmes que você gosta. Você poderá inserir filmes, editá-los e listá-los. Aqui estão algumas das páginas que você criará neste conjunto de tutoriais. A primeira mostra a página de listagem de filmes que você criará:

E aqui está a página que permite adicionar novas informações de filmes ao seu site:

Os conjuntos de tutoriais subsequentes se baseiam nesse conjunto e adicionam mais funcionalidades, como carregar imagens, permitir que as pessoas façam logon, enviar emails e integrar com as mídias sociais.

Confira este aplicativo em execução no Azure

Deseja ver o site concluído em execução como um aplicativo Web ativo? Você pode implantar uma versão completa do aplicativo em sua conta do Azure simplesmente clicando no botão a seguir.

Você precisa de uma conta do Azure para implantar essa solução no Azure. Se você ainda não tiver uma conta, terá as seguintes opções:

• Abra uma conta do Azure gratuitamente – você obtém créditos que pode usar para experimentar os serviços pagos do Azure e, mesmo depois de usá-los, você pode manter a conta e usar serviços gratuitos do Azure.
• Ativar os benefícios do assinante MSDN – sua assinatura do MSDN oferece créditos todos os meses que você pode usar para serviços pagos do Azure.

Instalando tudo

Você pode instalar tudo usando o Web Platform Installer da Microsoft. Na verdade, você instala o instalador e o usa para instalar todo o resto.

Para usar Páginas da Web, você precisa ter pelo menos o Windows XP com O SP3 instalado ou o Windows Server 2008 ou posterior.

Na página Páginas da Web do site do ASP.NET, clique em Instalar.

Você será solicitado a aceitar os termos de licença e a política de privacidade antes de instalar o WebMatrix.

Clique em Executar para iniciar a instalação. (Se você quiser salvar o instalador, clique em Salvar e execute o instalador na pasta em que você o salvou.)

O Web Platform Installer é exibido, pronto para instalar o WebMatrix. Clique em Instalar.

O processo de instalação descobre o que ele precisa instalar no computador e inicia o processo. Dependendo do que exatamente precisa ser instalado, o processo pode levar de alguns minutos a vários minutos. Selecione Aceito para aceitar os termos de licença.

Olá, WebMatrix

Quando terminar, o processo de instalação poderá iniciar o WebMatrix automaticamente. Caso contrário, no Windows, no menu Iniciar, inicie o Microsoft WebMatrix.

Ao iniciar o WebMatrix pela primeira vez, você tem a chance de entrar no Microsoft Azure com sua conta Microsoft. Ao entrar, você receberá 10 aplicativos Web gratuitos por meio do Azure. Esses aplicativos Web gratuitos fornecem uma maneira conveniente de testar seus aplicativos. Se você ainda não tiver uma conta do Azure, mas tiver uma assinatura do MSDN, poderá ativar os benefícios da assinatura do MSDN. Caso contrário, você pode criar uma conta de avaliação gratuita em apenas alguns minutos. Para obter detalhes, consulte Avaliação gratuita do Azure.

Você não precisa entrar no momento para continuar com este tutorial. Se você não entrar agora, ainda terá a opção de entrar mais tarde. O último tópico desta série de tutoriais aborda como implantar seu site no Azure; portanto, você precisaria entrar para concluir esse tópico.

Neste ponto, entre com sua conta Microsoft ou selecione Não Agora no canto inferior direito.

Para começar, você criará um site em branco e adicionará uma página. Em um tutorial posterior neste conjunto, você jogará com um dos modelos de site internos.

Na janela inicial, clique em Novo.

Os modelos são arquivos e páginas predefinidos para diferentes tipos de sites. Para ver todos os modelos disponíveis por padrão, selecione a opção Galeria de Modelos.

Na janela Início Rápido , selecione Site Vazio no grupo ASP.NET e nomeie o novo site como "WebPagesMovies".

Clique em Próximo.

Se você tiver se conectado à sua conta Microsoft, terá a oportunidade de criar o site no Azure. Com base no nome do seu site, o nome padrão de WebPagesMovies.azurewebsites.net é sugerido; no entanto, o ponto de exclamação indica que esse nome não está disponível no Windows Azure. Para simplificar, selecione Ignorar para ignorar a criação do site no Azure no momento. Posteriormente nesta série, publicaremos o site no Azure.

O WebMatrix cria e abre o site:

Na parte superior, há uma Barra de Ferramentas de Acesso Rápido e uma faixa de opções. Na parte inferior esquerda, você verá o seletor de workspace em que alterna entre tarefas (Site, Arquivos, Bancos de Dados, Relatórios). À direita está o painel de conteúdo para o editor e para relatórios. E, na parte inferior, ocasionalmente, você verá uma barra de notificação para mensagens.

Você aprenderá mais sobre o WebMatrix e seus recursos à medida que passar por esses tutoriais.

Criar uma página da Web

Para se familiarizar com o WebMatrix e Páginas da Web do ASP.NET, você criará uma página simples.

No seletor de workspace, selecione o workspace Arquivos . Esse workspace permite que você trabalhe com arquivos e pastas. O painel esquerdo mostra a estrutura de arquivos do seu site. A faixa de opções é alterada para mostrar tarefas relacionadas ao arquivo.

Na faixa de opções, clique na seta em Novo e, em seguida, clique em Novo Arquivo.

O WebMatrix exibe uma lista de tipos de arquivo. Selecione CSHTML e, na caixa Nome , digite "HelloWorld". Uma página CSHTML é uma página Páginas da Web do ASP.NET.

Clique em OK.

O WebMatrix cria a página e a abre no editor.

Como você pode ver, a página contém principalmente marcação HTML comum, exceto por um bloco na parte superior que tenha esta aparência:

@{ 

}

Isso é para adicionar código, como você verá em breve.

Observe que as diferentes partes da página — os nomes dos elementos, os atributos e o texto, além do bloco na parte superior — estão todas em cores diferentes. Isso é chamado de realce de sintaxe e facilita a limpeza de tudo. É um dos recursos que facilita o trabalho com páginas da Web no WebMatrix.

Adicione conteúdo para os <head> elementos e <body> como no exemplo a seguir. (Se desejar, basta copiar o bloco a seguir e substituir toda a página existente por esse código.)

@{

}

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Hello World Page</title>
    </head>
    <body>
        <h1>Hello World Page</h1>
        <p>Hello World!</p>
    </body>
</html>

Na Barra de Ferramentas de Acesso Rápido ou no menu Arquivo , clique em Salvar.

Testando a página

No workspace Arquivos , clique com o botão direito do mouse na página HelloWorld.cshtml e clique em Iniciar no navegador.

O WebMatrix inicia um servidor Web interno (IIS Express) que você pode usar para testar páginas em seu computador. (Sem IIS Express no WebMatrix, você teria que publicar sua página em um servidor Web em algum lugar antes de testá-la.) A página é exibida no navegador padrão.

Observe que quando você testa uma página no WebMatrix, a URL no navegador é algo como http://localhost:33651/HelloWorld.cshtml. O nome localhost se refere a um servidor local, o que significa que a página é atendida por um servidor Web que está em seu próprio computador. Conforme observado, o WebMatrix inclui um programa de servidor Web chamado IIS Express que é executado quando você inicia uma página.

O número após localhost (por exemplo, localhost:33651) refere-se a um número de porta em seu computador. Esse é o número do "canal" que IIS Express usa para este site específico. O número da porta é selecionado aleatoriamente do intervalo de 1024 a 65536 quando você cria seu site e é diferente para cada site criado. (Quando você testa seu próprio site, o número da porta certamente será um número diferente de 33561.) Usando uma porta diferente para cada site, IIS Express pode manter diretamente com qual dos seus sites ele está conversando.

Posteriormente, ao publicar seu site em um servidor Web público, você não verá mais localhost na URL. Nesse ponto, você verá uma URL mais típica como http://myhostingsite/mywebsite/HelloWorld.cshtml ou qualquer que seja a página. Você aprenderá mais sobre como publicar um site mais adiante nesta série de tutoriais.

Adicionando algum código de Server-Side

Feche o navegador e volte para a página no WebMatrix.

Adicione uma linha ao bloco de código para que ele se pareça com o seguinte código:

@{
   var currentDateTime = DateTime.Now;
}

Isso é um pouco de código Razor. Provavelmente, fica claro que ele obtém a data e a hora atuais e coloca esse valor em uma variável chamada currentDateTime. Você lerá mais sobre a sintaxe razor no próximo tutorial.

No corpo da página, após o <p>Hello World!</p> elemento , adicione o seguinte:

<p>Right now it's @currentDateTime</p>

Esse código obtém o valor que você coloca currentDateTime na variável na parte superior e o insere na marcação da página. O @ caractere marca o código Páginas da Web do ASP.NET na página.

Execute a página novamente (o WebMatrix salva as alterações para você antes de executar a página). Desta vez, você verá a data e a hora na página.

Aguarde alguns instantes e atualize a página no navegador. A exibição de data e hora é atualizada.

No navegador, examine a origem da página. Ela se parece com a seguinte marcação:

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Hello World Page</title>
    </head>
    <body>
        <h1>Hello World Page</h1>
        <p>Hello World!</p>
        <p>Right now it's 1/18/2012 2:49:50 PM</p>
    </body>
</html>

Observe que o @{ } bloco na parte superior não está lá. Observe também que a exibição de data e hora mostra uma cadeia de caracteres real (1/18/2012 2:49:50 PM ou qualquer outra coisa), não @currentDateTime como você tinha na página .cshtml . O que aconteceu aqui é que, quando você executou a página, ASP.NET processou todo o código (muito pouco neste caso) que foi marcado com @. O código produz a saída e essa saída foi inserida na página.

É disso que se trata Páginas da Web do ASP.NET

Quando você lê esse Páginas da Web do ASP.NET produz conteúdo dinâmico da Web, o que você viu aqui é a ideia. A página que você acabou de criar contém a mesma marcação HTML que você já viu antes. Ele também pode conter código que pode executar todos os tipos de tarefas. Neste exemplo, ele fez a tarefa trivial de obter a data e a hora atuais. Como você viu, você pode intercalar o código com o HTML para produzir a saída na página. Quando alguém solicita uma página .cshtml no navegador, ASP.NET processa a página enquanto ela ainda está nas mãos do servidor Web. ASP.NET insere a saída do código (se houver) na página como HTML. Quando o processamento de código é feito, ASP.NET envia a página resultante para o navegador. Tudo o que o navegador obtém é HTML. Aqui está um diagrama:

A ideia é simples, mas há muitas tarefas interessantes que o código pode executar e há muitas maneiras interessantes de adicionar conteúdo HTML dinamicamente à página. E ASP.NET páginas .cshtml , como qualquer página HTML, também pode incluir código executado no próprio navegador (código JavaScript e jQuery). Você explorará todas essas coisas neste conjunto de tutoriais e nas seguintes.

Próximo

No próximo tutorial desta série, você explorará Páginas da Web do ASP.NET programação um pouco mais.

Recursos adicionais

Crie um site ASP.NET do zero. Este é um tutorial especificamente sobre como usar o WebMatrix (não Páginas da Web do ASP.NET). Ele entra em um pouco mais de detalhes sobre alguns dos recursos adicionais do WebMatrix que não abordaremos neste conjunto de tutoriais.

Próximo