Introdução ao ASP.NET MVC 5Getting started with ASP.NET MVC 5

  • 3 minutos para ler

por Rick Andersonby Rick Anderson

Uma versão atualizada deste tutorial está disponível aqui usando a versão mais recente do Visual Studio.An updated version of this tutorial is available here using the latest version of Visual Studio. Usa o novo tutorial ASP.NET Core MVC, que fornece muitas melhorias ao longo deste tutorial.The new tutorial uses ASP.NET Core MVC, which provides many improvements over this tutorial.

Este tutorial ensina a usar o ASP.NET Core MVC com controladores e exibições.This tutorial teaches ASP.NET Core MVC with controllers and views. O Razor Pages é uma nova alternativa no ASP.NET Core 2.0, um modelo de programação baseado em páginas que torna a criação da interface do usuário da Web mais fácil e produtiva.Razor Pages is a new alternative in ASP.NET Core 2.0, a page-based programming model that makes building web UI easier and more productive. É recomendável que você tente o tutorial do Razor Pages antes da versão do MVC.We recommend you try the Razor Pages tutorial before the MVC version. O tutorial do Razor Pages:The Razor Pages tutorial:

  • É mais fácil de acompanhar.Is easier to follow.
  • Aborda mais recursos.Covers more features.
  • É a abordagem preferencial para o desenvolvimento de novos aplicativos.Is the preferred approach for new application development.

Este tutorial ensina as Noções básicas da criação de um aplicativo de web de ASP.NET MVC 5 usando Visual Studio 2017.This tutorial teaches you the basics of building an ASP.NET MVC 5 web app using Visual Studio 2017. O código-fonte final para o tutorial está localizado em GitHub.The final source code for the tutorial is located on GitHub.

Este tutorial foi escrito por Scott Guthrie (twitter @scottgu ), Scott Hanselman (twitter: @shanselman ) , e Rick Anderson ( @RickAndMSFT )This tutorial was written by Scott Guthrie (twitter@scottgu ), Scott Hanselman (twitter: @shanselman ), and Rick Anderson ( @RickAndMSFT )

Você precisa de uma conta do Azure para implantar esse aplicativo no Azure:You need an Azure account to deploy this app to Azure:

  • Você pode abrir uma conta do Azure gratuitamente -obtenha créditos você pode usar para experimentar serviços pagos do Azure e até mesmo após eles serem utilizados, você pode manter a conta e utilizar os serviços do Azure gratuitos.You can open an Azure account for free - You get credits you can use to try out paid Azure services, and even after they're used up you can keep the account and use free Azure services.
  • Você pode ativar benefícios de assinante do MSDN -sua assinatura do MSDN concede créditos todos os meses que você pode usar para serviços pagos do Azure.You can activate MSDN subscriber benefits - Your MSDN subscription gives you credits every month that you can use for paid Azure services.

IntroduçãoGet started

Comece instalar o Visual Studio 2017.Start by installing Visual Studio 2017. Em seguida, abra o Visual Studio.Then, open Visual Studio.

Visual Studio é um IDE ou ambiente de desenvolvimento integrado.Visual Studio is an IDE, or integrated development environment. Assim como usar o Microsoft Word para gravar documentos, você usará um IDE para criar aplicativos.Just like you use Microsoft Word to write documents, you'll use an IDE to create applications. No Visual Studio, há uma lista na parte inferior, mostrando várias opções disponíveis para você.In Visual Studio, there's a list along the bottom showing various options available to you. Há também um menu que fornece outra maneira de executar tarefas no IDE.There's also a menu that provides another way to perform tasks in the IDE. Por exemplo, em vez de selecionar novo projeto sobre o página inicial, você pode usar a barra de menus e selecione arquivo > denovoprojeto.For example, instead of selecting New Project on the Start page, you can use the menu bar and select File > New Project.

Criar seu primeiro aplicativoCreate your first app

Sobre o página inicial, selecione novo projeto.On the Start page, select New Project. No novo projeto caixa de diálogo, selecione o Visual c# categoria à esquerda, em seguida, Webe, em seguida, selecione o ASP.NET Web Application (.NET Framework) modelo de projeto.In the New project dialog box, select the Visual C# category on the left, then Web, and then select the ASP.NET Web Application (.NET Framework) project template. Nomeie o projeto "como MvcMovie" e, em seguida, escolha Okey.Name your project "MvcMovie" and then choose OK.

No novo aplicativo Web ASP.NET caixa de diálogo, escolha MVC e, em seguida, escolha Okey.In the New ASP.NET Web Application dialog, choose MVC and then choose OK.

Visual Studio usou um modelo padrão para o projeto do ASP.NET MVC que você acabou de criar, portanto, você tem agora um aplicativo de trabalho sem fazer nada!Visual Studio used a default template for the ASP.NET MVC project you just created, so you have a working application right now without doing anything! Isso é um simples "Hello World!"This is a simple "Hello World!" projeto e ele á um bom lugar para iniciar o aplicativo.project, and it's a good place to start your application.

Pressione F5 para iniciar a depuração.Press F5 to start debugging. Quando você pressiona F5, o Visual Studio inicia IIS Express e executa o aplicativo web.When you press F5, Visual Studio starts IIS Express and runs your web app. Em seguida, o Visual Studio inicia um navegador e abre a página inicial do aplicativo.Visual Studio then launches a browser and opens the application's home page. Observe que a barra de endereços do navegador diz localhost:port# e não algo como example.com.Notice that the address bar of the browser says localhost:port# and not something like example.com. Isso ocorre porque localhost sempre aponta para o seu próprio computador local, que nesse caso está executando o aplicativo que você acabou de criar.That's because localhost always points to your own local computer, which in this case is running the application you just built. Quando o Visual Studio executa um projeto da web, uma porta aleatória é usada para o servidor web.When Visual Studio runs a web project, a random port is used for the web server. Na imagem abaixo, o número da porta for 1234.In the image below, the port number is 1234. Quando você executa o aplicativo, você verá um número de porta diferente.When you run the application, you'll see a different port number.

Prontos neste modelo padrão fornece Home, Contact, e About páginas.Right out of the box this default template gives you Home, Contact, and About pages. A imagem a seguir não mostra a página inicial, sobre, e contato links.The image below doesn't show the Home, About, and Contact links. Dependendo do tamanho da janela do navegador, você talvez seja necessário clicar no ícone de navegação para ver esses links.Depending on the size of your browser window, you might need to click the navigation icon to see these links.

O aplicativo também fornece suporte para se registrar e fazer logon.The application also provides support to register and log in. A próxima etapa é alterar como este aplicativo funciona e aprender um pouco sobre o ASP.NET MVC.The next step is to change how this application works and learn a little bit about ASP.NET MVC. Feche o aplicativo ASP.NET MVC e vamos alterar algum código.Close the ASP.NET MVC application and let's change some code.

Para obter uma lista de tutoriais atuais, consulte MVC artigos recomendado.For a list of current tutorials, see MVC recommended articles.

Consulte esse aplicativo em execução no AzureSee this app running on Azure

Você gostaria de ver o site concluído em execução como um aplicativo web ao vivo?Would you like to see the finished site running as a live web app? Você pode implantar uma versão completa do aplicativo para sua conta do Azure, simplesmente clicando no botão a seguir.You can deploy a complete version of the app to your Azure account by simply clicking the following button.

Você precisa de uma conta do Azure para implantar essa solução no Azure.You need an Azure account to deploy this solution to Azure. Se você ainda não tiver uma conta, use uma das opções a seguir para criar um:If you don't already have an account, use one of the following options to create one:

AvançarNext