Criar o projeto

por Erik Reitan

Esta série de tutoriais ensinará os conceitos básicos da criação de um aplicativo ASP.NET Web Forms usando ASP.NET 4.5 e Microsoft Visual Studio Express 2013 para Web. Um projeto Visual Studio 2013 com código-fonte C# está disponível para acompanhar esta série de tutoriais.

Neste tutorial, você criará, revisará e executará o projeto padrão no Visual Studio, o que permitirá que você se familiarize com recursos de ASP.NET. Além disso, você examinará o ambiente do Visual Studio.

O que você aprenderá:

  • Como criar um novo projeto de Web Forms.
  • A estrutura de arquivo do projeto Web Forms.
  • Como executar o projeto no Visual Studio.
  • Os diferentes recursos do aplicativo web forms padrão.
  • Algumas noções básicas sobre como usar o ambiente do Visual Studio.

Criando o Projeto

  1. Abra o Visual Studio.

  2. Selecione Novo Projeto no menu Arquivo no Visual Studio.

    Criar o item de menu Projeto – Novo Projeto

  3. Selecione o grupo Modelos ->Visual C# ->Modelos da Web à esquerda.

  4. Selecione o modelo Aplicativo Web ASP.NET na coluna central.
    Esta série de tutoriais está usando .NET Framework 4.5.2.

  5. Nomeie seu projeto wingtipToys e escolha o botão OK .

    Criar a caixa de diálogo Projeto – Novo Projeto

    Nota

    O nome do projeto nesta série de tutoriais é WingtipToys. É recomendável que você use esse nome de projeto exato para que o código fornecido ao longo da série de tutoriais funcione conforme o esperado.

  6. Clique no botão Alterar Autenticação. Selecione Contas de Usuário Individuais e clique no botão OK .

  7. Selecione o modelo de Web Forms e clique no botão OK.

    Captura de tela da janela Novo projeto ASP.NET com o modelo Web Forms e o botão OK selecionados.

O projeto levará um pouco de tempo para ser criado. Quando estiver pronto, abra a página Default.aspx .

Captura de tela da janela Microsoft Visual Studio Express 2013 para Web exibindo a página Default.aspx.

Você pode alternar entre o modo design e o modo de exibição Origem selecionando uma opção na parte inferior da janela central. O modo de exibição de design exibe ASP.NET páginas da Web, páginas master, páginas de conteúdo, páginas HTML e controles de usuário usando uma exibição quase WYSIWYG. O modo de exibição de origem exibe a marcação HTML para sua página da Web, que você pode editar.

Gorjeta

Noções básicas sobre as estruturas de ASP.NET

O ASP.NET Web Forms lhe permite compilar sites dinâmicos usando um modelo familiar de arrastar e soltar, baseado em evento. Uma superfície de design e muitos controles e componentes lhe permitem compilar rapidamente sites sofisticados, poderosos baseados em UI com acesso de dados. O Wingtip Toy Store é baseado em ASP.NET Web Forms, mas muitos dos conceitos que você aprende nesta série de tutoriais são aplicáveis a todos os ASP.NET.

ASP.NET oferece quatro estruturas de desenvolvimento principais:

  • ASP.NET Web Forms
    A estrutura Web Forms tem como destino desenvolvedores que preferem programação declarativa e baseada em controle, como o Microsoft Windows Forms (WinForms) e o WPF/XAML/Silverlight. Ele oferece um modelo de desenvolvimento controlado por designer WYSIWYG, portanto, ele é popular entre os desenvolvedores que procuram um ambiente rad (desenvolvimento rápido de aplicativos) para desenvolvimento na Web. Se você for novo na programação da Web e estiver familiarizado com as ferramentas tradicionais de desenvolvimento de cliente do Microsoft RAD (por exemplo, para Visual Basic e Visual C#), poderá criar rapidamente um aplicativo Web sem ter experiência em HTML e JavaScript.
  • ASP.NET MVC
    ASP.NET MVC tem como alvo desenvolvedores interessados em padrões e princípios, como desenvolvimento controlado por teste, separação de preocupações, inversão de controle (IoC) e DI (injeção de dependência). Essa estrutura incentiva a separação da camada lógica de negócios de um aplicativo Web de sua camada de apresentação.
  • Páginas da Web do ASP.NET
    Páginas da Web do ASP.NET tem como alvo desenvolvedores que desejam uma história de desenvolvimento na Web simples, nos moldes do PHP. No modelo Páginas da Web, você cria páginas HTML e, em seguida, adiciona código baseado em servidor à página para controlar dinamicamente como essa marcação é renderizada. As Páginas da Web foram projetadas especificamente para ser uma estrutura leve e é o ponto de entrada mais fácil para ASP.NET para pessoas que conhecem HTML, mas podem não ter uma ampla experiência de programação - por exemplo, alunos ou hobbyists. Também é uma boa maneira para desenvolvedores Web que conhecem PHP ou estruturas semelhantes começarem a usar ASP.NET.
  • ASP.NET aplicativo de página única
    ASP.NET SPA (Aplicativo de Página Única) ajuda você a criar aplicativos que incluem interações significativas do lado do cliente usando HTML 5, CSS 3 e JavaScript. A atualização do ASP.NET and Web Tools 2012.2 fornece um novo modelo para a criação de aplicativos de página única usando knockout.js e ASP.NET Web API. Além do novo modelo de SPA, novos modelos de SPA criados pela comunidade também estão disponíveis para download.

Além das quatro estruturas de desenvolvimento main, ASP.NET também oferece tecnologias adicionais que são importantes para estar cientes e familiarizadas, mas não são abordadas nesta série de tutoriais:

  • ASP.NET Web API – uma estrutura para a criação de serviços HTTP que atingem uma ampla gama de clientes, incluindo navegadores e dispositivos móveis.
  • ASP.NET SignalR – uma biblioteca que facilita o desenvolvimento da funcionalidade da Web em tempo real.

Revisão do projeto

No Visual Studio, a janela Gerenciador de Soluções permite gerenciar arquivos para o projeto. Vamos dar uma olhada nas pastas que foram adicionadas ao seu aplicativo no Gerenciador de Soluções. O modelo de aplicativo Web adiciona uma estrutura de pasta básica:

Criar o Projeto – Gerenciador de Soluções

O Visual Studio cria algumas pastas e arquivos iniciais para seu projeto. Os primeiros arquivos com os quais você trabalhará mais adiante neste tutorial são os seguintes:

Arquivo Finalidade
Default.aspx Normalmente, a primeira página é exibida quando o aplicativo é executado em um navegador.
Site.Master Uma página que permite criar um layout consistente e usar o comportamento padrão para páginas em seu aplicativo.
Global.asax Um arquivo opcional que contém código para responder a eventos no nível do aplicativo e de sessão gerados por ASP.NET ou por módulos HTTP.
Web.config Os dados de configuração de um aplicativo.

Executando o aplicativo Web padrão

O aplicativo Web padrão fornece uma experiência avançada com base na funcionalidade e suporte internos. Sem nenhuma alteração no projeto de Formulários da Web padrão, o aplicativo está pronto para ser executado no navegador da Web local.

  1. Pressione a tecla F5 enquanto estiver no Visual Studio.
    O aplicativo será criado e exibido no navegador da Web.

    Criar o Projeto – Página Padrão

  2. Depois de concluir a revisão do aplicativo em execução, feche a janela do navegador.

Há três páginas main neste aplicativo Web padrão: Default.aspx (Página Inicial), About.aspx e Contact.aspx. Cada uma dessas páginas pode ser acessada na barra de navegação superior. Também há duas páginas adicionais contidas na pasta Conta, na página Register.aspx e na página Login.aspx. Essas duas páginas permitem que você use os recursos de associação de ASP.NET para criar, armazenar e validar credenciais de usuário.

plano de fundo ASP.NET Web Forms

ASP.NET Web Forms são páginas baseadas na tecnologia microsoft ASP.NET, na qual o código executado no servidor gera dinamicamente a saída da página da Web para o navegador ou dispositivo cliente. Uma página ASP.NET Web Forms renderiza automaticamente o HTML compatível com o navegador correto para recursos como estilos, layout e assim por diante. Web Forms são compatíveis com qualquer linguagem compatível com o Common Language Runtime do .NET, como o Microsoft Visual Basic e o Microsoft Visual C#. Além disso, Web Forms são criadas no microsoft .NET Framework, que fornece benefícios como um ambiente gerenciado, segurança de tipos e herança.

Quando uma página ASP.NET Web Forms é executada, a página passa por um ciclo de vida no qual executa uma série de etapas de processamento. Essas etapas incluem inicialização, instanciação de controles, restauração e manutenção do estado, execução do código do manipulador de eventos e renderização. À medida que você se familiariza mais com o poder do ASP.NET Web Forms, é importante entender o ciclo de vida da página ASP.NET para que você possa escrever código no estágio de ciclo de vida apropriado para o efeito que você pretende.

Quando um servidor Web recebe uma solicitação de uma página, ele localiza a página, a processa, envia para o navegador e descarta todas as informações da página. Se o usuário solicitar a mesma página novamente, o servidor repetirá toda a sequência, reprocessando a página do zero. Dito de outra forma, um servidor não tem memória de páginas que tenha páginas processadas são sem estado. A estrutura de página ASP.NET manipula automaticamente a tarefa de manter o estado de sua página e seus controles e fornece maneiras explícitas de manter o estado das informações específicas do aplicativo.

Gorjeta

Recursos de aplicativo Web no modelo de aplicativo Web Forms

O modelo ASP.NET Web Forms Application fornece um conjunto avançado de funcionalidades internas. Ele não só fornece uma página Home.aspx , uma página About.aspx , uma página Contact.aspx , mas também inclui a funcionalidade de associação que registra os usuários e salva suas credenciais para que eles possam fazer logon em seu site. Essa visão geral fornece mais informações sobre alguns dos recursos contidos no modelo de aplicativo ASP.NET Web Forms e como eles são usados no aplicativo Wingtip Toys.

Associação

ASP.NET A identidade armazena as credenciais dos usuários em um banco de dados criado pelo aplicativo. Quando os usuários fazem logon, o aplicativo valida suas credenciais lendo o banco de dados. A pasta Conta do projeto contém os arquivos que implementam as várias partes da associação: registrar, fazer logon, alterar uma senha e autorizar o acesso. Além disso, ASP.NET Web Forms dá suporte a OAuth e OpenID. Esses aprimoramentos de autenticação permitem que os usuários façam logon em seu site usando credenciais existentes, de contas como Facebook, Twitter, Windows Live e Google.

Criar o Projeto – Gerenciador de Soluções (identidade ASP.NET)

Por padrão, o modelo cria um banco de dados de associação usando um nome de banco de dados padrão em uma instância do SQL Server Express LocalDB, o servidor de banco de dados de desenvolvimento que vem com Visual Studio Express 2013 para Web.

SQL Server Express LocalDB

SQL Server Express LocalDB é uma versão leve do SQL Server que tem muitos recursos de programação de um banco de dados SQL Server. SQL Server Express LocalDB é executado no modo de usuário e tem uma instalação rápida de configuração zero que tem uma pequena lista de pré-requisitos de instalação. No Microsoft SQL Server, qualquer banco de dados ou código Transact-SQL pode ser movido de SQL Server Express LocalDB para SQL Server e SQL Azure sem nenhuma etapa de atualização. Portanto, SQL Server Express LocalDB pode ser usado como um ambiente de desenvolvedor para aplicativos direcionados a todas as edições de SQL Server. SQL Server Express LocalDB habilita recursos como procedimentos armazenados, funções definidas pelo usuário e agregações, integração .NET Framework, tipos espaciais e outros que não estão disponíveis no SQL Server Compact.

Páginas mestras

Uma página ASP.NET master define uma aparência e um comportamento consistentes para todas as páginas em seu aplicativo. O layout da página master mescla com o conteúdo de uma página de conteúdo individual para produzir a página final que o usuário vê. No aplicativo Wingtip Toys, você modifica a página Site.master master para que todas as páginas no site da Wingtip Toys compartilhem o mesmo logotipo e barra de navegação distintos.

HTML5

O modelo ASP.NET Web Forms Application dá suporte a HTML5, que é a versão mais recente da linguagem de marcação HTML. O HTML5 dá suporte a novos elementos e funcionalidades que facilitam a criação de sites.

Modernizr

Para navegadores que não dão suporte a HTML5, você pode usar o Modernizr. Modernizr é uma biblioteca JavaScript de software livre que pode detectar se um navegador dá suporte a recursos HTML5 e habilitá-los se não o fizer. No modelo ASP.NET Web Forms Aplicativo, o Modernizr é instalado como um pacote NuGet.

Bootstrap

Os modelos de projeto Visual Studio 2013 usam Bootstrap, uma estrutura de layout e temas criada pelo Twitter. O Bootstrap usa CSS3 para fornecer design responsivo, o que significa que os layouts podem se adaptar dinamicamente a diferentes tamanhos de janela do navegador. Você também pode usar o recurso de temas do Bootstrap para afetar facilmente uma alteração na aparência do aplicativo. Por padrão, o modelo ASP.NET Aplicativo Web em Visual Studio 2013 inclui Bootstrap como um pacote NuGet.

Pacotes NuGet

O modelo ASP.NET Web Forms Application inclui um conjunto de pacotes NuGet. Esses pacotes fornecem funcionalidades componentes na forma de código aberto bibliotecas e ferramentas. Há uma ampla variedade de pacotes para ajudá-lo a criar e testar seus aplicativos. O Visual Studio facilita a adição, a remoção e a atualização de pacotes NuGet. Os desenvolvedores também podem criar e adicionar pacotes ao NuGet.

Captura de tela da janela Gerenciar Pacotes NuGet com jQuery realçado.

Quando você instala um pacote, o NuGet copia arquivos para sua solução e faz automaticamente as alterações necessárias, como adicionar referências e alterar a configuração associada ao seu aplicativo Web. Se você decidir remover a biblioteca, o NuGet removerá arquivos e reverterá as alterações feitas em seu projeto para que nenhuma desordem seja deixada. O NuGet está disponível no menu Ferramentas no Visual Studio.

jQuery

jQuery é uma Biblioteca JavaScript rápida e concisa que simplifica a passagem de documentos HTML, manipulação de eventos, animação e interações do Ajax para desenvolvimento rápido na Web. A biblioteca javaScript jQuery está incluída no modelo de aplicativo ASP.NET Web Forms como um pacote NuGet.

Validação não discreta

Controles de validador internos foram configurados para usar JavaScript discreto para a lógica de validação do lado do cliente. Isso reduz significativamente a quantidade de JavaScript renderizado embutido na marcação de página e reduz o tamanho geral da página. A validação não discreta é adicionada globalmente ao modelo ASP.NET Web Forms Application com base na configuração no <elemento appSettings> do arquivo Web.config na raiz do aplicativo.

Entity Framework Code First

Além dos recursos do modelo ASP.NET Web Forms Application, o aplicativo Wingtip Toys usa o Entity Framework Code First, que é uma biblioteca NuGet que permite o desenvolvimento centrado em código quando você trabalha com dados. Simplificando, ele cria a parte do banco de dados do aplicativo para você com base no código que você escreve. Usando o Entity Framework, você recupera e manipula dados como objetos fortemente tipado. Isso permite que você se concentre na lógica de negócios em seu aplicativo em vez dos detalhes de como os dados são acessados.

Para obter informações adicionais sobre as bibliotecas e pacotes instalados incluídos no modelo ASP.NET Web Forms, consulte a lista de pacotes NuGet instalados. Para fazer isso, no Visual Studio, crie um novo projeto Web Forms, selecione FerramentasGerenciador de Pacotes>> NuGetGerenciar Pacotes NuGet para solução e selecione Pacotes instalados na caixa de diálogo Gerenciar Pacotes NuGet.

Touring Visual Studio

As janelas primárias no Visual Studio incluem o Gerenciador de Soluções, a Explorer do Servidor (banco de dados Explorer no Express), a janela Propriedades, a Caixa de Ferramentas, a Barra de Ferramentas e a Janela do Documento.

Diagrama mostrando as janelas primárias no Visual Studio.

Para obter mais informações sobre o Visual Studio, consulte Guia Visual para Desenvolvedor do Visual Web.

Resumo

Neste tutorial, você criou, analisou e executou o aplicativo de Web Forms padrão. Você examinou os diferentes recursos do aplicativo de formulários Web padrão e aprendeu algumas noções básicas sobre como usar o ambiente do Visual Studio. Nos tutoriais a seguir, você criará a camada de acesso a dados.

Recursos adicionais

Projetos de Aplicativo Web versus Projetos de Site
Visão geral do ASP.NET Web Forms Pages