Tutorial de ASP.

NET MVC | PensandoEnCodigo

http://robertoyudice.com/asp-net/tutorial-de-asp-net-mvc/

Home Subscribe PensandoEnCodigo Programacion, productividad y otras cosas interesantes

Tutorial de ASP.NET MVC

by ryudice on October 25, 2009

Que es ASP.NET MVC?

ASP.NET MVC es un nuevo framework creado por Microsoft, las siglas MVC provienen del patrn de diseo llamado MVC, el cual quiere decir Model View Controller. Las bases de este framework estn, 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 cdigo 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

1 de 7

03/01/2012 01:18 p.m.

Tutorial de ASP.NET MVC | PensandoEnCodigo

http://robertoyudice.com/asp-net/tutorial-de-asp-net-mvc/

Creamos un nuevo proyecto del tipo ASP.NET MVC Web Aplicacin. 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 automticamente. Sobre la estructura de folders de ASP.NET MVC Como se abran dado cuenta, se creo una estructura de folders automticamente. La carpeta Content es para guardar imgenes, 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 podrn ver, ya viene incluido jQuery.

Paso 3. Creando un controlador

Vamos a crear un controlador para nuestra aplicacin 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 podrn notar automticamente 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:

2 de 7

03/01/2012 01:18 p.m.

Tutorial de ASP.NET MVC | PensandoEnCodigo

http://robertoyudice.com/asp-net/tutorial-de-asp-net-mvc/

El solo nos agrega la Accin Index. Se acuerdan que les mencione que cada controlador esta compuesto por varias acciones? bueno la accin Index es la que se llama por defecto si no se especifica ninguna accin. La nica lnea de cdigo de la accin Index (return View()) como podrn ver retorna una vista. La funcin View es un funcin de la clase Controller, de la cual hereda nuestro controlador, se utiliza para poder desplegar la vista despus de que mi accin realiza lo que quiero que haga. Cuando la funcin View no lleva ningn parmetro, la funcin busca automticamente una vista que tenga el mismo nombre de mi accin y retorna esa vista, en cualquier otro caso, podemos mandar como parmetro el nombre de la vista que deseamos mostrar.

Paso 4. Agregando una nueva accin

Bueno vamos agregar nuestra querida accin llamada Saludar, generalmente las acciones llevan nombres de verbo, no es obligacin que sea as pero as debera de ser. Este es el cdigo de nuestra accin:
public ActionResult Saludar() { ViewData["Mensaje"] = "Hola ASP.NET MVC"; return View(); }

Sobre la lnea que ven que dicen ViewData: el viewdata se utiliza para enviar informacin a nuestra vista, esta no es la nica forma de hacer esto y generalmente no se usa mucho, dentro de poco les voy ensear el otro mtodo.

Paso 5. Creando nuestra vista

Bueno ahora que ya tenemos nuestra accin solo nos queda agregar nuestra vista. Para hacer eso solo hagan clic dentro de la funcin Saludar y luego seleccione Add View

3 de 7

03/01/2012 01:18 p.m.

Tutorial de ASP.NET MVC | PensandoEnCodigo

http://robertoyudice.com/asp-net/tutorial-de-asp-net-mvc/

Dejamos todo como esta y hacemos clic en Add Ahora dentro de nuestra vista agregamos esta lnea: <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 Patrn 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 aplicacin presionando CTRL+F5. Cuando corran la aplicacin los va llevar al Home, para ir a nuestro controlador modifiquen la direccin para que quede as:

Reemplacen el numero de puerto por su numero de puerto. Este debera de ser el resultado:

4 de 7

03/01/2012 01:18 p.m.

Tutorial de ASP.NET MVC | PensandoEnCodigo

http://robertoyudice.com/asp-net/tutorial-de-asp-net-mvc/

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 accin que se llama Saludar, para llamar esta accin 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 accin que quiero ejecutar. Luego agregamos una vista, automticamente 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 funcin de scaffolding de ASP.NET MVC para generar los mantenimientos automticamente.

Share and Enjoy:

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

5 de 7

03/01/2012 01:18 p.m.

Tutorial de ASP.NET MVC | PensandoEnCodigo

http://robertoyudice.com/asp-net/tutorial-de-asp-net-mvc/

{ 2 trackbacks } ASP.NET MVC es el futuro de ASP.NET | PensandoEnCodigo October 30, 2009 at 3:47 am Usando AJAX con JQuery y ASP.NET MVC | PensandoEnCodigo February 8, 2010 at 1:28 am { 6 comments read them below or add one }

Jorge Alarcon April 28, 2010 at 2:11 pm En primera instancia quiero que quede claro que estoy agradecido por el ejemplo indicado y que es gracias a l que he dado otro en el aprendizaje de MVC para ASP.net. No pido que dejes de realizar este tipo de documentos, pero si pido que los revises un poco para evitar que quienes se basen en l no se queden en medio camino. Gracias nuevamente por el ejemplo y saludos. Las faltas ortogrficas no llegan a influir en el aspecto tnico del documento, pero si permiten catalogar la calidad del documento. El Controlador que dices que se llame MiControlador, en realidad se debe llamar Hola, y es importante indicar que no se debe quitar el subfijo autogenerado. Tal vez, tambin sera importante indicar que el mtodo Saludar() debe escribirse en la misma clase generada para el controlador Hola.

ryudice April 28, 2010 at 6:40 pm Te agradezco mucho tu comentario y lo voy a tomar muy en cuenta ya que a mi ya me ha pasado que me topo con tutoriales asi y molesta un poco, voy a corregir tus observaciones y tendre mas cuidado, gracias de nuevo.

Cristian August 26, 2010 at 4:41 am Muchas gracias por el tutorial, estoy empezando a aprender el MVC para ASP.NET.

Olgui June 8, 2011 at 12:03 pm HOla, muchas gracias por este mini tutorial. Para empezar est bien. cmo puedo conseguir un tutorial mas completo? gracias

carlos June 13, 2011 at 5:54 pm Hola amigo muy bien tu tutorial pero ahora si realmente quisiera que hicieras el ORM creo que es el

6 de 7

03/01/2012 01:18 p.m.

Tutorial de ASP.NET MVC | PensandoEnCodigo

http://robertoyudice.com/asp-net/tutorial-de-asp-net-mvc/

NHibernate, me gustaria que lo hicieras, Gracias. Por favor responde.

mariano

7 de 7

03/01/2012 01:18 p.m.