Criar um novo projeto do ASP.NET MVC
pela Microsoft
Esta é a etapa 1 de um tutorial gratuito de aplicativo "NerdDinner" que explica como criar um aplicativo Web pequeno, mas completo, usando ASP.NET MVC 1.
A etapa 1 mostra como colocar a estrutura básica do aplicativo NerdDinner no lugar.
Se você estiver usando ASP.NET MVC 3, recomendamos que siga os tutoriais Introdução With MVC 3 ou MVC Music Store.
Etapa 1 do NerdDinner: Novo Projeto de> Arquivo
Começaremos nosso aplicativo NerdDinner selecionando o item de menu Arquivo Novo> Projeto no Visual Studio 2008 ou no Visual Web Developer 2008 Express gratuito.
Isso abrirá a caixa de diálogo "Novo Projeto". Para criar um novo aplicativo ASP.NET MVC, selecionaremos o nó "Web" no lado esquerdo da caixa de diálogo e, em seguida, escolheremos o modelo de projeto "ASP.NET Aplicativo Web MVC" à direita:
Importante: verifique se você baixou e instalou ASP.NET MVC– caso contrário, ele não aparecerá na caixa de diálogo Novo Projeto. Você pode usar a V2 do Microsoft Web Platform Installer se ainda não o instalou (ASP.NET MVC está disponível na seção "Web Platform-Frameworks> and Runtimes").
Vamos nomear o novo projeto que vamos criar "NerdDinner" e, em seguida, clicar no botão "ok" para criá-lo.
Quando clicarmos em "ok", o Visual Studio abrirá uma caixa de diálogo adicional que nos solicitará criar opcionalmente um projeto de teste de unidade para o novo aplicativo também. Este projeto de teste de unidade nos permite criar testes automatizados que verificam a funcionalidade e o comportamento do nosso aplicativo (algo que abordaremos como fazer posteriormente neste tutorial).
A lista suspensa "Estrutura de teste" na caixa de diálogo acima é preenchida com todos os modelos de projeto de teste de unidade ASP.NET MVC disponíveis instalados no computador. As versões podem ser baixadas para NUnit, MBUnit e XUnit. Também há suporte para a estrutura interna de Teste de Unidade do Visual Studio.
Observação: o Visual Studio Unit Test Framework só está disponível com o Visual Studio 2008 Professional e versões superiores. Se você estiver usando o VS 2008 Standard Edition ou o Visual Web Developer 2008 Express, será necessário baixar e instalar as extensões NUnit, MBUnit ou XUnit para ASP.NET MVC para que essa caixa de diálogo seja mostrada. A caixa de diálogo não será exibida se não houver nenhuma estrutura de teste instalada.
Usaremos o nome padrão "NerdDinner.Tests" para o projeto de teste que criamos e usaremos a opção de estrutura "Teste de Unidade do Visual Studio". Quando clicarmos no botão "ok", o Visual Studio criará uma solução para nós com dois projetos: um para nosso aplicativo Web e outro para nossos testes de unidade:
Examinando a estrutura do diretório NerdDinner
Quando você cria um novo aplicativo ASP.NET MVC com o Visual Studio, ele adiciona automaticamente vários arquivos e diretórios ao projeto:
ASP.NET projetos MVC por padrão têm seis diretórios de nível superior:
| Diretório | Finalidade |
|---|---|
| /Controladores | Onde você coloca classes de controlador que lidam com solicitações de URL |
| /Modelos | Onde você coloca classes que representam e manipulam dados |
| /Modos de exibição | Onde você coloca arquivos de modelo de interface do usuário responsáveis pela renderização da saída |
| /Scripts | Onde você coloca arquivos e scripts da biblioteca JavaScript (.js) |
| /Conteúdo | Onde você coloca arquivos de imagem e CSS e outros conteúdos não dinâmicos/não JavaScript |
| /App_data | Onde você armazena arquivos de dados que deseja ler/gravar. |
ASP.NET MVC não requer essa estrutura. Na verdade, os desenvolvedores que trabalham em aplicativos grandes normalmente particionam o aplicativo em vários projetos para torná-lo mais gerenciável (por exemplo: classes de modelo de dados geralmente vão em um projeto de biblioteca de classes separado do aplicativo Web). A estrutura de projeto padrão, no entanto, fornece uma bela convenção de diretório padrão que podemos usar para manter nossas preocupações de aplicativo limpo.
Quando expandirmos o diretório /Controllers, descobriremos que o Visual Studio adicionou duas classes de controlador – HomeController e AccountController – por padrão ao projeto:
Quando expandirmos o diretório /Views, encontraremos três subdiretórios – /Home, /Account e /Shared, bem como vários arquivos de modelo dentro deles também foram adicionados ao projeto por padrão:
Quando expandirmos os diretórios /Content e /Scripts, encontraremos um arquivo Site.css usado para estilizar todos os HTML no site, bem como bibliotecas JavaScript que podem habilitar ASP.NET suporte a AJAX e jQuery no aplicativo:
Quando expandirmos o projeto NerdDinner.Tests, encontraremos duas classes que contêm testes de unidade para nossas classes de controlador:
Esses arquivos padrão adicionados pelo Visual Studio nos fornecem uma estrutura básica para um aplicativo funcional – completa com página inicial, sobre página, logoff/logoff/páginas de registro da conta e uma página de erro sem tratamento (tudo com fio e funcionando fora da caixa).
Executando o aplicativo NerdDinner
Podemos executar o projeto escolhendo os itens de menu Depurar-Iniciar> Depuração ou Depurar-Iniciar> sem Depuração :
Isso iniciará o servidor Web ASP.NET interno que vem com o Visual Studio e executará nosso aplicativo:
Abaixo está a home page do nosso novo projeto (URL: "/") quando ele é executado:
Clicar na guia "Sobre" exibe uma página sobre (URL: "/Home/About"):
Clicar no link "Logon" no canto superior direito nos leva a uma página de Logon (URL: "/Account/LogOn")
Se não tivermos uma conta de logon, poderemos clicar no link de registro (URL: "/Conta/Registro") para criar uma:
O código para implementar a funcionalidade home, about e logout/register acima foi adicionado por padrão quando criamos nosso novo projeto. Vamos usá-lo como o ponto de partida do nosso aplicativo.
Testando o aplicativo NerdDinner
Se estivermos usando o Professional Edition ou a versão superior do Visual Studio 2008, poderemos usar o suporte interno ao IDE de teste de unidade no Visual Studio para testar o projeto:
Escolher uma das opções acima abrirá o painel "Resultados do Teste" no IDE e nos fornecerá status de aprovação/falha nos 27 testes de unidade incluídos em nosso novo projeto que abrangem a funcionalidade interna:
Mais adiante neste tutorial, falaremos mais sobre testes automatizados e adicionaremos testes de unidade adicionais que abrangem a funcionalidade do aplicativo que implementamos.
Próxima etapa
Agora temos uma estrutura de aplicativo básica em vigor. Agora vamos criar um banco de dados para armazenar nossos dados do aplicativo.