Partilhar via

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

  • Artigo

por Erik Reitan

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

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 de ASP.NET Web Forms simples e ilustra as técnicas básicas de criação de uma nova página, adição de controles e gravação de código.

As tarefas ilustradas neste passo a passo incluem:

  • Criar um sistema de arquivos Web Forms projeto de aplicativo.
  • Familiarizando-se com o Visual Studio.
  • Criando uma página de 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:

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. Você também adicionará texto HTML e executará a página no navegador.

Para criar um projeto de aplicativo Web

  1. Abra o Microsoft Visual Studio.

  2. No menu Arquivo, selecione Novo Projeto.
    Menu Arquivo

    A caixa de diálogo Novo Projeto aparecerá.

  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 .
    Caixa de diálogo Novo Projeto

  6. Em seguida, selecione o modelo Web Forms e clique no botão OK para criar o projeto.
    Caixa de diálogo Novo Projeto ASP .NET

    O Visual Studio cria um novo projeto que inclui funcionalidade predefinida com base no modelo Web Forms. Ele não só 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 os usuários e salva suas credenciais para que eles possam fazer logon em seu site. Quando uma nova página é criada, por padrão, o Visual Studio exibe a página no modo de exibição Origem , em que você pode ver os elementos HTML da página. A ilustração a seguir mostra o que você verá no modo de exibição De origem se você criou uma nova página da Web chamada BasicWebApp.aspx.
    Modo de Exibição de Fonte

Um tour pelo ambiente de desenvolvimento web do Visual Studio

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

Observação

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

O ambiente do Visual Studio

Ambiente do Visual Studio

Familiarize-se com o web designer

Examine a ilustração acima e corresponda o texto à lista a seguir, que descreve as janelas e ferramentas mais usadas. (Nem todas as janelas e ferramentas que você vê estão listadas aqui, somente 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 só estão disponíveis quando você está trabalhando no modo design .
  • Gerenciador de Soluções janela. Exibe os arquivos e pastas em seu aplicativo Web.
  • Janela do documento. Exibe os documentos nos quais 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, dos elementos HTML, dos controles e de outros objetos.
  • Exibir guias. Apresente diferentes exibições do mesmo documento. A exibição de design é uma superfície de edição quase WYSIWYG. O modo de exibição de origem é o editor HTML da página. O modo de exibição Divisão exibe a exibição Design e a exibição Origem do documento. Você trabalhará com as exibições Design e Origem mais adiante neste passo a passo. Se preferir abrir páginas da Web no modo Design, no menu Ferramentas, clique em Opções, selecione o nó HTML Designer e altere a opção Páginas In In.
  • ToolBox. 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.
  • S erver Explorer. Exibe conexões de banco de dados. Se a Explorer do Servidor não estiver visível, no menu Exibir, clique em Servidor Explorer.

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

  1. Feche a página Default.aspx . Para fazer isso, clique na guia que exibe o nome do arquivo e clique na opção fechar.
  2. 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.
  3. Selecione o grupo Modelos do Visual C# ->Web à esquerda. Em seguida, selecione Web Form na lista intermediária e nomeie-o FirstWebPage.aspx.
    Caixa de diálogo Adicionar Novo Item
  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á um 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 de exibição de design exibe a página atual de maneira semelhante a WYSIWYG. Neste ponto, você não tem nenhum texto ou controle na página, portanto, a página está em branco, exceto por uma linha tracejada que descreve um retângulo. Esse retângulo representa um elemento div na página.

  2. Clique dentro do retângulo descrito 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 .

    Texto de boas-vindas no

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

    Você pode ver o HTML no modo de exibição De origem que você criou quando digitou no modo Design .
    Página da Web com Texto Estático

Executando a página

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

Para executar a página

  1. Em 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 . 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. 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 Web Forms. No entanto, você pode programar os controles com o código 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 Desenvolvedor da Web Visual e pressione ENTER cinco ou mais vezes para abrir 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 talvez seja necessário expandir a janela Caixa de Ferramentas à esquerda para exibi-la.

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

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

  6. Arraste um controle Rótulo para a página e solte-o em uma linha separada abaixo do controle Botão .

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

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

    Três controles no modo Design

Definindo propriedades do 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á as propriedades no modo design e no modo de exibição De origem .

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.

    Definir texto do botão

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

    O modo de exibição de origem exibe o HTML da página, incluindo os elementos que o Visual Studio criou para os controles do 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, ao definir 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 tem 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 runat="server"> e <script runat="server"> é enviado inalterado para o navegador, razão pela qual o código de ASP.NET deve estar dentro de um elemento cuja marca 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.

    Aparece uma lista suspensa que exibe a lista de propriedades disponíveis que você pode definir para um controle Rótulo . Esse recurso, conhecido como IntelliSense, ajuda você no modo de exibição De origem 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 .

    Atributos intelliSense atributos

  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 Rótulo . Selecione uma cor escura o suficiente para ler em um plano de fundo branco.

    O atributo ForeColor é concluído 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 exibe o nome no controle Rótulo .

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

  1. Alterne para o modo design .

  2. Clique duas vezes no controle Botão .

    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 está 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 período após a ID do rótulo (Label1), o Visual Studio exibe uma lista de membros disponíveis para o controle Rótulo , conforme mostrado na ilustração a seguir. Um membro normalmente uma propriedade, um método ou um evento.

    IntelliSense na exibição de código

  4. Conclua o manipulador de eventos Click do botão para que ele leia 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 codificado 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ê watch a barra de status no navegador, poderá ver que a página está fazendo uma viagem de ida e volta para o servidor Web sempre que clicar 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 você estava trabalhando no modo de exibição De origem. Quando a página é executada, ASP.NET processa os controles do servidor e renderiza elementos HTML para a página que executa as funções que representam o controle. Por exemplo, o controle asp<:Button> é renderizado como o elemento de entrada HTML< type="submit>".

  4. Feche o navegador.

Trabalhando com controles adicionais

Nesta parte do passo a passo, você trabalhará com o controle Calendário , que exibe datas por mês de cada vez. O controle Calendário é um controle mais complexo do que o botão, a caixa de texto e o rótulo com o qual você tem trabalhado e ilustra alguns recursos adicionais de 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 marca inteligente 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 renderizado no modo Design .

    Controle calendário no modo Design

  3. No painel de marcas inteligentes, escolha Formato Automático.

    A caixa de diálogo Formato Automático é exibida, o que permite que você selecione um esquema de formatação para o calendário. A ilustração a seguir mostra a caixa de diálogo Formato Automático para o controle Calendário .

    Caixa de diálogo Formato Automático (Controle calendário)

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

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

    Você pode ver o elemento asp<:Calendar>. Esse elemento é muito mais longo do que os elementos para os 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ê no modo de exibição De origem pode ser ligeiramente diferente da ilustração.)

    Controle de calendário no controle calendário do modo de exibiçã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 como 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, exiba o código-fonte da página.

    Observe que o controle Calendário foi renderizado para a página como uma tabela, com cada dia como um elemento td .

  4. Feche o navegador.

Próximas etapas

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