Share via

Passo-a-passo: Criando uma página da Web básica com separação de código no Visual Web Developer

  • Artigo

Quando você cria páginas da Web do ASP.NET e escreve código nelas, você pode escolher entre dois modelos de como gerenciar os elementos visíveis (controles, texto) e seu código de programação.No modelo de arquivo único, os elementos visíveis e o código são mantidos juntos no mesmo arquivo.No modelo alternativo, chamado de "separação de código", os elementos visíveis estão em um arquivo e o código está em outro arquivo, conhecido como o arquivo "code-behind".Esta explicação passo a passo apresenta páginas da Web que usam separação de código.

O modelo de arquivo Simples é incluído no Demonstra Passo a passo: Criando uma página da Web básica no Visual Web Developer.A explicação passo a passo que você está lendo agora mostra como criar uma página da Web com a mesma funcionalidade do que a página na explicação passo a passo de arquivo único, mas com um foco no uso de separação de código.

A escolha entre usar páginas de arquivo único e páginas com separação de código é principalmente uma entre conveniência e preferência pessoal.Trabalhar com os dois modelos no Microsoft Visual Web Developer é semelhante; os dois modelos têm suporte aproximadamente iguais no editor.Os dois modelos têm desempenho equivalente quando a página é executada.A página com separação de código torna mais prático permitir que um Web designer trabalhe no layout de uma página enquanto um programador cria o código para a página, porque as duas páginas podem ser editadas separadamente.

Tarefas ilustradas nesta explicação passo a passo incluem:

  • Usar o Visual Web Developer para criar uma página ASP.NET com separação de código.

  • Adicionar controles.

  • Adicionar manipuladores de eventos.

  • Executar páginas com o ASP.NET Development Server.

Pré-requisitos

A fim de concluir este explicação passo a passo, será necessário:

  • O Visual Web Developer e o .NET Framework.

Criando um Site e Página da da Web

Nesta parte da explicação passo a passo, você irá criar um site e adicionar uma nova página a ele.Você também irá adicionar texto em HTML e executar a página no seu navegador da Web.

Se você já tiver Criado um site da Web em Visual Web Developer (por exemplo, seguindo as etapas em Demonstra Passo a passo: Criando uma página da Web básica no Visual Web Developer, você pode usar esse site da Web e vá para " Criar um Nova Página " Posteriormente neste exame Através.Caso contrário, crie um site e uma página novos, seguindo estas etapas.

Para criar um site do sistema de arquivos

  1. Abra o Visual Web Developer.

  2. Sobre o File Menu, clique em NovoSite.

    O Novo Site da Web caixa de diálogo é exibida.

  3. Em Modelos Visual Studio instaladoClique em Web Site ASP.NET.

  4. Na Local Caixa de seleção Sistema de arquivos e digite o nome da pasta w aqui você deseja manter as páginas do seu site da Web.

    Por exemplo, digite o nome da pasta C:\BasicWebSite.

  5. Na lista Idioma, clique em Visual Basic ou Visual C#.

    Observação:

    O Visual Web Developer não oferece suporte atualmente à criação de páginas code-behind no Visual J#.

    A linguagem de programação que você escolher será o padrão para o site, mas você pode definir a linguagem de programação para cada página individualmente.

  6. Clique em OK.

    Visual Web Developer cria a pasta e uma nova página chamada Default.aspx.

Criando uma página nova

Quando você Criar um novo site, Visual Web Developer adiciona uma página denominada Default.aspx.Por padrão, Visual Web Developer cria uma página com separação de código.

Para adicionar uma página com separação de código ao site

  1. Feche a página Default.aspx.Para fazer isso, clique com o botão direito do mouse na guia com o Nome do Arquivo-la em Selecione Fechar.

  2. No Solução Explorer, clique com o botão direito do mouse no site (por exemplo, C:\BasicWebSite) e escolha Adicionar novo item.

  3. Em Modelos Visual Studio instaladoEscolha Web Form.

  4. Na Name (Nome) caixa, digite WebPageSeparated.

  5. Na lista de linguagens, escolha a linguagem de programação que você prefere usar (Visual Basic ou C#).

  6. Verifique se a Coloque o código no arquivo separado caixa de seleção está selecionada.

    Por padrão, essa caixa de seleção está marcada.

  7. Clique em Adicionar.

    O Visual Web Developer cria dois arquivos.O primeiro arquivo, WebPageSeparated.aspx, irá conter texto e controles, e a página é aberta no editor.Um arquivo segundo, WebPageSeparated.aspx.vb ou WebPageSeparated.aspx.cs (dependendo de que linguagem de programação você selecionou), é o arquivo de código.Você pode ver ambos os arquivos no Solution Explorer clicando no sinal de mais (+) ao lado do arquivo WebPageSeparated.aspx; o arquivo de código foi criado mas não está aberto.Você irá abri-lo posteriormente na explicação passo a passo quando você escrever código.

Adicionando HTML à página

Nesta parte da explicação passo a passo, você irá adicionar algum texto em HTML estático para a página WebPageSeparated.aspx.

Para adicionar texto à página

  1. Clique na Design guia na parte inferior do janela do documento para alternar para design Exibir.

    O modo Design exibe a página em que você estiver trabalhando de uma maneira WYSIWYG (What You See Is What You Get, o formato exibido é o resultado final).Neste ponto, você não tem qualquer texto ou controles na página, portanto a página está em branco.

  2. Posicione o ponteiro de inserção na DIV elemento que está AL Pronto na página.

  3. Digite as palavras Welcome to Visual Web Developer Using Code Separation.

  4. Alterne para modo de origem.

    Você pode ver o HTML que você criou através da digitação no modo Design.Nesta etapa, a página parece uma página HTML comum.A única diferença é in a < % @ Page % > diretiva na parte superior da página.

Adicionando e programando controles

Nesta parte da explicação passo a passo, você adicionará um botão, caixa de texto, e Rótulo controlar até a página e gravar código para manipular do botão [E:Sistema.Web.UI.WebControles.Botão.Click] Evento.Server controls, which include buttons, labels, text boxes, and other familiar controls, provide typical form-processing capabilities for your ASP.NET Web pages.However, you can program the controls with code that runs on the server, not the client.

Para adicionar controles à página

  1. Clique na Design Guia para Switch para o modo Design.

  2. Place the insertion pointer after the text that you added previously.

  3. Pressione a tecla ENTER uma algumas vezes para criar um espaço.

  4. A partir de Padrão Guia in a ToolboxArraste três controles para a página: uma TextBox o controle, um Button o controle e um Label o controle.

  5. Coloque o ponteiro de inserção na frente da caixa de texto e digite Enter your name:.

    Este texto estático MTML é a legenda para o TextBox o controle.Você pode misturar HTML estático e controles de servidores na mesma página.

Definindo propriedades do controle

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á trabalhar com propriedades no modo Design e no modo Fonte.

Para definir propriedades de controles

  1. Selecione o Button Controle e, na Propriedades janela, defina sua [P:System.Web.UI.WebControls.Botão.Text] Propriedade para exibir o nome.

  2. Alterne para modo de origem.

    O modo Fonte exibe o HTML da página, incluindo os elementos que o Visual Web Developer tiver criado para os controles do servidor.Controles são declarados usando a sintaxe HTML-como, exceto pelo fato de que as marcas use o prefixo ASP: e incluir o atributo runat = "server".

    Propriedades do controle são declarados como atributos.Por exemplo, quando você definir do botão [P:System.Web.UI.WebControls.Botão.Text] Propriedade na etapa 1, você fosse realmente Configuração o Texto Atributo na marcação do controle.

    Anotação que todos os controles dentro uma Formulário Elemento que também tem o atributo runat = "server".O runat = "server" Atributo e o ASP: prefixo para o controle marcas marcar os controles para que eles são processados pelo ASP.NET quando a página é executado.

Programando o controle botão

Para essa explicação passo a passo, você será Gravar o código que lê o nome que o usuário insere na caixa de texto e, em seguida, exibe-na Label o controle.

Para adicionar um manipulador de eventos de botão padrão

  1. Alterne para o modo Design

  2. Clique duas vezes o Button o controle.

    O Visual Web Developer abre o arquivo WebPageSeparated.aspx.vb ou WebPageSeparated.aspx.cs em uma janela separada no editor.O arquivo contém um esqueleto Clique em manipulador de eventos do botão.

  3. Concluir o Clique em manipulador de eventos, adicionando o seguinte código realçado.

    Protegido sub botão1_Clique(ByVal Sender As Objeto, _ ByVal e As System.EventArgs) trata botão1.Clique
      rótulo1.Texto = TextoBox1.Texto & ", Bem-vindo ao Visual Web Developer! "
End Sub

    Protegido void {Button1_Click(object sender, System.EventArgs e)    
  Label1.Text = TextBox1.Text + ", Bem-vindo ao Visual Web Developer! ";
}

    Observe que enquanto você digita, o IntelliSense ajuda você com opções contextuais.Isso é idêntico ao comportamento quando você está codificando em uma página de arquivo único.

Examinando os arquivos da página e do código

Agora você tem dois arquivos que compõem a página Concluir WebPageSeparated: WebPageSeparated.aspx e WebPageSeparated.aspx.vb ou WebPageSeparated.aspx.cs.Esta seção da explicação passo a passo, você examinará como esses arquivos são estruturados e como se relacionam a cada Outro.

Para examinar os arquivos da página e do código

  1. Clique na WebPageSeparated.aspx Na guia na parte superior da janela do editor para alternar para o arquivo de paginação.

  2. Alterne para modo de origem.

    A parte superior da página é um @ Página Diretiva que vincula ao arquivo de código nesta página.A diretiva se parece com o código a seguir.

    < % @ Idioma da página = "vb" AutoEventWireup = "false" CodeArquivo="WebPageSeparated.aspx.vb " Herda = "WebPageSeparated" % &Gt;

    < % @ Language da página = " C# " AutoEventWireup = "Verdadeiro" CodeFile="WebPageSeparated.aspx.cs " Herda = "WebPageSeparated" % &Gt;

    (A linha não é quebrada no editor, e o atributo linguagem e as extensões dos nome dos arquivos corresponderão à linguagem de programação que você selecionou.)

    Quando página é executada, o ASP.NET cria dinamicamente uma instância de uma classe que representa a página.O Inherits Atributo identifica a classe definida no Código-behind file do qual a página .aspx é derivada.Por padrão, o Visual Web Developer usa o nome da página como a base para o nome da classe no arquivo code-behind.

    O CodeFile Atributo identifica o Arquivo de Código para esta página.Resumindo, o arquivo code-behind contém o código de tratamento de evento para sua página.

  3. Clique na WebPageSeparated.aspx.vb ou WebPageSeparated.aspx.cs Guia para alternar para o arquivo de código.

    O arquivo de código contém código que é semelhante a uma definição de classe.Entretanto, não é uma definição de classe completa; em vez disso, é uma "classe parcial" que contém somente uma parte da classe completa que comporá a página.Especificamente, a classe parcial definida no arquivo de código contém os manipuladores de eventos e outros códigos personalizados que você escrever.Em tempo de execução, o ASP.NET gera outra classe parcial contendo seu código de usuário.Essa classe completa é depois utilizada como a classe base que é usada para processar a página.Para obter mais informações, consulte Visão geral sobre classes de páginas ASP.NET.

    Observação:

    Se você estiver familiarizado com o modelo code-behind usado no Visual Studio .NET 2003 Microsoft, você observará que, no novo modelo, a classe code-behind não contém qualquer código gerado além da própria definição de classe.Por exemplo, a classe não contém variáveis de instância para controles na página.Esse tipo de código gerado não é mais necessário.

Executando a página

Agora você pode testar a página.

Para executar a página

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

    A página é executada usando o ASP.NET Development Server.

    Observação:

    Se o navegador exibir um erro 502 ou um erro indicando que a página não pode ser exibida, talvez seja necessário configurar seu navegador para ignorar servidores proxy para solicitações locais.Para obter detalhes, consulte Como: Ignorar um servidor proxy para solicitações da Web locais.

  2. Digite um nome na caixa de texto e clique no botão.

    O nome digitado é exibido na Label o controle.

  3. No navegador, exiba o fonte da página que você executando.

  4. Feche o navegador.

    A página funciona exatamente como se fosse um página de arquivo único.(Se você seguiu as etapas. Demonstra Passo a passo: Criando uma página da Web básica no Visual Web Developer Para criar uma página de arquivo único, você pode comparar as duas páginas para ver que eles são o mesmo quando Executando.)

Próximas etapas

Esta explicação passo a passo ilustrou como criar e editar uma página da Web que usa separação de código.Da perspectiva da criação e da execução da página, não há uma diferença significativa entre uma página de arquivo único e uma página com separação de código.

Convém explorar outros recursos.Por exemplo, você pode desejar:

Consulte também

Tarefas

Demonstra Passo a passo: Criando uma página da Web básica no Visual Web Developer

Conceitos

Tipos de Sites no Visual Web Developer