MI PRIMERA APLICACION CON ASP.NET MVC 3.0

[Ultima Actualizacion: 23 - Julio - 2012]

Microsoft desde hace un tiempo ha estado desarrollando un nuevo framework para sitios y aplicaciones Web, este framework esta denominado ASP.NET MVC (Model View Controller) que básicamente es la arquitectura Modelo Vista Controlador para ASP.NET, este modelo no es nuevo ya que data desde hace bastante años atrás, más concretamente desde 1978, cuando se lo creo para el desarrollo de interfaces con SmallTalk.

Este framework tiene entre sus principales ventajas el que nos facilita la division de ocupaciones  ademas de un incremento en la extensibilidad, la testeabilidad y un nuevo sistema de rutas.


Si ustedes ya llevan tiempo desarrollando con ASP.NET, se preguntaran si este framework es un complemento al ASP.NET normal o es el reemplazo, ante lo cual les respondería, que ni uno ni otro, al parecer por ahora es un camino alternativo al ASP.NET normal, por el momento Microsoft va a mantener ambos en desarrollo, tal vez algún día si sea el reemplazo, pero por ahora no.

Bueno con todo lo anteriormente dicho me puedo adentrar a la programación, para lo cual vamos a necesitar:

• Visual Studio 2010 o Visual Web Developer 2010 Express
• ASP.MVC 3.0 que se lo pueden bajar de http://www.asp.net/mvc
• Entity Framework 4.1 http://www.microsoft.com/download/en/details.aspx?id=26825


Para el caso del presente post, vamos a utilizar VS 2010 SP1 con ASP.NET MVC 3.0.
Lo primero que hacemos es crear el proyecto yéndonos a  File->New->Project y ahí le damos un nombre y pulsamos OK:




Luego se nos abrirá una ventana que nos preguntara que tipo de proyecto deseamos crear (Internet, Intranet o Empty) y si deseamos crear un proyecto adjunto para nuestros Unit Tests, para el ejemplo elegiremos el tipo de proyecto Internet.



Además, tenemos 2 opciones más en esta ventana, la primera se refiere a que si deseamos usar HTML5 para la plantilla y la segunda opción es que motor de renderizacion deseamos utilizar, por defecto siempre vienen los motores ASPX y Razor. Para el ejemplo usaremos Razor, que es el nuevo motor que Microsoft lanzo junto con ASP.NET MVC 3.
Con el proyecto ya creado, compilamos con Ctrl+F5 y nos aparecerá en nuestro navegador preferido el proyecto por defecto que viene cuando creamos una aplicación con MVC.


Para este ejemplo, crearemos una aplicación que nos permita publicar un post de 160 caracteres, donde no necesitemos de autorización para realizar la operación, además no se podrán borrar ni editar después de ser publicados, algo así como un Twitter rustico. Para lo cual crearemos una clase, en la carpeta Models del proyecto, la clase tendrá el nombre de “Message”:

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

namespace DemoASPMVC1.Models
{
    public class Message
    {
        public int messageId { get; set; }
        public string messageContent { get; set; }
        public DateTime messageDate { get; set; }
    }
}

Luego creamos un controlador, que lo llamaremos “MessageController”, que es como sigue:

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


namespace DemoASPMVC1.Controllers
{
    public class MessageController : Controller
    {
        //
        // GET: /Message/

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

        //
        // GET: /Message/Create
        public ActionResult Create()
        {
            return View();
        } 

        //
        // POST: /Message/Create
        [HttpPost]
        public ActionResult Create(FormCollection collection)
        {
            try
            {
                // TODO: Add insert logic here
                return RedirectToAction("Index");
            }
            catch
            {
                return View();
            }
        }
    }
}

Por si acaso, para crear una clase del tipo controller, debemos de hacer clic derecho sobre la carpeta “Controllers”,  y luego nos aparecerá una ventana que nos da múltiples opciones de cómo crear nuestro controlador, para el ejemplo utilizaremos la por defecto.




Opciones por defecto para la creación de una clase del tipo Controller.
El siguiente paso es agregar 2 vistas, una para el método Index y otro para los métodos Create, para lo cual haremos clic derecho sobre el código fuente a lado de la instrucción return y elegiremos la opción “Add View” (en cada uno de los métodos públicos de la clase), luego se nos desplegara una ventana con opciones, dejaremos todo por defecto excepto el uso del layout, que por defecto no está asignado. Para lo cual marcaremos como habilitada la opción “Use a layout or master page” y luego haremos clic sobre el botón que tiene puntos para seleccionar el layout de nuestra aplicación, que por defecto se encuentra en la carpeta “Shared” y tiene el nombre de “_Layout.cshtml”.






Antes de proseguir, me gustaría aclarar que cada clase que deriva de la Clase Controller maneja una parte del comportamiento del sitio web y que cada método público es una acción ante una petición hecha por nosotros a través del navegador (una ruta URL).
Nuestro siguiente punto es agregar código a nuestras vistas para que podamos crear un mensaje, como para que podamos visualizar todos los mensajes.

La Create es como sigue:
 
@model DemASPMVC1.Models.Message
 @{
 Viewbag.Title = "Create";
 Layout="~/Views/Shared/_Layout.cshtml"
 }
 <h2>Create</h2>
 @using (Html.BeginForm("Create", "Message", FormMethod.Post))
 {
 <div>
 @Html.LabelFor(model=>model.messageContent)
 </div>
 <div>
 @Html.EditorFor(model=> model.messageContent)
 @Html.ValidationMessageFor( model => model.messageContent)
 </div>
 <input type="submit" value="Send" />
 }
 @Html.ActionLink("Back to list", "Index")

La vista Index es:
 
@model IEnumerable<DemASPMVC1.Models.Message>
 @{
 Viewbag.Title = "Index";
 Layout="~/Views/Shared/_Layout.cshtml"
 }
 <h2>Index</h2>
 @Html.ActionLink("Create Message", "Create")
 @foreach(var item in Model)
 {
 <p>
 @item.messageContent
 </p>
 }

Nuestro siguiente paso es crear nuestra Base de Datos, para que almacene los mensajes que enviemos, para lo cual vamos a usar el ORM que nos provee Entity Framework 4.1, llamado Code First, para lo cual simplemente agregamos una clase llamada “DemoASPMVC1Context.cs”, por si acaso puede llevar cualquier nombre, pero por lo general se acostumbra que lleve el mismo nombre que el del proyecto seguido de la palabra “Context”. La clase es como sigue:

 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data.Entity;

namespace DemoASPMVC1.Models
{
    public class DemoASPMVC1Context: DbContext
    {
        public DbSet Messages { get; set; }
    }
}

Ya con el enlace a la Base de Datos creada, procedemos a modificar el controlador “Message”, para que pueda realizar las tareas de guardar y desplegar la lista de los mensajes.
 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using DemoASPMVC1.Models;


namespace DemoASPMVC1.Controllers
{
    public class MessageController : Controller
    {
        private DemoASPMVC1Context context = new DemoASPMVC1Context();
        //
        // GET: /Message/


        public ActionResult Index()
        {
            //Retorna una lista con todos los mensajes ordenados descendentemente por fecha
            return View(context.Messages.ToList().OrderByDescending(x=> x.messageDate));
        }

        //
        // GET: /Message/Create
        public ActionResult Create()
        {
            return View();
        } 
  
        //
        // POST: /Message/Create
        [HttpPost]
        public ActionResult Create(string messageContent)
        {
            try
            {
                //Crea una instacion de un objeto del tipo Message
                Message message = new Message();
                if (ModelState.IsValid)
                {
                    //Guarda el mensaje que se escribio en el formulario en el objeto instanciado
                    message.messageContent = messageContent;
                    //Obtenemos la fecha del servidor y la asignamos al objeto
                    message.messageDate = DateTime.Now;
                    //Agregamos al contexto de EF el objeto con los datos correspondientes
                    context.Messages.Add(message);
                    //Guardamos el objeto en la BD
                    context.SaveChanges();
                    //Si el almacenamiento salio bien, retornamos a la pagina de inicio de los mensajes
                    return RedirectToAction("Index");
                }
                //Si existe algun error de validacion devolvemos la misma vista "Create", pero mostrando donde existe error
                return View();
            }
            catch
            {
                //Si existe algun error durante el almacenamiento del objeto en la BD, devolvemos la vista Create.
                return View();

            }
        }
    }
}

Por ultimo modificamos, el archivo _layout agregando la siguiente línea a la lista de links
 
@Html.ActionLink("Messages", "Index", "Message")

Ahora lo hacemos correr y ya tenemos nuestra aplicación funcional



Con esto terminamos, espero que le encuentren gusto a desarrollar con ASP.NET MVC, que para mí es la mejor plataforma para desarrollar web en este momento.

Comentarios

  1. Estoy iniciandome en MVC 3 y me parece muy bueno tu post. Pero tengo una duda quisiera saber como hago para hacer un join entre dos tablas para poder obtener los datos relacionados. Gracias y Saludos

    ResponderEliminar
  2. Trabaja con agregaciones, una clase contenida dentro dw otra...ahi resuelves tu problema.

    Slds.

    ResponderEliminar
  3. Hola, muy buen tuto, he seguido los pasos al pie de la letra pero me sale el siguiente error:

    "'System.Data.Entity.DbSet' no contiene una definición de 'ToList' ni se encontró ningún método de extensión 'ToList' que acepte un primer argumento de tipo 'System.Data.Entity.DbSet' (¿falta una directiva de uso o una referencia de ensamblado?)"

    Alguien que me pueda ayudar. Gracias

    ResponderEliminar
  4. agrega la referencia de EntityFrameword.dll

    ResponderEliminar
  5. Falto indicar el tipo de dato en la clase genérica DbSet:

    Donde dice:
    public DbSet Messages { get; set; }

    Debería ser:

    public DbSet Messages { get; set; }

    ResponderEliminar
  6. Cómo ver las tablas resultantes de las relaciones mucha a mucho en Razor?

    ResponderEliminar
  7. Estimados;
    Muy Buen tuto, solo que tengo el mismo problema que comentaron arriba;

    "'System.Data.Entity.DbSet' no contiene una definición de 'ToList' ni se encontró ningún método de extensión 'ToList' que acepte un primer argumento de tipo 'System.Data.Entity.DbSet' (¿falta una directiva de uso o una referencia de ensamblado?)"

    estoy tratando de ver la solucion que comentaron pero todavia no logro arreglarlo.

    Cualquier ayuda adicional se agradece..

    ResponderEliminar

Publicar un comentario

Entradas populares de este blog

Ejecutar comandos en el CMD de Windows desde C#

Crear una aplicacion Android en Netbeans

Modern UI Style para WPF