Edição de código de Web Forms do ASP.NET no Visual Studio 2013

Artigo
07/13/2023

Em muitas páginas ASP.NET Web Form, você escreve código no Visual Basic, em C#ou em outra linguagem. O editor de código no Visual Studio pode ajudá-lo a escrever código rapidamente, ajudando você a evitar erros. Além disso, o editor fornece maneiras de criar código reutilizável para ajudar a reduzir a quantidade de trabalho que você precisa fazer.

Este passo a passo ilustra vários recursos do editor de código do Visual Studio.

Durante este passo a passo, você aprenderá a:

Corrigir erros de codificação embutida.
Refatorar e renomear código.
Renomeie variáveis e objetos.
Inserir snippets de código.

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 de Desenvolvimento web na primeira vez que iniciou o Visual Studio. Para obter mais informações, consulte Como selecionar configurações de ambiente de desenvolvimento da Web.

Criando um projeto de aplicativo 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.

Para criar um projeto de aplicativo Web

Abra o Microsoft Visual Studio.
No menu Arquivo, selecione Novo Projeto.

A caixa de diálogo Novo Projeto aparecerá.
Selecione o grupo Modelos ->Visual C# ->Modelos da Web à esquerda.
Selecione o modelo Aplicativo Web ASP.NET na coluna central.
Nomeie seu projeto como BasicWebApp e clique no botão OK .
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.

Criando uma nova página de 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 de 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 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

Em 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.
Selecione o grupo Modelos do Visual C# ->Web à esquerda. Em seguida, selecione Web Form na lista intermediária e nomeie-o FirstWebPage.aspx.
Clique em Adicionar para adicionar a página Web Forms ao seu projeto.
O Visual Studio cria a nova página e a abre.
Em seguida, defina essa nova página como a página de inicialização padrão. Em Gerenciador de Soluções, clique com o botão direito do mouse na nova página chamada FirstWebPage.aspx e selecione Definir como Página Inicial. Na próxima vez que você executar esse aplicativo para testar nosso progresso, você verá automaticamente essa nova página no navegador.

Corrigindo erros de codificação embutida

O editor de código no Visual Studio ajuda você a evitar erros ao escrever código e, se você cometeu um erro, o editor de código ajuda a corrigir o erro. Nesta parte do passo a passo, você escreverá uma linha de código que ilustra os recursos de correção de erro no editor.

Para corrigir erros de codificação simples no Visual Studio

No modo Design , clique duas vezes na página em branco para criar um manipulador para o evento Load para a página.
Você está usando o manipulador de eventos apenas como um local para escrever algum código.
Dentro do manipulador, digite a seguinte linha que contém um erro e pressione ENTER:
```
string myStr = "Loading..."
```
Quando você pressiona ENTER, o editor de código coloca sublinhados verdes e vermelhos (geralmente chamados de linhas "squiggly") em áreas do código que têm problemas. Um sublinhado verde indica um aviso. Um sublinhado vermelho indica um erro que você deve corrigir.

Segure o ponteiro do mouse para myStr ver uma dica de ferramenta que informa sobre o aviso. Além disso, segure o ponteiro do mouse sobre o sublinhado vermelho para ver a mensagem de erro.

A imagem a seguir mostra o código com os sublinhados.

O erro deve ser corrigido adicionando um ponto e vírgula ; ao final da linha. O aviso simplesmente notifica você de que você ainda não usou a myStr variável.

Observação

Você exibe as configurações atuais de formatação de código no Visual Studio selecionando Ferramentas ->Opções ->Fontes e Cores.

Refatoração e renomeação

A refatoração é uma metodologia de software que envolve a reestruturação do código para facilitar a compreensão e a manutenção, preservando sua funcionalidade. Um exemplo simples pode ser que você escreva código em um manipulador de eventos para obter dados de um banco de dados. Ao desenvolver sua página, você descobre que precisa acessar os dados de vários manipuladores diferentes. Portanto, você refatora o código da página criando um método de acesso a dados na página e inserindo chamadas para o método nos manipuladores.

O editor de código inclui ferramentas para ajudá-lo a executar várias tarefas de refatoração. Neste passo a passo, você trabalhará com duas técnicas de refatoração: renomear variáveis e extrair métodos. Outras opções de refatoração incluem encapsular campos, promover variáveis locais para parâmetros de método e gerenciar parâmetros de método. A disponibilidade dessas opções de refatoração depende do local no código.

Código de refatoração

Um cenário de refatoração comum é criar (extrair) um método do código que está dentro de outro membro, como um método . Isso reduz o tamanho do membro original e torna o código extraído reutilizável.

Nesta parte do passo a passo, você escreverá um código simples e extrairá um método dele. Há suporte para refatoração para C#, portanto, você criará uma página que usa C# como sua linguagem de programação.

Para extrair um método em uma página C#

Alterne para o modo design .
Na Caixa de Ferramentas, na guia Padrão , arraste um controle Button para a página.

Clique duas vezes no controle Botão para criar um manipulador para o evento Click e adicione o seguinte código realçado:

protected void Button1_Click(object sender, EventArgs e)
{

    System.Collections.ArrayList alist = 
        new System.Collections.ArrayList();
    int i;
    string arrayValue;
    for(i=0; i<5; i++)
    {
        arrayValue = "i = " + i.ToString();
        alist.Add(arrayValue);
    }
    for(i=0; i<alist.Count; i++)
    {
        Response.Write("<br />" + alist[i]);
    };
}

O código cria um objeto ArrayList , usa um loop para carregá-lo com valores e usa outro loop para exibir o conteúdo do objeto ArrayList .

Pressione CTRL+F5 para executar a página e clique no botão para verificar se você vê a seguinte saída:
```
i = 0
i = 1
i = 2
i = 3
i = 4
```
Retorne ao editor de código e selecione as linhas a seguir no manipulador de eventos.
```
for(i=0; i<alist.Count; i++) 
{
      Response.Write("<br />" + alist[i]);
}
```
Clique com o botão direito do mouse na seleção, clique em Refatorar e escolha Extrair Método.

A caixa de diálogo Extrair Método é exibida.

Na caixa Nome do Novo Método , digite DisplayArray e clique em OK.

O editor de código cria um novo método chamado DisplayArraye coloca uma chamada para o novo método no manipulador Click em que o loop era originalmente.

protected void Button1_Click(object sender, EventArgs e)
{
    System.Collections.ArrayList alist = 
        new System.Collections.ArrayList();
    int i;
    string arrayValue;
    for(i=0; i<5; i++)
    {
        arrayValue = "i = " + i.ToString();
        alist.Add(arrayValue);
    }
    i = DisplayArray(alist, i);
}

Pressione CTRL+F5 para executar a página novamente e clique no botão.

A página funciona da mesma forma que antes. O DisplayArray método agora pode ser chamado de qualquer lugar na classe de página.

Renomeando variáveis

Ao trabalhar com variáveis, bem como objetos, convém renomeá-las depois que elas já forem referenciadas em seu código. No entanto, renomear variáveis e objetos pode fazer com que o código seja interrompido se você perder a renomeação de uma das referências. Portanto, você pode usar a refatoração para executar a renomeação.

Para usar a refatoração para renomear uma variável

No manipulador de eventos Clique , localize a seguinte linha:

System.Collections.ArrayList alist = 
    new System.Collections.ArrayList;

Clique com o botão direito do mouse no nome alistda variável , escolha Refatorar e escolha Renomear.

A caixa de diálogo Renomear é exibida.
Na caixa Novo nome , digite ArrayList1 e verifique se a caixa de seleção Visualizar alterações de referência foi selecionada. Em seguida, clique em OK.

A caixa de diálogo Alterações de Visualização é exibida e exibe uma árvore que contém todas as referências à variável que você está renomeando.
Clique em Aplicar para fechar a caixa de diálogo Visualizar Alterações .

As variáveis que se referem especificamente à instância selecionada são renomeadas. Observe, no entanto, que a variável alist na linha a seguir não é renomeada.
```
private int DisplayArray(System.Collections.ArrayList alist, 
    int i)
```
A variável alist nessa linha não é renomeada porque não representa o mesmo valor que a variável alist que você renomeou. A variável alist na DisplayArray declaração é uma variável local para esse método. Isso ilustra que usar a refatoração para renomear variáveis é diferente de simplesmente executar uma ação localizar e substituir no editor; a refatoração renomeia variáveis com conhecimento da semântica da variável com a qual está trabalhando.

Inserindo snippets

Como há muitas tarefas de codificação que Web Forms os desenvolvedores precisam executar com frequência, o editor de código fornece uma biblioteca de snippets ou blocos de código pré-escrito. Você pode inserir esses snippets em sua página.

Cada linguagem que você usa no Visual Studio tem pequenas diferenças na maneira como você insere snippets de código. Para obter informações sobre como inserir snippets de código, consulte Snippets de código do IntelliSense do Visual Basic. Para obter informações sobre como inserir snippets no Visual C#, consulte Snippets de código do Visual C#.

Próximas etapas

Este passo a passo ilustra os recursos básicos do editor de código do Visual Studio 2010 para corrigir erros em seu código, refatorar código, renomear variáveis e inserir snippets de código em seu código. Recursos adicionais no editor podem tornar o desenvolvimento de aplicativos rápido e fácil. Por exemplo, você pode querer:

Saiba mais sobre os recursos do IntelliSense, como modificar opções do IntelliSense, gerenciar snippets de código e pesquisar snippets de código online. Para obter mais informações, veja Usando o IntelliSense.
Saiba como criar seus próprios snippets de código. Para obter mais informações, consulte Criando e usando snippets de código do IntelliSense
Saiba mais sobre os recursos específicos do Visual Basic dos snippets de código do IntelliSense, como personalizar os snippets e a solução de problemas. Para obter mais informações, consulte Snippets de código do IntelliSense do Visual Basic
Saiba mais sobre os recursos específicos do C#do IntelliSense, como refatoração e snippets de código. Para obter mais informações, consulte IntelliSense do Visual C#.