Partilhar via

Introdução ao ASP.NET MVC 4

por Rick Anderson

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

Este tutorial ensinará os conceitos básicos da criação de um aplicativo Web MVC 4 ASP.NET usando o Microsoft Visual Studio Express 2012 ou o Visual Web Developer 2010 Express Service Pack 1. Visual Studio 2012 é recomendado, você não precisará instalar nada para concluir o tutorial. Se você estiver usando o Visual Studio 2010, você deve 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 o: Pré-requisitos do Visual Studio 2010

Um projeto Visual Web Developer com código-fonte C# está disponível para acompanhar este tópico. Faça o download da versão em 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 gratuita para até 10 sites em uma conta de avaliação gratuita do Windows Azure. Para obter informações sobre como implantar um projeto da Web do Visual Studio em um site do Windows Azure, consulte Criar e implantar um site do ASP.NET e o Banco de dados SQL com o Visual Studio. Esse tutorial também mostra como usar as migrações do Entity Framework Code First para implantar seu banco de dados do SQL Server no Banco de dados SQL do Windows 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 o Visual Studio 2013. O novo tutorial usa ASP.NET MVC 5, que fornece muitas melhorias em relação a este tutorial.

Você implementará um aplicativo simples de listagem de filmes que suporta a 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ê irá construir. Ele inclui uma página que exibe uma lista de filmes de um banco de dados:

Captura de ecrã que mostra a página Índice de Pesquisa da aplicação M V C Movie. Ghost está inserido na barra de pesquisa por 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 estejam corretos.

Captura de ecrã que mostra a página Editar da aplicação M V C Movie. Dois campos de texto, Data de lançamento e Preço, são realçados, solicitando que o usuário insira os valores corretos.

Primeiros passos

Comece executando o Visual Studio Express 2012 ou o Visual Web Developer 2010 Express. A maioria das capturas de tela desta série usa o 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 inicial .

Visual Studio é um IDE, ou 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 inicial , você pode usar o menu e selecionar Arquivo>Novo Projeto.)

Captura de tela que mostra a página inicial do Visual Studio Express. A opção Novo projeto é realçada.

Criando seu primeiro aplicativo

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

Captura de tela que mostra a janela Novo projeto. A S P dot NET M V C 4 Web Application está selecionada.

Na caixa de diálogo New ASP.NET MVC 4 Project , selecione Internet Application. Deixe o Razor como o mecanismo de exibição padrão.

Captura de ecrã que mostra a janela Novo Projeto A S P dot NET M V C 4. O modelo de Aplicação para a Internet está selecionado.

Clique em OK. O Visual Studio usou um modelo padrão para o projeto MVC ASP.NET que você acabou de criar, então você tem um aplicativo funcionando agora sem fazer nada! Este é um projeto simples "Hello World!" e é um bom lugar para iniciar sua inscrição.

Captura de ecrã que mostra os separadores do Projeto ASP.NET MVC, Home Controller.cs e Solution Explorer abertos.

No menu Depurar , selecione Iniciar Depuração.

Captura de ecrã que mostra o menu pendente do projeto ASP.NET MVC DEBUG. 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 o 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ço do navegador diz localhost e não algo como example.com. Isso porque localhost sempre aponta para o seu próprio computador local, que neste caso está executando o aplicativo que você acabou de construir. 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 página inicial do filme M V C.

Logo de cara, este modelo padrão oferece as páginas Início, Contato e Sobre. Ele também fornece suporte para se registrar e fazer login, e links para Facebook e Twitter. O próximo passo é mudar como esse aplicativo funciona e aprender um pouco sobre ASP.NET MVC. Feche o navegador e vamos alterar algum código.

Seguinte

  • Last updated on