Criando uma página aspx com C#

Criando uma página aspx com C#

Nesse tutorial, falarei sobre a criação de uma página aspx com C#. Para começar, você deve ter instalado em seu computador uma distribuição do Visual Studio. Apesar de pago, há também versões gratuitas do programa disponíveis para download.

Instalando Visual Studio Express para a Web

Algumas informações da série de artigos que eu publiquei anteriormente, Desenvolvendo em C# com Windows Forms serão úteis aqui. Uma delas é o passo-a-passo da instalação do Visual Studio Express, que você pode encontrar nesse tutorial. Você tem que seguir as instruções de download, instalação e mudança de idioma, a diferença é que na página de download do Visual Studio, você deve escolher “Visual Studio Express para a Web”, em vez de “Visual Studio Express para Desktop”. Tendo baixado e instalado o Visual Studio Express para a Web, você já está pronto para começar a colocar esse tutorial em prática.

Criando novo projeto

Abra o Visual Studio. Quando você estiver abrindo pela primeira vez, você vai ser solicitado a registrar-se para receber uma chave do produto. Basta você clicar para se registrar e seguir os passos que lhe serão informados. O registro deve ser feito com uma conta Microsoft que você tenha.

Tendo registrado, você já pode usar o programa. Clique em “Novo Projeto”. Será aberta uma janela com opções para você criar um novo projeto. Escolha “Visual C#”, Depois clique em “Web”, e em “Aplicativo Web do ASP.NET”. Na parte de baixo da janela, você deve inserir o nome do aplicativo. Troque o nome que está ali para “Meu Site”, e clique em “Ok”. Feito isso será aberta outra janela com opções diferentes para você criar seu aplicativo ASP.NET. Escolha “Empty”, para criar um aplicativo em branco. Clique em “Ok”.

Um aplicativo em branco foi criado. Então precisamos adicionar uma página aspx para começar a desenvolver. Para isso, clique em “Projeto” no menu de cima, e depois em “Adicionar Novo Item…”. Será aberta uma janela com opções de arquivos a serem adicionados ao seu site. Precisamos criar uma página aspx. Então escolha “Formulário da Web”, e dê um nome para ela na parte de baixo da janela. Como essa é a página inicial, é importante que ela seja nomeada como Default.aspx. Clique em “Adicionar”.

serie-aspnet-1

Será criada uma nova página aspx, e o código-fonte será exibido na tela. Mas não é necessário você escrever código para criar o layout da página. No menu abaixo da página de código, clique em “Design”.

serie-aspnet-2

Essa página permite que você escolha os objetos que você quer na “Caixa de Ferramentas”, e arraste para a tela para criar o layout da página. Para usar a Caixa de Ferramentas, escolha a opção correspondente nesse menu do lado esquerdo da tela.

serie-aspnet-3

Na Caixa de Ferramentas você encontra várias opções de objetos que você pode estar adicionando à página aspx.

E é claro, você gostaria de saber como definir o estilo de um objeto que você adicionou à página, assim como é feito em uma página HTML com o CSS. Para isso, com o objeto clicado vá na janela “Propriedades”, no canto inferior direito. Lá você encontra várias opções de propriedades do objeto, inclusive para aplicar estilo. Veja como exemplo esse Label adicionado à página, com a cor da fonte alterada para azul, na propriedade “ForeColor”

serie-aspnet-4

E para gerenciar os arquivos do site, vá na janela “Gerenciador de Soluções”, acima da janela “Propriedades”. Ali você encontra os arquivos que estão no diretório do seu site.

serie-aspnet-5

Basicamente é isso que você deve saber para criar uma página aspx.

Criando um site de exemplo

Podemos aproveitar esse site que já está criado para criar essa página de exemplo. Vamos criar um questionário, e adicionar um botão para informar o número de acertos do usuário. Serão 5 perguntas, e 4 alternativas para cada pergunta. Então para cada pergunta, adicione à página um Label para ser a questão, e 4 RadioButtons para serem as opções. Para alterar o texto dos RadioButton, vá na janela “Propriedades”, e insira o texto na propriedade “Text”. Faça isso para essas perguntas e opções de resposta abaixo:

1 – Em que ano ocorreu a queda do Muro de Berlim?

  • 1961
  • 1970
  • 1989
  • 1980

2 – Paris é a capital de qual desses países?

  • Itália
  • França
  • Alemanha
  • Romênia

3 – Qual desses é o resultado do cálculo 85 + 55?

  • 180
  • 160
  • 140
  • 120

4 – O Alaska pertence a qual desses países?

  • Rússia
  • Japão
  • Canadá
  • Estados Unidos

5 – O Android, sistema operacional mais usado nos dispositivos móveis atualmente, pertence a qual dessas empresas?

  • Google
  • Microsoft
  • Apple
  • Intel

Acrescente também um botão à página para conferir o resultado. Mude o texto dele para “Resultado” na propriedade “Text”.

A página deve ficar assim:

serie-aspnet-6

Antes de adicionar o código para o questionário funcionar, vamos definir a  “ID” de alguns objetos. Vamos definir a ID das alternativas corretas. Selecione os RadioButtons com os textos 1989, França, 140, Estados Unidos e Google, e na janela “Propridades”, insira as seguintes IDs para eles, na ordem: opcaocerta1, opcaocerta2, opcaocerta3, opcaocerta4 e opcaocerta5.

Adicione também um Label abaixo do botão para receber o resultado. Mude a ID dele para “resultado”, remova o texto, e clique na propriedade “Font”, escolha “Size” e insira “20” para dar mais destaque ao resultado. Feito isso, é necessário agrupar os RadioButtons para cada questão. Para isso vá no código da página aspx, clicando em “Origem” no menu abaixo dela. Adicione GroupName = “questao1”, GroupName = “questao2”, GroupName = “questao3”, GroupName = “questao4” e GroupName = “questao5” respectivamente para os RadioButtons da pergunta correspondente.

serie-aspnet-7

Agora, vamos adicionar o código para fazer o questionário funcionar. Na página aspx, na tela de design, dê dois cliques no botão, essa é uma alternativa para acessar a página de código C#. Troque o do código dentro da classe Default por esse:

Nesse código, foi criada uma variável para receber o resultado. A cada reposta correta ela recebe +1, e exibe o resultado no Label “resultado”, com a cor azul se aprovado e cor a cor vermelha se reprovado. Para ser aprovado, você precisa acertar no mínimo 3 questões. O resultado recebe um destaque com negrito, e para o caso de 1 acerto, vai ser exibido o texto “1 acerto”, para o caso de nenhum, será exibido o texto “Nenhum acerto”. Depois de ter adicionado o código, você já pode testar no navegador, clicando no botão com uma seta verde no menu superior.

Conclusão

Nesse tutorial, você teve uma introdução ao ASP.NET com C#, aprendeu a criar uma página aspx, e viu um exemplo de uma página aspx funcionando com código C#.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *