Exportar (0) Imprimir
Expandir Tudo

Demonstra Passo a passo: Criando um Basic página da Web no Visual Web Developer

Este passo a passo fornece uma introdução ao Microsoft Visual Web Developer.Ela orienta você através da criação de uma página simples usando o Visual Web Developer, ilustrando as técnicas básicas de criação de uma nova página, adicionando controles e escrevendo código.

As tarefas ilustradas neste passo a passo incluem:

  • Criar um site Web do sistema de arquivos.

  • Familiarizando-se com o Visual Web Developer

  • Criando uma página ASP.NET Single-File no Visual Web Developer.

  • Adicionando controles.

  • Adicionando manipuladores de eventos.

  • Executando paginas com os Servidores Web no Visual Web Developer.

A fim de completar este passo a passo, você vai precisar:

  • Visual Web Developer

  • O .NET Framework

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

Para esta explicação passo a passo, você criará um site no sistema de arquivos que não requer que você trabalhe com os Serviços de Informações da Internet (IIS) da Microsoft.Em vez disso, você irá criar e executar sua página no sistema de arquivos local.

Um sistema de arquivos do site Web é um sistema que armazena páginas e outros arquivos em uma pasta que você escolhe em algum lugar em seu computador local.Outras opções de site Web incluem um site Web do IIS local, que armazena seus arquivos em uma subpasta da raiz do IIS local (normalmente, \Inetpub\Wwwroot\).Um site FTP armazena arquivos em um servidor remoto que você acessa através da Internet, usando o File Transfer Protocol (FTP).Um site remoto armazena arquivos em um servidor remoto que você pode acessar através de uma rede local.Para mais informações, veja Demonstra Passo a passo: Edição de sites com FTP no Visual Web Developer.Além disso, os arquivos do site Web podem ser armazenados em um sistema de controle de origem como o Visual SourceSafe.Para obter mais informações, consulte Introdução ao controle de origem.

Para criar um site do sistema de arquivos

  1. Abra o Visual Web Developer.

  2. No Menu File, clique em New Web Site.

    A caixa de diálogo Novo Site da Web aparece, conforme a imagem a seguir.

    Caixa de diálogo New Web Site

    Captura de tela da caixa de diálogo Novo Site
  3. Em Visual Studio installed templates, clique em ASP.NET Web Site.

    Quando você cria um site Web, você especifica um modelo.Cada modelo cria um aplicativo Web que contém arquivos e pastas diferentes.Nesta explicação passo a passo, você está criando um site Web baseado no modelo ASP.NET Web Site, que cria algumas pastas e alguns arquivos padrão.

  4. Na caixa Location, selecione a caixa File System e seguida, digite o nome da pasta onde você deseja manter as páginas do seu site Web.

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

  5. No linguagem lista, selecionar Visual Basic or Translation from VPE for Csharp Visual.

    A linguagem de programação que você escolher será o padrão para seu site Web.Entretanto, você pode usar vários idiomas no mesmo aplicativo Web, criando páginas e componentes em linguagens de programação diferentes

  6. Clique OK.

    Visual Web Developer cria a pasta e uma nova página chamada Default.aspx. Quando uma nova página é criada, por padrão, o Visual Web Developer mostra a página no modo de visualização de código, onde você pode ver os elementos HTML da página.O screen shot a seguir mostra o modo de visualização de código de uma página Web padrão.

    Modo Source de uma página padrão

    Página padrão na exibição de código-fonte

Um Tour do Visual Web Developer

Antes de você prosseguir trabalhando na página, é útil você se familiarizar com o ambiente de desenvolvimento do Visual Web Developer.A ilustração a seguir mostra as janelas e ferramentas que estão disponíveis no Visual Web Developer.

Diagrama do ambiente Visual Web Developer

Esquema de janelas e ferramentas de IDE

Para se familiarizar com o designer da Web em Visual Web Developer

  • Examinar a ilustração anterior e corresponder o texto para a lista a seguir, que descreve as janelas e ferramentas mais comumente usadas.(Nem todas as janelas e ferramentas que você vê são listadas aqui, somente as marcadas na ilustração anterior.)

    • Barras de ferramentas.Fornecem comandos de formatação de texto, localização de texto, e assim por diante.Algumas barras de ferramentas ficão disponíveis somente quando você está trabalhando em modo Design.

    • Solution Explorer.Exibe os arquivos e pastas do seu site Web.

    • Janela de Documento.Exibe os documentos com os quais você está trabalhando em janelas com abas.Você pode alternar entre documentos clicando nas abas.

    • Janela de Propriedades.Permite que você altere as configurações da página, dos elementos HTML, dos controles e de outros objetos.

    • View abas.Mostra diferentes modos de exibição do mesmo documento.Modo Design é uma superfície de edição próxima ao WYSIWYG.Modo Source, é o editor de HTML da página.Dividir o modo de exibição, exibe ambos os modos de exibição Desenho e Fonte para o documento.Você trabalhará com o Design and fonte exibições posteriormente neste passo-a-passo.Se você preferir abrir as páginas Web em modo Design, no menu Ferramentas, clique em Opções, selecione o nó HTML Designer e altere a opção Start Pages In.

    • Caixa de Ferramentas.Fornece controles e elementos HTML que você pode arrastar para a sua página.Os elementos da Caixa de Ferramentas são agrupados por função em comum.

    • Gerenciador de Servidores / Explorer do banco de dados .Exibe conexões de banco de dados.Se do Server Explorer não estiver visível no Visual Web Developer, no menu de View, clicar em Server Explorer ou Database Explorer.

      ObservaçãoObservação:

      Você pode reorganizar e redimensionar as janelas para atender suas preferências.O menu View permite exibir janelas adicionais.

Criando uma Nova Página Web Forms

Quando você cria um novo Web site, o Visual Web Developer adiciona uma página ASP.NET (Web Forms page) chamada Default.aspx.Você pode usar a página Default.aspx como a página principal do seu Web site.Entretanto, para esta explicação passo a passo, você 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 na aba contendo o nome do arquivo e selecione Fechar.

  2. Na Solution Explorer, clique com o botão direito do mouse o site Web (por exemplo, C:\BasicWebSite), e clique em Add New Item.

  3. Em Visual Studio installed templates, clique em Web Form.A screen shot a seguir mostra a caixa de diálogo Add New Item.

    Caixa de diálogo Adicionar Novo Item

    Caixa de diálogo Adicionar Novo Item
  4. Na caixa Name, escreva FirstWebPage.

  5. Na lista Language, escolha a linguagem de programação que você prefere usar (Visual Basic, C#, ou J#).Quando você cria o site Web, você especifica uma linguagem padrão.Entretanto, sempre que você cria um nova página ou um componente para o seu site Web, você pode alterar a linguagem.Você pode utilizar linguagens de programação diferentes no mesmo Web site.

  6. Desmarque o checkbox Colocar código em arquivo separado.

    Neste passo a passo, você está criando uma página de arquivo único com o código e o HTML na mesma página.O código para páginas do ASP.NET pode ser localizado na página ou em um arquivo de classe separado.Para aprender mais sobre deixar o código em um arquivo separado, veja Demonstra Passo a passo: Criando um Basic página da Web com separação de código em Visual Web Developer.

  7. Clique em Add.

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

Adicionando HTML à página

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

Para adicionar texto à página

  1. 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.Neste ponto, você não tem qualquer texto ou controles na página, portanto a página está em branco.

  2. Na página, digite Bem-vindo ao Visual Web Developer.

    A screen shot a seguir mostra o texto que você digitou no modo Design.

    O texto de boas vindas como visto no modo Design

    Texto de boas-vindas na exibição Design
  3. Mude para o modo de origem.

    Você pode ver o HTML que você criou, digitando no modo Design, como mostrado na seguinte screen shot.

    O texto de boas vindas visto no modo Source

    Texto de boas-vindas na exibição de código-fonte

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

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

    Visual Web Developer starts the ASP.NET Development Server.Um ícone aparece na barra de ferramentas indicando que o Visual Web Developer Web Server está rodando, como mostra o screen shot abaixo.

    Ícone do Servidor Visual Web Developer

    Ícone do servidor Web de desenvolvimento

    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.

    ObservaçãoObservaçã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. Feche o navegador.

Nesta parte do passo a passo, você irá adicionar um controle Button, um TextBox, e um Label à pagina e escreverá código para manipular o evento Click para o controle Button.

Você agora irá adicionar controles servidor à página.Controles servidor, que inclui botões, labels, caixas de texto, e outros controles familiares, fornecem capacidades típicas de processamento do formulário para as suas páginas Web ASP.NET.Entretanto, você pode programar os controles com código que executa no servidor, não no cliente.

Para adicionar controles à página

  1. Clique na guia Design para alternar para o modo Design.

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

  3. Na Toolbox a partir da caixa Padrão, arraste três controles para a página: um TextBox, um Button e um Label.

  4. Coloque o ponto de inserção acima de TextBox controle e, em seguida, digite Insira seu nome:.

    Este texto estático HTML é a legenda para o controle TextBox.Você pode misturar HTML estático e controles de servidor na mesma página.O screen shot a seguir mostra como os três controles aparecem no modo Design.

    Controles no Modo de Exibição Design

    Três controles na exibição Design.

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á definir as propriedades em modo Design e em modo Source.

Para definir propriedades de controles

  1. Selecione o controle Button e em seguida, na janela Propriedades, defina Text para exibir o nome, conforme a seguinte tela.

    Texto do Controle Button Alterado

    Definir texto do botão
  2. Mude para o 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.Controls are declared using HTML-like syntax, except that the tags use the prefix asp: and include the attribute runat="server".

    As propriedades do controle são declaradas como atributos. Por exemplo, quando você  configura a propriedade Text no controle Button, no passo 1, você estava na verdade configurando o atributo Text no markup do controle.

    Note que todos os controles estão dentro de um elemento <form>, que também tem o atributo runat="server".The runat="server" attribute and the asp: prefix for control tags mark the controls so that they are processed by ASP.NET on the server when the page runs.Code outside of <form runat="server"> and <script runat="server"> elements is sent as client markup or code to the browser, which is why the ASP.NET code must be inside an element whose opening tag contains the runat="server" attribute.

  3. Coloque o ponto de inserção em um espaço dentro da tag <asp:label>, e então pressione a tecla de espaço.

    Uma lista suspensa aparece exibindo a lista de propriedade que você configurar 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.A tela a seguir mostra a lista suspensa IntelliSense para o controle Label.

    O IntelliSense para o controle Label

    Atributos do IntelliSense
  4. Selecione ForeColor e então digite um sinal de igual (=).O IntelliSense exibe uma lista de cores.

    ObservaçãoObservação:

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

  5. Selecione uma cor para o texto do controle Label.

    O atributo ForeColor é completado com a cor que você selecionou.

Programando o controle botão

Para este passo a passo, você escreverá um código que lê o nome que o usuário digita na caixa de texto e mostrará o nome no controle Label.

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

  1. Mude para o modo de Visualização Design.

  2. Clique duas vezes no controle Button.

    Visual Web Developer alterna para Source view e cria um esqueleto do manipulador de eventos para o evento padrão do controle Button, o evento Click.

    ObservaçãoObservação:

    Clicar duas vezes em um controle em modo Design é apenas uma das várias maneiras para você poder criar os manipuladores de eventos.

  3. Dentro do manipulador, digite o seguinte:

    Label1.

    Visual Web Developer exibe uma lista de membros disponíveis para o controle Label, como mostra a figura abaixo.

    Membros disponíveis do controle Label

    IntelliSense na exibição de código
  4. Finalize o manipulador do evento Click para o botão para que ele se pareça com o código de exemplo a seguir.

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        Label1.Text = Textbox1.Text & ", welcome to Visual Web Developer!"
    End Sub
    

    protected void Button1_Click(object sender, System.EventArgs e)
    {    
        Label1.Text = TextBox1.Text + ", welcome to Visual Web Developer!";
    }
    
  5. Navegue para baixo até o elemento <asp:Button>.Note que o elemento <asp:Button> agora tem o atributo OnClick="Button1_Click".Este atributo associa o evento Click do botão com o método manipulador que você codificou no passo 4.

    Os métodos do manipulador de eventos podem ter qualquer nome; o nome que você vê é o nome padrão criado pelo Visual Web Developer.O ponto importante é que o nome usado pelo atributo OnClick deve ter o nome de um método na página.

    ObservaçãoObservação:

    Se você está usando Visual Basic com separação de código, o Visual Web Developer não adiciona um atributo explícito OnClick.Ao invés disso, o evento é associado ao método manipulador usando uma palavra-chave Handles na declaração do próprio manipulador.

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.

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

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

    The name you entered is displayed in the Label control.Observe que quando você clica no botão, a página é remetida para o servidor Web.ASP.NET then recreates the page, runs your code (in this case, the Button control's Click event handler runs), and then sends the new page to the browser.Se você observar a barra de status do navegador, você pode ver que a página está fazendo uma chamadapara o servidor Web sempre que você clicar no botão.

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

    No código-fonte da página, você vê apenas HTML comum; você não irá ver  os elementos ">< ASP: > com os quais estava trabalhando em Modo de exibição Source.Quando a página é executada, o ASP.NET processa os controles do servidor e processa os elementos HTML da página que executa as funções que representam o controle.Por exemplo, o controle <asp:Button> é processado como o elemento HTML <input type="submit">.

  4. Feche o navegador.

Nesta parte do passo a passo, você trabalhará com o controle Calendar, que exibe datas um mês por vez.O controle Calendar é um controle mais complexo que o botão, a caixa de texto, e o label que você estava trabalhando e ilustra capacidades adicionais dos controles-servidor.

Nesta seção, você adicionará um controle Calendar à página e o formatará.

Para adicionar um controle Calendar

  1. Em Visual Web Developer, alterne para modo Design.

  2. A partir da seção Standard da Toolbox, arraste um controle Calendar para a página:

    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 figura a seguir mostra o controle Calendar processado em modo Design.

    Controle Calendar no modo Design

    Controle Calendar na exibição Design
  3. No painel de marca inteligente, escolha Auto Format.

    A caixa de diálogo Auto Format é exibida, permitindo que você selecione um esquema de formatação para o calendário.A figura a seguir mostra a caixa de diálogo Auto Format para o controle Calendar.

    Caixa de Diálogo Auto Format para o controle Calendar

    Caixa de diálogo AutoFormatação (controle Calendar)
  4. Na lista Select a scheme, selecione Simple e em seguida, clique em OK

  5. Alterne para modo de origem.

    Você pode ver o elemento <asp:Calendar>.Este elemento é muito maior que os elementos para os controles simples que você criou anteriormente.Ele também inclui subelementos, tais como <WeekEndDayStyle>, que representam configurações de formatação variadas.A figura a seguir mostra o controle Calendar em modo Source.

    Controle Calendar na exibição de código-fonte

    Controle Calendar na exibição de código-fonte

Programando o Controle Calendar

Nesta seção, você irá programar o controle Calendar para exibir a data selecionada no momento.

Para programar o controle Calendar

  1. In Design exibir, clicar duas vezes o Calendar controle.

    Um novo manipulador de eventos é criado no fontemodo de exibição de .

  2. Finalize o manipulador do evento SelectionChanged com o código realçado a seguir.

    Protected Sub Calendar1_SelectionChanged(ByVal sender As Object, ByVal e As System.EventArgs)
        Label1.Text = Calendar1.SelectedDate.ToString()
    End Sub
    

    protected void Calendar1_SelectionChanged(object sender, System.EventArgs e)
    {    
        Label1.Text = Calendar1.SelectedDate.ToString();
    }
    

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 Label.

  3. No navegador, exibir o código fonte para a página.

    Note que o controle Calendar foi processado para a página como uma tabela, com cada dia como um elemento <td> contendo um elemento <a>.

  4. Feche o navegador.

Esta explicação ilustra os recursos básicos do designer da página do Visual Web Developer.Agora que você entende como criar e editar uma página Web no Visual Web Developer, você pode querer explorar outros recursos. Por exemplo, você pode desejar:

Contribuições da comunidade

ADICIONAR
Mostrar:
© 2015 Microsoft