Introdução ao ASP.NET MVC 4

  • Artigo

por Rick Anderson

Uma versão atualizada deste tutorial está disponível aqui usando Visual Studio 2013. O novo tutorial usa ASP.NET MVC 5, que fornece muitas melhorias ao longo deste tutorial.

Este tutorial ensinará os conceitos básicos da criação de um aplicativo Web ASP.NET MVC 4 usando o Microsoft Visual Studio Express 2012 ou o Visual Web Developer 2010 Express Service Pack 1. O Visual Studio 2012 é recomendado, você não precisará instalar nada para concluir o tutorial. Se você estiver usando o Visual Studio 2010, deverá instalar os componentes abaixo. Você pode instalar todos eles clicando nos seguintes links:

Se você estiver usando o Visual Studio 2010 em vez do Visual Web Developer 2010, instale o instalador do WPI para ASP.NET MVC 4 e os pré-requisitos do Visual Studio 2010

Um projeto do Visual Web Developer com código-fonte C# está disponível para acompanhar este tópico. Baixe a versão do C#.

No tutorial, você executa o aplicativo no Visual Studio. Você também pode disponibilizar o aplicativo pela Internet implantando-o em um provedor de hospedagem. A Microsoft oferece hospedagem na Web gratuita para até 10 sites em uma conta de avaliação gratuita do Windows Azure. Para obter informações sobre como implantar um projeto Web do Visual Studio em um site do Windows Azure, consulte Criar e implantar um site do ASP.NET e Banco de Dados SQL com o Visual Studio. Esse tutorial também mostra como usar Migrações do Entity Framework Code First para implantar seu banco de dados SQL Server no Banco de Dados do Windows SQL do Azure (anteriormente SQL Azure).

Este tutorial foi escrito por Rick Anderson ( @RickAndMSFT ).

O que você vai construir

Observação

Uma versão atualizada se este tutorial estiver disponível aqui usando Visual Studio 2013. O novo tutorial usa ASP.NET MVC 5, que fornece muitas melhorias ao longo deste tutorial.

Você implementará um aplicativo simples de listagem de filmes que dá suporte à criação, edição, pesquisa e listagem de filmes de um banco de dados. Abaixo estão duas capturas de tela do aplicativo que você criará. Ele inclui uma página que exibe uma lista de filmes de um banco de dados:

Captura de tela que mostra a página Índice de Pesquisa do aplicativo M V C Movie. Ghost é inserido na barra de pesquisa título.

O aplicativo também permite adicionar, editar e excluir filmes, bem como ver detalhes sobre os individuais. Todos os cenários de entrada de dados incluem validação para garantir que os dados armazenados no banco de dados estão corretos.

Captura de tela que mostra a página Editar do aplicativo M V C Movie. Dois campos de texto, Data de Lançamento e Preço, estão realçados, solicitando que o usuário insira os valores corretos.

Introdução

Comece executando Visual Studio Express 2012 ou Visual Web Developer 2010 Express. A maioria das capturas de tela desta série usa Visual Studio Express 2012, mas você pode concluir este tutorial com o Visual Studio 2010/SP1, Visual Studio 2012, Visual Studio Express 2012 ou Visual Web Developer 2010 Express. Selecione Novo Projeto na página Iniciar .

O Visual Studio é um IDE ou um ambiente de desenvolvimento integrado. Assim como você usa o Microsoft Word para escrever documentos, você usará um IDE para criar aplicativos. No Visual Studio, há uma barra de ferramentas na parte superior mostrando várias opções disponíveis para você. Há também um menu que fornece outra maneira de executar tarefas no IDE. (Por exemplo, em vez de selecionar Novo Projeto na página Iniciar , você pode usar o menu e selecionar Arquivo>Novo Projeto.)

Captura de tela que mostra a página Iniciar Visual Studio Express. A opção Novo Projeto está realçada.

Criando seu primeiro aplicativo

Você pode criar aplicativos usando o Visual Basic ou o Visual C# como a linguagem de programação. Selecione Visual C# à esquerda e, em seguida, selecione ASP.NET Aplicativo Web MVC 4. Nomeie o projeto como "MvcMovie" e clique em OK.

Captura de tela que mostra a janela Novo Projeto. Um Aplicativo Web SP dot NET M V C 4 está selecionado.

Na caixa de diálogo Novo projeto ASP.NET MVC 4 , selecione Aplicativo da Internet. Deixe o Razor como o mecanismo de exibição padrão.

Captura de tela que mostra a janela Novo Projeto do SP dot NET M V C 4. O modelo Aplicativo da Internet está selecionado.

Clique em OK. O Visual Studio usou um modelo padrão para o ASP.NET projeto MVC que você acabou de criar, portanto, você tem um aplicativo em funcionamento no momento sem fazer nada! Este é um projeto simples de "Olá, Mundo!", e é um bom lugar para iniciar seu aplicativo.

Captura de tela que mostra as guias Cs e Gerenciador de Soluções do Controlador Inicial do Projeto A SP DOT NET M V C abertas.

No menu Depuração, selecione Iniciar Depuração.

Captura de tela que mostra o menu suspenso de DEPURAÇÃO do projeto DOT NET M V C do AP. A opção Iniciar Depuração está selecionada.

Observe que o atalho de teclado para iniciar a depuração é F5.

F5 faz com que o Visual Studio inicie IIS Express e execute seu aplicativo Web. Em seguida, o Visual Studio inicia um navegador e abre a home page do aplicativo. Observe que a barra de endereços do navegador diz localhost e não algo como example.com. Isso ocorre porque localhost sempre aponta para seu próprio computador local, que, nesse caso, está executando o aplicativo que você acabou de criar. Quando o Visual Studio executa um projeto Web, uma porta aleatória é usada para o servidor Web. Na imagem abaixo, o número da porta é 41788. Ao executar o aplicativo, você provavelmente verá um número de porta diferente.

Captura de tela que mostra a home page do filme M V C.

Pronto para uso, este modelo padrão fornece páginas Página Inicial, Contato e Sobre. Ele também fornece suporte para registrar e fazer logon e links para Facebook e Twitter. A próxima etapa é alterar como esse aplicativo funciona e aprender um pouco sobre ASP.NET MVC. Feche o navegador e vamos alterar algum código.

Próximo