Parte 1: Arquivo –> Novo Projeto

  • Artigo

por Joe Stagner

A Tailspin Spyworks demonstra como é extraordinariamente simples criar aplicativos avançados e escalonáveis para a plataforma .NET. Ele mostra como usar os ótimos novos recursos no ASP.NET 4 para criar uma loja online, incluindo compras, check-out e administração.

Esta série de tutoriais detalha todas as etapas executadas para criar o aplicativo de exemplo Tailspin Spyworks. A Parte 1 abrange Visão geral e Arquivo/Novo Projeto.

Visão geral

Este tutorial é uma introdução ao ASP.NET WebForms. Começaremos lentamente, portanto, a experiência de desenvolvimento na Web de nível iniciante está bem.

O aplicativo que criaremos é um repositório online simples.

Captura de tela que mostra um repositório online simples.

Os visitantes podem procurar Produtos por Categoria:

Captura de tela que mostra que os visitantes podem procurar produtos por categoria.

Eles podem exibir um único produto e adicioná-lo ao carrinho:

Captura de tela que mostra que os visitantes podem exibir um único produto e adicioná-lo ao carrinho.

Eles podem revisar o carrinho, removendo todos os itens que não quiserem mais:

Captura de tela que mostra que os visitantes podem revisar o carrinho e remover os itens que não desejam mais.

Prosseguir para Check-out solicitará que eles sejam solicitados

Captura de tela que mostra o prompt para entrar no check-out.

Captura de tela que mostra o prompt para criar uma nova conta no check-out.

Após a ordenação, eles veem uma tela de confirmação simples:

Captura de tela que mostra a tela de confirmação.

Começaremos criando um novo projeto ASP.NET WebForms no Visual Studio 2010 e adicionaremos recursos incrementalmente para criar um aplicativo em funcionamento completo. Ao longo do caminho, abordaremos o acesso ao banco de dados, exibições de lista e grade, páginas de atualização de dados, validação de dados, usando master páginas para layout de página consistente, AJAX, validação, associação de usuário e muito mais.

Você pode usar o Visual Studio 2010 ou o Visual Web Developer 2010 gratuito do https://www.microsoft.com/express/Web/. Para criar o aplicativo, você pode usar SQL Server ou a SQL Server Express gratuita para hospedar o banco de dados.

Arquivo/Novo Projeto

Vamos começar selecionando o Novo Projeto no menu Arquivo no Visual Studio. Isso abre a caixa de diálogo Novo Projeto.

Captura de tela que mostra a tela Novo Projeto.

Selecionaremos o grupo Visual C# /Web Templates à esquerda e, em seguida, escolheremos o modelo "ASP.NET Aplicativo Web" na coluna central. Nomeie o projeto como TailspinSpyworks e pressione o botão OK.

Captura de tela que mostra onde nomear seu projeto.

Isso criará nosso projeto. Vamos dar uma olhada nas pastas incluídas em nosso aplicativo no Gerenciador de Soluções à direita.

Captura de tela que mostra as pastas que aparecem quando você cria um projeto.

A Solução Vazia não está completamente vazia– ela adiciona uma estrutura de pasta básica:

Captura de tela que mostra a estrutura de pastas básica.

Observe as convenções implementadas pelo modelo de projeto padrão ASP.NET 4.

  • A pasta "Conta" implementa uma interface do usuário básica para ASP. Subsistema de associação do NET.
  • A pasta "Scripts" serve como repositório para arquivos JavaScript do lado do cliente e os arquivos principais do jQuery .js são disponibilizados por padrão.
  • A pasta "Estilos" é usada para organizar nossos visuais do site (Folhas de Estilos CSS)

Quando pressionamos F5 para executar nosso aplicativo e renderizar a página default.aspx, vemos o seguinte.

Captura de tela que mostra o aplicativo quando você pressiona F 5.

Nosso primeiro aprimoramento de aplicativo será substituir o arquivo Style.css do modelo WebForms padrão pelas classes CSS e arquivos de imagem associados que renderizarão a asthetics visual que queremos para nosso aplicativo Tailspin Spyworks.

Depois de fazer isso, nossa página default.aspx é renderizada assim.

Captura de tela que mostra como a página padrão é renderizada.

Observe os links de imagem no canto superior direito da página e os itens de menu que foram adicionados à página master. Somente os links "Entrar" e "Conta" apontam para páginas que existem (geradas pelo modelo padrão) e o restante das páginas que implementaremos à medida que criamos nosso aplicativo.

Também vamos realocar a Página Mestra para o diretório Estilos. Embora isso seja apenas uma preferência, pode tornar as coisas um pouco mais fáceis se decidirmos tornar nossa aplicação "esfolável" no futuro.

Depois de fazer isso, precisaremos alterar as referências de página master em todos os arquivos .aspx gerados pelas páginas padrão ASP.NET WebForms.

Próximo