.NET

5 mar, 2013

ASP .NET 4.5 Web Forms – Parte 01 – Criando o projeto

Publicidade

Irei iniciar uma série de artigo para ensinar como construir um site usando Web Forms com a nova versão ASP .NET 4.5 e o Microsoft Visual Studio Express 2012 for web usando a linguagem VB .NET. Estou me baseando integralmente na série de artigos disponíveis no site  e irei reproduzir a versão para VB .NET deste link com algumas modificações que serão feitas à medida que formos construirmos site.

Para acompanhar os tutoriais você deverá possuir instaladas as seguintes ferramentas:

Você pode baixar a aplicação completa que iremos desenvolver aqui neste link.

Obs: A nossa aplicação será um pouco diferente e estará traduzida para o idioma Português usando a linguagem VB .NET.

Dessa forma, esta série de artigos é um bom ponto de partida para você que está começando a estudar ASP .NET e quer rapidamente criar seu próprio web site.

Nesta primeira parte você irá criar, revisar e executar o projeto padrão no Visual Studio Express 2012 for Web, que permite a você se familiarizar com os recursos do ASP.NET. Além disso, você irá se familiarizar com o ambiente do Visual Studio Express 2012 for Web.

O que você vai aprender:

  • Como criar um novo projeto Web Forms.
  • A estrutura de arquivos do projeto Web Forms.
  • Como executar o projeto no Visual Studio Express 2012 for Web.
  • As diferentes características de aplicativo padrão Web Forms.
  • Algumas noções básicas sobre como usar o ambiente Visual Studio Express 2012 for Web

Integralmente baseado no artigo original (com algumas alterações e portado para a linguagem VB .NET).

Criando um novo projeto (ASP .NET 4.5)

Abrindo o Visual Studio Express 2012 for Web, você já verá o novo estilo visual adotado pelo Visual Studio com a nova logomarca para refletir o design do Metro.

Nota: Metro é um nome de código interno para uma tipografia baseada em linguagem de design criada pela Microsoft. Foi criado para uso em seu sistema operacional móvel Windows Phone 7  – uma versão feita especialmente com a família de fontes Segoe. A interface foi confirmada para o Windows 8, e também será utilizada no Xbox 360 criando se assim uma única linguagem visual entre os produtos Microsoft.

imagem 1

Abra o menu File e clique em New Project (Fig 1.0) ou na página inicial (Start Page) clique no link – New Project…(Fig 2.0).

imagem 1.1imagem 2

Selecione o template Visual Basic (ou Visual C#) -> Web;

Selecione o template ASP .NET Web Forms Application;

Informe o nome do projeto WingTipsToys e clique no botão OK (Obs.: Eu estou usando o nome da solução conforme o artigo original).

imagem 3

Após alguns segundos, será criado um projeto com uma estrutura básica contendo pastas e arquivos e apresentado na janela Solution Explorer.

Abaixo vemos a solução exibida na janela Solution Explorer e a página Default.aspx exibida no modo Design:

imagem 4

Podemos identificar as seguintes áreas no IDE:

  1. Janela Solution Explorer – Exibe a solução, os projetos e seus respectivos arquivos e pastas;
  2. Janela de Propriedades – Exibe as propriedades do componente selecionado;
  3. Janela de Documentos – Exibe o arquivo selecionado;
  4. ToolBox – Exibe os controles disponíveis conforme o componente selecionado;
  5. Tab de visões do Documento – Permite selecionar os modos de exibição do arquivo selecionado.

Você pode alternar para o tipo de exibição Source ou no modo Split permitir a visualização dos dois tipos: Design e o seu respectivo Source.

Na janela Solution Explorer, podemos gerenciar os arquivos do projeto. Vamos dar uma olhada nas pastas que foram adicionadas à sua aplicação no Solution Explorer. O modelo de aplicativo web acrescenta uma estrutura de pasta básica:

imagem 5

O Visual Studio cria algumas pastas e arquivos iniciais para o seu projeto. Entre os arquivos, destacamos os seguintes:

Arquivo Propósito
Default.aspx Geralmente é a primeira página a ser exibida quando a aplicação for executada no navegador (você pode alterar este comportamento).
Site.Master Uma página que permite que você crie um layout consistente e use um comportamento padrão para as páginas em seu aplicativo.
Global.asax Um arquivo opcional que contém o código para responder em nível de aplicação e sessão de eventos gerados pelo ASP.NET ou por módulos HTTP.
Web.config O arquivo de configuração da aplicação.

Executando a aplicação no seu navegador web padrão pressionando CTRL+F5, será apresentada a seguinte tela:

imagem 6

Há três páginas principais nesse aplicativo Web padrão: default.aspx (Home), About.aspx e Contact.aspx.

Cada uma dessas páginas pode ser alcançada a partir da barra de navegação superior. Há também duas páginas adicionais contidas na pasta Account – a página Register.aspx e Login.aspx. Elas permitem que você use os recursos de membership (associação) da ASP.NET para criar, armazenar e validar as credenciais do usuário.

O recurso membership ASP.NET armazena as credenciais de seus usuários em um banco de dados criado pela aplicação. Quando os usuários efetuarem o login, o aplicativo vai validar suas credenciais através da leitura desse banco de dados. A pasta Account do projeto contém os arquivos que implementam as várias partes do membership: registro, login, alteração de senha e autorização de acesso.

Além disso, o ASP.NET Web Forms suporta as autenticações OAuth e OpenID. Essas melhorias permitem que os usuários se autentiquem usando credenciais existentes, a partir de contas, tais como Facebook, Twitter, Windows Live e Google.

  • OpenID é um protocolo descentralizado e simples para “Single Sign On” (SSO) e gestão de identidades digitais na web.
  • OAuth é um protocolo aberto para definir padrões de acesso a dados das APIs de serviços web.

Conceito: O que são os Web Forms ?

O ASP.NET Web Forms são páginas que são baseadas na tecnologia Microsoft ASP.NET, na qual o código que é executado no servidor dinamicamente gera a saída de página Web para o navegador ou dispositivo cliente. Uma página ASP .NET Web Forms automaticamente renderiza o HTML compatível com o navegador para características como estilos, leiaute etc.

Os Web Forms são compatíveis com qualquer linguagem suportada pelo CLR – Common Language Runtime – da plataforma .NET, como o Microsoft Visual Basic e a Microsoft Visual C#. Além disso, os Web Forms são construídos sobre os recursos da plataforma .NET, que oferece benefícios como um ambiente gerenciado, segurança de tipo e herança.

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

Quando um servidor Web recebe uma solicitação para uma página, ele encontra a página, processa, envia para o navegador e depois descarta todas as informações da página. Se o usuário solicita a mesma página novamente, o servidor repete toda a sequência, reprocessando a página a partir do zero.

Dito de outra forma, um servidor não tem memória das páginas que foram processadas – as páginas não possuem estados (stateless). O framework ASP .NET automaticamente lida com a tarefa de manter o estado de sua página e seus controles, e isso lhe fornece formas explícitas para manter o estado de informações específicas do aplicativo.

Nota: O ASP .NET oferece 3 modelos para desenvolvimento web : ASP .NET Web Forms, ASP .NET MVC e ASP .NET Web Pages.

Antes de concluir este primeiro artigo, eu gostaria de chamar a atenção para dois novos recursos integrados ao Visual Studio Express 2012 for Web:

  1. SQL Server Express LocalDB
  2. HTML5

1- SQL Server Express LocalDB

SQL Server Express LocalDB é uma versão leve do SQL Server que tem muitas características de programação de um banco de dados SQL Server. O SQL Server Express LocalDB é executado no modo de usuário e tem uma instalação rápida sem a necessidade de configuração.

No Microsoft SQL Server, o banco de dados ou qualquer código Transact-SQL podem ser movidos de SQL Server Express LocalDB para o SQL Server e SQL Azure, sem quaisquer passos de atualização.

Então, o SQL Server Express LocalDB pode ser usado como um ambiente de desenvolvimento para aplicações que utilizem todas as edições do SQL Server.

O SQL Server Express LocalDB permite recursos como procedimentos armazenados, funções definidas pelo usuário e agregados, Integração com NET Framework, tipos espaciais e outros recursos que não estão disponíveis no SQL Server Compact.

2- HTML 5

O template ASP.NET Web Forms Application usa o HTML5, que é a versão mais recente da linguagem de marcação HTML. O HTML5 suporta novos elementos e funcionalidades que tornam mais fácil a criação de sites. Por exemplo, a aplicação Wingtip Toys usa HTML5 na master page (página mestra) Site.Master para criar uma barra de navegação, colocando uma lista de links dentro do elemento <nav>. Você pode facilmente modificar o elemento nav na página Site.Master para criar navegação para seus próprios aplicativos web.

Os Elementos HTML5 adicionais no modelo de aplicação ASP.NET Web Forms incluem <header>, <rodapé>, <article>, <seção> e <hgroup>.

  • O elemento <header> envolve um grupo de ajudas à navegação.
  • O elemento <rodapé> normalmente contém informações como quem foi o autor da seção, informações de copyright e links para documentos relacionados.
  • O elemento <article> inclui conteúdo que pode ficar em sua própria e, potencialmente, ser distribuído de forma independente de outros conteúdos na página.
  • O papel do elemento <section> é juntar um grupo temático de conteúdo, geralmente com um título.
  • O elemento <hgroup> é útil quando você quiser um grupo de um conjunto de elementos para <h1> até <h6> que serão considerados como uma unidade dentro do esboço de documento global.

Neste primeiro artigo, eu criei o projeto no Visual Studio Express 2012 for Web e apresentei uma visão geral dos principais recursos da ferramenta que serão usados na criação do nosso web site.

No próximo, iremos criar a camada de acesso a dados.