Aplicación web con ASP.NET MVC 2

Hace un año empezamos a trabajar con aplicaciones web con ASP.NET MVC 2 en Visual Studio 2010, en este curso nuevamente trabajaremos con esta tecnología aunque contamos ya con la versión 3 del ASP.NET MVC, podremos pasar a la versión 3 no sin antes haber trabajado con la versión 2 y como la red de la escuela no nos permite descargar no podemos actualizar nuestro Visual Studio.

Aún se encuentra la publicación del ejemplo anterior en http://afelipelc.mx/2011/05/23/mi-primera-aplicacion-asp-net-mvc-2-paso-a-paso/ del cual se retomarán algunos datos pero en esta ocasión el trabajo será diferente.

Actualmente en el sitio oficial de ASP.NET MVC http://www.asp.net/mvc/ encontramos el tutorial para crear una aplicación con la versión 3 del ASP.NET MVC, pero aún se encuentran vivos los enlaces del tutorial de ASP.NET MVC 2 que se tomó para realizar el ejemplo anterior, el link es http://www.asp.net/mvc/tutorials/getting-started-with-mvc-part1.
Para saber más acerca de ASP.NET MVC, visita el sitio http://msdn.microsoft.com/es-es/library/dd394709.aspx.

Nuestra aplicación de ejemplo a realizar consiste en crear una pequeña aplicación que administre los diferentes grupos de alumnos de una escuela considerando: Programas educativos, cuatrimestres, grupos, tutores y alumnos; debe considerarse que la información cambia constantemente como al cambiar un nuevo año, nuevo cuatrimestre, cambio de grupo, tutores, etc. para ello debemos considerar también un historial para que al iniciar un nuevo cuatrimestre los grupos puedan ser reiniciados a 0 alumnos, al igual que deben considerarse los registros de las distintas generaciones (¿Suena algo complejo?, podría serlo pero le daremos solución).

Por ahora la tarea es realizar el modelado de datos para nuestra aplicación.

Por otra parte, empezaremos con la parte de crear un primer proyecto de ASP.NET MVC 2.
Requisitos: Visual Studio 2010 con Visual Web Developer y SQL Server Express 2008. Para este ejemplo se está utilizando Visual Studio 2010 versión Ultimate.

Crear un proyecto de Aplicación Web de ASP.NET MVC 2

En Visual Studio -> Crear nuevo Proyecto -> C# /Web >>  elegimos Aplicación web de ASP.NET MVC 2, elegimos donde guardarlo y le ponemos el nombre de EscuelaWebApp (cambia el nombre si lo prefieres).

Img. 1. Crear el proyecto

Al crear el proyecto nos pregunta si queremos crear un proyecto de prueba unitaria, por ahora elegimos NO y damos clic en Aceptar.

¿Qué nos genera el proyecto?

El tipo de proyecto seleccionado nos crea 2 controladores, uno llamado HomeController que es la entrada principal de la aplicación, y otro controlador llamado AcountController que se encarga de la gestión de las sesiones de usuarios.

Img 2. Estructura de la aplicación.

Además de que crea toda la estructura del proyecto: Carpeta de Datos (App_Data), Carpeta de hojas de estilo y otros contenidos (Content), Carpeta de Controladores (Controllers), Carpeta de vistas (Views) donde se incluyen vistas compartidas como la plantilla del sitio llamada Site.Master y otros controles como el de Usuario, Carpeta de modelo de datos y clases a utilizar como modelo (Models), Carpeta para scripts JS (Scripts) que incluye por default JQuery y otras librerias y los archivos de configuración de la aplicación.

Si se elige un proyecto de Aplicacion web vacía de ASP.NET MVC 2 creará solo la estructura sin el controlador AcountController.

El controlador HomeController

El controlador Home es el punto de entrada para nuestra aplicación, si analizamos el código vemos que contiene:


public class HomeController : Controller
{
public ActionResult Index()
{
ViewData["Message"] = "ASP.NET MVC";
return View();
}
public ActionResult About()
{
return View();
}
}

Encontramos que la clase HomeController contiene una Acción (ActionResult) llamada Index() que es la acción por defecto en un controlador, es decir, si ejecutamos nuestra aplicación, obtendremos en el navegador que nos muestra la página principal en la direccion http://localhost/ lo que vemos ahí es el resultado de la llamada a la acción Index() del controlador Home, en el ejemplo, la acción Index()  pasa un parámetro llamado “Message” a la vista relacionada (Index.aspx en View/Home) a la acción por medio de ViewData[“Message”] cuyo valor será mostrado por la vista en el navegador.

Todas las acciones de un controlador deben devolver una vista por medio de return View(), entonces para cada acción puede crearse una vista que deberá llevar el mismo nombre (más adelante veremos las vistas), pero también puede una acción devolver otra vista con nombre diferente, como cuando queremos mostrar la misma vista al usuario en caso de generase un error, devolveremos la vista llamada Error.aspx que se encuentra en Views/ Shared.

La acción About() solo responde con la vista relacionada llamada About.aspx que se encuentra en Views/Home.

Entonces podemos darnos cuenta que para cada controlador se crea una carpeta en Views donde se encontrarán todas las vistas asociadas a las acciones de cada controlador.

Podemos decir también que las acciones tiene la estructura:


public ActionResult NombreDeLaAccion()
{
//Todas las sentencias que deberá ejecutar la acción.
//Generar un resultado si fuera el caso
//Devolver la vista con el resultado generado
return View();
}

Las acciones pueden recibir parámetros de lo que veremos más adelante.

Analicemos ahora el código de la plantilla del sitio llamada Site.Master (en Views/ Shared) (no puede agregarse aquí en la publicación porque wordpress.com no lo permite)

Encontramos que la mayor parte del código es HTML.

Lo que nos llama la atención es

<title> <asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>

donde encontramos la etiqueta ASP llamada ContentPlaceHolder con el Id TitleContent, cuya función es poner en ese espacio el título de la página proporcionado por las vistas, lo mismo que donde deberá insertarse el contenido de la página (pasado por la vista).

La estructura del sitio creada por la plantilla es el siguiente:

Img. 3. Estructura del sitio.

Analicemos ahora el código de la vista Index.aspx

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
Página principal
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h2><%:ViewData["Message"] %>
<p>
Para obtener más información sobre ASP.NET MVC, visite el < a href="http://asp.net/mvc" title="sitio web de ASP.NET MVC">http://asp.net/mvc.
</p>
</asp:Content>

Podemos encontrar que contiene la etiqueta ASP llamada Content con un identificador y especifica el ContentPlaceHolderID donde deberá mostrarse la información que recide dentro de esta etiqueta, para í ContentPlaceHolderID=”TitleContent” el contenido a mostrar es “Página principal” que en sí es el título que le estamos dando a nuestra página.

Para el  ContentPlaceHolderID=”MainContent” es todo el contenido de nuestra página, en este caso mostrará el valor que contiene el parámetro “Message” pasado por la acción Index() del controlador Home, donde observamos que para imprimir el valor de una variable, parámetro o datos del modelo se hace por medio de <%:NombreElemento%> ejemplo: <%:ViewData[“Message”] %>, el contenido también incluye un poco más de información contenida en un párrafo.

Ejecutando nuestro proyecto, VS abrirá el navegador web mostrando el resultado:

Img. 4. Vista de la ejecución de la aplicación.

Debemos considerar que como no estamos utilizando nuestro propio servidor IIS para la ejecución de nuestras aplicaciones web, VS esta utilizando el IIS de desarrollo que trae integrado, por ello a cada aplicación web le asigna un puerto, para mi aplicación le ha asignado el puerto 2958 en el cuál esta corriendo la aplicación y cada vez que se quiera ingresar a ella (mientras se este ejecutando), debe hacerse por medio de este puerto.

Pues bien, hasta aquí es solo lo que nos ha generado el Visual Studio al crear nuestro proyecto, en el siguiente avance agregaremos algunos controladores y vistas para ir avanzando en el desarrollo.

¿Algún comentario o información que agregar?, puedes colaborar.

Anuncios

3 comentarios en “Aplicación web con ASP.NET MVC 2

  1. Muy buen aporte Felipe, gracias por el ejemplo que colocas estoy aprendiendo mucho con este ejemplo antes desarrollaba aplicaciones de escritorio ahora me estoy dedicando a aprender a la web, puntualmente me interesa este mundo de la arquitectura MVC, como sugerencia para aquellos que quieran realizar la aplicación les sugiero que se instalen este complemento Clarius.WoVS.DefaultBrowserSwitcher para el visual studio 2010, ya que en la parte de los radio´s con los script tuve problemas con los navegadores probé con el Firefox y no me funcionaba al igual que el explorador, el único que me funciono era el Chrome, lo que hace este complemento es que puedas elegir que navegador quieres utilizar para lanzar la aplicación en el servidor para que así puedas realizar las pruebas correspondientes obviamente que entes debes tener instalado los navegadores. Saludos para todos y espero algún día también hacer algún pequeño ejemplito jjj con algo tal vez de Silverlight.NET tal vez pero bueno por ahora a aprender probar y practicar. Si alguno necesita ayuda o algo para eso estamos tuxGentoo@hotmail.com.

Escribe tu comentario:

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s