Introducción a ASP.NET MVC 5

por Rick Anderson

Nota

Hay disponible una versión actualizada de este tutorial con la versión más reciente de Visual Studio. El nuevo tutorial usa ASP.NET Core MVC, que proporciona muchas mejoras en este tutorial.

En este tutorial se muestra ASP.NET Core MVC con controladores y vistas. Razor Pages es una nueva alternativa en ASP.NET Core, un modelo de programación basado en páginas que facilita la creación de la interfaz de usuario web y es más productivo. 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 más fácil de seguir.
  • Abarca más características.
  • Es el enfoque preferido para el desarrollo de nuevas aplicaciones.

Este tutorial le enseña los conceptos básicos de la creación de una aplicación web de ASP.NET MVC 5 mediante Visual Studio 2017. El código fuente final del tutorial se encuentra en GitHub.

Este tutorial fue escrito por Scott Guthrie (twitter@scottgu ), Scott Hanselman (twitter: @shanselman ) y Rick Anderson ( @RickAndMSFT )

Necesita una cuenta de Azure para implementar esta aplicación en Azure:

Introducción

Empiece por instalar Visual Studio 2017. A continuación, abra Visual Studio.

Visual Studio es un IDE o un entorno de desarrollo integrado. Al igual que usa Microsoft Word para escribir documentos, usará un IDE para crear aplicaciones. En Visual Studio, hay una lista en la parte inferior en la que se muestran varias opciones disponibles. También hay un menú que proporciona otra manera de realizar tareas en el IDE. Por ejemplo, en lugar de seleccionar Nuevo proyecto en la página Inicio, puede usar la barra de menús y seleccionar Archivo>nuevo proyecto.

Captura de pantalla que muestra la página de inicio de Visual Studio. La creación de un nuevo proyecto se rodea en rojo.

Creación de la primera aplicación

En la página Inicio, seleccione Nuevo proyecto. En el cuadro de diálogo Nuevo proyecto , seleccione la categoría Visual C# de la izquierda, Web y, a continuación, seleccione la plantilla de proyecto aplicación web (.NET Framework) de ASP.NET . Asigne al proyecto el nombre "MvcMovie" y, a continuación, elija Aceptar.

Captura de pantalla que muestra la ventana Nuevo proyecto. Se seleccionan Web y A S P dot NET Web Application dot NET Framework.

En el cuadro de diálogo Nueva ASP.NET aplicación web , elija MVC y, a continuación, elija Aceptar.

Captura de pantalla que muestra el cuadro de diálogo Nueva aplicación web de punto P de S P. M V C está seleccionado.

Visual Studio usó una plantilla predeterminada para el proyecto de ASP.NET MVC que acaba de crear, por lo que ahora tiene una aplicación en funcionamiento sin hacer nada. Se trata de un sencillo proyecto de "Hola mundo!" y es un buen lugar para iniciar la aplicación.

Captura de pantalla que muestra la ventana M V C Movie abierta en la página Información general.

Presiona F5 para iniciar la depuración. Al presionar F5, Visual Studio inicia IIS Express y ejecuta la aplicación web. Después, Visual Studio inicia un explorador y abre la página principal de la aplicación. Observe que la barra de direcciones del explorador indica localhost:port# y no algo parecido a example.com. Esto se localhost debe a que siempre apunta a su propio equipo local, que en este caso ejecuta la aplicación que acaba de compilar. Cuando Visual Studio ejecuta un proyecto web, se usa un puerto aleatorio para el servidor web. En la imagen siguiente, el número de puerto es 1234. Al ejecutar la aplicación, verá un número de puerto diferente.

Captura de pantalla que muestra la página principal de A S P dot NET.

De forma inmediata, esta plantilla predeterminada proporciona Homelas páginas , Contacty About . La imagen siguiente no muestra los vínculos Inicio, Acerca de y Contacto . Según el tamaño de la ventana del explorador, es posible que tenga que hacer clic en el icono de navegación para ver estos vínculos.

Captura de pantalla que muestra la página principal de A S P dot NET en una ventana de visualización más pequeña. Las tres líneas que indican que el menú de navegación se rodea en rojo.

La aplicación también proporciona compatibilidad para registrar e iniciar sesión. El siguiente paso consiste en cambiar cómo funciona esta aplicación y aprender un poco sobre ASP.NET MVC. Cierre la aplicación ASP.NET MVC y vamos a cambiar algún código.

Para obtener una lista de los tutoriales actuales, consulte los artículos recomendados de MVC.

Consulte esta aplicación que se ejecuta en Azure.

¿Desea ver que el sitio terminado se ejecuta como una aplicación web activa? Para implementar una versión completa de la aplicación en su cuenta de Azure, simplemente haga clic en el botón siguiente.

Necesita una cuenta de Azure para implementar esta solución en Azure. Si aún no tiene una cuenta, use una de las siguientes opciones para crear una: