Está en la página 1de 22

TUT: Aprender ASP .

NET MVC Paso a


Paso en 7 dias(Dia 1)
IN ¡, ASP.NET MVC - ON 7:28 - 35 COMENTARIOS

Este artículo es parte de Aprender paso a paso ASP.NET MVC en 7 días y puedes revisarlo en los
link siguientes:

 Dia 1: Controladores, vistas fuertemente tipadas y clases helper


 Dia 2: Testeo unitario, ruteo de URL saliente
 Dia 3: Vistas parciales, anotaciones de datos, Razor, Autenticacion y Autorizacion
 Dia 4: JSON, JQuery, administrador de sesiones y controladores asíncronos
 Dia 5: Empaquetamiento, Minificacion , ViewModel , Manejo de excepciones y Areas
 Dias 6: MOdos de Visualización, Proveedor MVC OAuth, Enlace Modelo MVC

Contenido

 ¿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.