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

  • Artigo

Esta explicação 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.

Tarefas ilustradas nesta explicação 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.

  • Adicionar controles.

  • Adicionar manipuladores de eventos.

  • Running pages with the Servidores Web no Visual Web Developer.

Pré-requisitos

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

  • Visual Web Developer

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

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 obter mais informações, consulte 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. Sobre o Arquivo menu, clicar Novo site.

    A caixa de diálogo New Web Site aparece como mostrado na screen shot a seguir.

    Caixa de diálogo New Web Site

  3. Em O Visual Studio installed templates, clicar Site da Web do ASP.NET.

    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 em OK.

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

    Modo Source de uma página padrão

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

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 em seu site Web.

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

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

    • Guias de Exibição.Mostra diferentes modos de exibição do mesmo documento.Modo Design é uma superfície de edição próxima ao WYSIWYG.fonte exibição é o editor de HTML da página.modo divisão exibe o Design modo e o fonte modo de exibição do 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.If Gerenciador de servidores não estiver visível no Visual Web Developer, no Modo de exibição menu, clicar Gerenciador de servidores or Banco de dados Explorer.

      Observaçã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ê criar um novo site da Web, o Visual Web Developer adiciona uma página ASP.NET (página de Web Forms) chamada padrão.aspx.Você pode usar a página padrão.aspx sistema autônomo a residência do seu Web site.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.To do this, right-click the tab containing the file name and select Close.

  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

  4. No Nome caixa, digite 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 usar linguagens de programação diferentes no mesmo site Web.

  6. Desmarque a caixa de seleção Place code in separate file.

    Nesta explicação passo a passo, você está criando uma página single-file com o código e 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.To learn more about keeping the code in a separate file, see Passo-a-passo: Criando uma página da Web básica com separação de código no Visual Web Developer.

  7. Clique em Adicionar.

    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

  3. Alterne para 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 como visto no modo Source

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.An icon appears on the toolbar to indicate that the Visual Web Developer Web server is running, as shown in the following screen shot.

    Ícone do Servidor Visual Web Developer

    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çã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.

Adicionando e programando controles

In this part of the walkthrough, you will add a Button, a TextBox, and a Label control to the page and write code to handle the Click event for the Button control.

You will now add server controls to the page.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 guia Design para alternar para o modo Design.

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

  3. No Caixa de ferramentas, from the Padrão agrupar, arrastar três controles para a página: a TextBox controle, uma Button controle e um Label controle.

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

    This static HTML text is the caption for the TextBox control.Você pode misturar HTML estático e controles de servidores 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

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. selecionar o Button controle e, em seguida, na janela Propriedades, defina Texto para nome para exibição, sistema autônomo mostrado na tela seguinte captura.

    Texto do Controle Button Alterado

  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.Controls are declared using HTML-like syntax, except that the tags use the prefix asp: and include the attribute .

    Propriedades do controle são declarados como atributos.For example, when you set the Text property for the Button control, in step 1, you were actually setting the Text attribute in the control's markup.

    Note that all the controls are inside a <form> element, which also has the attribute .The 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 > and <script > 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 attribute.

  3. Put the insertion point in a space within the <asp:label> tag, and then press SPACEBAR.

    A drop-down list appears that displays the list of properties you can set for a Label control.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.The following screen shot shows the IntelliSense drop-down list for the Label control.

    O IntelliSense para o controle Label

  4. Select ForeColor and then type an equal sign (=).O IntelliSense exibe uma lista de cores.

    Observação:

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

  5. Select a color for the Label control's text.

    The ForeColor attribute is completed with the color that you have selected.

Programando o controle botão

For this walkthrough, you will write code that reads the name that the user enters into the text box and then displays the name in the Label control.

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

  1. Alternar para modo Design.

  2. Clique duas vezes no controle Button.

    Visual Web Developer switches to Source view and creates a skeleton event handler for the Button control's default event, the Click event.

    Observaçã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 displays a list of available members for the Label control, as shown in the following screen shot.

    Membros disponíveis do controle Label

  4. Finish the Click event handler for the button so that it reads as shown in the following code example.

    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. Scroll down to the <asp:Button> element.Note that the <asp:Button> element now has the attribute OnClick="Button1_Click".This attribute binds the button's Click event to the handler method you coded in step 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.The important point is that the name used for the OnClick attribute must match the name of a method in the page.

    Observação:

    If you are using Visual Basic with code separation, Visual Web Developer does not add an explicit OnClick attribute.Instead, the event is bound to the handler method using a Handles keyword on the handler declaration itself.

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 para a caixa de texto e clique o 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.

    In the page source code, you see only ordinary HTML; you do not see the <asp:> elements that you were working with in Source view.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.For example, the <asp:Button> control is rendered as the HTML element <input type="submit">.

  4. Feche o navegador.

Trabalhando com Controles Adicionais

In this part of the walkthrough, you will work with the Calendar control, which displays dates a month at a time.The Calendar control is a more complex control than the button, text box, and label you have been working with and illustrates some further capabilities of server controls.

In this section, you will add a Calendar control to the page and format it.

Para adicionar um controle Calendar

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

  2. From the Standard section of the Toolbox, drag a Calendar control onto the page:

    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.The following screen shot shows the Calendar control as rendered in the Design view.

    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.The following screen shot shows the Auto Format dialog box for the Calendar control.

    Caixa de Diálogo Auto Format para o controle Calendar

  4. Na lista Select a scheme, selecione Simple e em seguida, clique em OK

  5. Alterne para modo de origem.

    You can see the <asp:Calendar> element.Este elemento é muito maior que os elementos para os controles simples que você criou anteriormente.It also includes subelements, such as <WeekEndDayStyle>, which represent various formatting settings.The following screen shot shows the Calendar control in Source view.

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

Programando o Controle Calendar

In this section, you will program the Calendar control to display the currently selected date.

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. Finish the SelectionChanged event handler with the following highlighted code.

    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.

    The date you clicked is displayed in the Label control.

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

    Note that the Calendar control has been rendered to the page as a table, with each day as a <td> element containing an <a> element.

  4. Feche o navegador.

Próximas etapas

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:

Consulte também

Tarefas

Demonstra Passo a passo: Criar um site IIS local no Visual Web Developer

Demonstra Passo a passo: Edição de sites com FTP no Visual Web Developer

Conceitos

Visão geral do ASP.NET

Trabalhando com o Visual Web Developer