La primera aplicación ASP .NET MVC

  • Por
Vamos a ver cómo paso a paso realizar el, ya típico, “Hola Mundo” usando ASP.NET MVC.

Creación del proyecto

Una vez instalado ASP.NET MVC 3, nos aparece un nuevo tipo de proyecto en Visual Studio: ASP.NET MVC 3 Application:

Le damos el nombre que queramos (en este caso MvcHelloWorld) y el directorio donde se va a generar y listos.

En el siguiente paso nos preguntará si queremos una aplicación "Emtpy" o "Internet Application", y seleccionamos "Empty". La diferencia es que en el segundo caso ya se nos genera un conjunto de controladores y vistas por defecto, y ahora este código nos liaría más que ayudaría así que vamos a obviarlo. Con "Empty" empezamos con una aplicación ASP.NET MVC vacía.

El desplegable "View Engine" tiene dos valores: Razor y ASPX. Esto hace referencia a la tecnología con la cual se implementan las vistas. Si seleccionamos ASPX nuestras vistas serán archivos .aspx, mientras que si usamos Razor nuestras vistas serán archivos .cshtml (o .vbhtml si usamos Visual Basic). Razor es una sintaxis nueva mucho más compacta que ASPX y es, por tanto, la que vamos a usar nosotros.

Finalmente le damos a "Ok" y eso nos va a crear nuestro proyecto vacío.

Estructura de un proyecto ASP.NET MVC

Incluso en una aplicación vacía, Visual Studio nos habrá creado varias carpetas, y algunos archivos:

ASP.NET MVC sigue lo que se conoce como convention over configuration, es decir: en lugar de usar archivos de configuración para ciertas tareas, se usan convenciones predefinidas. Y esas convenciones son reglas como las siguientes:

  1. Las vistas se ubican en la carpeta View
  2. Los controladores son clases cuyo nombre termina en Controller
Las carpetas que nos crea Visual Studio por defecto son las siguientes:
  1. Content: Para tener contenido estático (imágenes, hojas de estilo, …)
  2. Controllers: Para ubicar nuestros controladores
  3. Models: Para ubicar las clases del modelo.
  4. Scripts: Para tener archivos con código javascript
  5. Views: Donde van las vistas de la aplicación

Creación del controlador y de la acción

Vamos a crear un controlador que se encargue de recibir la petición del navegador (y que devuelva la vista que diga "Hola Mundo").

Para ello click con el botón derecho sobre la carpeta "Controllers" y seleccionar Add ' Controller. Visual Studio nos preguntará el nombre del controlador:

Podemos ver que por defecto el nombre termina con Controller. Modificamos para que en lugar de Default1Controller sea HomeController y le damos a Add. Eso nos creará una clase HomeController en la carpeta Controllers con el código:

public class HomeController : Controller
{
//
// GET: /Home/

public ActionResult Index()
{
return View();
}

}

Cosas que debemos observar:

  1. La clase deriva de Controller
  2. Tiene un método público que devuelve un ActionResult y que se llama Index. Esto es una acción. Cualquier método público de un controlador es por defecto una acción.
En ASP.NET MVC toda petición del navegador debe ser enrutada a una petición (método público) de un controlador. Por defecto se sigue la convención de que las URLs están en la forma http://servidor/controlador/accion. Es decir, para invocar la acción Index, del controlador Home, usaremos la URL: http://servidor/Home/Index. Fijaos en un detalle importante: la clase se llama HomeController pero el nombre del controlador es Home (sin Controller)

Creación de la vista asociada

El código de la acción que genera Visual Studio (return View();) lo que hace es devolver la vista asociada a dicha acción. Y aquí debemos tener presente otra convención de ASP.NET MVC. Como se ha dicho antes las vistas cuelgan de la carpeta /Views. Por defecto, las vistas de un controlador:
  1. Están en una subcarpeta con el nombre del controlador
  2. Se llaman igual que la acción
Es decir, la vista de la acción Index del controlador Home, estará en la carpeta /Views/Home y se llamará Index.

Así pues creamos la carpeta (Add New Folder) Home dentro de Views y para añadir la vista, click con el botón derecho sobre la carpeta recién creada en el Solution Explorer y Add ' View. Eso nos despliega el diálogo de nueva vista:

Le ponemos "Index" como nombre y le damos a Add. Con eso Visual Studio nos habrá generado un archivo Index.cshtml (situado en /Views/Home) con el código:

@{
ViewBag.Title = "Index";
}

<h2>Index</h2>

Ahora modificamos el código HTML para añadir el Hello World:

@{
ViewBag.Title = "Index";
}

<h2>Index</h2>

Hola mundo. Saludos desde <strong>ASP.NET MVC</strong>

Y listos! Con esto ya tenemos nuestra aplicación lista.
Para probarla basta ejecutarla (con F5) y comprobar los resultados:

Un último detalle: Si os fijáis la URL es simplemente http://localhost, sin nada más y se está mostrando nuestra vista. ¿Qué ha ocurrido? Pues que, por defecto si no se incluye controlador se asume que es "Home" y si no se entra acción se asume que es Index. Pero si entramos la URL completa vemos que también funciona:

Por otra parte si entramos un nombre de controlador o de acción que no existe, recibimos un 404 (página no encontrada):

¡Un saludo a todos!

Autor

Eduard Tomàs

Apasionado de la informática, los videojuegos, rol y... la cerveza. Key Consultant en Pasiona y MVP en #aspnet

Compartir

Comentarios

rado

19/4/2011
visual studio
Que versión de visual utilizo para esta aplicación.

Leo

19/4/2011
MVC
Me parecio bien explicado, simple y entendible

elerman

20/4/2011
visual
el que utilizo fue visual studio 2010

elBaco

12/7/2011
Enhorabuena
Muchas gracias por este manual y por el tiempo dedicado a darnos a conocer esta nueva tecnología.

sicomp_sicomp

15/3/2012
Gracias
Muchas gracias, es por gente como tu que podemos aprender nuevas cosas de manera sencilla y eficiente ;)

ricardo

13/11/2012
Gracias por tu tiempo
Si no es por gente como tú, y por plataformas como Desarrolloweb la mayor parte de conocimientos estarían limitados a unos pocos.

gracias,

manuel

30/3/2013
guau!!!!
super bien explicado,<br />
mira que he leido pero no me enteraba hasta este post.

angel

24/4/2013
excelente
excelnte explicación, muy útil para mi que no tenia ni idea y lo necesito aprender para trabajo

steve

26/7/2013
Excelente
Local, excelente voy a almorzarme el manual ya que necesito montar una Web Api al toque para trabajar con IPAD.
Muchas gracias

Edith

04/4/2014
Gracias
Explicado muy sencillo pero es la base para lo complejo. Gracias!!

Josue

06/6/2014
Pequeño detalle
Solo faltaria especificiar que hay que agregar la carpeta "Home" en la parte de Views, y dentro de ella agregar el archivo "Index", tuve algunos problemillas por ese pequeño detalle y supongo que no sere el unico jeje.
Saludos.