Criando uma Nova Página Web Forms

Quando você cria um novo site Web, o Visual Web Developer adiciona uma página do ASP.NET
chamada Default.aspx.

Você pode usar a página Default.aspx como a home page para o seu site Web.
Entretanto, para esta explicação passo a passo, você irá criar e trabalhar com uma nova
página.

Para adicionar uma página ao site Web

1- Feche a página Default.aspx.

Para fazer isso, clique com o botão direito do mouse na guia que contém o nome de arquivo e
selecione Close.

2- Na janela do Solution Explorer, clique com o botão direito do mouse o site Web, e clique em
Add New Item.

3- No Visual Studio installed templates, clique em Web Form.

3.1- Na caixa Name, digite ExcluirProduto.aspx.

3.2- Na lista Language, escolha a linguagem de programação Visual C#,

quando você cria o site Web, você especifica uma linguagem padrão.
Entretanto, sempre que você cria uma nova página ou um componente para o seu site Web,
você pode alterar a linguagem da nova página.

Você pode usar linguagens de programação diferentes no mesmo site Web.

3.3- Marque a caixa de seleção Place code in separate file.

4- Clique em Add.

O Visual Web Developer cria a nova página e a abre no modo Source.

Adicionando Elementos à página

Nesta etapa, você irá adicionar algum texto estático para a página.

Para adicionar texto para a página:

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

O modo Design exibe a página com a qual você está trabalhando de uma maneira WYSIWYG.

Nesse ponto, você não tem qualquer texto ou controles na página; então, a página está em
branco.

Na página, digite TAS – Sistemas de Informação.

A figura abaixo mostra o texto que você digitou no modo Design.

Alterne para modo Source.

Você pode ver o HTML que você criou digitando no modo Design.

Executando a Página

Antes de prosseguir com a adição de controles para a página, você pode tentar executá-la.

Para executar uma página, é necessário um servidor Web.

Em um site Web de produção, você usa o IIS como seu servidor Web.
Entretanto, para testar uma página, você pode usar o Servidor de Desenvolvimento do
ASP.NET, que é executado localmente e não requer o IIS.

Para os sites Web do sistema de arquivos, o servidor Web padrão no Visual Web Developer é o
Servidor de Desenvolvimento do ASP.NET.

Para executar a página Pressione CTRL+F5.

O Visual Web Developer inicia o Servidor de Desenvolvimento do ASP.NET.

Um ícone aparece na barra de ferramentas para indicar que o servidor Web Visual Web
Developer está sendo executado, como mostrado na figura abaixo.

A página é exibida no navegador.

Embora a página que você criou tenha uma extensão .aspx, ela atualmente executa como
qualquer página HTML.

Para interromper a execução, simplesmente feche o navegador.

Adicionando e programando controles

Agora você irá adicionar os controles Button, TextBox e Label para a página e gravar o código
para manipular o evento Click para o controle Button.

Agora você irá adicionar os controles do servidor na página.

Os controles do servidor, que incluem botões, rótulos, caixas de texto e outros controles
familiares, fornecem capacidades típicas para processamento de formulários para suas
páginas Web do ASP.NET.

Entretanto, você pode programar os controles com código que é executado no servidor, não
no cliente.

Para adicionar controles para a página clique na guia Design para alternar para modo Design.

Pressione SHIFT+ENTER algumas vezes para criar um pouco de espaço.

Na caixa de ferramentas (Tollbox), a partir do grupo Standard, arraste quatro controles para
a página: dois controles Label, um controle Toolbox e um controle Button.

Tente posiciona-los de forma parecida com a figura abaixo.

Definindo as propriedades dos controles

O Visual Web Developer oferece várias maneiras para definir as propriedades dos controles na
página.

Nesta parte da explicação passo a passo, você irá definir as propriedades em modo Design e
em modo Source.

Para definir as propriedades de controle:

  Selecione o primeiro Label e na janela Properties, defina Text para Código e ID para
lblCodigo
 Selecione o Button e na janela Properties, defina Text para Excluir e ID para cmdExcluir
 Selecione o TextBox e na janela Properties, defina ID para txtCodigo
 Selecione o segundo Label e na janela Properties, defina Text para Status: e ID para
lblStatus

HTML da página

Alterne para modo Source.

O modo de exibição Source exibe o HTML para a página, incluindo os elementos que o Visual
Web Developer criou para os controles do servidor.

Os controles são declarados usando sintaxe do tipo HTML, exceto as marcas que usam o
prefixo asp: e incluem o atributo runat="server".

As propriedades do controle são declaradas como atributos.

Por exemplo, quando você define a propriedade Text para o controle Button, na etapa 1, você
realmente definiu o atributo Text na marcação do controle.

Observe que todos os controles estão dentro de um elemento FORM que também tem o
atributo runat="server".

O atributo runat="server" e o prefixo asp: para controle de marcas marcam os controles para
que eles sejam processados pelo ASP.NET no lado do servidor quando a página é executada.

Código fora dos elementos FORM runat="server"e SCRIPT runat="server" é interpretado pelo
navegador como código do cliente.

Coloque o ponto de inserção em um espaço dentro da guia , e pressione SPACEBAR.

Uma lista suspensa aparece para mostrar a lista de propriedades que você pode definir para o
controle Label.

Esse recurso, conhecido como IntelliSense, ajuda você no modo Source com a sintaxe dos
controles de servidor, elementos HTML e outros itens na página.

Selecione ForeColor e digite um sinal de igualdade (=).

O IntelliSense exibe uma lista de cores.

Selecione uma cor para o texto do controle Label.

O atributo ForeColor é concluído com a cor que você selecionou.

Observação
Você pode exibir uma lista suspensa do IntelliSense a qualquer momento, pressionando
CTRL+J.

Programando o Controle Button

Para adicionar um manipulador de eventos padrão para o controle button

1- Alterne para o modo Design.

2- Clique duas vezes no controle Button.

O Visual Web Developer alterna para o modo Source e cria um esqueleto de um procedimento
de evento para o evento padrão do controle Button, o evento Click.

Dentro do procedimento, digite o seguinte:

O Visual Web Developer exibirá uma lista dos membros disponíveis para o controle Label,
conforme mostrado na figura abaixo

Concluir o código para o botão para que ele apareça como mostrado no exemplo de código a
seguir.

Observe no HTML da sua página o elemento asp:Button.

Observe que o elemento asp:Button agora tem o atributo OnClick="cmdExcluir_Click".

Este atributo vincula o evento Click do botão para o método que você codificou.

Executando a Página

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

Para executar a página

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

A página novamente executa usando o Servidor de Desenvolvimento do ASP.NET.

Digite um código para a caixa de texto e clique no botão.

Observe que quando você clica no botão, a página é remetida para o servidor Web.

O ASP.NET recria a página, executa o seu código (neste caso, executa o manipulador de
eventos Click do controle Button), e em seguida, envia a nova página para o navegador.

Se você observar a barra de status do navegador você pode ver que a página está fazendo
uma chamada para o servidor Web sempre que você clicar no botão.
Exercício

1- Criar o seguinte formulário

O mesmo deve realizar as quatro operações básicas corretamente.