Introducción a ASP.NET Core MVC y Visual StudioGet started with ASP.NET Core MVC and Visual Studio

Por Rick AndersonBy Rick Anderson

En este tutorial se muestra el desarrollo web de ASP.NET Core MVC con controladores y vistas. Las páginas de Razor son una nueva alternativa en ASP.NET Core 2.0, un modelo de programación basado en páginas que facilita la compilación de interfaces de usuario web y hace que sean más productivas. Se recomienda probar el tutorial de las páginas de Razor antes que la versión MVC. El tutorial de las páginas de Razor:

  • Es el método preferido para el desarrollo de nuevas aplicaciones.
  • Es más fácil de seguir.
  • Abarca más características.

Si elige este tutorial en lugar de la versión de páginas de Razor, le agradeceremos que nos explique el motivo en este problema de GitHub.

Hay tres versiones de este tutorial:There are 3 versions of this tutorial:

Instalar Visual Studio y .NET CoreInstall Visual Studio and .NET Core

Install one of the following:

Crear una aplicación webCreate a web app

En Visual Studio, seleccione Archivo > Nuevo > Proyecto.From Visual Studio, select File > New > Project.

Archivo > Nuevo > Proyecto

Complete el cuadro de diálogo Nuevo proyecto:Complete the New Project dialog:

  • En el panel izquierdo, pulse .NET Core.In the left pane, tap .NET Core
  • En el panel central, pulse Aplicación web ASP.NET Core (.NET Core).In the center pane, tap ASP.NET Core Web Application (.NET Core)
  • Asigne al proyecto el nombre "MvcMovie" (es importante asignarle este nombre para que, al copiar el código, coincida con el espacio de nombres).Name the project "MvcMovie" (It's important to name the project "MvcMovie" so when you copy code, the namespace will match.)
  • Pulse Aceptar.Tap OK

Cuadro de diálogo Nuevo proyecto, .NET CORE en el panel izquierdo, Aplicación web ASP.NET CoreNew project dialog, .Net core in left pane, ASP.NET Core web

Complete el cuadro de diálogo Nueva aplicación web ASP.NET Core (.NET Core) - MvcMovie:Complete the New ASP.NET Core Web Application (.NET Core) - MvcMovie dialog:

  • En el cuadro desplegable del selector de versión, seleccione ASP.NET Core 2.-.In the version selector drop-down box select ASP.NET Core 2.-
  • Seleccione Aplicación web (controlador de vista de modelos).Select Web Application(Model-View-Controller)
  • Pulse Aceptar.Tap OK.

Cuadro de diálogo Nuevo proyecto, .NET CORE en el panel izquierdo, Aplicación web ASP.NET CoreNew project dialog, .Net core in left pane, ASP.NET Core web

Visual Studio ha usado una plantilla predeterminada para el proyecto de MVC que acaba de crear.Visual Studio used a default template for the MVC project you just created. Si escribe un nombre de proyecto y selecciona algunas opciones, dispondrá de inmediato de una aplicación operativa.You have a working app right now by entering a project name and selecting a few options. Se trata de un proyecto introductorio sencillo, pero es un buen punto de partida.This is a simple starter project, and it's a good place to start,

Pulse F5 para ejecutar la aplicación en modo de depuración o Ctrl-F5 para ejecutarla en modo de no depuración.Tap F5 to run the app in debug mode or Ctrl-F5 in non-debug mode.

aplicación en ejecución

  • Visual Studio inicia IIS Express y ejecuta la aplicación.Visual Studio starts IIS Express and runs your app. Tenga en cuenta que en la barra de direcciones aparece localhost:port# (y no algo como example.com).Notice that the address bar shows localhost:port# and not something like example.com. Esto es así porque localhost es el nombre de host estándar del equipo local.That's because localhost is the standard hostname for your local computer. Cuando Visual Studio crea un proyecto web, se usa un puerto aleatorio para el servidor web.When Visual Studio creates a web project, a random port is used for the web server. En la imagen anterior, el número de puerto es el 5000.In the image above, the port number is 5000. La dirección URL del explorador es localhost:5000.The URL in the browser shows localhost:5000. Al ejecutar la aplicación verá otro puerto distinto.When you run the app, you'll see a different port number.
  • Iniciar la aplicación con CTRL+F5 (modo de no depuración) le permite efectuar cambios en el código, guardar el archivo, actualizar el explorador y ver los cambios de código.Launching the app with Ctrl+F5 (non-debug mode) allows you to make code changes, save the file, refresh the browser, and see the code changes. Muchos desarrolladores prefieren usar el modo de no depuración para iniciar la aplicación rápidamente y ver los cambios.Many developers prefer to use non-debug mode to quickly launch the app and view changes.
  • Puede iniciar la aplicación en modo de depuración o en modo de no depuración desde el elemento de menú Depurar:You can launch the app in debug or non-debug mode from the Debug menu item:

Menú Depurar

  • Puede depurar la aplicación pulsando el botón IIS Express.You can debug the app by tapping the IIS Express button

IIS Express

La plantilla predeterminada proporciona los vínculos Inicio, Acerca de y Contacto, totalmente funcionales.The default template gives you working Home, About and Contact links. En la imagen del explorador anterior no se muestran estos vínculos.The browser image above doesn't show these links. Según el tamaño del explorador, tendrá que hacer clic en el icono de navegación para que se muestren.Depending on the size of your browser, you might need to click the navigation icon to show them.

icono de navegación en la esquina superior derecha

Si iba a efectuar una ejecución en modo de depuración, pulse MAYÚS-F5 para detener la depuración.If you were running in debug mode, tap Shift-F5 to stop debugging.

En la siguiente sección de este tutorial obtendrá información sobre MVC y empezará a escribir código.In the next part of this tutorial, we'll learn about MVC and start writing some code.