Que es ASP.NET MVC?

ASP.NET MVC es un nuevo framework creado por Microsoft, las siglas MVC provienen del patrón de diseño llamado MVC, el cual quiere decir Model View Controller. Las bases de este framework están, hasta cierto punto, basadas en Rails (Ruby on Rails), el cual es un framework para Ruby bastante popular por su sencillez y total control sobre el código HTML que se genera.

En mi opinion, ASP.NET MVC  es el futuro de ASP.NET, tiene varias ventajas sobre ASP.NET clasico entre las cuales podemos mencionar:

• No hay viewstate
• Control total sobre el HTML
• Facilidad para implementar pruebas unitarias e inyeccion de dependencias.
• Completamente basado en el patron MVC

Una ves lo entiendan se van a dar cuenta de lo sencillo que es, el problema a veces es que no es tan facil entenderlo, espero que este tutorial los ayude a lograrlo.

Paso 1. Descargar e instalar ASP.NET MVC

NOTA: NECESITAN TENER YA INSTALADO VISUAL STUDIO, PUEDEN DESCARGAR LA VERSION EXPRESS.

Como uno de los requisitos es necesario tener instalado el framework 3.5 con el Service Pack 1. Tambien tienen que descargar el framework de ASP.NET MVC.

Paso 2. Creando un nuevo proyecto

Creamos un nuevo proyecto del tipo “ASP.NET MVC Web Aplicación”. Tomen en cuenta que para crear proyectos ASP.NET MVC no seleccionamos “Nuevo sitio web” como es en el caso de las aplicaciones ASP.NET normales, si no que seleccionamos “Nuevo Proyecto”.

Al crear el proyecto notaran que nos crea una estructura de folders automáticamente.

Sobre la estructura de folders de ASP.NET MVC

Como se abran dado cuenta, se creo una estructura de folders automáticamente.

La carpeta “Content” es para guardar imágenes, archivos css, u otro tipo de archivos.
La carpeta “Controllers” es para guardar los fuentes de controladores.
La carpeta “Views” es para guardar las vistas, estos son archivos HTM.
La carpeta “Models” es para guardar nuestras clases, generalmente, la de acceso a datos.
La carpeta “Scripts” contiene nuestros archivos de javascript, como podrán ver, ya viene incluido jQuery.

Paso 3. Creando un controlador

Vamos a crear un controlador para nuestra aplicación llamado “HolaController”, para hacer eso, hacemos clic derecho sobre la carpeta “Controllers” y luego seleccionamos Add->Controller o (Agregar->Controlador) y aparecerá esta ventana

Como podrán notar automáticamente nos agrega el sufijo “Controller” al nombre del controlador. Por el momento no chequeen la casilla para agregar los action methods. Llenen la casilla con el texto “HolaController”. No remuevan el sufijo “Controller” del nombre, ya que internamente ASP.MVC busca todas las clases con este sufijo para identificarlos.

Este es el resultado:

El solo nos agrega la Acción “Index”. Se acuerdan que les mencione que cada controlador esta compuesto por varias acciones? bueno la acción Index es la que se llama por defecto si no se especifica ninguna acción.

La única línea de código de la acción “Index” (return View()) como podrán ver retorna una vista. La función View es un función de la clase Controller, de la cual hereda nuestro controlador, se utiliza para poder desplegar la vista después de que mi acción realiza lo que quiero que haga. Cuando la función View no lleva ningún parámetro, la función busca automáticamente una vista que tenga el mismo nombre de mi acción y retorna esa vista, en cualquier otro caso, podemos mandar como parámetro el nombre de la vista que deseamos mostrar.

Paso 4. Agregando una nueva acción

Bueno vamos agregar nuestra querida acción  llamada “Saludar”, generalmente las acciones llevan nombres de verbo, no es obligación que sea así pero así debería de ser. Este es el código de nuestra acción:

public ActionResult Saludar()
{
ViewData["Mensaje"] = "Hola ASP.NET MVC";
return View();
}

Sobre la línea que ven que dicen ViewData: el viewdata se utiliza para enviar información a nuestra vista, esta no es la única forma de hacer esto y generalmente no se usa mucho, dentro de poco les voy enseñar el otro método.

Paso 5. Creando nuestra vista

Bueno ahora que ya tenemos nuestra acción solo nos queda agregar nuestra vista.

Para hacer eso solo hagan clic dentro de la función “Saludar” y luego seleccione “Add View”

Dejamos todo como esta y hacemos clic en Add

Ahora dentro de nuestra vista agregamos esta línea:

<h1><%= ViewData["Mensaje"] %></h1>

Se acuerdan del ViewData que agregamos en nuestro controlador? este es el mismo, como les mencione, cualquier objeto que pasemos a traves del viewdata lo podemos accesar desde nuestra vista.

Para que quede así:

Y por el momento esto es todo, quiero que se familiaricen con el concepto del Patrón MVC, para luego poner tutoriales mas avanzados, voy escribir una parte donde donde vamos a usar una herramienta ORM para accesar a la base de datos.

Ahora podemos correr nuestra aplicación presionando CTRL+F5. Cuando corran la aplicación los va llevar al Home, para ir a nuestro controlador modifiquen la dirección para que quede así:

Reemplacen el numero de puerto por su numero de puerto. Este debería de ser el resultado:

Ultimas palabras

Haciendo un repaso de lo que hicimos y tratando de resolver dudas, recorramos el tutorial otra ves.

Lo primero que hicimos fue crear el Controlador, con una acción que se llama “Saludar”, para llamar esta acción accedamos a la URL http://localhost:897/Hola/Saludar, el esquema por defecto para accesar acciones es:

Así que “Hola” es el nombre del controlador y “Saludar” es la acción que quiero ejecutar.

Luego agregamos una vista, automáticamente al agregar una vista, se crea en la carpeta de “Views” que vimos al comienzo en la estructura, a la misma vez, dentro de la carpeta “Views” se creo una nueva carpeta con el nombre de nuestro controlador, “Hola”, y dentro de esta carpeta se guardo la vista que creamos.

En un tiempo voy a publicar una parte 2 donde vamos a usar una herramienta ORM para accesar nuestra base de datos, y vamos a usar la función de scaffolding de ASP.NET MVC para generar los mantenimientos automáticamente.

Related posts:

1. Usando AJAX con JQuery y ASP.NET MVC
2. El Patron MVC (Modelo Vista Controlador)
3. Tutorial de IronRuby

Tagged as: .NET, asp.net mvc, C#, howto, mvc, tutorial