Exportar (0) Imprimir
Expandir Tudo
Este artigo foi traduzido por máquina. Coloque o ponteiro do mouse sobre as frases do artigo para ver o texto original. Mais informações.
Tradução
Original

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

Esta explicação passo a passo fornece uma introdução para o Web development ambiente Microsoft Visual Studio 2010 e Microsoft Visual Web Developer Express. Esta explicação passo a passo orienta a criação de uma simples ASP.NETpáginaWeb e ilustra 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:

  • Criando um sistema de arquivosde site daWeb projeto.

  • Familiarizar-se com o Visual Studio.

  • Criando um arquivo de único- ASP.NET página.

  • Adicionando controles.

  • Adicionando manipuladores de eventos.

  • Executar páginas usando o servidor Web interno do Visual Studio para teste.

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

  • Microsoft Visual Studio 2010 or Microsoft Visual Web Developer Express. Para baixar de informações, consulte o Visual Studio Development CentralizadositeWeb .

    ObservaçãoObservação

    Se você estiver usando Microsoft Visual Studio 2010, este passo a passo presume que você selecionou o o desenvolvimento deWeb acoleção de configurações na primeira vez que você iniciou Microsoft Visual Studio 2010. Para mais informações, consulte Como: Selecionar as configurações do ambiente de desenvolvimento para a Web.

  • O .NET Framework, que é instalado quando você instalar Microsoft Visual Studio 2010 ou Microsoft Visual Web Developer Express.

Nesta parte da explicação, você irá criar um projeto de site de Web e adiciona 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ê irá criar um sistema de arquivosde site daWeb projeto que não requer que você trabalhe com o (IIS). Instead, you will create and run your page in the local file system.

sistema de arquivosde site daWeb projeto é aquele que armazena páginas e outros arquivos em uma pasta que você escolhe em algum lugar no seu computador. Outras opções deprojeto da Webincluem o seguinte:

  • A de site local do IIS Web projeto, que armazena os arquivos em uma subpasta do local do IIS raiz (geralmente, \inetpub\wwwroot\).

  • Um do site FTP projeto, que armazena arquivos em um servidor remoto que você acessa através da Internet usando o protocolo de transferência de Arquivo (FTP).

  • A de siteremoto do IIS Web projeto, que armazena arquivos em um servidor remoto , você pode acessar através de um local de rede.

  • Um deaplicativode Webprojeto, que é semelhante a um sistema de arquivos projeto do siteWeb , exceto a compilar antes da implantação e implantar -o como um arquivo de biblioteca (. dll) de vínculo dinâmico. Para obter mais informações sobre a diferença entre os projetos de site da Web e projetos deaplicativo Web, consulte Projetos de aplicativos Web versus projetos de sites da Web.

To create a file system Web site

  1. Abra o Microsoft Visual Studio 2010 ou Microsoft Visual Web Developer Express.

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

    O Novo Web Site caixa de diálogo for exibida, como mostrado na ilustração a seguir:

    Caixa de diálogo New Web Site
  3. Em Modelos instalados, clique em Visual Basic ou C# e selecione ASP.NETSiteWeb .

    Quando você criar um Web site projeto, você pode especificar um modelo. Cada modelo cria umprojeto de Webque contém os arquivos e pastas diferentes. Esta explicação passo a passo, você está criando Web ASP.NETSiteWeb modelo, que cria arquivos e pastas que são usadas normalmente em ASP.NETsitesWeb .

  4. No WebLocal caixa, selecione sistema deArquivoe 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. Clique OK.

    autenticação (ASP.NETassociação). Quando uma nova página é criada, por padrão, o Visual Studio exibe a página em fonte modo de exibição, onde você pode ver os elementos HTML da página. A ilustração a seguir mostra o modo de visualização de código fonte de uma página da Web padrão.

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

Um Tour do ambiente de desenvolvimentoWeb Visual Studio

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

ObservaçãoObservação

Este diagrama mostra a janela padrão e a localização das diferentes àreas na janela. No menu de Visualização permite exibir janelas Adicional e reorganizar e redimensionar janelas para atender suas preferências. Se já tiverem sido feitas alterações para a organização das janela , o que você vê não corresponderão a ilustração.

O ambiente do Visual Studio

Esquema de janelas e ferramentas de IDE

Para se familiarizar com o Web designer

  • Examine the preceding illustration and match the text to the following list, which describes the most commonly used windows and tools. (Not all windows and tools that you see are listed here, only those marked in the preceding illustration.)

    • Toolbars. Provide commands for formatting text, finding text, and so on. Some toolbars are available only when you are working in Design view.

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

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

    • Properties window. Allows you to change settings for the page, HTML elements, controls, and other objects.

    • View abas. Present you with different views of the same document. Design view is a near-WYSIWYG editing surface. Modo Source, é o editor de HTML da página. Divisão exibe ambos o Design modo de exibição e o fonte o modo de exibição do documento. Você trabalhará com o Design e fonte modos posteriormente nesta explicação passo a passo. If you prefer to open Web pages in Design view, on the Tools menu, click Options, select the HTML Designer node, and change the Start Pages In option.

    • Caixa de ferramentas. Provides controls and HTML elements that you can drag onto your page. Toolbox elements are grouped by common function.

    • Server Explorer/Database Explorer. Displays database connections. Se Gerenciador de Servidores não estiver visível, no Exibir menu, clique em Gerenciador de Servidores ou Database Explorer.

      ObservaçãoObservação

      O Gerenciador de Servidores janela é chamada Database Explorer na Microsoft Visual Web Developer Express. Para ver todos os itens de menu do disponíveis no Microsoft Visual Web Developer Expressdiante a Ferramentas menu, clique em Configuraçõese, em seguida, clique em Configuraçõesde especialistas.

Criando um NovoASP.NET PáginadeWeb Forms

Quando você criar uma nova Web site usando o ASP.NETSiteWeb deprojetomodelo, Visual Studio adiciona um ASP.NET (páginaWeb Forms) chamada aspx Padrão. 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.

To add a page to the Web site

  1. Feche a página Default.aspx.
    Para fazer isso, à direita, clique na guia que exibe o nome do arquivo de-e clique em Fechar.

  2. Em Solution Explorer, à direita, clique no site da Web (por exemplo, C:\BasicWebSite)-e clique em AdicionarNovo Item .

    A caixa de diálogo Adicionar novo item é exibida. A ilustração a seguir mostra um exemplo da Adicionar Novo Item caixa de diálogo.

    Caixa de diálogo Adicionar Novo Item
  3. Na lista , selecione o Web Form.

  4. Na caixa Name, escreva FirstWebPage.

    Quando você criou o projetodo site da Web , você especificou um idioma padrão com base nomodelo de projetoque você selecionou. No entanto, cada vez que você criar uma nova página ou componente para o seu site Web , você pode selecionar a linguagem de programação para essa página ou componente. Você pode utilizar linguagens de programação diferentes no mesmo Web site.

  5. 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. The code for ASP.NET pages can be located either in the page or in a separate class file.

  6. Clique em Add.

    Visual Studio cria a nova página e o abre.

Adding HTML to the Page

In this part of the walkthrough, you will add some static text to the page.

To add text to the page

  1. At the bottom of the document window, click the Design tab to switch to Design view.

    Design exibe a página que você está trabalhando na forma WYSIWYG. Neste ponto, você não tem qualquer texto ou controles na página, então a página está em branco, exceto por uma linha tracejada que descreve um retângulo. Esse retângulo representa um elemento div na página.

  2. Clique dentro do retângulo que é contornado pela linha tracejada.

  3. Digite Bem-vindo ao Visual Web Developer e pressione ENTER duas vezes.

    A ilustração a seguir mostra o texto que você digitou na Design modo de exibição.

    Texto de boas-vindas na exibição Design
  4. Troque para o modo de exibição Source.

    Você pode ver o HTML que você criou, quando escreveu em modo Design, como  mostrado na ilustração a seguir.

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

Running the Page

Before you proceed with adding controls to the page, you can try running it. To run a page, you need a Web server. In a production Web site, you use IIS as your Web server. No entanto, para teste uma página, você pode usar o Visual Studio Development Server, que é executado localmente e não requer o IIS. Para o sistema de arquivos Web site projetos, o servidor da Web padrão no Visual Studio e Microsoft Visual Web Developer Express é o servidor de desenvolvimento Visual Studio .

To run the page

  1. No Solution Explorer, clique com o botao direito do mouse em FirstWebPage.aspx e selecione Set as Start Page.

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

    Visual Studio inicia o servidor de desenvolvimento de Visual Studio . Um ícone aparece na barra de tarefas do Windows indicar que o servidor de desenvolvimento Visual Studio está sendo executado, conforme mostrado na ilustração a seguir.

    Ícone do servidor Web de desenvolvimento

    The page is displayed in the browser. Embora a página que você criou tenha uma- extensão . aspx, ela atualmente executa como qualquer página HTML .

    Para exibir uma página no navegador, você tambén pode clicar com o botão direito do mouse na página, no Solution Explorer e selecionar View in Browser.

  3. Feche o navegador.

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.

Você irá adicionar um Button controle, uma TextBox controle e um Label de controle para a página e gravar código para manipular a Click evento para o Button de controle.

To add controls to the page

  1. Clique o Design tab para alternar para Design modo de exibição.

  2. Coloque o ponto de inserção no final de bem-vindo ao Visual Web Developer texto e pressione inserir cinco ou mais vezes para liberar algum espaço no div caixa de elemento.

  3. No caixa de ferramentas, expandir o Padrão grupo.

  4. Arraste um TextBox controlar até a página e solte-o no meio do div caixa de elemento que tenha bem-vindo ao Visual Web Developer, na primeira linha.

  5. Arraste um Button controlar até a página e solte-o à direita da TextBox de controle.

  6. Arraste um Label controlar até a página e solte-o em uma separada linha abaixo do Button de controle.

  7. Coloque o ponto de inserção acima de TextBox de controle e, em seguida, digite Enter your name:.

    Este texto estático em HTML é a legenda para o controle TextBox

    Você pode misturar HTML estático e controles de servidor na mesma página. A ilustração a seguir mostra como os três controles aparecem em Design modo de exibição.

    Três controles na exibição Design.

Setting Control Properties

Visual Studio oferece várias maneiras para definir as propriedades dos controles na página. Nesta parte da explicação, você irá definir as propriedades em ambos os Design modo de exibição e fonte modo de exibição.

To set control properties

  1. Selecione o Button controle e na Propriedades janela, defina Texto para o Nomede exibição. O texto digitado aparece no botão no designer, como mostrado na ilustração a seguir.

    ObservaçãoObservação

    Se o Propriedades janela não for exibida, pressione F4 para exibi-la.

    Definir texto do botão
  2. Troque para o modo de exibição Source.

    Origem exibe o HTML da página, incluindo os elementos que Visual Studio criou para os controles de 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. 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 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. OCódigo fora do <form runat="server"> e <script runat="server"> elementos é enviada inalteradas, para o navegador, é por isso, o ASP.NET código deve estar dentro de um elemento cuja marca de abertura contém o runat="server"atributo.

  3. Coloque o ponto de inserção após asp:Label na <asp:Label> marca e pressione SPACEBAR.

    A drop-down list appears that displays the list of properties you can set for a Label control. Esse recurso, conhecido como IntelliSense, o ajudará na fonte modo de exibição com a sintaxe de controles de servidor, elementos HTML e outros itens na página. A ilustração a seguir mostra a queda de IntelliSense-para baixo da lista para o Label de controle.

    Atributos do IntelliSense
  4. Selecione ForeColor e digite um sinal de igual e uma aspa (= ").

    IntelliSense displays a list of colors.

    ObservaçãoObservação

    You can display an IntelliSense drop-down list at any time by pressing CTRL+J.

  5. Select a color for the Label control's text. Verifique se que você selecionar uma cor escura o suficiente para ler contra plano de fundobranco.

    O ForeColor atributo é preenchido com a cor que você selecionou, incluindo as aspas de fechamento.

Programming the Button Control

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.

To add a default button event handler

  1. Mude para o modo Design.

  2. Double-click the Button control.

    Visual Studio alterna para o fonte exibir e cria um manipulador de evento de esqueleto para o Button eventodo padrão do controle, o Click evento.

    ObservaçãoObservação

    -Clicando duas vezes em um controle de Design modo de exibição é apenas uma das várias maneiras que você pode criarmanipuladores deevento .

  3. Dentro do manipulador, digite Label1 seguido por um ponto (.).

    Quando você digita o período após rótulo, Visual Studio exibe uma lista de membros disponíveis para o Label o controle, como mostrado na ilustração a seguir.

    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 void Button1_Click(object sender, System.EventArgs e)
    {    
        Label1.Text = TextBox1.Text + ", welcome to Visual Studio!";
    }
    
  5. Navegue para baixo até o elemento <asp:Button>. Note that the <asp:Button> element now has the attribute onclick="Button1_Click".

    Este atributo vincula o botão Clickoevento ao método do manipulador você codificou na etapa anterior.

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

Running the Page

You can now test the server controls on the page.

To run the page

  1. Press CTRL+F5 to run the page in the browser.

    A página novamente executa usando o servidor de desenvolvimento Visual Studio .

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

    The name you entered is displayed in the Label control. Note that when you click the button, the page is posted to the Web server. 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. If you watch the status bar in the browser, you can see that the page is making a round trip to the Web server each time you click the button.

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

    No código de fonte da página, você vê apenas comum HTML; Você não vir o <asp:> elementos que você estava trabalhando no fonte modo de exibição. When the page runs, ASP.NET processes the server controls and renders HTML elements to the page that perform the functions that represent the control. Por exemplo, o <asp:Button> controle é processado como o HTML <input type="submit"> elemento.

  4. Feche o navegador.

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 System.Web.UI.WebControls.Calendar control to the page and format it.

To add a Calendar control

  1. No Visual Studio, alterne para o Design modo de exibição.

  2. Do Padrão seção a Toolbox, arraste um Calendar controlar até a página e solte-o abaixo do div elemento que contém outros controles:

    The calendar's smart tag panel is displayed. The panel displays commands that make it easy for you to perform the most common tasks for the selected control. A ilustração a seguir mostra a Calendar controle como processado no Design modo de exibição.

    Controle Calendar na exibição Design
  3. In the smart tag panel, choose Auto Format.

    The Auto Format dialog box is displayed, which allows you to select a formatting scheme for the calendar. A ilustração a seguir mostra a Automático Formatar caixa de diálogo para o Calendar de controle.

    Caixa de diálogo AutoFormatação (controle Calendar)
  4. From the Select a scheme list, select Simple and then click OK.

  5. Alterne para o fonte modo de exibição.

    Você pode ver o elemento <asp:Calendar>. This element is much longer than the elements for the simple controls you created earlier. Ele também inclui subelementos, tais como <WeekEndDayStyle>, que representam configurações de formatação variadas. A ilustração a seguir mostra a Calendar controle na fonte modo de exibição. (A marcação exata que você vê na fonte modo de exibição pode diferir ligeiramente a ilustração.)

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

Programming the Calendar Control

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

To program the Calendar control

  1. Em Design exibir o duplo clique de-a Calendar de controle.

    Um novo manipulador de evento é criado no fonte modo de exibição.

  2. Finalize o manipulador de eventos SelectionChanged com o seguinte código em destaque.

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

Running the Page

You can now test the calendar.

To run the page

  1. Press CTRL+F5 to run the page in the browser.

  2. Click a date in the calendar.

    The date you clicked is displayed in the Label control.

  3. In the browser, view the source code for the page.

    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.

Esta explicação passo a passo ilustrou os recursos básicos do designerde página da Visual Studio . Agora que você entende como criar e edição uma página Web no Visual Studio, convém explorar outros recursos. Por exemplo, você pode querer fazer o seguinte:

Contribuições da comunidade

ADICIONAR
Mostrar:
© 2014 Microsoft