Usando o Visual Studio 2013 para criar uma página de Web Forms do Basic ASP.NET 4.5

por Erik Reitan

Para o desenvolvimento de novos aplicativos Web, recomendamos o Blazor.

Este passo a passo fornece uma introdução ao ambiente de desenvolvimento da Web no Microsoft Visual Studio 2013 e no Microsoft Visual Studio Express 2013 para Web. Este passo a passo orienta você na criação de uma página simples ASP.NET Web Forms e ilustra as técnicas básicas de criação de uma nova página, adição de controles e escrita de código.

As tarefas ilustradas neste passo a passo incluem:

• Criando um projeto de aplicativo Web Forms do sistema de arquivos.
• Familiarizando-se com o Visual Studio.
• Criando uma página ASP.NET.
• Adicionando controles.
• Adicionando manipuladores de eventos.
• Executando e testando uma página do Visual Studio.

Pré-requisitos

Para concluir este passo a passo, você precisará de:

• Microsoft Visual Studio 2013 ou Microsoft Visual Studio Express 2013 para Web. O .NET Framework é instalado automaticamente.

  Observação

  O Microsoft Visual Studio 2013 e o Microsoft Visual Studio Express 2013 para Web geralmente serão chamados de Visual Studio ao longo desta série de tutoriais.

  Se você estiver usando o Visual Studio, este passo a passo pressupõe que você selecionou a coleção de configurações do Desenvolvimento Web na primeira vez que iniciou o Visual Studio. Para obter mais informações, consulte Como selecionar configurações do ambiente de desenvolvimento da Web.

Criando um projeto de aplicação Web e uma página

Nesta parte do passo a passo, você criará um projeto de aplicativo Web e adicionará uma nova página a ele. Você também adicionará texto HTML e executará a página em seu navegador.

Para criar um projeto de aplicação Web

1. Abra o Microsoft Visual Studio.

2. No menu Arquivo, selecione Novo Projeto.
   

   A caixa de diálogo Novo Projeto aparece.

3. Selecione o grupo Modelos ->Visual C# ->Modelos da Web à esquerda.

4. Selecione o modelo Aplicativo Web ASP.NET na coluna central.

5. Nomeie seu projeto como BasicWebApp e clique no botão OK.
   

6. Em seguida, selecione o modelo Web Forms e clique no botão OK para criar o projeto.
   

   O Visual Studio cria um novo projeto que inclui funcionalidade predefinida com base no modelo Web Forms. Ele não apenas fornece uma página Home.aspx , uma página About.aspx , uma página Contact.aspx , mas também inclui a funcionalidade de associação que registra usuários e salva suas credenciais para que eles possam fazer login em seu site. Quando uma nova página é criada, por padrão, o Visual Studio exibe a página no modo Código-fonte , onde você pode ver os elementos HTML da página. A ilustração a seguir mostra o que você veria no modo de exibição Código-fonte se criasse uma nova página da Web chamada BasicWebApp.aspx.
   

Um tour pelo ambiente de desenvolvimento da Web do Visual Studio

Antes de prosseguir modificando a página, é útil se familiarizar com o ambiente de desenvolvimento do Visual Studio. A ilustração a seguir mostra as janelas e as ferramentas disponíveis no Visual Studio e no Visual Studio Express para Web.

Observação

Este diagrama mostra janelas padrão e locais de janela. O menu Exibir permite exibir janelas adicionais e reorganizar e redimensionar as janelas de acordo com suas preferências. Se já tiverem sido feitas alterações na disposição das janelas, o que você verá não corresponderá à ilustração.

O ambiente do Visual Studio

Familiarize-se com o Web designer

Examine a ilustração acima e combine o texto com a lista a seguir, que descreve as janelas e ferramentas mais usadas. (Nem todas as janelas e ferramentas que você vê estão listadas aqui, apenas aquelas marcadas na ilustração anterior.)

• Barras de ferramentas. Forneça comandos para formatar texto, localizar texto e assim por diante. Algumas barras de ferramentas estão disponíveis somente quando você está trabalhando no modo Design .
• Janela do Gerenciador de Soluções. Exibe os arquivos e pastas em seu aplicativo Web.
• Janela do documento. Exibe os documentos em que você está trabalhando em janelas com guias. Você pode alternar entre documentos clicando em guias.
• Janela Propriedades . Permite alterar as configurações da página, elementos HTML, controles e outros objetos.
• Exibir guias. Apresentá-lo com diferentes modos de exibição do mesmo documento. O modo Design é uma superfície de edição quase WYSIWYG. A visualização do código-fonte é o editor HTML da página. O modo de exibição dividido exibe o modo Design e o modo de exibição Código-fonte do documento. Você trabalhará com as visualizações Design e Código-fonte posteriormente neste passo a passo. Se você preferir abrir páginas da Web no modo Design, no menu Ferramentas, clique em Opções, selecione o nó Designer HTML e altere a opção Páginas Iniciais em.
• Caixa de ferramentas. Fornece controles e elementos HTML que você pode arrastar para sua página. Os elementos da caixa de ferramentas são agrupados por função comum.
• Explorador de Sérver. Exibe conexões de banco de dados. Se o Gerenciador de Servidores não estiver visível, no menu Exibir, clique em Gerenciador de Servidores.

Criando uma nova página ASP.NET Web Forms

Quando você cria um novo aplicativo Web Forms usando o modelo de projeto ASP.NET Aplicativo Web, o Visual Studio adiciona uma página ASP.NET (página Web Forms) chamada Default.aspx, bem como vários outros arquivos e pastas. Você pode usar a página Default.aspx como a home page do seu aplicativo Web. No entanto, para este passo a passo, você criará e trabalhará com uma nova página.

Para adicionar uma página ao aplicativo Web

1. Feche a página Default.aspx . Para fazer isso, clique na guia que exibe o nome do arquivo e, em seguida, clique na opção fechar.
2. No Gerenciador de Soluções, clique com o botão direito do mouse no nome do aplicativo Web (neste tutorial, o nome do aplicativo é BasicWebSite) e clique em Adicionar ->Novo Item.
   A caixa de diálogo Adicionar novo item é exibida.
3. Selecione o grupo de modelos Visual C# ->Web à esquerda. Em seguida, selecione Formulário da Web na lista do meio e nomeie-o FirstWebPage.aspx.
   
4. Clique em Adicionar para adicionar a página da Web ao seu projeto.
   O Visual Studio cria a nova página e a abre.

Adicionando HTML à página

Nesta parte do passo a passo, você adicionará algum texto estático à página.

Para adicionar texto à página

1. Na parte inferior da janela do documento, clique na guia Design para alternar para o modo Design .

   O modo Design exibe a página atual de uma maneira semelhante a WYSIWYG. Neste ponto, você não tem nenhum texto ou controles na página, portanto, a página está em branco, exceto por uma linha tracejada que contorna um retângulo. Esse retângulo representa um elemento div na página.

2. Clique dentro do retângulo que é contornado por uma linha tracejada.

3. Digite Bem-vindo ao Visual Web Developer e pressione ENTER duas vezes.

   A ilustração a seguir mostra o texto digitado no modo Design .

   

4. Alterne para o modo de exibição Fonte .

   Você pode ver o HTML no modo Código-fonte que você criou quando digitou no modo Design .
   

Executando a página

Antes de continuar adicionando controles à página, você pode primeiro executá-la.

Para executar a página

1. No Gerenciador de Soluções, clique com o botão direito do mouse em FirstWebPage.aspx e selecione Definir como Página Inicial.

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

   A página é exibida no navegador. Embora a página que você criou tenha uma extensão de nome de arquivo de .aspx, ela atualmente é executada como qualquer página HTML.

   Para exibir uma página no navegador, você também pode clicar com o botão direito do mouse na página no Gerenciador de Soluções e selecionar Exibir no Navegador.

3. Feche o navegador para interromper o aplicativo Web.

Adicionando e programando controles

Agora você adicionará controles de servidor à página. Os controles de servidor, como botões, rótulos, caixas de texto e outros controles familiares, fornecem recursos típicos de processamento de formulários para suas páginas do Web Forms. No entanto, você pode programar os controles com código que é executado no servidor, em vez do cliente.

Você adicionará um controle Button , um controle TextBox e um controle Label à página e escreverá código para manipular o evento Click para o controle Button .

Para adicionar controles à página

1. Clique na guia Design para alternar para o modo Design .

2. Coloque o ponto de inserção no final do texto Bem-vindo ao Visual Web Developer e pressione ENTER cinco ou mais vezes para liberar espaço na caixa do elemento div .

3. Na Caixa de Ferramentas, expanda o grupo Padrão se ele ainda não estiver expandido.
   Observe que pode ser necessário expandir a janela da Caixa de Ferramentas à esquerda para visualizá-la.

4. Arraste um controle TextBox para a página e solte-o no meio da caixa do elemento div que tem Bem-vindo ao Visual Web Developer na primeira linha.

5. Arraste um controle Button para a página e solte-o à direita do controle TextBox .

6. Arraste um controle Label para a página e solte-o em uma linha separada abaixo do controle Button .

7. Coloque o ponto de inserção acima do controle TextBox e digite Digite seu nome: .

   Esse texto HTML estático é a legenda do controle TextBox . Você pode misturar HTML estático e controles de servidor na mesma página. A ilustração a seguir mostra como os três controles aparecem no modo Design .

   

Definindo propriedades de controle

O Visual Studio oferece várias maneiras de definir as propriedades dos controles na página. Nesta parte do passo a passo, você definirá propriedades no modo Design e no modo Código-fonte.

Para definir propriedades de controle

1. Primeiro, exiba as janelas Propriedades selecionando no menu Exibir ->Outras janelas ->Janela Propriedades. Como alternativa, você pode selecionar F4 para exibir a janela Propriedades .

2. Selecione o controle Botão e, na janela Propriedades, defina o valor de Texto como Nome de Exibição. O texto inserido aparece no botão no designer, conforme mostrado na ilustração a seguir.

   

3. Alterne para o modo de exibição Fonte .

   O modo de exibição de origem exibe o HTML da página, incluindo os elementos que o Visual Studio criou para os controles de servidor. Os controles são declarados usando sintaxe semelhante a HTML, exceto que as marcas usam o prefixo asp: e incluem o atributo runat="server".

   As propriedades de controle são declaradas como atributos. Por exemplo, quando você define a propriedade Text para o controle Button , na etapa 1, você estava realmente definindo o atributo Text na marcação do controle.

   Observação

   Todos os controles estão dentro de um elemento de formulário , que também possui o atributo runat="server". O atributo runat="server" e o prefixo asp: para marcas de controle marcam os controles para que eles sejam processados por ASP.NET no servidor quando a página for executada. O código fora dos elementos form runat="server"> e <script runat="server"> é enviado inalterado para o navegador, e é por isso que o código ASP.NET deve estar dentro de< um elemento cuja tag de abertura contém o atributo runat="server".

4. Em seguida, você adicionará uma propriedade adicional ao controle Label . Coloque o ponto de inserção diretamente após asp:Label na< marca asp:Label> e pressione SPACEBAR.

   É exibida uma lista suspensa que exibe a lista de propriedades disponíveis que você pode definir para um controle Label . Esse recurso, conhecido como IntelliSense, ajuda você no modo de exibição Código-fonte com a sintaxe de controles de servidor, elementos HTML e outros itens na página. A ilustração a seguir mostra a lista suspensa do IntelliSense para o controle Rótulo .

   

5. Selecione ForeColor e digite um sinal de igual.

   O IntelliSense exibe uma lista de cores.

   Observação

   Você pode exibir uma lista suspensa do IntelliSense a qualquer momento pressionando CTRL+J ao exibir o código.

6. Selecione uma cor para o texto do controle Label. Certifique-se de selecionar uma cor que seja escura o suficiente para ser lida contra um fundo branco.

   O atributo ForeColor é preenchido com a cor que você selecionou, incluindo as aspas de fechamento.

Programando o controle de botão

Para este passo a passo, você escreverá um código que lê o nome que o usuário insere na caixa de texto e, em seguida, exibe o nome no controle Label .

Adicionar um manipulador de eventos de botão padrão

1. Alterne para o modo Design .

2. Clique duas vezes no controle Button .

   Por padrão, o Visual Studio alterna para um arquivo code-behind e cria um manipulador de eventos esqueleto para o evento padrão do controle Button , o evento Click . O arquivo code-behind separa a marcação da interface do usuário (como HTML) do código do servidor (como C#).
   O cursor é posicionado para adicionar código para esse manipulador de eventos.

   Observação

   Clicar duas vezes em um controle no modo Design é apenas uma das várias maneiras de criar manipuladores de eventos.

3. Dentro do manipulador de eventos Button1_Click , digite Label1 seguido por um ponto (.).

   Quando você digita o ponto após a ID do rótulo (Label1), o Visual Studio exibe uma lista de membros disponíveis para o controle Label , conforme mostrado na ilustração a seguir. Um membro geralmente uma propriedade, método ou evento.

   

4. Conclua o manipulador de eventos Click do botão para que ele seja lido conforme mostrado no exemplo de código a seguir.

   protected void Button1_Click(object sender, System.EventArgs e)
   {    
       Label1.Text = TextBox1.Text + ", welcome to Visual Studio!";
   }
   

   Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
       Label1.Text = Textbox1.Text & ", welcome to Visual Studio!"
   End Sub
   

5. Volte para exibir o modo de exibição Origem da marcação HTML clicando com o botão direito do mouse em FirstWebPage.aspx no Gerenciador de Soluções e selecionando Exibir Marcação.

6. Role até o <elemento asp:Button> . Observe que o <elemento asp:Button> agora tem o atributo onclick="Button1_Click".

   Esse atributo associa o evento Click do botão ao método do manipulador que você codificou na etapa anterior.

   Os métodos do manipulador de eventos podem ter qualquer nome; o nome que você vê é o nome padrão criado pelo Visual Studio. O ponto importante é que o nome usado para o atributo OnClick no HTML deve corresponder ao nome de um método definido no code-behind.

Executando a página

Agora você pode testar os controles do servidor na página.

Para executar a página

1. Pressione CTRL+F5 para executar a página no navegador. Se ocorrer um erro, verifique novamente as etapas acima.

2. Insira um nome na caixa de texto e clique no botão Nome de exibição.

   O nome inserido é exibido no controle Rótulo . Observe que, quando você clica no botão, a página é postada no servidor Web. ASP.NET recria a página, executa o código (nesse caso, o manipulador de eventos Click do controle Button é executado) e envia a nova página para o navegador. Se você observar a barra de status no navegador, poderá ver que a página está fazendo uma viagem de ida e volta para o servidor Web cada vez que você clica no botão.

3. No navegador, exiba a origem da página que você está executando clicando com o botão direito do mouse na página e selecionando Exibir fonte.

   No código-fonte da página, você vê HTML sem nenhum código de servidor. Especificamente, você não vê os elementos asp:> com os< quais estava trabalhando no modo de exibição Código-fonte. Quando a página é executada, ASP.NET processa os controles do servidor e renderiza elementos HTML para a página que executam as funções que representam o controle. Por exemplo, o <controle asp:Button> é renderizado como o elemento HTML <input type="submit".>

4. Feche o navegador.

Trabalhando com controles adicionais

Nesta parte do passo a passo, você trabalhará com o controle Calendar , que exibe datas de um mês por vez. O controle Calendar é um controle mais complexo do que o botão, a caixa de texto e o rótulo com os quais você está trabalhando e ilustra alguns recursos adicionais dos controles de servidor.

Nesta seção, você adicionará um controle System.Web.UI.WebControls.Calendar à página e o formatará.

Para adicionar um controle Calendário

1. No Visual Studio, alterne para o modo Design .

2. Na seção Padrão da Caixa de Ferramentas, arraste um controle Calendário para a página e solte-o abaixo do elemento div que contém os outros controles.

   O painel de marcas inteligentes do calendário é exibido. O painel exibe comandos que facilitam a execução das tarefas mais comuns para o controle selecionado. A ilustração a seguir mostra o controle Calendário conforme renderizado no modo Design .

   

3. No painel de marcas inteligentes, escolha Formatação automática.

   A caixa de diálogo Formatação Automática é exibida, o que permite selecionar um esquema de formatação para o calendário. A ilustração a seguir mostra a caixa de diálogo Formatação Automática para o controle Calendário .

   

4. Na lista Selecionar um esquema, selecione Simples e clique em OK.

5. Alterne para o modo de exibição Fonte .

   Você pode ver o <elemento asp:Calendar> . Esse elemento é muito mais longo do que os elementos dos controles simples que você criou anteriormente. Ele também inclui subelementos, como <WeekEndDayStyle>, que representam várias configurações de formatação. A ilustração a seguir mostra o controle Calendário no modo de exibição Origem. (A marcação exata que você vê em A exibição da fonte pode ser ligeiramente diferente da ilustração.)

   

Programando o controle de calendário

Nesta seção, você programará o controle Calendário para exibir a data selecionada no momento.

Para programar o controle Calendário

1. No modo Design , clique duas vezes no controle Calendário .

   Um novo manipulador de eventos é criado e exibido no arquivo code-behind chamado FirstWebPage.aspx.cs.

2. Conclua o manipulador de eventos SelectionChanged com o código a seguir.

   protected void Calendar1_SelectionChanged(object sender, System.EventArgs e)
   {    
       Label1.Text = Calendar1.SelectedDate.ToLongDateString();
   }
   

   Protected Sub Calendar1_SelectionChanged(ByVal sender As Object, ByVal e As System.EventArgs)
       Label1.Text = Calendar1.SelectedDate.ToLongDateString()
   End Sub
   

   O código acima define o texto do controle de rótulo para a data selecionada do controle de calendário.

Executando a página

Agora você pode testar o calendário.

Para executar a página

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

2. Clique em uma data no calendário.

   A data em que você clicou é exibida no controle Rótulo .

3. No navegador, visualize o código-fonte da página.

   Observe que o controle Calendar foi renderizado na página como uma tabela, com cada dia como um elemento td .

4. Feche o navegador.

Próximas etapas

Este passo a passo ilustrou os recursos básicos do designer de página do Visual Studio. Agora que você entende como criar e editar uma página Web Forms no Visual Studio, talvez queira explorar outros recursos. Por exemplo, você pode querer fazer o seguinte:

• Saiba mais sobre ASP.NET Web Forms seguindo a série de tutoriais passo a passo Introdução ao ASP.NET 4.5 Web Forms e ao Visual Studio 2013.
• Saiba mais sobre CSS (folhas de estilos em cascata). Para obter detalhes, consulte Visão geral do trabalho com CSS.