Share via


Introducción a ASP.NET MVC

por Scott Hanselman

Nota:

Una versión actualizada de este tutorial está disponible aquí mediante Visual Studio 2013. El nuevo tutorial usa ASP.NET MVC 5, que proporciona muchas mejoras en este tutorial.

En este tutorial para principiantes se presentan los conceptos básicos de ASP.NET MVC. Creará una aplicación web sencilla que lea y escriba en una base de datos. Visite el centro de aprendizaje de ASP.NET MVC para encontrar otros tutoriales y ejemplos de ASP.NET MVC.

Vamos a crear nuestra primera aplicación web de ASP.NET MVC con Visual Web Developer 2010 Express. Haremos una pequeña aplicación de lista de películas que nos permitirá crear y enumerar películas.

Lo que creará

Estas son dos capturas de pantalla de la aplicación que va a compilar. Tendrá una tabla sencilla de películas con varias columnas.

Movie List - Windows Internet Explorer (12)

Y tendrá un formulario de creación para que podamos agregar películas a la lista.

Create a Movie - Windows Internet Explorer (2)

Habilidades que aprenderá

Este tutorial le enseñará los conceptos básicos para desarrollar una Aplicación web de ASP.NET MVC usando Visual Studio. Aprenderá lo siguiente:

  • Procedimiento para crear un proyecto de ASP.NET MVC
  • Creación de una nueva base de datos con SQL Server
  • Procedimiento para crear controladores y vistas de ASP.NET MVC
  • Procedimiento para crear recuperar y mostrar datos
  • Procedimiento para editar datos y habilitar la validación de datos
  • Actualización del esquema de la base de datos

Introducción

Empiece ejecutando Visual Web Developer 2010 Express (lo llamaré "VWD" desde ahora) y seleccione Nuevo proyecto en la pantalla de inicio.

Visual Web Developer es un IDE o un entorno de desarrollador integrado. Al igual que usa Microsoft Word para escribir documentos, usará un IDE para crear aplicaciones. Hay una barra de herramientas en la parte superior en la que se muestran varias opciones disponibles, así como el menú que también podría haber usado para seleccionar Archivo | Nuevo proyecto.

Screenshot of the Microsoft Visual Web Developer 2010 Express window, which shows the Start Page.

Creación de la primera aplicación

Puede crear aplicaciones con Visual Basic o Visual C#. Por ahora, seleccione Visual C# a la izquierda y, después, "Aplicación web de ASP.NET MVC 2". Nombre su proyecto "Movies" y haga clic en Aceptar.

New Project

En el lado derecho se muestra el Explorador de soluciones que muestra todos los archivos y carpetas de la aplicación. La ventana grande en el medio es donde edita el código y dedica la mayor parte de su tiempo. Visual Studio ha usado una plantilla predeterminada para el proyecto de ASP.NET MVC que acaba de crear, por lo que en este momento tiene una aplicación en funcionamiento sin hacer nada. Este es un simple proyecto de "Hola mundo" y es un buen punto de partida para nuestra aplicación.

Screenshot of the Microsoft Visual Web Developer 2010 Express window, which shows the new Home Controller dot c s file is open in the code editor.

Seleccione el botón "Reproducir" en la barra de herramientas.

Start Debugging

Es una flecha verde que apunta a la derecha que compilará el programa e iniciará la aplicación en un explorador web.

NOTA: En su lugar, puede presionar F5 en el teclado o seleccionar Depurar->Iniciar depuración en el menú "Depurar".

Esto hará que Visual Web Developer inicie un servidor web de desarrollo y ejecute nuestra aplicación web (no hay ninguna configuración o pasos manuales necesarios para habilitarlo). Después iniciará un explorador y lo configurará para navegar por la página de inicio de la aplicación. Observe a continuación que la barra de direcciones del explorador dice "localhost", y no algo como ejemplo.com. Esto se debe a que localhost siempre apunta a su propio equipo local, que en este caso ejecuta la aplicación que acabamos de compilar.

Home Page

Esta plantilla predeterminada le ofrece dos páginas para visitar y una página de inicio de sesión básica. Vamos a cambiar cómo funciona esta aplicación y aprender un poco sobre ASP.NET MVC en el proceso. Cierre su explorador y vamos a cambiar algo de código.