ASP.NET y MVC 3–Parte I

Antes de empezar, quisieramos dar gracias a los que nos escribieron para felicitarnos por haber escrito un post luego de mucho tiempo.  Debido a la confianza que les tenemos, les explicaremos brevemente el motivo de haber dejado de escribir. Cuando  decidimos crear el blog, lo hicimos, en primer lugar, para tener un canal de comunicación con todas las personas que, como a nosotros, les gusta programar. Escribir lo que sabemos o contar algunas investigaciones realizadas fue nuestra principal motivación.  Lastimosamente, no todo en la vida es color de rosa. Este blog , para nosotros, tiene un costo y habíamos pensado mantenerlo mediante la publicidad existente, pero a la fecha no ha tenido los resultados esperados, debido a eso nos vimos en la necesidad de dedicar nuestro tiempo en otras ocupaciones.

Luego de analizar la situación, hemos decidido empezar este 2012 con un ánimo renovado, borrando lo anterior y esperando que la fortuna nos acompañe y sobre todo que ustedes continuen leyendo y escribiendo sus comentarios  a los post que vamos a ir escribiendo.

Ahora si, los dejamos con el nuevo post, no sin antes darles gracias por su tiempo en leer estas líneas.

Atte.

Copstone….Programando por Diversión

En el post anterior vimos de que trataba el MVC. En este post vamos a analizar una aplicación Web sencilla  con ASP.NET y MVC 3. El concepto de  MVC 3 en ASP.NET hace referencia a un framework para que nuestras aplicaciones web sean desarrolladas bajo el patrón MVC. Lo puedes descargar desde este link.

Creación del Proyecto

Luego de instalar los archivos, reinicia tu VS 2010 y crea un nuevo proyecto del tipo Web en el lenguaje C#. De manera específica vamos a realizar un proyecto del tipo ASP. NET MVC 3 Web Application.

Le voy a poner de nombre al proyecto DemoMVC3App y luego pulsar el botón OK

Luego de pulsar el botón, vamos a acceder a una nueva ventana. En esta ventana vamos a escoger el motor de vistas que usaremos y el template del proyecto que usaremos.

• Para el Motor de Vistas (View Engine) escogeremos RAZOR. Este motor permite un acceso mejorado a las vistas que las del motor ASPX. Este es uno de los cambios del MVC 3 con respecto a sus predecesores.
• En el caso de los template, usaremos el template que permite la creación de una “project with an account controller that uses forms authentication.”

 

Luego de presionar OK, esperamos unos segundos y se crea el proyecto de la siguiente forma:

Como pueden ver, en el Solution Explorer, se han creado carpetas y llaman la atención 3 de ellas, Controllers, Models y Views.

Vistas

Como ya saben, las vistas vienen a ser las interfaces que van a visualizar el usuario. Si ejecutan la aplicación, tal como está, verán la siguiente página inicial:

Si analizamos la interacción del usuario con la página tenemos:

• Puede dar Click en HOME
• Puede dar Click en About
• Puede dar Click en LogOn

Estas tres interacciones, según el concepto de MVC, deberían generar, cada una,  un evento el cual debe de ser controlado por un Controller y llevar a la visualización de vistas, digamos 3 vistas. Veamos si esto es cierto.

Vamos a VS2010, en la carpeta Views, veamos que hay dentro de esa carpeta.

Si expandimos la carpeta View, vemos que existe una subcarpeta Account, con varios archivos, pero nos interesa por ahora LogOn.cshtml. También vemos una carpeta llamada Home con dos archivos About.cshtml e Index.cshtml.

A estas alturas ya deben de haber deducido algo, y si no se los digo. Los archivos mencionados, son las vistas de las 3 opciones que mencionamos líneas arribas. Para despejar las dudas, los invito a abrir esos archivos y verán que el contenido de los mismos son tag o controles que se visualizan al momento de dar click en cada una de las opciones.

Una pregunta se cae de madura y si no te la haces, la hago yo. Se dieron cuenta que los archivos tienen extensión CSHTML?, la respuesta es el motor de vistas seleccionado RAZOR.

Controladores

Nuevamente recordemos el concepto de MVC. El controlador intercepta los eventos y dependiendo de lo que se desee realizar interactúa, finalmente, con una vista para visualizar algo.

Veamos el contenido de la carpeta Controllers del proyecto.

Contiene dos archivos, uno llamado AccountController.cs y otro llamado HomeController.cs.

Para que tenga sentido estos nombres recordemos que en la carpeta Views encontramos dos subcarpetas. Una llamada Account y otra llamada Home. Por lo tanto AccountController es el controlador de las vistas de la carpeta Account y HomeController el controlador de las vistas que se encuentran la carpeta Home.

Ahora, vamos a ver el contenido de un Controlador. Veamos el archivo HomeController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace DemoMVC3App.Controllers
{
    public class HomeController : Controller
    {
	//Esta método se invoca cuando el usuario da click en la opción HOME.
	//La página de HOME es la página de inicio de la aplicación
        //Para que quede claro diremos que si el website esta en localhost,
	//esta página se visualiza si colocamos en el browser
	//http://localhost o http://localhost:1239/Home/ en la barra de direcciones

	public ActionResult Index()
        {
            ViewBag.Message = "Welcome to ASP.NET MVC!";

            return View();
        }

	//Esta método se invoca cuando el usuario da click en la opción ABOUT.
        //Para que quede claro diremos que si el website esta en localhost
	//Si colocamos en el browser http://localhost:1239/Home/About

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

En este punto y ya casi para terminar este post, debemos de dejar en claro como funciona la vista y el controlador.

• Si en la carpeta Views existe una subcarpeta llamada Home (que agrupa a muchas vistas) en la carpeta Controllers debe de haber un archivo llamado HomeController que será el controlador de las vistas.
• Si dentro de la subcarpeta Home, que hay en Views, existe un archivo llamado Index.cshtml, en el archivo HomeController debe de haber un método public ActionResult Index().

En el siguiente post, vamos a agregar vistas y trabajar con el controlador para que veas lo sencillo que es.

---

---