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.