TUT: Aprender ASP .NET MVC Paso a Paso en 7 dias(Dia 1)

  • ¿Por qué el code-behind en tan bueno en ASP.NET?
  • Problema número 1: Testeo Unitario
  • Problema número 2: La realidad de la separación del código y la UI
  • Nuestro Héroe MVC(Modelo, Vista y Controlador)
  • Pre-Requisitos
  • Lab 01: Creando una simple Aplicacion ASP.NEt MVC “Hola Mundo”
  • Lab 02: Pasando datos entre el controlador y la vista
  • Lab 03: Creando un simple modelo usando MVC
  • Lab 04: Creando un simple formulario de entrada de datos MVC
  • Lab 05: Usando Razor para crear vistas rápidamente


Como el nombre del artículo dice, aprender MVC, la agenda es simple, vamos a aprender ASP.NET MVC en 7 dias.
La manera como aprenderémos MVC en esta serie de artículos es haciendo laboratorios, mirando los pasos detallados de cómo se hacen esos laboratorios.

Queriendo demostrar que el concepto MVC es igual entre ASP.NET MVC y SPRING MVC es que realizare Aprender MVC con las dos tecnologias( para ls amantes de microsoft y para los amantes del software libre).
Pueden revisar Aprender SPRING MVC Paso a Paso en 7 dias(Dia 1)

¿Porque el code-behind en tan bueno en ASP.NET?
Estoy seguro que todos los desarrolladores les gusta el concepto de code-behind. La aceptación de algo nuevo como MVC, no es nada fácil para ellos.
Cuando hablamos de construir aplicaciones ASP.NET en una arquitectura de capas, ellas se dividen en cuatro partes: UI(paginas ASPX), code-behind(archivos ASPX.cs), capa intermedia(clases .NET) y finalmente la capa de Datos(Data layer).

Si se mira los aspecto de la distribución del código, el mayor código el cual tiene la lógica es la capa intermedia o el code-behind(archivos ASPX.cs). La UI(Interfaz de Usuario) o archivos ASPX son archivos HTML, los cuales son mas acerca del diseñador de la interfaz de usuario, y la lógica de acceso a datos son mas o menos componentes estándar como los Enterprise Data Blocks.
Vamos a analizar los problemas.

Problema número 1: Testeo Unitario
De los aspectos del testeo unitario podemos excluir la Lógica de data y el UI HTML. Las clases de lógica de datos son ya componentes testeados como Enterprise Data Block, entity data context, o LINQ data context. Nosotros ya no tenemos que incluir esfuerzos en testear separadamente el DAL. En caso que tu tengas un capa de acceso a datos personalizado este sería fácil de testearlo como son simples clases .NET.
No hay ninguna lógica en testear ASPX HTML, como se trata más de apariencia.
La capa intermedia es nuevamente un simple clases .NET como lógica de data que se puede fácilmente testear usando VSTS.
Ahora viene el punto más importante: el   The code-behind tiene mucho de acción y testear esto es una de las cosas más importantes. la única manera de  invocar estos códigos es haciéndololos de forma manual, desde una perspectiva de tiempo esto no sería una gran opción.
El code-behind de ASP.NET esta completamente atado con el objeto HttpContext de ASP.NET lo cual hace dificultoso el testeo unitario.

Problema número 2: La realidad de la separación del código y la UI
como dije previamente, los ASPX y los ASPX.cs, no pueden ser desacoplados, lo que reduce la reutilización. Si, Microsoft dijo primero que el code-behind es diferente de la UI, pero entonces ellos son solo archivos físicamente separados y no pueden existir sin uno  del otro.

Por ejemplo digamos que el mismo codigo del  boton click cuando se llama via HTTP POST podría visualizar usando displayinvoice.aspx y cuando llamo via HTTP GEt podría mostrar en un tree view.  En otras palabras deberíamos como reusar el code-behind. Justo pienso como puedo hacer esto usando el actual code-behind.

Nuestro Héroe MVC(Modelo, Vista y Controlador)
Esto es cuando MVC llega al rescate. El code-behind es movido a un simple clase .net llamado Controller.  Cualquier usuario que solicita primero llega al la clase Controller, la clase Controller entonces invoca el modelo, y agrega el modelo a la vista para mostrarlo al usuario final.
Como este Controlador es un simple clase .NET, podemos reusarlo y hacer testeos unitarios facilmente. Vamos a ver como podemos crear Aplicación MVC usando la Plantilla MVC proveídaa por Visual Studio.

Pre-Requisitos
- Visual Studio 2012( Cualquier version). Esto incluye ASP.NEt MVC 4

Lab 01: Creando una simple Aplicacion ASP.NEt MVC “Hola Mundo”
En este laboratorio crearemos un simple programa hola mundo, utilizando la plantilla MVC. Crearemos un simple controlador, conecta el controlador a una simple página index.aspx y ver la página en un Browser.  

Paso 01: Crear el Proyecto
Crear un nuevo proyecto seleccionando Aplicacion Web de ASP.NET MVC 4 y como nombre del proyecto MyFistHelloWorld,  en la siguiente ventana selecionamos vacio.


Una vez hecho click en Aceptar, ya tiene  hecho la estructura con las carpetas apropiadas, donde puedes agregar controladores, vistas y modelos.

Paso 02: Agregar un controlador
ahora vamos a agregar un nuevo controlador como se muestra en la siguiente figura.


Paso 03: Agregar una vista
Ahora que tenemos el controlado necesitamos agregar la vista. Hacemos click derecho en la función Index el cual esta en el controlador y seleccionamos Add View.
En el cuadro de dialogo indica el nombre de la vista, el cual debe ser el mismo que en el controlador(Index) u desactiva usar una pagina de diseño o maestra, porque no queremos que nuestra vista herede de un Master Page.


Una vez hecho en aceptar, podremos ver una simple pagina ASPX con el siguiente codigo HTML.

Paso 04: Ejecutar la Aplicación
Si haces Ctrl + F5 verás un error. Este error es obvio, porque no invocamos  apropiadamente el controlador/accion.
Si digitas en el browser la URL debes ser capaz de ver correctamente la vista.


Lab 02: Pasando datos entre el controlador y la vista
El controlador recibe la primera carga del modelo, la mayoria de veces nos gustaría pasar del modelo a la vista para la visualización.
Para MVC nos gustaría ver el alcance limitado al controlador y la vista, en otras palabra nos gustaría mantener datos cuando el golpe llega al controlador y alcanza la vista y después que el alcance de los datos debe expirar.
Ahí es donde la nueva técnica de gestión de sesiones se ha introducido en el marco de ASP.NET 
MVC, es decir el ViewData.
Paso 01: Crear proyecto y definir la vista de datos.
El primer paso es crear un proyecto y un controlador. En el controlador, definir la variable viewdata, como mostramos en el código de abajo.
Paso 02: Mostrando el view data en la vista.
lo siguiente  es mostrar data en la vista pero usando. tag porcentaje. Uno de los puntos mas importantes a notas es  que  la vista no tiene cod-behind. Para mostrar la vista necesitamos usar  el tag <% en la pagina ASPX.
Paso 03: Ejecutamos la aplicación
Presionamos Ctrl+F5 y modificamos la URL en el Browse.

Lab 03: Creando un simple modelo usando MVC
En este laboratorio crearemos un simple modelo personalizado, esto con algunos datos y mostrarlo en la vista.

Paso 01: Creamos un simple archivo de clase
el primer paso es crear un simple modelo personalizado el cual esta en blanco con tres propiedades: code, name, y amount. Crear un simple Proyecto MVC y hacer click en la carpeta model y clic en Add New Item  y seleccionar clase y asignarle el nombre Curstomer.
Paso 02: Definimos un controlador con acción
el primer paso es crear un controlador y agregar una simple acción que muestre el Customer.
Importar el namespaces del modelo en la clase controlador, creamos un objeto de la clase Customer con algunos datos y lo pasamos a la vista llamado “DisplayCustomer”.

Paso 03: Creamos una vista fuertemente tipada usando la clase.
Necesitamos ahora unir los puntos de MVC, mediante la creación de vistas. Hace clic derecho en el método DisplayCustomer dentro del controlador(Con realizado en el primer laboratorio).

Nota: Previamente es necesario que se compile el proyecto
la ventaja de crear una vista fuertemente tipada es que se pueden obtener las propiedades de las clases en la vista pero digitando model y “.” como se muestra:

Abajo esta el codigo de la vista(sintaxis Razor) el cual muestra los valores de las propiedades del cliente. También podemos asignar una condición IF que muestre los clientes como un cliente privilegiado si la cantidad está por arriba de 100 y un cliente normal si esta por debajo de 100.

Paso 04: Ejecuta la aplicación
Ahora para ejecutar la aplicación presiona Ctrl+F5.
Lab 04: Creando un simple formulario de entrada de datos MVC
Cada proyecto pequeño o grande necesita un formulario de entrada de datos. En este laboratorio crearemos una simple entrada de datos para nuestro cliente como se muestra:
Tan pronto como el usuario final ingrese los detalles y envíe los datos estos serán direccionados a la siguiente ventana como muestra abajo: 

Paso 01: Creando la Página de entrada de datos
el primer paso para crear una entrada de datos es usar las etiquetas form de HTML como se muestra en el código de abajo. Lo mas importante a notar es que la accion del boton  es apuntada al método del controlador llamado “DisplayCustomer”.
Para ayudarnos de Visual Studio y como ya sabemos toda pagina esta relacionada a una accion del controlador en el controlador Customer vamos a crear el metodo FillCustomer.

Después siguiendo los pasos anteriores de como crear una vista(Click derecho y Add View) creamos la vista FillCustomer.



Paso 02: Creando el controlador
Arriba definimos la acción del formulario hacia el controlador a la función DisplayCustomer
Necesitamos obtener los datos de los controles HTML(form), llena el objeto y enviar el objeto a la vista.
Debajo el código de DisplayCustomer, llena el objeto customer  con los datos de la colección Request.Form y envía los objetos a la vista DisplayCustomer.


Paso 03: Creando la vista para mostrar el objeto customer
El siguiente paso es crear la vista DisplayCustomer, seleccionado la opción vista fuertemente tipada( realizada en los pasos anteriores).


Paso 04: Finalmente ejecutar el proyecto
Presionando las teclas CTRL + F5 ejecutamos el proyecto.

Y al hacer clic ek en botón enviar muestra la vista DisplayCustomer.

Lab 05: Usando Razor para crear vistas rápidamente
En nuestros laboratorios anteriores creamos un simple formulario de entrada de datos para customer completamos el laboratorio de forma satisfactoria pero hubieron dos problemas:
  • Los Código HTML fueron escritos manualmente. En pocas palabras esto fue poco productivo, esto es como escribir codigo HTML usando el notepad.
  • Agregado a esto, mucho del código manual fue también escrito en el controlador para llenar los objetos y enviarlo a la vista.

En este laboratorio veremos como usar clases razor para minimizar el código manual e incrementar la productividad.

Paso 01: Creando la clase Customer
Para crear la clase Customer ir al laboratorio 03.

Paso 02: Creando la entrada de formulario  HTML usando clases Razor
Las clases Razor tienen funciones el cual te permite crear controles HTML con facilidad enviar a la vista y ver el intellisense de las clases Razor.

Usando Razor puedes crear cualquier control HTML como TextBox , Label, ListBox.
En orden para crear una etiqueta forma para HTML necesitamos usar “Html.BeginForm”
El código de arriba genera el siguiente codigo HTML:
El razor HTML “BeginForm” toma tres parámetros nombre de la acción, el nombre del controlador y el método HTTP(GET, POST).

Vamos a crear el formulario de entradas de datos:

Paso 03: Creando una vista Fuertemente tipada
Para crear el formulario con Razor es necesario que la vista se haya creado con la opcion vista fuertemente tipada como se realizo en el laboratorio 03. Pero si no se hizo esto en la parte superio de la vista agregamos lo siguiente y hacer la vista fuertemente tipada.
Con esto ya podemos crear nuestro formulario en la vista FillCustomer.

Paso 04: Creando el controlador
La parte final es el codigo del controlador(Customer), el codigo del controlador ahora es mas simple, el objeto customer va ser autollenado por nuestras clase razor.
y al final ejecutar y mostrará los datos


 

Muy bien, ahora vamos por unas por unas cheliñas para celebrar el cumplimiento de nuestro primer dia con ASP.NET MVC.

¿Y que hay para el segundo Día?
Para el segundo día hablaremos acerca de Routing URL, fácil manera del testeo unitario MVC, atributos del controlador y mucho mas.Los siguientes laboratorio van a ser más avanzados a comparado con el primer dia. asi que realiza todos los laboratorios para que estes listo para el segundo dia.

Suerte.

35 comentarios

Sus aportes y comentarios hacen posible esto...gracias

Reply

Excelente muchas gracias!!!

Reply

Espectacular... muchas gracias.

Reply

Excelente!! Muchas gracias

Reply

:D Me salvaste la vida !! Gracias

Reply

Excelente tutorial, el mas claro que encontre por internet.
Pero mi duda al terminar el dia 1 es..
No genera demasiado codigo y no requiere de mucho mas conocimiento que simplemente escribir un html en notaped? Aun no veo la ventaja de trabajar con .net asp mvc

Saludos!

Reply

Soy novato pero he entendido el tema. Tengo preguntas que solo haré al final del séptimo día. Está muy bien explicado y lo realizaré totalmente. De antemano muchas gracias por su iniciación.

Reply

hola, cuando vas a probar el laboratorio tienes que poner localhost/Customer/fillcustomer siempre?

me refiero que no se ingresa a localhost/Customer/ directamente y te muestra el formulario para q ingreses los datos.

O sea tienes que ponerlo localhost/Customer/fillcustomer.

Reply

Excelente tutorial, me quito muchas dudas del funcionamineto de MVC...

Saludos.

Reply

Disculpa
Podrias poner la parte del codigo faltante del Lab05 (Razor). Falta la siguiente linea: @using (Html.BeginForm("DisplayCustomer", "Customer", FormMethod.Post ...

Reply

Muy buenos tutoriales amigo..Muchas gracias..espero siga publicando mas sobre el tema.

Reply

customer.Code =Request.Form["id"].toString(); no debe convertirse a string porque id de Customer es tipo int,
deberia ser customer.Code = Convert.ToInt32(Request.Form["id"]);

Reply

Amigo, mil gracias!!!! Excelente explicación lo más asombroso del BeginForm es que si tienes un campo en el modelo de tipo INT, este te lo toma el el editor como numero en html5

Mil gracias esperando el día 7 con ansias.

Saludos

Reply

Muy buen tutorial, muy bien explicado y recien puede asimilar muchas dudas con esto

Reply

lo siento soy nuevo en esto, no entiendo el laboratorio 3 paso 3 dice crear un nuevo controlador el de customer, lo hago y al crear la vista no me sale el modelo que previamente cree es decir en clase de modelo no sale customer (myfirsthelloworld.models) ahi estoy perdido

Reply

Estaría genial que citases la fuente de la que has obtenido el artículo entero (está traducido literal de otro sitio...)

Reply

Excelente explicación. Me sirvió todo. Muchísimas gracias!

Reply

Muchas gracias, me ha servido de mucho

Reply

Muchas gracias por tu curso es todo una joyita

Reply

Está muy agradable el curso, se puede entender perfectamente!

Reply

Muchas gracias por el tutorial, muy claro y muy útil.

Reply

Te amo, quiero tener BB´s con vos

Reply

En la clase Customers lo define como string. el tipo de dato queda a tu criterio, puede ser un ID alfanumérico como las patentes de los coches.

Reply

Hola muy bueno el tutorial pero mi pregunta es porq razor tiene código tan complejo de escribir para generar un código tan simple como es el HTML??

Reply

Buen tutorial, pero pareciera que el Laboratorio 5 lo hiciste de rápido...
Saludos

Reply

Muy bien explicado, me ayudo mucho
Saludos

Reply

el último ejercicio está mal

Reply

Excelente post, por favor continua con los demás.

Reply

Muchas gracias, el mejor tutorial para iniciarme en MVC.

Reply

Muchas gracias, saludos!

Reply

Publicar un comentario