Home Subscribe PensandoEnCodigo Programacion, productividad y otras cosas interesantes

Tutorial de ASP.NET MVC

by ryudice on October 25, 2009 Hola! Si eres primera ves que nos visitas, considera suscribirte a nuestro feed de RSS para no perderte actualizaciones sobre este tema u otros posts.
X

P owered by WP Greet Box WordP ress P lugin

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

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:

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

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:

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 { 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 NHibernate, me gustaria que lo hicieras, Gracias. Por favor responde.

mariano July 27, 2011 at 7:32 pm no se de programacion, estoy intentando incursionar en asp, mi idea es ir de lleno a hacer webs. que me recomiendan hacer. Gracias por la ayuda. Leave a Comment Name *

E-mail * Website

Submit

FeedBurner RSS

Posts Recientes
Como crear una URL canonica en ISS 7 Libro gratis de programacion de Windows Phone 7 Introduccin a la Inyeccin de Dependencias Como inyectar jQuery en cualquier pagina Entrena tu cerebro con Lumosity

Popular Posts
Cambiar IP en Linux por medio de la consola(bash shell) 17 comment(s) | 778 view(s) Tutorial de ASP.NET MVC 8 comment(s) | 317 view(s) Los 5 tipos de prueba del software 24 comment(s) | 278 view(s) Como crear un DLL en Visual Studio 17 comment(s) | 254 view(s) Como crear un web service en Visual Studio y C# 6 comment(s) | 195 view(s) Herramienta para generar un diccionario de datos en SQL Server 12 comment(s) | 175 view(s) Usando AJAX con JQuery y ASP.NET MVC 5 comment(s) | 113 view(s) El Patron MVC (Modelo Vista Controlador) 3 comment(s) | 110 view(s) Usando Reflection en C# 0 comment(s) | 100 view(s) Diferencias entre bases de datos OLTP y OLAP (Datawarehouses) 18 comment(s) | 62 view(s)

Tags

.NET ajax anime ASP.NET asp.net mvc bases de datos blueprint css C# datawarehouse desarrollo agil
Desarrollo web diseo web ejercicios firefox funcion google herramientas howto iconos ideas

javascript Linux metodologias mvc noticias office 2010 olap Oracle patrones de diseo PHP Productividad programming pruebas respaldos seguridad SEO testing thoughs tuning tutorial vb visual basic
visual studio web services wordpress plugins

Categorias
.NET (8) 1 (2) ASP.NET (10) C# (11) Desarrollo web (8) Diseo (1) diseo web (2) General (24) herramientas (19) Infraestructura (2) Linux (2) Oracle (5) Productividad (6) Programacion (7) Thoughts (1) Uncategorized (2) Visual Studio.NET 2005 (5) Windows Phone 7 (1) Wordpress (1) WordPress Admin PensandoEnCodigo is Digg proof thanks to caching by WP Super Cache

Theme Design by colon cleanse

PensandoEnCodigo is Digg proof thanks to caching by WP Super Cache