Programação de Páginas Web ASP.NET (Razor) com o Visual Studio

por Tom FitzMacken

Este artigo explica como pode usar o Visual Studio ou o Visual Web Developer Express para programar websites ASP.NET Web Pages (Razor).

O que você vai aprender

• O que precisas de instalar (se necessário) para trabalhar com ASP.NET Web Pages na tua versão do Visual Studio.
• Como adicionar suporte para ASP.NET Páginas Web ao Visual Web Developer 2010 Express.
• Como usar funcionalidades do Visual Studio para trabalhar com páginas Razor do ASP.NET, incluindo o IntelliSense e o depurador.

Versões de software usadas no tutorial

• ASP.NET Páginas Web (Razor) 3
• Visual Studio 2013
• WebMatrix 3

Este tutorial também funciona com ASP.NET Web Pages 2, Visual Studio 2012, Visual Studio 2010 e WebMatrix 2.

Pode programar ASP.NET páginas Web com sintaxe Razor usando WebMatrix ou muitos outros editores de código. Também pode usar o Microsoft Visual Studio, que é um ambiente de desenvolvimento integrado (IDE) completo que fornece um conjunto poderoso de ferramentas para criar muitos tipos de aplicações (não apenas websites). Para trabalhar com páginas Razor do ASP.NET, pode usar Visual Studio 2017.

Duas funcionalidades particularmente úteis que o Visual Studio oferece para programação com páginas web ASP.NET Razor são:

• IntelliSense. A funcionalidade IntelliSense incorporada no Visual Studio é mais abrangente do que a IntelliSense no WebMatrix.
• Depurador. O depurador permite-lhe diagnosticar o seu código parando um programa enquanto está a correr, examinando variáveis e percorrendo o código linha a linha.

Usar o Visual Studio com Diferentes Versões de Páginas Web ASP.NET

Para desenvolver ASP.NET aplicações web no Visual Studio 2017, instale o ASP.NET e a carga de trabalho de desenvolvimento web .

O Visual Studio 2012 e o Visual Studio 2013 incluem suporte para ASP.NET Web Pages. (Os pacotes necessários para suportar ASP.NET Páginas Web são instalados quando instala o Visual Studio.)

O Visual Studio 2010 não inclui suporte por padrão para ASP.NET Web Pages. Para usar ASP.NET Web Pages com o Visual Studio 2010, deve instalar o pacote ASP.NET MVC. Para obter ASP.NET Web Pages 2, instala-se ASP.NET MVC 4.

A tabela seguinte resume o suporte para ASP.NET Web Pages em diferentes versões do Visual Studio.

Para trabalhar com o Visual Studio 2010, consulte Instalação de Suporte para Páginas Web ASP.NET no Visual Studio 2010.

Lançamento do Visual Studio a partir do WebMatrix

Se iniciou um projeto no WebMatrix e quer mudar para o Visual Studio, o WebMatrix disponibiliza um botão para abrir facilmente o projeto no Visual Studio. Tens de ter o Visual Studio instalado no teu computador para que este botão esteja ativado. A imagem seguinte mostra o botão no WebMatrix.

Quando clica no botão, o projeto é aberto no Visual Studio. Pode alternar entre WebMatrix e Visual Studio sem problemas. Serás notificado se algum ficheiro tiver sido alterado no outro ambiente e precisar de ser recarregado para obter as alterações mais recentes.

Criar ASP.NET site Razor no Visual Studio

Para criar um site ASP.NET Razor no Visual Studio:

1. Abre o Visual Studio.

2. No menu Ficheiro , clique em Novo Site.

   

3. Na caixa de diálogo do Novo Site , selecione a linguagem a usar (Visual C# ou Visual Basic).

4. Selecione o modelo ASP.NET Site Web (Razor).

   

5. Clique em OK.

O seu novo projeto existe e está preenchido com algumas páginas web padrão para o ajudar a começar.

Utilização do IntelliSense

Agora que criou um site, pode ver como o IntelliSense funciona no Visual Studio.

1. No site que acabou de criar, abra a página Default.cshtml .

2. Depois das <h3> etiquetas na página, escreva @ServerInfo. (incluindo o ponto). Observa como o IntelliSense exibe os métodos disponíveis para o ServerInfo helper numa lista desdobrável.

   

3. Selecione o GetHtml método da lista e depois pressione Enter. O IntelliSense preenche automaticamente o método. (Como em qualquer método em C#, deve adicionar () caracteres após o método.) O código completo para o GetHtml método é o seguinte exemplo:

   @ServerInfo.GetHtml()
   

4. Pressione Ctrl+F5 para executar a página. É assim que a página aparece quando exibida num navegador:

   

5. Feche o navegador.

Usando o Depurador

1. No topo da página Default.cshtml , após a linha que começa por Page.Title, adicione a seguinte linha de código:

   var myTime = DateTime.Now.TimeOfDay;
   

2. Na margem cinzenta do editor à esquerda do código, clique ao lado desta nova linha para adicionar um ponto de interrupção. Um ponto de interrupção é um marcador que diz ao depurador para parar de executar o programa nesse ponto para que possa ver o que está a suceder.

   

3. Remova a chamada ao ServerInfo.GetHtml método e adicione uma chamada à @myTime variável no seu lugar. Esta chamada mostra o valor temporal atual que é devolvido pela nova linha de código.

4. Pressione F5 para executar a página no depurador. A página para no ponto de quebra que definiste. A imagem seguinte mostra como a página aparece no editor com o ponto de quebra (em amarelo).

   

5. Na barra de ferramentas Debug, clique no botão Entrar (ou pressione F11) para executar a próxima linha de código. Cada vez que clica neste botão, avança a execução para a linha seguinte de código.

   

6. Examine o valor da myTime variável mantendo o ponteiro do rato sobre ela ou inspecionando os valores apresentados nas janelas de Locais e Pilha de Chamadas . O Visual Studio mostra o valor da variável.

   

7. Quando terminares de examinar a variável e de avançar pelo código, carrega em F5 para continuares a correr a página sem parar em cada linha. Quando terminas de passar por todo o código, o navegador mostra a página.

Para saber mais sobre o depurador e sobre como depurar código no Visual Studio, consulte Guia: Depuração de Páginas Web no Visual Web Developer.

Usar o Razor em ASP.NET projetos MVC com Visual Studio

A sintaxe Razor é também amplamente utilizada em ASP.NET projetos MVC. O MVC é uma forma poderosa, baseada em padrões, de construir websites dinâmicos. Se o seu site ASP.NET Web Pages se tornar difícil de manter, poderá considerar convertê-lo para uma aplicação ASP.NET MVC. Para um exemplo de criação de uma aplicação MVC, veja Começar com ASP.NET MVC 5.

Instalação de Suporte para Páginas Web ASP.NET no Visual Studio 2010

Esta secção mostra como instalar o Visual Web Developer Express 2010 e as Ferramentas ASP.NET Web Pages para o Visual Studio.

1. Se ainda não tem o Web Platform Installer, descarregue-o a partir do seguinte URL:

   https://www.microsoft.com/web/downloads/platform.aspx

2. Executa o instalador da plataforma web.

3. Clique no separador 'Produtos'.

   

4. Pesquise ASP.NET MVC 4 (para ASP.NET Web Pages 2) e depois clique em "Adicionar". Estes produtos incluem ferramentas do Visual Studio para construir ASP.NET sites Razor.

   

5. Clique em Instalar para concluir a instalação.