MegaTutorial(part 1) How to: ASP.NET MVC 2, tienda de musica online

Buenas noches!, como es de costumbre en las noches preparo tutoriales para postearlos aqui! ;D, en esta ocacion es un buen tutorial de como hacer una tienda de musica online usando ASP.NET MVC2 ( Modelo vista controlador), que esta en la misma pagina de ASP.NET, pero esta en english my bro, asi que aqui vendre a explicarte todo lo que he aprendido y por aprender, paso a paso para tratar de comprender todos los conceptos que utilizaremos( y comprenderlos yo que es algo nuevo para mi), en fin primero veamos:

Que es MVC?:

Modelo Vista Controlador (MVC) es un estilo de arquitectura de software que separa los datos de una aplicación, la interfaz de usuario, y la lógica de control en tres componentes distintos. El estilo de llamada y retorno MVC (según CMU), se ve frecuentemente en aplicaciones web, donde la vista es la página HTML y el código que provee de datos dinámicos a la página. El modelo es el Sistema de Gestión de Base de Datos y la Lógica de negocio es el controlador es el responsable de recibir los eventos de entrada desde la vista.

Ja, mejor basta de conceptos, simplemente manejamos 3 cositas llamadas, vistas, controladores y modelos que iremos trabajando con ellos, programaremos en C# ( que es un poco nuevo para mi) y pues que mas!, mejor veamos que pretenderemos hacer.



Emocionense como yo!, primero les aclaro que los estilos de pagina CSS ni los tocaremos y otras cosillas como la BD, ya estan hechos asi que no crean que se haran expertos en diseño web con este tutorial, mas bien en la programacion de la pagina =B Ja…

Este proyecto tendra todo lo que necesita una tienda de musica online, como un log in, administrador de los productos, un carrito de compras =D etc.

Debemos de tener Visual Studio 2010, o en dado caso el visual web developer 2010 xpress. Bueno, comencemos:

File/ New Project

Iniciaremos creando un proyecto.

Y seleccionamos  ASP.NET MVC 2 Empty Web Application (o Aplicacion web vacia de ASP.NET MVC 2), al proyecto le pondremos como nombre MvcMusicStore.

Nos creara el proyecto y muchas carpetitas =D que iremos viendo poco a poco y las utilizaremos de un buen modo. Esta es la vista siguiente que veremos, el proyecto vacio.

Tenemos las siguientes carpetas:

Ok, ninguna de esa esta dioquis, tenemos la carpeta Conrollers esta almacena todos los controladores( apoco ) que vamos a ir creando, lo que hace el controlador es responder a la entrada desde el navegador, decidir qué hacer con ella, y da respuesta de vuelta al usuario. La carpeta Content , tiene los estilos de pagina CSS y pues otras cosillas de la pagina respecto al diseño. La carpeta Models, esta contiene los modelos que manipulan y retienen la informacion.

Controladores

Es importante empezar creando los controladores, ya que estos son como el intersesor entre los modelos y las vistas XD, asi que crearemos un controlador llamado HomeController.

Agregando HomeController

Le cambiamos el nombre que por defecto nos pone y pondremos HomeController

HomeController.cs viene ya con un pequeño codigo que es el siguiente:

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

namespace MvcMusicStore.Controllers
{
public class HomeController : Controller
{
//
// GET: /Home/

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

Para empezar lo mas pronto posible, remplacemos este simple metodo para que solo nos devuelva una simple cadena. Hagamos dos cambios a ese metodo:

  • En vez de un ActionResult, el metodo nos devolvera una string
  • cambiar la instruccion “return” para que nos devuelva una cadena cualquiera

El metodo quedaria de la siguiente forma:

public string Index()
{
return "Hello from Home";
}

Ejecutando la aplicacion

Ahora ya podemos correr nuestro proyecto, para ver que pasa =D.

o con ctr + f5 para no debuguearlo

Y este es nuestro resultado, nos devuelve una simple cadena el metodo index, esto fue algo rapido, pero es como introduccion de como nuestro controlador hace su funcion.

Ahora hagamos el controlador para nuestra tienda (store), esta tiene 3 niveles por asi decirlo:

  • Store Index, que es como la pagina principal de Store, que nos mostrara todos los generos de musica que tenemos
  • La pagina Browse que esta sera para buscar  Artistas segun el genero que escojamos
  • La pagina Details, que nos mostrara informacion detallada de algun album en especial

Empezaremos agregando un nuevo controlador que se llamara StoreController, lo haremos igual como creamos HomeController ( Recuerda parar el Debug cuando corriste la aplicacion ahorita)

Ahora agregamos pues el controlador StoreController:

El nuevo controlador tendra ya un metodo llamado Index() como lo vimos con HomeController, tambien necesitaremos agregar otros 2 metodos, por que recuerden que Store lo trabajaremos en 3 niveles como lo mencione anteriormente, entonces agregaremos 2 metodos mas a store: Browse y Details. Estos metodos seran llamados “Controller Actions”, como tu ya has visto  con HomeController y el metodo Index(), su trabajo es responder a peticiones URL y poner el contenido en la pagina.

Ejecutemos el proyecto de nuevo y busquemos /Store/Browse o /Store/Details

Esto es genial, pero esto solo son unas simples cadenas. Hagamos mas dinamica nuestra pagina, entonces nuestros controladores obtendran informacion de la URL y la pondran en la pagina. Primero que nada cambiaremos el metodo Details() para que lea y muestre un parametro llamado ID

Corramos la aplicacion y pongamos en el navegador /Store/Details/5. El controlador va a leer el ID desde la URL y la pondra como una cadena en nuestra pagina:

Esto fue muy facil pero sirve de introduccion. Ahora hagamos como una consulta desde el URL (querystring), entonces nuestro controlador Browse quedara de la siguiente forma:

Corramos el proyecto y pongamos en el navegador /Store/Browse?Genre=Disco

Nota: Usamos Server.HtmlEncode para procesar la entrada del usuario. Esto nos previene injeciones de Javascript por ejemplo para que no hagan nada como esto: /Store/Browse?Genre=<script>window.location=’http://hackersite.com'</script&gt;.

Veamos que vimos en esta parte del tutorial 😀 :

  • Hemos creado un nuevo proyecto en Visual Studio 2010
  • Vimos las carpetas creadas, y la basica estructura de estas
  • Vimos como correr un proyecto usando ASP.NET Development Server
  • Creamos dos controles con 4 “Controller Actions” que responden segun la peticion URL y devuelven una cadena en el navegador

Esto es todo en la parte 1 de este tutorial, esperen las demas entradas =D.

Anuncios

9 comentarios sobre “MegaTutorial(part 1) How to: ASP.NET MVC 2, tienda de musica online

  1. Excelente.!! y caundo postearas la parte 2??
    Tienes por casualidad alguna referencia para crear todo de la nada, conectarlo con mysql? no importa que sea en ingles, lo necesito para hacer un proyecto en la Uhniversidad, tengo qeu hacer algo semejante a la tienda de musica virtual de apple. saludos, y cualquier info puedes enviarla a lrqa90@gmail.com.
    gracias!!

  2. Its such as you learn my mind! You seem to know so much about this, such as
    you wrote the guide in it or something. I feel that
    you just could do with a few percent to power the
    message house a little bit, however instead of that, that is wonderful blog.
    A fantastic read. I’ll certainly be back.

Responder

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