ASP .NET MVC 4 Paso A Paso en 6 Días

Aprender ASP .
NET Paso a Paso en 7 das |
TUT: Aprender ASP .NET MVC Paso a

Paso en 7 dias (Dia 1)
Este artculo es parte de Aprender paso a paso ASP.NET MVC en 7 das 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 asncronos
Dia 5: Empaquetamiento, Minificacion , ViewModel , Manejo de excepciones y Areas
Dias 6: MOdos de Visualizacin, Proveedor MVC OAuth, Enlace Modelo MVC
Contenido
Por qu el code-behind en tan bueno en ASP.NET?
Problema nmero 1: Testeo Unitario
Problema nmero 2: La realidad de la separacin del cdigo y la UI
Nuestro Hroe MVC (Modelo, Vista y Controlador)
Pre-Requisitos
Lab 01: Creando una simple Aplicacion ASP.NEt MVC Hola Mundo
Aprender ASP .NET Paso a Paso en 7 das |
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 rpidamente
Como el nombre del artculo dice, aprender MVC, la agenda es simple, vamos a
aprender ASP.NET MVC en 7 das.
La manera como aprendermos MVC en esta serie de artculos es haciendo
laboratorios, mirando los pasos detallados de cmo 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 tecnologas ( 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
aceptacin de algo nuevo como MVC, no es nada fcil 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 distribucin del cdigo, el mayor cdigo el cual tiene la
lgica 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 ms acerca del
diseador de la interfaz de usuario, y la lgica de acceso a datos son ms o menos
componentes estndar como los Enterprise Data Blocks.
Vamos a analizar los problemas.

Problema nmero 1: Testeo Unitario
De los aspectos del testeo unitario podemos excluir la Lgica de data y el UI HTML.
Las clases de lgica 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 t tengas un capa de
acceso a datos personalizado este sera fcil de testearlo como son simples clases
.NET.
No hay ninguna lgica en testear ASPX HTML, como se trata ms de apariencia.
La capa intermedia es nuevamente un simple clases .NET como lgica de data que se
puede fcilmente testear usando VSTS.
Ahora viene el punto ms importante: el The code-behind tiene mucho de accin y
testear esto es una de las cosas ms importantes. la nica manera de invocar estos
cdigos es hacindolo de forma manual, desde una perspectiva de tiempo esto no
sera una gran opcin.
El code-behind de ASP.NET est completamente atado con el objeto HttpContext de
ASP.NET lo cual hace dificultoso el testeo unitario.
Problema nmero 2: La realidad de la separacin del cdigo y la UI
Como dije previamente, los ASPX y los ASPX.cs, no pueden ser desacoplados, lo que
reduce la reutilizacin. Si, Microsoft dijo primero que el code-behind es diferente de la
UI, pero entonces ellos son solo archivos fsicamente separados y no pueden existir
sin uno del otro.
Por ejemplo digamos que el mismo cdigo del botn click cuando se llama va HTTP
POST podra visualizar usando displayinvoice.aspx y cuando llamo va HTTP GEt
podra mostrar en un tree view. En otras palabras deberamos como reusar el codebehind. Justo pienso como puedo hacer esto usando el actual code-behind.
Nuestro Hroe 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 fcilmente. Vamos a ver cmo podemos crear Aplicacin MVC usando la
Plantilla MVC provista por Visual Studio.
Pre-Requisitos
- Visual Studio 2012 (Cualquier versin). Esto incluye ASP.NEt MVC 4
Lab 01: Creando una simple Aplicacin 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 pgina
index.aspx y ver la pgina en un Browser.
Paso 01: Crear el Proyecto

Crear un nuevo proyecto seleccionando Aplicacin Web de ASP.NET MVC 4 y como
nombre del proyecto MyFistHelloWorld, en la siguiente ventana seleccionamos 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 controlador, necesitamos agregar la vista. Hacemos click
derecho en la funcin Index el cual est en el controlador y seleccionamos Add View.
7
En el cuadro de dialogo se indica el nombre de la vista, el cual debe ser el mismo que
en el controlador (Index); desactiva Usar una pgina de diseo o maestra, porque no
queremos que nuestra vista herede de un MasterPage.
Una vez hecho en aceptar, podremos ver una simple pagina ASPX con el siguiente
cdigo HTML.
Paso 04: Ejecutar la Aplicacin

Si haces Ctrl + F5 vers un error. Este error es obvio, porque no invocamos
apropiadamente el controlador/accin.
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 mayora de veces nos gustara
pasar del modelo a la vista para la visualizacin.
Para MVC nos gustara ver el alcance limitado al controlador y la vista, en otras
palabras, nos gustara mantener datos cuando el golpe llega al controlador y alcanza
la vista y despus que el alcance de los datos debe expirar.
10
Ah es donde la nueva tcnica de gestin de sesiones se ha introducido en el marco

de ASP.NET MVC, es decir el ViewData.
10
11
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 cdigo de abajo.
Paso 02: Mostrando el view data en la vista.

Lo siguiente es mostrar data en la vista pero usando el tag porcentaje. Uno de los
puntos ms importantes a notas es que la vista no tiene cod-behind. Para mostrar la
vista necesitamos usar el tag <% en la pgina ASPX.
11
12
Paso 03: Ejecutamos la aplicacin

Presionamos Ctrl+F5 y modificamos la URL en el Browser.
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 est 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.
12
13
Paso 02: Definimos un controlador con accin

el primer paso es crear un controlador y agregar una simple accin 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.
13
14
Necesitamos ahora unir los puntos de MVC, mediante la creacin de vistas. Hace clic
derecho en el mtodo 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 cdigo de la vista (sintaxis Razor) el cual muestra los valores de las
propiedades del cliente. Tambin podemos asignar una condicin IF que muestre los
clientes como un cliente privilegiado si la cantidad est por arriba de 100 y un cliente
normal si est por debajo de 100.
14
15
Paso 04: Ejecuta la aplicacin

Ahora para ejecutar la aplicacin presiona Ctrl+F5.
Lab 04: Creando un simple formulario de entrada de datos MVC

Cada proyecto pequeo o grande necesita un formulario de entrada de datos. En este
laboratorio crearemos una simple entrada de datos para nuestro cliente como se
muestra:
15
16
Tan pronto como el usuario final ingrese los detalles y enve los datos estos sern
direccionados a la siguiente ventana como muestra abajo:
Paso 01: Creando la Pgina 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 cdigo de abajo. Lo ms importante a notar es que la accin
del botn es apuntada al mtodo del controlador llamado DisplayCustomer.
Para ayudarnos usaremos Visual Studio, y como ya sabemos, toda pgina est
relacionada a una accin del controlador en el controlador Customer, vamos a crear el
mtodo FillCustomer.
16
17
Despus, siguiendo los pasos anteriores de cmo crear una vista (Click derecho y Add
View) creamos la vista FillCustomer.
Paso 02: Creando el controlador

Arriba definimos la accin del formulario hacia el controlador a la funcin
DisplayCustomer
Necesitamos obtener los datos de los controles HTML (form), llena el objeto y enviar
el objeto a la vista.
Debajo el cdigo de DisplayCustomer, llena el objeto customer con los datos de la
coleccin Request.Form y enva los objetos a la vista DisplayCustomer.
17
Paso 03: Creando la vista para mostrar el objeto customer

El siguiente paso es crear la vista DisplayCustomer, seleccionado la opcin vista
fuertemente tipada ( realizada en los pasos anteriores).
Paso 04: Finalmente ejecutar el proyecto

Presionando las teclas CTRL + F5 ejecutamos el proyecto.
18
18
19
Y al hacer clic en el botn enviar, muestra la vista DisplayCustomer.
Lab 05: Usando Razor para crear vistas rpidamente

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 Cdigo HTML fueron escritos manualmente. En pocas palabras esto fue
poco productivo, esto es como escribir cdigo HTML usando el notepad.
Agregado a esto, mucho del cdigo manual fue tambin escrito en el

controlador para llenar los objetos y enviarlo a la vista.
En este laboratorio veremos cmo usar clases razor para minimizar el cdigo 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.
19
20
En orden para crear una etiqueta forma para HTML necesitamos usar
Html.BeginForm
El cdigo de arriba genera el siguiente cdigo HTML:
El razor HTML BeginForm toma tres parmetros nombre de la accin, el nombre del
controlador y el mtodo 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
opcin vista fuertemente tipada como se realizo en el laboratorio 03. Pero si no se
hizo esto en la parte superior de la vista agregamos lo siguiente y hacer la vista
fuertemente tipada.
Con esto ya podemos crear nuestro formulario en la vista FillCustomer.
20
21
Paso 04: Creando el controlador

La parte final es el cdigo del controlador (Customer), el cdigo del controlador ahora
es ms simple, el objeto customer va ser auto llenado por nuestras clase razor.
y al final ejecutar y mostrar los datos
21
22

Paso en 7 dias (Dia 2)
Contenido
Cul es la Agenda?
Lab 06: Testeo Unitario en Proyectos MVC
Lab 07: Entendiendo el Ruteo en MVC
Lab 08: Validando y Asignando Valores por defecto a las URLs en MVC
Lab 09: Entendiendo URLs Salientes en MVC
Qu hay para el Tercer Da?
Cul es la Agenda?
Este artculo es la continuacin de Aprender paso a paso en 7 dias y puedes revisarlo en los link
siguientes:
22
Dias 6: Modos de Visualizacin, Proveedor MVC OAuth, Enlace Modelo MVC
23
23
24
En este dia 2 veremos los siguientes cuatro laboratorios:
Escribiendo Testeos Unitarios en Proyectos MVC.
Configurar Rutas en MVC
Validacin de Rutas en MVC
Configurando Rutas de salida en MVC
Lab 06: Testeo Unitario en Proyectos MVC

Cuando empezamos toda la serie MVC (Dia 1) empezamos con dos problemas relacionados al
code-behind.
Cmo podemos hacer testeos unitarios en ASP.NET code behind?
Cmo podemos reusar el code behind de ASP.NET con diferentes interfaces de usuarios?
En esta seccin vamos a concentrarnos en el primer punto, es decir, Testeo Unitario.

Solo
una
rpida
recapitulacin
si
necesitamos
hacer
testeo
unitario
al
siguiente
mtodo btngenerateinvoices_click de Code behind de ASP.NET, tenemos los siguientes

problemas:
Cmo hacemos para crear los objetos sender y eventargs?
El cdigo de abajo se ejecuta bajo el objeto HttpContext, Cmo puedo imitarlo?
Qu pasa con los controles de interfaz de usuario de ASP.NET, Cmo accedo a estos?
Qu pasa con otros objetos de ASP.NET como los objetos sesin y aplicacin, cmo
accedo a estos?
Muchos desarrolladores podran hablar acerca de mock tests, rhino mocks, etc. pero todava esto
es desapercibido y la compilacin aumenta con las variables de sesin, objetos de data view,
controles ASP.NET UI, creando aun ms confusin.
24
25
As que lo que haremos en esta seccin es crear una simple aplicacin MVC y haremos teste
unitario en aplicaciones ASp.NEt usando el testeo unitario de Framework VSTS.
Paso 1: Crear un simple proyecto las mostrar Customer.
El primer paso es crear un simple proyecto MVC. Usaremos el mismo proyecto el cual nosotros
tenemos creado en MVC (Modelo Vista Controlador) del da 1 (MyFirstHelloWorld). En caso no
tengas el proyecto mencionado, por favor crea uno usando el enlace de arriba.
La clase controlador al final del da 1 es una simple clase .NET. Por ejemplo, si miras el cdigo
del proyecto cercanamente, puedes ver fcilmente la clase controlador de Customer con se
muestra a continuacin:
25
26
En simples palabras este es una simple clase .NET podemos fcilmente instanciar la clase y crear
automticamente testeos unitarios para el mismo. Esto es exactamente lo que vamos hacer en
nuestros siguientes pasos:
Paso 2: Agregando un simple proyecto de testeo unitario.

Vamos a usar nuestro testeo unitario del framework de VSTS para testear la clase controlador.
Agrega un nuevo proyecto a su solucin usando la plantilla Proyecto Prueba Unitaria.
26
27
Paso 3: Agregar referencias apropiadas al proyecto

Necesitamos agregar una referencia a la aplicacin MVC en nuestro proyecto de prueba unitaria
(MVCUnitTest), para que podamos controlar la clase Controlador.
Una vez agregado la referencia, deberas ver en la aplicacin MVC e la referencia de proyecto
como se muestra en la siguiente imagen:
Paso 4: Escribir la prueba unitario

Una vez que tengas agregado la referencia, abre la clase de prueba unitaria, es
decir UnitTest1.cs. En esta clase crear un simple mtodo de teste llamado DisplayCustomer el
cual es atribuido por el atributo TestMethod como se muestra en el siguiente cdigo.
Si tu ves el siguiente pedazo de cdigo estamos creando un objeto de la clase controlador,

invocando la accin del controlador, es decir, DisplayCustomer y entonces verificamos si el
nombre de la vista es DisplayCustomer. Si ellos son igual esto significa el paso de la prueba o en
caso contrario esto es fallido.
27
28
28
29
Paso 5: Finalmente ejecutamos la prueba unitaria

Una vez escrito la prueba es tiempo de ejecutar caso de prueba para lo cual vamos hacer click en
el men Prueba->Ventanas-> Explorador de Pruebas.
En el Explorador de pruebas hacer click derecho y seleccionar Ejecutar Pruebas Seleccionadas.
Si las cosas van bien tu deberas ver una indicacin de color verde que indica que la prueba ha
pasado o caso contrario deberas ver un color rojo con el detalle indicando porque la prueba ha
fallado.
29
30
Lab 7: Entendiendo el ruteo MVC

Introduccin
Al final del da, MVC no es nada ms que una direccin de URL asignada a los controladores y los
controladores asignados a acciones.
Por ejemplo cuando un usuario enva un requerimiento de URL como

http://www.maninformatic.com/UbicaProducto del navegador, estas acciones son asignadas con
los controladores de MVC, y los controladores de MVC finalmente invocan esas funciones.
Lo siguiente es una simple tabla el cual muestra cmo todo esto se ve as.
30
31
Aadiendo an ms a la complicacin que podemos tener varias direcciones URL asignadas a un

controlador o se puede tener ms de un controlador asigna a una sola URL. Por ejemplo, puedes
tenerwww.maninformatic.com/contactenos y www.maninformatic.com/conocenos asignada
un solo controlador llamado ConocenosController

.
Sera muy bueno si tenemos algn tipo de mecanismo por el cual podemos configurar estas
asignaciones. Eso es lo que exactamente MVC routing significa. El enrutamiento MVC ayuda a
configurar y asignar la direccin URL con los controladores fcilmente.
Paso 1: Tomar el proyecto MVC creado en el dia 1

Vamos a tomas el mismo proyecto de Customer ( MyFisrtHelloWorld) que hemos desarrollado en la
seccin anterior.
Paso 2: Cambiar Global.asax.cs

Todas las asignaciones de rutas son almacenados en el archivo de cdigo fuente RouteConfig.cs.
As que como primer paso es que tenemos que ir a cambiar este archivo.
31
32
Todas las asignaciones de rutas son almacenadas dentro de la coleccin llamada routes. Esta
coleccin pertenece al namespaces System.Web.Routing. Para agregar una ruta tu necesitas
llamar el mtodo MapRoute y pasar tres parmetros name, url y defaults.
Debajo est una captura de retazo de cdigo de la funcin MapRoute.
Name es el nombre principal por la cual la ruta ser identificada dentro la coleccin.
URL define que tipo de formato de URL queremos conectar con el controlador. En el
pedazo de cdigo siguiente decimos que el formato URL es View/ViewCustomer.
Defaults define la clase controlador y las funciones de accion los cuales sern invocados
cuando la URl es llamada. Por ejemplo, en el cdigo siguiente, decimos que cuando
View/ViewCustomer es llamado, este invocar la clase controlador Customer y la funcin
accin invocada sera DisplayCustomer.
En caso su controlador tome parmetros, puede usar el { (llaves).Por ejemplo en el siguiente

pedazo de cdigo, nosotros hemos usado { para especificar que podemos tener un parmetro id.
Si quieres definir los parmetros como opcionales puedes usar el enum UrlParameter.Optional.
32
33
Lo primero es comentar el cdigo de asignacin predeterminada. Vamos a explicar el cdigo de

asignacin predeterminada ms tarde.
Ingresamos
el
siguiente
cdigo,
el
cual
significa
cuando
llamamos
http:/localhost/view/ViewCustomer esto invocar al controlador Customer y llamara la funcin

DisplayCustomer.
Paso 3: Ejecuta la aplicacin

Si ejecutas la aplicacin deberas ver lo siguiente:
Nota: No muestra ningn nombre, porque esto tiene que ser enviado del formulario, y puedes
probar cambiando el la propiedad action del formulario view/viewCustomer).
33
34
Si recuerdas nosotros comentamos la entrada de ruta por defecto (default), vamos a entender
qu significa exactamente ese cdigo.
{controller}/{action}/{id} define este que la URL ser automticamente llamado con la
convencin Controlador (nombre/funcin) accin (nombre/valor). Si tienes una clase controlador
con Customer y funcin accin como Search entonces la URL ser estructurada automticamente
como htt://www.maninformatic.com/Customer/Search.
Lab 8: Validando y asignando valores por defecto a URLs de MVC

MVC tiene que ver con la accin que se produce a travs de la URL y los datos para esas acciones
tambin es proporcionado por la URL.
Sera bueno si pudiramos validar los datos que se transmiten a travs de estas URL de MVC.
Por ejemplo vamos a considerar la URL MVC http://localhost/Customer/ViewCustomer si quieres

ver el detalle para el cdigo del customer 1001, necesitas ingresar
http://localhost/Customer/ViewCustomer/1001.
El cdigo de Customer es un nmero natural. En otras palabras, cualquier persona que ingrese
una URL MVC como http://localhost/Customer/ViewCustomer/Shiv es invlida. El framework MVC
provee un mecanismo de validacin por el cual podemos comprobar en la propia URL si el dato es
apropiado. En este laboratorio veremos cmo validar datos el cual es ingresado en la URL MVC.
Paso 1: Creando un simple modelo Customer.

En este primer paso vamos a trabajar con nuestra simple clase modelo Customer ya creada en los
pasos anteriores.
34
35
Paso 2: Creando la clase controlador

En el siguiente paso vamos a utilizar la clase controlador Customer ya creada en pasos anteriores
agregando una coleccin de Customers en el constructor.
El controlador tiene una simple funcin DisplayCustomer el cual muestra los clientes usando el
valor ID. Esta funcin toma el valor Id y encuentra en la coleccin customer.
35
36
Si miras en la funcin DisplayCustomer esta toma un valor id el cual es numrico. Deberamos

tomar como una validacin el campo ID el cual indica lo siguiente:
Id debera siempre ser numrico
Este debera ser entre 0 y 99
36
37
Paso 3: Aplicando Validacin usando regex en la ruta MVC

La validacin descrito en el paso 2 puede ser logrado aplicando expresiones regulares en el
mapeo de ruta (MapRoute). Si vamos al archivo RouteConfig.cs y vemos la funcin maproute., la
entrada a esta funcin es el constraint como se muestra es la figura de abajo.
En este orden para acomodar la validacin necesitamos especificar el regex constraint es decir
\d{1,2} en la funcin maproute como se muestra abajo. \d{1,2} en regex significa que la
entrada debera ser numrico y ser un mximo de 1 o 2 es decir entre 0 y 99.
Puedes especificar los valores por defecto diciendo id=0 como se muestra en el cdigo de abajo.
En el caso de que ID no est especificado este tomara el valor 0 por defecto.
37
38
Paso 4: Probando si esto trabaja

Ahora que estamos haciendo la validacin usando la funcin maproute, es tiempo de probar si
esta validacin trabaja. La primera prueba tenemos que especificar 1 y veremos que el
controlador es correcto y la data es mostrada.
Si especificamos un valor mayor a 99, deberamos obtener un error como se muestra abajo. Por
favor note que el error es confuso pero es el efecto de la validacin regex el cual especifica la
funcin maproute.
38
39
El punto ms importante a notar es que esta validacin se ejecuta antes que la solicitud a la
funcin del controlador.
Lab 9: Entendiendo URLs salientes en MVC

Introduccin
Cuando hablamos de aplicaciones web, los usuarios finales estaran como navegando de una
pgina a otra pgina. Como desarrollo simple primeramente estaras pensando en dar justo los
nombres de la aginas como se muestra en la figura de abajo.
Por ejemplo si quieres ir y mostrar de home.aspx a about.aspx dars el enlace al nombre de la

pgina y las cosas deberan ser bien.
Pero haciendo esto estas violando los principios de MVC. Los principios MVC dicen que la llamada
debera primeramente llegar al controlador, pero especificando <a href=home.aspx a> la
primera llamada es a la vista. Este inconveniente es completamente lgica del controlador y tu
arquitectura MVC falla.
39
40
Lo ideal es que las acciones deberan direccionar a las pginas. Los enlaces deberan tener
acciones en la etiqueta anchor (<a>) y no nombres de pginas es decir nombres de vistas.
Paso 1: Creando el controlador para las vistas

Definimos las acciones que invocaran estas vistas. En el siguiente codigo tenemos definido tres
acciones: GotoHome ( esta invoca a la vista Home), AboutUs (Este invoca a la vista
about), y SeeProduct (Este invoca a la vista product).
Paso 2: Creando vistas

Ahora vamos a crear las vistas para los tres mtodos definidos en el controlador Site (About,
Home, Product).
40
41
Ahora vamos a crear una simple navegacin entre estas simples pginas como se muestra abajo.
De la vista Home nosotros estaramos navegando a las vistas About y Product. De las vistas About
y Product estaramos navegando atrasa la vista Home.
Paso 3: proveyendo acciones en los link.

Para invocar las acciones relacionadas a las vistas necesitamos especificar las acciones en la
etiqueta anchor como se muestra en el siguiente cdigo.
41
42
El cdigo de arriba fue para la vista Product, pues hacer lo mismo para las vistas About y Home.
Para la Vista Home:
Para la vista About:
Paso 4: Disfrutando su navegacin

Antes de probar la navegacin, es necesario modificar el mapeo de ruta modificado el los
laboratorios anteriores. Asi vamos al archivo RouteConfig.cs. y lo dejamos con en un inicio:
42
43
Ahora si tienes especificado las acciones dentro el enlace, navegas entre las paginas Home, about
y product.
Mientras navegas puedes ver como el URL son dirigidos a las acciones mas que a los nombres de
las paginas como home.aspx, aboutus.aspx el cual viola completamente los principios MVC.
43
44

Paso en 7 dias(Da 3)
Contenido
Cul es la Agenda?
Lab 10: Vistas Paciales
Lab 11: Validacin usando Anotacin de Data
Lab 12: MVC4: Razor
Lab 13: Seguridad en MVC (Windows Authentication)
Lab 14: Seguridad en MVC (Forms Authentication)
Qu hay para el Cuarto Da?
Cul es la Agenda?
Este artculo es la continuacin de Aprender paso a paso en 7 das y puedes revisarlo en los link
siguientes:
44
45
En este da 3 veremos los siguientes cinco laboratorios:
Vistas paciales
Validacin usando anotaciones de data
Razor (MVC 4)
MVC Windows Authentication
MVC Forms Authentication
Lab 10: Vistas Parciales

Cuando hablamos acerca de aplicaciones web, reusabilidad es la clave. Como desarrolladores
MVC estaramos gustosos para crear vistas reusables. Nosotros gustaramos crear vistas reusables
como Vistas de cabecera y pie de pgina y usarlos dentro de una vista MVC grande.
La vistas reusables podran se logrados creando Vistas Parciales.
45
46
Paso 1: crear una simple vista

Para desarrollar este laboratorio vamos a crear un nuevo proyecto vaco MVC (MvcTercerDia).
El primer paso ser crear una simple vista con un controlador. Puedes ver en la siguiente captura,
Ah hay una simple vista llamada Index.aspx el cual ser invocada via HomeControlles.aspx.
Paso 2: Crear una simple vista parcial

Ahora que hemos creado la vista principal, es tiempo de crear una vista parcial el cual puede ser
consumido desde la vista Index. En orden para crear la vista parcial, click derecho sobre la
46
47
carpeta view y agregar vista, marcar el check box Crear como vista parcial como se muestra en
la siguiente figura.
Paso 3: Llamar a la vista parcial en la principal.

Ingresar algo de texto o lgica en la vista parcial
Paso 4: Llamar a la vista parcial en la principal.

Finalmente llamar la vista parcial en la vista principal usando la funcin Html.RederPartial y
pasar el nombre de la vista en la funcin como se muestra en el siguiente cdigo.
47
48
Tambien asegurarse que la vista parcial este en el mismo folder donde est su vista principal. Es
caso de que no este , entonces necesitaras pasar el path en la funcin RenderPartial. Puedes ver
la siguiente figura se ha movido la vista parcial en el folder Views/Home.
Paso 5: Ejecutar el programa ara ver la accin

Finalmente presionar Ctrl+F5, y veras como se carga la vista parcial.
Lab 11: Validacin usando Anotacin de Data

La validacin de data es una de las principales cosas en cualquier aplicacin web. Como
desarrollador deberas ejecutar la validacin en el cliente (browser) y en el servidor. As que
probablemente le gustara escribir la validacin de una vez y luego esperar el framework de
validacin para generar la lgica de validacin en ambos extremos.
Buenas noticias, esto es posible pero usando anotaciones de data. En MVC validas los valores del
modelo. Cada vez que la data llega desde el modelo tu preguntaras al modelo diciendo, es este la
propiedad proveda?, son los valores dentro del rango?.
48
49
Las Anotaciones de data son metadata el cual puedes aplicar en el modelo en el framework MVC
validara usando la metadata proveda.
En este laboratorio vamos a enfocar la validacin usando anotaciones de datos. Lo primero que
vamos a hacer es, en el mismo proyecto (MVCTercerDia), crear una clase modelo Customer y una
vista fuertemente tipada de entrada de datos llamada Home.cshtml.
Asumiendo que tienes creado el modelo y la vista fuertemente tipada, vamos a empezar a aplicar
Anotaciones de Data.
Paso 1: Decorar el modelo con Anotacin de Data.

Importante importar el espacio de nombres DataAnnotations como se muestra en el cdigo de
abajo.
Vamos a decir que tenemos un modelo Customer y queremos asegurar que el campo cdigo es
obligatorio.
Entonces aplicar el atributo Required como se muestra en el siguiente cdigo. si la validacin

falla y le gustara mostrar un mensaje de error, puedes pasar el ErrorMessage tambin.
Paso 2: Cambiar el codigo Home.cshtml

Ahora hay algunos cambios de cdigo que deberiamos hacer en el cdigo Home.cshtml. Dentro
49
50
del body nos gustara mostrar el mensaje de error si la data no es correcto es es hecho usando el
siguiente cdigo.
Tambin necesitamos codificar nuestro formulario de ingreso de datos. a continuacin se muestra

el fragmento de cdigo para el mismo. Note que la funcion EditorForModel automticamente
generara los controles UI de acuerdo a las propiedades del modelo. Entonces no necesitamos
crear el control de forma individual como se hizo en los laboratorios anteriores.
Paso 3: Ahora en la clase controlador Customer.

Ahora en la clase controlador Customer agregamos la validacin, cuando el formulario llama un
post sobre el controlador, te gustara conocer si el estado del modelo es correcto o no. Esto
puede hacerse verificando con la propiedad ModelState.Isvalid. Si la propiedad es vlida entonce
llama a procedimiento de guardar o muestra la vista PostCustomer (Solo muestra los datos del
formulario), en caso sea falso entonces retorna a la vista original Home, a continuacin se
muestra el cdigo del controlador.
50
51
Paso 4: Probando la Aplicacin.

Finalmente presionar Ctrl +F5, y al enviar el control en blanco mostrar el mensaje de error, pero
esta validacin se realiza en el servidor, porque el controlador es quien valida.
Nota: Note que se ejecut la accin post al mtodo del controlador PostCustomer
Paso 5: Habilitando la validacin en el cliente

En los pasos anteriores las validaciones se realizan en el lado del servidor, esto significa que
al momento de enviar el formulario que contiene errores de validacin, el control pasa al
servidor solo para regresar con mensajes de error. para evitar este ida y vuelta se puede agregar
51
52
capacidades del lado del cliente en la vista Home.cshtml.

La validacin en el cliente se puede realizar con jQuery Unobtrusive Validation, para lo cual hay
que referenciarlo en nuestro proyecto. Ejecutar el siguiente comando en Package Manager
Console (Herramientas/Administrador de paquetes de Biblioteca) : PM> Install-Package
jQuery.Validation.Unobtrusive.
Ahora, ubicar el archivo web.config abrirlo y asegurar que existen las siguientes teclas de la
seccin <appSettings> las claves ClientValidationEnabled y UnobtrusiveJavaScriptEnabled asignar
el valor true:
Utilizar el ayudante Url.Content() para obtener las direcciones URL de los tres archivos de script,
a saber. jquery-1.4.4.js, jquery.validate.js y jquery.validate.unobtrusive.js. Estos archivos son
necesarios para llevar a cabo la validacin del lado del cliente (home.cshtml).
Paso 6: Probando la Aplicacin.

Finalmente presionar Ctrl +F5, entonces la al presionar el botn enviar la validacin lo realizar
en el cliente sin ir al servidor.
52
Otros atributos de anotacin de datos
La prueba resultara:
53
53
54
Lab 12: MVC 4 - Razor

Hasta ahora este artculo ya estuvo usando Razor. Qu es Razor? sola para dar una respuesta
corta. Este es un tipo de vista para MVC. El problema desde el punto de vista Web Form este no
se hizo pensando en MVC, por lo que la sintaxis es un poco pesado.
Paso 1: Practica con sintaxis Razor

Ahora que ya tenemos una idea de lo que es Razor vamos ejecutar algunas sintaxis comunes Razor
y tratar a tener una idea de lo fcil que es Razor comparado con las vistas ASPX.
54
55
Prctica 1: Simple lnea de cdigo

Si quieres mostrar una simple variable puedes hacer algunas cosas como se muestra en el cdigo
de abajo. Todos la sintaxis Razor empieza con @. Si tiene una simple linea de codigo no necesitas
{. Razor se da cuenta de la conclusin lgica.
Si comparas la sintaxis de arriba con una vista ASPX, necesitas tipear el cdigo siguiente. Asi que
No es una sintaxis ms simple, ordenado y ligero?.
Prctica 2: Mltiples lneas de cdigo
Prctica 3: bucle Foreach y condicin If

para bucles y condiciones if llega a ser ms simple como se muestra en el siguiente cdigo:
Prctica 4: No te preocupes por @

Si ests pensando si Razor es confuso con @ de Razor y @ de una direccin email, no te
preocupes, Razor entiende la diferencia. Para instanciar en la siguiente lnea, la primera linea
Razor ejecutar como un cdigo y la segunda linea de codigo lo entiende solo como una direccin
email.
55
56
Prctica 5: Mostrar @
En caso quieras mostrar @ solo tipea esto cada vez como se muestra en el siguiente codigo.
semostrara la siguiente imagen.
Prctica 6: Mostrar HTML con Razor

En caso quieras mostrar HTML en el browser. para instanciar una simple variable llamada como
link el cual tiene cdigo HTML. Estoy mostrando la variable link en el browser.
Si ejecutas el cdigo de arriba, te sorprenderias ver que este no se muestra como HTML, sino
como una simple pantalla como se muestra a continuacin. ahora como se muestra
acontinuacin, Ahora eso no es lo que esperamos. Nos esperbamos una pantalla HTML adecuado.
Esto se hace mediante Razor para evitar ataques XSS (Hablaremos de esto en secciones
posteriores).
Pero no te preocupes, el equipo de Razor se ha hecho cargo de esto. Puedes usar Html.Raw
para mostrar, la misma que se muestra en el siguiente cdigo:
56
57
Lab 13: Seguridad MVC (Windows Authentication).

La seguridad es una de las cosas ms importantes en cualquier aplicacin independientemente,
quien los desarrolla, en cualquier tecnologa, lo mismo puede decirse de MVC.
Antes de empezar este laboratorio una cosa que necesitamos entender es que MVC al final del da
se encuentra en el motor ASP.NET.
Nota: En este artculo no vamos a estar buscando en los fundamentos de la autenticacin de

windows y forms.
Vamos a implementar autenticacin Windows en una aplicacin MVC 4.
Ahora, una manera de implementar autenticacin windows es realizando algunos cambios en

nuestro proyecto.
Paso 1: Habilitar la autenticacin Windows.

El primer paso es habilitar la autenticacin Window. Esto lo realizamos en el archivo de
configuracin Web.config usando la etiqueta authentication y authorization que se muestra a
continuacin:
57
58
Paso 2: Solo algunos defectos.

En la plantilla MVC 4, hay un pequeo defecto. Esto ejecuta la autenticacin Forms por defecto.
Establezca las etiquetas debajo de la etiqueta appsetings para evitar problemas.
Paso 3: Aplicando etiquetas de autorizacin en las acciones del controlador.

una vez que tienes habilitado la autenticacin Windows en el Web.config, usar la etiqueta
[Authorize] y especificar cules usuarios pueden tener accesoa los controladores y sus
acciones.
58
59
Por favor note que el usuario deberia estar presente en su windows Active Directory o su grupo
local (en mi caso uso windows 8 y en el administrador de usuarios y grupos- click derecho en
Equipo-> Administrar), como en mi caso el usuario ronald es mi usuario de grupo local.
Paso 4: Crear Aplicacin en el Servidor IIS 8 ( Internet Information Server)

Tienes que asegurarte que tienes instalado el IIS en su equipo para lo cual lo puede verificar en el
Panel de Control-> Agregar o quitar Programas-> Activar caractersticas de windows.
59
60
Una vez agregado la caracterstica anterior, ahora vamos a crear la aplicacin en el IIS con la
habilitacin de autenticacin Windows solamente.
Cargamos en administrador de IIS y agregamos aplicacin con el nombre MvcTercerDia, creamos
un directorio MVC_WINDOWS en donde se publicaran nuestra aplicacin desde Visual Studio(esto
lo veremos en el siguiente paso) .
60
61
Habilitamos la autenticacin Windows en nuestra aplicacin creada, seleccionando la opcin

Autenticacin.
Paso 5: Publicando nuestra Aplicacin

Una vez que haz creado la aplicacin en IIS, es tiempo de publicar la aplicacin a la carpeta de
aplicacin web. Para lo cual hacemos click derecho sobre el proyecto ( Explorador de proyectos
de Visual Studio) y seleccionamos Publicar.
Le damos la ruta (creada en el paso anterior, cuando creamos la aplicacin en IIS) y le damos en
publicar.
61

Paso 6: Ejecutar el controlador y la accin
Finalmente ejecutar el controlador y la accin (en el navegador digitarlo directamente) y ver
como el cuadro de autenticacin Window para el ingreso del usuario y la contrasea. Esto
validar de acuerdo a la autorizacin que se asign en el controlador Home.
Si las credenciales son ingresados apropiadamente, deberas ser capaz de ver lo siguiente:
62
62
63
Lab 14: Seguridad MVC (Forms Authentication)

En el laboratorio anterior vimos como hacer autenticacin windows. La autenticacin Windows es
ideal para sitios web de intranet. Pero como pronto hablaremos acerca de sitios web para
internet, crear y validar usuarios de windows Active Directory/trabajar con grupos de usuarios no
es una opcin factible. Entonces en este tipo de escenarios Forms authentication es la manera
a seguir.
Paso 1: Definir la pagina Login y su controlador.

La primera cosa que necesitamos es definir el controlador el cual invocar la vista login.
as tengo creado una simple accin index el cual invoca una vista llamado Login. Esta vista Login
tomar entradas como username y password.
Paso 2: Creando la vista Login.
El siguiente paso es crear el formulario Login el cual tomar el username y password. Para crear
el formulario y he usado la vista razor y las clases HTML helper En caso tu eres nuevo en clases
HTML helper por favor revisar el Lab 12.
Este formulario HTML hace un post a la accin Login del controlador Home y es usa el
mtodo Post. As cuando los usuarios presionan el boton enviar, este lanzara la accin index.
63
64
Paso 3: Validar las credenciales.

En la accin Index la primera cosa que necesitamos hacer es verificar si el usuario es correcto o
no. Por ahora tenemos en cdigo el usuario y contrasea. Esto puede siempre ser reemplazado
por consultas del servidor SQL o otra fuente.
Una vez que hemos verificado las credenciales el siguiente paso es usar la famosa clase
FormsAuthentication y asignar la cookie diciendo que el usuario en correcto.
De modo que en la siguiente solicitud cuando el usuario llegue no tendr que ser validado una y
otra vez. Despues de que la cookie se establece es redireccionado a la vista About o de lo
contrario te quedes en la vista Login.
Paso 4: Atributo Authorize

Tambin necesitamos usar el atributo [Authorize] dentro los controladores, los cuales queremos
restringir para los usuarios no autorizados.
Por ejemplo se puede ver el siguiente cdigo para la accin Index del controlador Home que
esta decorada con el atributo Authorize.
64
65
Si cualquier usuario no autorizado, accede directamente a cualquiera de estos controladores ellos

sern enviados a la vista Login es decir detrs del Index.
Paso 5: Cambiar el archivo web.config

Finalmente necesitamos hacer cambio en el famoso archivo web.config es decir habilitar la
seguridad Forms. la parte mas importante en el cdigo de abajo es la propiedad LoginUrl.
Paso 6: Vemos la accin en Autenticacin Forms.

Si ahora llamas a index este directamente se muestra la vista Login, este test prueba que la
autenticacin Forms esta trabajando.
65
66

Paso en 7 dias (Da 4)
Contenido
Cul es la Agenda?
Lab 15: JSON, MVC y JQuery
Lab 16: Gestin de Sesiones en MVC (ViewData, ViewBag, TempData y Variables Sesin)
Lab 17: Controles Asncronos
Que hay para el quinto da?
Cul es la Agenda?
Este artculo es la continuacin de Aprender paso a paso en 7 das y puedes revisarlo en los link
siguientes:
66
67
67
68
Lab 15: JSON, MVC y JQuery

En caso seas nuevo en JSON por favor lee esto antes empezar con este laboratorio, Acerca de
JSON.
En este laboratorio vamos a exponer un simple objeto Customer de MVC en formato JSON y
consumimos el mismo usando Jquery.
Para este laboratorio por favor asegurarse que el proyecto el nombre del proyecto se
MvcCuartoDia y crearse use la plantilla de proyecto bsico esto es necesario para incluir las
libreras Jquery en el proyecto MVC.
Paso 1: Crear un simple modelo Customer

El primer paso es crear una simple clase modelo Customer en el proyecto.
68
69
Paso 2: Exponer el objeto Customer como JSON

Ahora agregamos un controlador Customer, para exponer el objeto customer en formato JSON
necesitamos usar JsonResult como se muestra en el siguiente cdigo.
Por favor, ejecute el controlador con la accin JSON anterior para comprobar que el resultado
JSON se muestra correctamente. Si estas usando Chrome el resultado se muestra en el navegador,
si este es Internet Explorer este descargara un archivo.
Paso 3: Consumiendo el controlador JSON en Jquery

En caso seas nuevo en Jquery, por favor leer esto Que es Jquery?
El siguiente paso es consumir los datos JSON usando una vista MVC. Asi que adelante Aadimos
una vista con el nombre AprenderJquery.cshtml
Lo primero es agregar la referencia a la libreria Jquery en la parte superior de la pagina. en caso
69
70
no encuentras jquery en el proyecto esto significa que no has creado el proyecto usando la
plantilla basica o sino puedes instalarlo de forma manual usando la Consola de Administracion de
paquetes de Visual Studio, esto lo explico al detalle en el artculo cargar vistas parciales en
ASP.NET MVC usando Jquery Ajax o tambien usando CDN como lo explico es este tips de CDN.
Usando sintaxis html
Usando sintaxis razor
Puedes entonces hacer una llamada al controlador que esta exponiendo en formato JSON usando
el mtodo getJson como se muestra ms abajo. Este toma tres parmetros:
El primer parmetro en getJson es el URL MVC JSON con el formato de estructura

controller/action.
El segundo parmetro es la data a ser pasada. Por ahora esto es nulo como estamos ms
interesados en obtener datos JSON en lugar de publicar los datos.
El ultimo parametro es el mtodo de devolucin de llamada Display el cual ser invocado cada
vez que obtengamos datos JSON del controlador. La funcin Display tambin est disponible en
el siguiente cdigo. Estoy asignando una alerta con la propiedad name. puedes ver como
solamente tipeo data.CustomerCode, no convierto los datos JSON estos son automticamente
convertidos a objetos javascript.
70
71
El cdigo completo en la vista MVC lo mostramos abajo. Se creado un simple botn HTML y dentro
el evento click en donde se est llamando al mtodo javascript getJson el mismo que hace una
llamada al controlador JSON y muestra la data JSON en una alerta javascript.
La vista anterior es invocado usando el mtodo MostrarJson del controlador Customer creado
anteriormente.
71
72
Paso 4: Ejecutar la aplicacin y ver el dato

Despus de haber hecho todos los pasos es hora de ejecutar el proyecto (Ctrl+F5) y digitar en la
url http://localhost:50360/Customer/mostrarJson para ver la belleza JSON en ejecucin.
Lab 16: Gestin de Sesion en MVC (ViewData, ViewBag, TempData y variables sesin)
La meta principal en MVC es crear aplicaciones web y aplicaciones web usando el protocolo HTTP.
Cuando envas una solicitud a la aplicacin MVC se atiende la solicitud y se olvida de la solicitud.
La prxima vez que el mismo usuario enva la solicitud MVC lo trata como una completa nueva
solicitud.
Ahora piensa en la siguiente situacin:
El usuario final enva la solicitud al sitio MVC
MVC enva una pagina de logueo
El usuario ingresa detalles adecuados y enva los datos a la aplicacin MVC.
MVC valida el usuario y enviar la pgina inicial del sitio. La aplicacin MVC ahora se olvida
todo lo relacionado con el usuario ya que es aptrida.
El usuario hace clic en uno de los link de la pgina inicial. Esto es enviado a la aplicacin
MVC y porque la aplicacin MVC se ha olvidados de todo lo relacionado con el usuario, le
72
73
enva una pgina de inicio de sesin para la autenticacin de nuevo el usuario se sentir
extrao..
Este resumen necesitamos tener algunos tipos de mecanismos el cual nos ayudara a recordar
estados entre la solicitud y la respuesta de MVC.
Hay 3 maneras de mantener estados en MVC y estas maneras puede ser usado dependiendo de
que capa a qu capa se navegas.
Temp Data: Ayuda a mantener los datos sobre las redirecciones para una nica solicitud y
respuesta. Ahora la redireccin puede ser de controlador a controlador o de controlador a vista.
View Data: Ayuda a mantener datos cuando se mueve de controlador a la vista.

View Bag: Este es un contenedor dinmico alrededor de vista de datos. Cuando usamos el tipo
viewbag la conversin no es requerido. Utiliza una clave dinmica interna.
73
74
Variables sesin: Usando variables sesin podemos mantener datos hasta cerrar el navegador.
Demostraremos los fundamentos anteriores con una demostracin.
Paso 1: Crear dos controladores Default1 y Default2.

Agregar dos controladores Default1 y Default2.
Paso 2: Establecer Sesion, tempdata, viewdata y viewbag

En el controlador Default1 dentro del mtodo Index asignamos valores a sesin, tempdata,
viewdata y viewbag como se muestra en el siguiente cdigo. Una vez que hemos asignado los
valores hacemos una redireccin a la accin AlgunaOtraAccion el cual pertenece al controlador
Default2.
74
75
Paso 3: Leer valores sesin, tempdata, viewdata y viewbag

En el controlador Default2 capturamos para leer valores asignados en el controlador
Default1. Una vez que los valores son ledos invocamos a la vista llamada VistaDatos.
Por favor note que se esta asignando ViewData y ViewBag antes de redireccionar a la vista.
La vista VistaDatos solo muestra los datos presentados en TempData, Viewdata, ViewBag
y Session.
75
76
Vamo a habilitar un punto de depuracin en las acciones de ambos controladores y vamos a ir al

controlador Defualt1 y a su mtodo Index http://localhost:50360/default1/index . En esta accin
las sesin, tempdata, viewdata y viewbag son cargadas. Debajo podemos ver como se muestran
los datos.
Ahora de aqu vamos a redireccionar al controlador Default2 accin AlgunaOtraAccion.

En el controlador podemos ver que obtenemos las variables TempData y Session pero no
ViewData y ViewBag (Ver str3 y str4 con asignados null). En otras palabras ViewData y
76
77
ViewBag no hacen persistencia de datos en redireccin mientras TempData y Session si lo

hacen.
Cuando la vista se invoca podemos ver todos los datos. En otras palabras los datos ViewData y
ViewBag persistieron del controlador a la vista. Y tambin los datos TempData y Session
persistieron.
77
78
Ahora cuando la vista vista invocada he agregado un HiperlInk Hazme Click el cual invoca a la
accin Index del controlador Default1. Esto es para simular una nueva solicitud.
Cuando se hace click en el hipenvinculo. Todas las otras variables se apagan, solo la variable
Session persiste.Lo podemos ver en la figura siguiente. Esto significa que las variables Session
pueden persistir entre solicitudes.
Debajo est una tabla resumen que muestra los diferentes mecanismo de persistencia.
78
79
Lab 17: Controler Asncronos

Las aplicaciones MVC al final del da son aplicaciones web los cuales son hospedados dentro de
IIS. Ahora cuando cualquier solicitud llega al controlador MVC este genera un hilo del hilo pool y
sirve a esta peticin. En otras palabras el servidor Web IIS mantiene un grupo de hilos en lugar de
crear hilos a partir de cero una y otra vez para obtener beneficios de rendimientos.
Vamos asumir que un servidor web ha creado un pool de hilos de tamao 2. Ahora esto es solo una
suposicin porque un pool de tamao 2 es muy hipottico. Pero para hacer cosas simples
consideramos que los pool de hilos son de tamao 2.
Vamos a decir primero que la solicitud llega al sitio, IIS tira un objeto de pool de hilo ya realizado
y empieza a servir la peticin. Mientras tanto vamo a decir llega la segunda solicitud en lo que de
nuevo el IIS se tira un hilo del pool de hilo y empieza a servir la segunda peticin.
Ahora lo divertido empieza cuando llega la tercera solicitud. El servidor IIS no tiene ms objetos
de hilos en el pool como ya ya han sido servidos a request1 y request2. Asi que el servidor
solo mueve la tercera solicitud a un modo de espera o el servidor puede enviar un mensaje 503
ocupado para el cliente.
79
80
Esta situacin es denominado como Thread Starvation. Las situacin Thread Starvation se
pueden superar al hacer la solicitud Asincrona. As que la peticin llega e inmediatamente la
solicitud se procesa de manera Asincrona y soltando el hilo que sirva la solicitud
inmediatamente.
As que para evitar esto podemos lograr lo mismo, haciendo nuestros controladores Asincronos.
Ahora vamos a entender paso a paso como implementar controladores asncronos en MVC.
Paso 1: Heredar de la clase AsyncController

Considerando la siguiente clase controlador HeavyController el cual tiene una accin
AlgunMetodoHeavy y esta accin espera 20 segundos. As que vamos a entender cmo podemos
hacer este simple controlador Asynch.
As que el primer paso es heredar de la clase AsyncController.
Paso 2: Marcar mtodos con el anexo Async

El siguiente paso es aadir la palabra Async despus de los mtodos. Asi como podemos observar
AlgunMetodoHeavy ha sido cambiado a AlgunMetodoHeavyAsync.
La lgica de cdigo de Heavy es decir Thread.Sleep() is movido a un metodo diferente y este
mtodo es invocado usando la tarea de la librera paralela de AlgunMetodoHeavyAsync.
Cada vez que una Task o un Thread es iniciado nosotros incrementamos el contador de
OutstandingOperations pero usando AsyncManager y cada vez que una tarea multi-threaded es
completada decrementamos el contador.
80
81
Paso 3: Crear el mtodo completado

Ahora una vez todas las tareas multi-threaded completadas y el OutstandingOperations esta cero
necesitamos retornar la vista. Asi para el mismo necesitamos crear un metodo ActionResult con la
palabra Completed anexada. Este mtodo se llama cuando todas OutstandinOperations son cero.
Paso 4: Asegurarse de crear la vista AlgunMetodoHeavy.cshtml

Tambin asegurarse de agregar la vista AlgunMetodoHeavy con el siguiente texto dentro.
81
Paso 5: Ejecutar y disfrutar

Ahora digitar en el navegador http://localhost:50360/heavy/AlgunMetodoHeavy y ver la
salida.
82
82
83

Paso en 7 das (Da 5)
Que hicimos en los ltimos 4 das?

Este artculo es la continuacin de Aprender paso a paso ASP.NET MVC en 7 das y puedes revisarlo
en los link siguientes:
Cual es la agenda
En el dia 5, veremos la manera de empaquetar y minificar para maximizar el
rendimiento de las aplicaciones MVC. Tambin veremos el concepto y ventajas del
modelo de vista que no es sino un puente entre el modelo y la vista.
Lab 18: Empaquetamiento y Minificacin en MVC
Lab 19: Modelo vista en MVC
Lab 20: Manejo de Excepciones
83
Lab 21: rea MVC
Que hay para el sexto da?
84
84
85
Lab 18: Empaquetado y Minificacin en MVC

Ambos conceptos empaquetado y minificacin ayudan a incrementar el rendimiento
Entendiendo el Empaquetado
Siempre los proyectos Web necesitan archivos CSS y JavaScript. Normalmente se
realiza una peticin al servidor por cada archivo CSS y JavaScript, y si se tienen
varios de estos archivos hace que la carga de las pginas sean lentas. Empaquetarlos
nos ayuda a combinar mltiples archivos JavaScript y CSS en un solo objeto en
tiempo de ejecucin, combinando as mltiples solicitudes en una sola solicitud que a
su vez ayuda a mejorar el rendimiento.
Por ejemplo considere la solicitud de una pgina en la siguiente imagen. Las
solicitudes son capturados usando la Herramienta de desarrollo de Chrome. Esta
pgina consume 2 archivos Javascript1.js y Javascript2.js. Cuando esta pgina es
solicitada esta hace tres peticiones al servidor.
Primera para la pgina Index
Segunda solicitud para el archivo JavaScript Javascript1.js
Tercera solicitud para el archivo JavaScript Javascript2.js
Ahora si piensas un poco en el escenario de arriba puede llegar a ser peor si

tenemos muchos archivos javascript (especialmente archivos JQuery) resultado
mltiples solicitudes que reduciran el rendimiento.
Si somos capaces de combinar de alguna manera todos los archivos JS en un solo
paquete y se soliciten como una nica unidad, esto se traducira en un mayor
rendimiento (ver la siguiente imagen que tiene una sola peticin).
85
86
Entendiendo la Minificacin
La minificacin reduce el tamao de los archivos script y CSS, eliminando espacios en
blanco, comentarios, etc. Para el ejemplo de abajo tenemos un simple cdigo
javascript con comentarios.
Despus de aplicar la minificacin los codigo javascript se veran como en la imagen

de abajo. puedes ver como son eliminado los espacios en blanco y comentarios para
minimizar el tamao del archivo e incrementar el rendimiento debido a que el tamao
del archivo ha sido reducido y comprimido.
Vamos a demostrar un simple ejemplo de empaquetado y minificacin con MVC paso

a paso.
Paso 1: Crear un proyecto con la plantilla en blanco
Para entender el empaquetado y minificacin, vamos a seguir adelante y crearemos
un proyecto MVC en blanco. En este vamos a agregar una carpeta Script y dentro
de este, vamos a agregar dos archivos javascript como se muestra en la siguiente
figura.
86
El siguiente cdigo es para el archivo JavaScript1.js
El siguiente cdigo es para el archivo JavaScript2.js
Paso 2: Crear un controlador que llame a una vista

Ahora vamos a seguir y crear a un controlador el cual llame a una vista llamada
MiVista es cual consume ambos archivos javascript.
87
87
Agregamos la vista MiVista y consumimos los archivos javascript.
88
88
89
Paso 3: Ejecutar y ver como se hacen multiples llamadas

Ahora ejecutamos la aplicacin MVC en Google Chrome, Presione la combinacin de
teclas Ctrl+Shift+I para ver la siguiente salida. Puedes observar que hay tres
solicitudes.
Paso 4: Referenciando a System.Web.Optimization

El empaquetado y minificacin es hecho por el namespace
System.Web.Optimization. Ahora este DLL no es parte del framework .NET o
ASP.NET. Necesitamos usar NUGET para descargar esta DLL. Vamos a NUGET y
buscar ASPNET.Web.Optimization.
NUGET es una herramienta cliente, que se agrega al Visual Studio y nos permite
administrar y consumir paquetes. La galera de NUGET es un repositorio central
usado por todos los autores de paquetes.
89
90
Paso 4: El archivo de configuracin de paquete

Ahora este paso depende de que tipo de plantilla MVC hemos seleccionado a la hora
de crear nuestro proyecto. Si hubiramos seleccionado la plantilla Basic entonces el
archivo BundleConfig ya se crearia y como nosotros hemos seleccionado la plantilla
Blanco entonces tenemos mucho trabajo que realizar.
Entonces sigamos y agreguemos la clase BundleConfig y creemos un mtodo

RegisterBundles como se muestra en el siguiente cdigo.En el cdigo de abajo
bundles.add dice que agregue todos los archivos javascript que estn dentro de la
carpeta Scripts a un paquete llamado Bundles.
Nota importante: No olvidar importar el namespaces System.Web.Optimization o de
lo contrario se genera un error.
90
91
Paso 6:Llamar el archivo de configuracion del empaquetado desde el archivo

global.asax.cs
En este paso no es necesario si se ha creado el proyecto utilizando la plantilla MVC
Bsico. Pero como nosotros hemos creado el proyecto utilizando la plantilla MVC
Blanco, entonces tenemos que abrir el archivo global.asax.cs y en el inicio de la
aplicacin llamar el mtodo RegisterBudles como se muestra en el siguiente cdigo.
Paso 7: Enlazar el empaquetado en la vista

Una vez que el empaquetado es hecho necesitamos eliminar el tag script y llamar la
dll Optimization para enlazar el empaquetado.
Debajo esta el codigo en la cual empaquetaremos ambos archivo javascript en un

nico objeto, evitando as llamada de solicitud mltiple por cada archivo javascript. En
el empaquetado completo se agrega la vista MVC.
91
92
Paso 8: Mirar el empaquetado y minificacin en tiempo real.

Para mostrar el empaquetado y minificacin en tiempo real. Ejecutamos nuestro
proyecto en Google Chrome y presiona la combinacin de teclas CTRL+SHIFT+I
(Herramienta del Desarrollador) y puedes ver la magia ah en donde se muestra una
sola llamada para ambos archivos javascript.
I hacemos click en la pestaa Preview podemos ver que ambos archivos JavaScript
han sido unificados. si la minificacion tambin se ha realizado Recordemos nuestro
archivo java script original.
Como puedes ver en la salida de abajo, los comentarios han sido eliminado, los
espacios en blanco son removidos y el tamao del archivo se reduce y es ms
eficiente.
92
93
93
94
Lab 19: Modelo Vista MVC

Teora
Una vista modelo es una simple clase que representa datos a ser mostrados en la
vista.
por ejemplo abajo esta un simple objeto CustomerModel con propiedades
CustomerName y Amount.
Pero cuando el modelo de objeto Customer es mostrado en la vista MVC este

muestra algo como se puede observar en la siguiente figura. Este tiene
CustomerName, Amount y un campo plus Customer Buyin Level.
Customer Buying Level (Nivel de compra de clientes) es un indicador de color el
mismo que indica que tan agresivo es la compra de los clientes.
El color de Customer buying Level depende del valor de la propiedad Amount. Si
la cantidad es mayor que 2000 entonces el color es rojo, si la cantidad es mayor que
1500 entonces el color es anaranjado y el caso contrario es color es amarillo.
En otras palabras Customer Buying Level es una propiedad extra el cual es
calculado en base de la la cantidad (cantidad).
Por lo que la clase viewmodel Customer tiene tres propiedades
El textbox TxtCustomerName toma datos de la propiedad CustomerName
El textbox TxtAmount toma datos de la propiedad Amount del modelo como

este es
CustomerBuyingLevelColor muestra el valor del color dependiendo del valor

Amount.
94
95
Que tipo de lgica contendr la clase view model?

La clase view model puede tener los siguientes tipos de lgica:
Lgica de transformacin de color: Por ejemplo tu tienes una propiedad

Grado en el modelo y te gustaria mostrar en la UI el color rojo para el nivel de
grado alto, color amarillo para el nivel de grado bajo y verde para el grado OK.
Lgica de transformacin de formato de datos: Si tu modelo tiene una

propiedad Estado con el valor Casado y Soltero. En la UI te gustaria
mostrarle como un checkbox el cual es marcado si casado y desmarcado si
es soltero.
Lgica de agregacin: Tienes dos clase modelo diferentes Cliente y

Direccion y tienes una vista el cual muestra ambos datos Cliente y
Direccin en una sola vez.
Estructura Downsinzing: Tienes un modelo Cliente con propiedades

NombreCliente y CodigoCliente y quieres mostrar solo NombreCliente.
puedes crear un modelo contenedor alrededor y exponer las propiedades
necesarias.
Vamos hacer un pequeo laboratorio para entender el concepto modelo de vista MVC
usando la siguiente muestra el cual hemos discutido previamente.
Usare el enfoque de arriba hacia abajo para crear la pantalla de arriba:
Paso 1: Crear el modelo Customer
Paso 2: Crear el ViewModel
Paso 3: Consumir la ViewModel en la vista.
95
96
Paso 1: Creando el modelo Customer

Asi vamos a seguir adelante y crear un modelo Customer, en nuestro proyecto
MVCQuintoDia, con las propiedades de abajo.
Paso 2: Creando la vista modelo

Lo siguiente es crear una clase ViewModel el cual contendr al modelo Customer y
agregara propiedades de UI. Asi que vamos a crear una carpeta ViewModels y en
esta agregar una clase CustomerViewModel.
Abajo va el codigo para la clase CustomerViewModel. Ahora algunos puntos

importantes acerca de la clase view model:
96
97
Puedes ver en la clase de abajo como la clase CustomerviewModel contiene

la clase CustomerModel.
Tambin un punto iimportante que hemos de crear propiedades el cual va con

la convencin de nombres de UI (txtName, txtAmount,
lblCustomerLevelColor,etc).
Ahora para lo mas importante mirar el codigo para a propiedad

CustomerlevelColor, este muestra el color dependiendo de la cantidad
(Amount) de ventas del cliente (Customer). Una ViewModel existe para este
tipo de cdigo puente, el cual conecta el modelo y la vista.
Paso 3: Consumiendo el ViewModel en la vista

El siguiente paso es crear un controlador, el mismo que pasa algunos datos como se
muestra en el siguiente cdigo.
97
98
El siguiente paso es crear vista fuertemente tipada, donde podamos consumir la clase
ViewModel. En caso no estes enterado de vistas fuertemente tipadas en MVC por
favor revisar Aprender ASP.NET MVC Dia 1, Laboratorio 04.
98
99
Como puedes ver la vista no esta decorada o se puede decir enlazada con la clase
modelo. Lo ms importante es mirar que la vista est limpia. Esto no tiene cdigo para
la toma de decisiones para la codificacin de colores. Estos cdigo se han incluido
dentro de la clase ViewModel. Esto hace que View Model sea un componente esencial
de MVC.
Paso 4: Probando la Aplicacin

Una vez terminado es momento de probar la aplicacin para lo que presionamos
Ctrl+F5.
99
100
ViewModel sera Composicin o Herencia

Muchos arquitectos cometen errores creando una clase ViewModel como herencia. Si
tu ves arriba la clase ViewModel es creado por composicin y no por herencia.
Porque composicin tiene ms sentido? si visualizas nosotros nunca decimos esta
pantalla es hijo de los objetos de negocio, eso sera una declaracin extraa.
Nosotros decimos esa pantalla usa esos modelos. Asi que es muy claro que sea una
relacin usando y no una relacin es un (padres e hijos).
Algunos escenarios donde la herencia fallara:
Cuando tu no quieres algunas propiedades del modelo en tu vista.
Cuando tu tienes una vista el cual usa mltiples modelos.
As que no sean atrados por la idea de la creacin de un ViewModel mediante

herencia de un modelo que puede terminar en un problema Liskov.
Esto se parece a un pato, patito como un pato, pero no es un pato. Parece que un
modelo tiene propiedades como un modelo, pero no es exactamente un modelo.
100
101
Imagen de http://tomdalling.com
Ventajas de ViewModel
Reusabilidad. Ahora que el cdigo ha sido objeto de una clase. Se puede crear el
objeto de esta clase en cualquier otra tecnologa (WPF, Windows, etc) facilmente.
Testeo: No necesitamos testear manualmente para probar la apariencia de la UI.
Porque nuestro cdigo de UI ha sido movido a la librera de clase, podemos crear un
objeto de esta clase y realizar testeo unitario. Debajo un simple cdigo de testeo
unitario, el cual demuestra el testeo unitario de la apariencia de UI y la lgica. Puedes
ver como las pruebas de color es realizado automticamente en lugar de algunos
testeos manuales.
Lab 20: Manejo de Excepciones

Introduccion
101
102
Cuando se trata de manejo de excepciones, el bloque try...catch es la opcin favorita

de los desarrolladores .NET. Por ejemplo en el siguiente cdigo hemos envuelto el
cdigo dentro de try..catch y si hay excepciones invocamos a una vista Error en el
bloque catch.
El gran problema con el cdigo de arriba es la reusabilidad del manejo del cdigo
excepciones. MVC proporciona a reutilizar el cdigo de manejo de excepciones en
tres niveles:
A travs de acciones dentro del mismo controlador: Puedes usar el evento

OnException donde escribes la lgica el mismo que puede ser reutilizado a travs
de Acciones dentro del mismo controlador.
A travs de cualquier controlador: En MVC podemos usar FilterConfig para crear
un atributo el cual ser aplicado a cualquier controlador y cualquier accion.
A nivel de proyecto: manejando UsingApplication_Error en Global.asax. As que
cuando la excepcin se genera desde cualquier parte del proyecto MVC, este ser
ruteado a un manejador de error central.
102
103
Vamos paso a paso a demostrar las 3 maneras de arriba del manejo de errores en
MVC.
Paso 1: Agregar un controlador y la accin que lanza el error
As que lo primero es agregar un simple controlador y la accin que lance algunos
tipos de excepciones. En el siguiente cdigo puedes ver que hemos agregado un
controlador TesteandoControlador con una accin TestearMetodo, donde hemos
lanzado una excepcin de divisin por cero.
Por lo que si ejecutar la accin anterior terminar con un error como se muestra en la
siguiente figura.
Paso 2: Crear una vista Error
103
104
Ahora una vez que el error es capturado por cualquiera de los tres mtodos descritos
anteriormente nos gustara lanzar una pgina de error para mostrar el propsito. Por
lo que vamos a crear una simple vista por nombre Error como se muestra en la
siguiente imagen.
Ahora que tenemos una error y tambin una vista Error es tiempo de hacer la
demostracin usando las tres maneras. Por lo que primero vamos a empezar con
OnException es decir cdigo reutilizable en acciones pero dentro del mismo
controlador.
104
105
Paso 3: Reutilizar a travs de acciones dentro del mismo controlador

(OnException)
Para implementar la excepcin vamos al controlador TesteandoController y
sobreescribimos el mtodo OnException como se muestra en el siguiente cdigo.
Este mtodo se ejecuta cuando ocurre cualquier error en cualquier accin del
controlador TesteandoController.
La nombre de vista es decir Error es asignado a la propiedad result del objeto
FilterContext como se muestra en el siguiente cdigo.
Ahora si ejecutas la aplicacin (CTRL+F5), llamando a TestearMetodo del

controlador TesteandoController, se ver la vista Error como la siguiente imagen
(Ojo en entorno de desarrollo se lanzar el error en Visual Studio, pero en entorno de
ejecucin se lanzar la vista Error, pasar por alto en Visual Studio para ver el error).
El mtodo OnException ayuda a proporcionar manejador de excepciones para un

controlador especfico pero que si queremos reutilizar la lgica de excepcin a
cualquier otro controlador y cualquier accin esto no se podra. Es donde tenemos
que utilizar FilterConfig una manera en la cual hablaremos en el siguiente paso.
105
106
Paso 4: Reutilizar a cualquier accin y cualquier controlador(FilterConfig)

Dentro de Web.Config simplemente habilitamos CustomErrors como sigue.
Dentro de la carpeta App_Start abrimos FilterConfig.cs y nos aseguramos que

HandleErrorAttribute es agregado a GlobalFilterCollection.
HandleErrorAttribute en el nivel global confirma que la excepciones lanzadas por

cada accin en todos los controladores sern manejados.
En el archivo Global.asax dentro de Application_Start el mtodo RegisterGlobalFilters
es invocado.
106
107
Esto hace que todas las excepciones lanzadas por cualquier mtodo dentro de todos
los controladores retornen la vista Error presente dentro la carpeta Shared.
Manejo de error a nivel de controlador, en donde todos los errores presentes en las
acciones del controlador TesteandoController sern administrados.
Para hacer que nuestra vista Error una vista fuertemente tipada del Modelo
System.Web.Mvc.HandleErrorInfo y entonces usar la palabra clave @Model para
acceder a sus miembros. Uno de sus miembros es el objeto Exception.
107
108
El resultado sera el detalle de la vista Error.
Paso 5: Manejo de error a travs de proyecto (Application_Error).

Para administrar errores a travs de proyecto MVC, podemos usar numerar a el
evento Application_Error dentro del archivo Global.asax y escribir la lgica de
manejo de error dentro el mismo.
Application_Error es un evento a nivel de aplicacin, podemos definir dentro del
archivo Global.asax. El mismo ser ejecutado cada vez que hay una excepcin no
controlada en la aplicacin.
Si este es el punto, Porque no usar Application_Error siempre?
Aqui estan la ventajas de HandleError sobre Application_Error:
Con HandleErrorAttribute obtenemos ms control sobre el manejo de

excepciones. HandleError nos permite administrar errores diferentes para
diferentes controladores y acciones facilmente donde en Application_Error
para obtener esta caracterstica se toma la ayuda del bucle interruptor.
Una vez que este en Application_Error estas fuera de MVC y perders

ControllerContext y entonces no puedes hacer cosas fcilmente posibles con
HandleError.
Lab 21: rea MVC

Que es un rea y porque rea?
En ASP.NET MVC tenemos un concepto de areas el cual nosotros podemos partir
nuestro sistema en modulos y organizar nuestro proyecto de una mejor manera.
Asumo que tenemos un sistema el cual consiste de dos mdulos Customer y Order
Processing. Normalmente cuando creamos un proyecto ASP.NEt MVC nuestra
estructura consite de 3 carpetas (Controller, Model y Views). Entonces la estructura
108
109
sera como esto.
Como puedes ver no esta organizado. Cuando se trata de administrar cdigo ser
muy difcil.
La imagen presenta una estructura de proyecto con e mdulos. Imagina una situacin
donde tengamos cientos de mdulos en nuestro sistema.
Ejemplo de reas en el mundo real
Los paises estan divididos por estados para que el desarrollo y la administracin sea
fcil.
109
110
Justo como el mundo real usaremos el concepto de area en ASP.NET MVC para
dividir nuestro sistema en modulos. Un rea representa un modulo pero significa
agrupacin lgica de controladores, modelos y vistas.
Como Usar reas?
Paso 1: Agregar reas usando una Plantilla MVC
Para agregar rea hacer click derecho en el proyecto y seleccionar Add>>rea como
se muestra en la imagen siguiente:
Paso 2: Comience ubicando archivos pertinentes a reas pertinentes.

Ubicar todos los archivos relacionado a reas respectivas como se muestra en la
siguiente figura. Dentro de la figura de abajo se puede ver que hemos creado dos
reas Customer y Order, Y cada uno de estas reas tiene sus propias Vistas,
Controladores y Modelos.
110
111
Nota: El rea es una agrupacin lgica no fsica, por lo que no se crean dlls
separadas por cada rea.
Cual es la diferencia entre reas y carpetas?
Uno se puede hacer la pregunta porque debemos usar para nuestro sistema areas
para separar en modulos cuando podemos simplemente utilizar las carpetas. En
pocas palabras, la respuesta para esta pregunta es Para evitar el enorme trabajo
manual.
Para lograr la misma funcionalidad utilizando carpetas se tiene que hacer las siguiente
cosas.
Crear la estructura del mdulo manualmente ( Una carpeta por cada mdulo,
Tres carpetas adicionales por cada mdulo llamado COntroller, Views y Model,
un archivo Web.Config por cada mdulo)
Crear una ruta personalizada por cada mdulo Controller.
Crear un motor de vista personalizada para cada mdulo para buscar la vista
en lugares personalizados en lugar de ubicaciones predefinidas (Views/
{Controller} Views/Shared).
111

Buscar Vista por defecto
Buscar vista Personalizada
112
112
113

Paso en 7 das (Da 6)
Que hicimos en los ltimos 5 das?
Este artculo es la continuacin de Aprender paso a paso ASP.NET MVC en 7 das y puedes revisarlo
en los link siguientes:
Cul es la agenda para este dia 6?

Para el da 6 tenemos 5 grandes laboratorios:.
Lab 22: Modos de Visualizacin (MVC para mviles).- Soporte mvil usando la
caracterstica DisplayMode
Lab 23: Proveedor MVC OAuth.- Integrar la aplicacin usando Facebook,

Twitter o cualquier otros sitios usando OAuth.
Lab 24: Enlazador de Modelo MVC: Uso de enlazadores de modelos para

enlazar la interfaz de usuario y las clases del modelo, si los nombres de
propiedad son diferentes.
Lab 25: Diseo Razor.- Sintaxis Razor
Lab 26: Mtodos de ayuda Html Personalizado.- Creando tu propio motor de

vista personalizado.
Que hay para el ltimo da?
Lab 22: Modos de Visualizacin (MVC para mviles)

Introduccin
113
114
Este es un mundo de pequeos dispositivos es decir mviles. Como un desarrollador

MVC se espera un gran apoyo de la plantilla MVC de Microsoft para el mismo. Ahora
las pantallas de escritorio y pantallas de mviles tienen una alta variacin en tamao.
Si nos gustara crear diferentes pantallas para escritorio y diferentes pantallas para
mviles. Por ejemplo creariamos Home.aspx para escritorio normal y
Home.mobile.aspx para mvil. Si MVC puede automticamente detectar el tipo de
dispositivo y redireccionar a la pgina apropiada esto salvara mucho trabajo. Esto es
automatizado usando MVC Display Mode.
Cuando cualquier solicitud HTTP llega a la aplicacin web esta solicitud HTTP tiene
un valor llamado User Agent. Este valor User Agent es usado por el modo de
visualizacin MVC (MVC display mode) y la vista apropiada es recogido y
redireccionado por el dispositivo. Vamos hacer una demo y ver en directo.
Paso 01: Crear Paginas apropiadas

As que vamos a crear un proyecto de ejemplo MVC con el nombre MVCSextoDiay y
de tipo Basico. Luego vamos agregar 2 vistas index.aspx para escritorio y
Index.Mobile.cshtml para movil como se muestra en la siguiente figura.
Nota: El nombre de la vista Index.Mobile tiene que ser igual para que lo reconozca
como una viasta para dispositivos mviles. Adicionalmente en esta vista se debe
introducir un texto identificativo por ejemplo:Este es para Pantallas Pequeas
Mviles.
Tambin vamos agregar un controlador llamado Inicio en cual invocar a la vista
index.
Nota: Puedes ver en el siguiente cdigo que hemos creado un action result como
index. Porque nuestro nombre de vista y nombre de accion son los mismos, nosotros
no necesitamos pasar el nombre de la vista dentro de return view().
114
Paso 02: Eso es todo, as que vamos a probar

Y esto es todo lo que necesitamos hacer. Ahora vamos a ir y probar si el modo de
visualizacin MVC hace honor a su promesa.
Ahora si vas e ingresar el controlador y la accin en el navegador vers como la
imagen izquierda de abajo. Si ingresas el mismo controlador y accin usando el
emulador de mviles android tu vers la pantalla de la imagen derecha.
Nota: Para probar simulacin para mviles en este laboratorio hemos usado el
simulador Opera Mobile. Tu puedes descargar el emulador de
http://www.opera.com/es/developer/mobile-emulator
115
115
116
Paso 03: Ms personalizacin y control

Pero que si queremos ms personalizacin y control.
Si el escritorio muestra Index.cshtml
Si el mvil muestra Index.mobile.cshtml
Si el mvil Android muestra Index.Android.cshtml
Tenemos ya implementado las primeras dos condiciones. Ahora para la tercera

condicin necesitamos realizar algunos pasos extras. Relajate son absolutamente
pequeos y fciles pero con gran resultado final.
Primer paso es agregar una pagina mas Index.Android.cshtml especialmente para
Android en la carpeta Vista como se muestra en la siguiente imagen.
El siguiente paso el hacer ms cambios en el archivo Global.asax.cs.

a. El primer paso es agregar el espacio de nombre System.Web.WebPages como se
muestra en la siguiente figura.
b. Segundo paso es usar la clase DisplayModeProvider y agregar una entrada

Android dentro de la coleccin Modes como se muestra en el cdigo de abajo. El
siguiente cdigo busca para la cadena Android y si encuentra esto captura y
redirecciona a la pgina Index.Android.cshtml.
116
117
Paso 04: Probar la personalizacion de Moviles

Ahora si ejecutas el simulador de Opera Mobile con Android como un usuario agente
como se muestra en la siguiente imagen, veras la pagina Android
(Index.Android.cshtml) redireccionado.
Lab 23: Proveedor MVC OAuth

Una de los ms procesos aburridos para un usuario final es registrase en un sitio.
Algunas veces esos largos formularios y correos de validacin slo posterga el
usuario. Entonces cmo hacer las cosas fciles mediante la validacin de los usuarios
117
118
utilizando sus cuentas existentes de Facebook/Twitter/Google/LinkedIn/etc. Entonces

el usuario usa algo que ya tiene mientras el sitio asegura que este usuario es un
usuario propietario.
Esto es logrado usando MVC OAuth (Open Standard for Authorization).
Para implementar OAuth esto es en un proceso de tres pasos.
Registrar la aplicacin y obtener el ID y Clave.
Realizar la autenticacin con el sitio de terceros.
Una vez autenticado hace navegar el sitio.
Paso 1: Registrar la aplicacin y obtener el ID y la Clave

Entonces el primer paso es registrar la aplicacin con el sitio de terceros. Para este
laboratorio usaremos Google para la autenticacin abierta. Por favor nota este paso
vara para Twitter, Facebook y otros sitios. Ir a
https://console.developers.google.com/ , crear un proyecto
118
Seleccionar el proyecto y en la columna lateral izquierda la opcion Credentials
En el siguiente apartado especificamos el tipo de aplicacin, en nuestro caso una

aplicacin web e indicamos que la URL es http://localhost.
119
119
120
Pulsamos el botn Create Cliend ID y nos llevar al panel de control donde

podremos ver el API Key generado que tendremos que configurar ms adelante en
nuestra aplicacin.
120
121
Paso 2: Crear un sitio MVC para autenticacin con OAuth

Ahora que tenemos el ID sigamos adelante y crear una Aplicacin de Internet.
Estamos creando una aplicacin de internet para que podamos obtener algo ya hecho
o se puede decir codigo plantilla para OAuth.
Una vez que el proyecto es creado abrir la clase OAuthConfig.cs del folder
App_start.
121
122
En este archivo de configuracin encontrars el mtodo RegisterAuth, lo habilitamos

para GoogleCliente.
Paso 3: Iniciar el navegador

Esto es todo lo que hay que hacer, ahora ejecutar la aplicacin y dar click en Iniciar
Sesin
122
123
La siguiente pantalla presenta dos opciones, en el lado izquierdo donde puedes

loguearte de forma local usando la autenticacin Forms y en la derecha dispones de
proveedor de terceros. Clickear en el botn Google e ingresar las credenciales de la
cuenta.
123
124
Lab 24: Enlazador de Modelo MVC

Introduccin
El siguiente cdigo es un simple formulario HTML hace un post a SubmitCustomer
La accin SubmitCustomer est dentro de un objeto Customer. Este objeto

Customer es producido automticamente con los datos que son llenados en los
cuadros de texto, sin ningn tipo de unin o asignaciones.
Conoces porque el objeto Customer llena automticamente?. Esto es porque el

nombre de los cuadros de textos y la propiedad nombre de la clase Customer son
iguales.
Pero que si los nombres de los cuadros de texto no son iguales a los nombres de las
propiedades de la clase Customer.
En otras palabras el nombre del textbox HTML es txtCustomerCode y el nombre de
la propiedad de la clase es CustomerCode. Aqu es donde los enlazadores de
modelo entran como se puede ver en la siguiente imagen.
124
125
Model binder mapea los elementos HTML del formulario al modelo. Este acta como
un puente entre la interfaz de usuario HTML y el modelo MVC. As que vamos hacer
algunos manejos para ejercicio con ModelBinder.
Paso 1: Crear EnterCustomer.cshtml y el controlador
El primer paso es crear una vista EnterCustomer.cshtml dentro de nuestro proyecto
ya creado MVCSextoDia, el cual tomar datos de Customer
Para invocar este formulario necesitamos una accin en el controlador Customer

porque no podemos invocar directamente a un vista en MVC, necesitamos hacerlo va
un controlador.
Paso 2: Crear el modelo Customer

El siguiente paso es crear un modelo Customer. Por favor nota la propiedad nombre
de la clase Customer y el nombre de los cuadros de texto de la UI HTML son
diferentes.
125
126
Paso 3: Crear el enlace que hace el mapeo

Ahora debido que los nombres de los elementos de la UI y la clase Customer tienen
diferentes nombres necesitamos crear el enlazador Model. Para crear la clase
enlazador de modelo necesitamos implementar la interfaz IModelBinder. Pa lo cual
agregamos una clase CustomerBinder dentro de la carpeta Controller. En el
siguiente cdigo puedes ver como hemos escrito el cdigo de mapeo dentro del
mtodo BindModel.
Paso 4: Conectar el mapeador con la accin

Ahora que tenemos en conector, tenemos la UI HTML entonces es tiempo de
conectarlos. miramos en la accin SubmitCustomer del siguiente cdigo.
el atributo ModelBinder conecta con el objeto Customer.
126
127
Paso 5: Disfruta la salida

Ahora al ingresar la accin EnterCustomer el cual invoca formulario de entrada de
Customer.
Cuando llenas los datos y haces click en el botn Enviar, veras que se llena el objeto
Customer con un punto de interrupcin, con en la siguiente imagen.
127
128
Lab 25: Diseo Razor

Introduccin
Layouts son como paginas maestras en ASP.NET web form. Pginas Maestras dan
como un aspecto estndar para las vistas Web Form (ASPX) mientras que layout dan
una vista estndar para las vistas Razor (CSHTML). En caso seas nuevo en Razor
ver el Lab 12: Vistas Razor MVC.
En este laboratorio veras como implementar Diseo Razor.
Paso 1: Crear una pgina de diseo
Lo primero que nosotros necesitamos crear es una pgina de diseo. Dentro de
nuestro proyecto web MVCSextoDia, vamos a la carpeta vista y hacemos click
derecho, agregar nuevo elemento y seleccionar la plantilla Pgina de Diseo de MVC
4 como se muestra en la siguiente imagen.
En la pgina de diseo MC necesitamos definir la estructura comn el cual ser

aplicado a todas las pginas razor. Puedes ver en la siguiente diseo de pgina
tenemos tres secciones Cabecera, cuerpo y pie. La cabecera y el pie son secciones
personalizados mientras RenderBody es algo que viene de MVC y muestra en el
contenedor body.
128
129
Paso 2: Crear vista y aplicar el diseo

Ahora una vez que hemos creado el diseo los siguiente es aplicar esto a las vista.
129
130
Para aplicar el diseo de pgina, seleccione el botn ... como se muestra en la

anterior imagen, y seleccione el diseo de pgina como se muestra en la siguiente
imagen.
Una vez que la vista es creada la primera lnea de cdigo indica que diseo de pgina
est usando. Esto se ve como el siguiente cdigo.
Ahora lo final es en la vista llenar todas las secciones. Las secciones Pie y cabecera
son secciones personalizadas as que necesitamos usar el comando @section
seguido por el nombre de la seccin y despus lo que queramos asignar en esas
secciones. Todos los otros textos son parte del body (@RenderBody).
130
131
Paso 3: Crear un controlador y ver el diseo en accin

Ahora que tenemos todo asignado es tiempo de crear un controlador y mtodo para
invocar la vista.
Deberas ver una cosa como se ve en la siguiente imagen. puedes ver como la
plantilla de diseo es aplicado a la vista.
Lab 26: Mtodos Personalizados HTML Helper

Introduccin
En el dia 1 hablamos acerca de clases MVC Helper. Esto nos ayuda a trabajar con
controles de ingresos de una manera ms eficiente. Cuando tipeas @Html en una
vista MVC Razor se consigue algo como esto en IntelliSense.
131
132
El mtodo Html Helper nos crea controles de entrada Html como Textbox, Radio
button, Checkbox, Text Area de una manera facil y rapido. En este laboratorio vamos a
dar un paso adelante y crear mtodos Helper personalizados.
Para crear mtodo Html Helper Personalizados, necesitamos usar extensin de
mtodos. Extensin de mtodos es un concepto que fue introducido en .NET 3.5.
Paso 1: Agregar una simple clase
Vamos a trabajar con nuestro proyecto proyecto MVCSextoDia. Agregar un
controlador llamado EjemploHelper y un mtodo llamado Index. Crear una nueva
carpeta dentro del proyecto MVC llamado ExtensionClases.
132
133
Paso 2: Marcar la clase como esttica y agregar mtodos.

Para el mtodo de extensin necesitamos agregar una clase como esttica.
en este clase vamos a crear un nuevo mtodo esttico llamado HolaMundoLabel el
cual retornar un valor de tipo MvcHtmlString y aceptando un parmetro HtmlHelper.
Nota: Asegurar agregar la palabra this antes de declarar el primer parmetro porque
el objetivo es crear un mtodo extensin para la clase HtmlHelper.
Paso 3: Usa la clase Helper

El paso final es importar el espacio de nombres System.Web.Mvc.Html. necesitamos
importar este espacio de nombre, porque por defecto TextBoxFor, TextAreaFor y otros
mtodos de extensin de HTML Helper estn disponibles dentro de este espacio de
nombres. Se requiere solo si vamos a usar uno de estos mtodos de extensin.
Simplemente escribimos el siguiente cdigo en la vista y construir el proyecto.
Nota: Note que en la parte superior se asign la sentencia using que referencia a la
clase extensin creada previamente.
133

Construya la aplicacin, presionando F5 y probar la aplicacin.
134
134

ASP .NET MVC 4 Paso A Paso en 6 Días

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

ASP .NET MVC 4 Paso A Paso en 6 Días

Caricato da

Copyright:

Formati disponibili

Aprender ASP .

NET Paso a Paso en 7 das |

TUT: Aprender ASP .NET MVC Paso a

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 asncronos

Dia 5: Empaquetamiento, Minificacion , ViewModel , Manejo de excepciones y Areas

Dias 6: MOdos de Visualizacin, Proveedor MVC OAuth, Enlace Modelo MVC

Por qu el code-behind en tan bueno en ASP.NET?

Problema nmero 1: Testeo Unitario

Problema nmero 2: La realidad de la separacin del cdigo y la UI

Nuestro Hroe MVC (Modelo, Vista y Controlador)

Aprender ASP .NET Paso a Paso en 7 das |

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 rpidamente

Porque el code-behind en tan bueno en ASP.NET?

Aprender ASP .NET Paso a Paso en 7 das |

Vamos a analizar los problemas.

Aprender ASP .NET Paso a Paso en 7 das |

Nuestro Hroe MVC (Modelo, Vista y Controlador)

Aprender ASP .NET Paso a Paso en 7 das |

Aprender ASP .NET Paso a Paso en 7 das |

Paso 01: Crear el Proyecto

Aprender ASP .NET Paso a Paso en 7 das |

Paso 02: Agregar un controlador

Paso 03: Agregar una vista

Aprender ASP .NET Paso a Paso en 7 das |

Aprender ASP .NET Paso a Paso en 7 das |

Paso 04: Ejecutar la Aplicacin

Lab 02: Pasando datos entre el controlador y la vista

Aprender ASP .NET Paso a Paso en 7 das |

Ah es donde la nueva tcnica de gestin de sesiones se ha introducido en el marco

Aprender ASP .NET Paso a Paso en 7 das |

Paso 01: Crear proyecto y definir la vista de datos.

Paso 02: Mostrando el view data en la vista.

Aprender ASP .NET Paso a Paso en 7 das |

Paso 03: Ejecutamos la aplicacin

Lab 03: Creando un simple modelo usando MVC

Aprender ASP .NET Paso a Paso en 7 das |

Paso 02: Definimos un controlador con accin

Paso 03: Creamos una vista fuertemente tipada usando la clase.

Aprender ASP .NET Paso a Paso en 7 das |

Aprender ASP .NET Paso a Paso en 7 das |

Paso 04: Ejecuta la aplicacin

Lab 04: Creando un simple formulario de entrada de datos MVC

Aprender ASP .NET Paso a Paso en 7 das |

Paso 01: Creando la Pgina de entrada de datos

Aprender ASP .NET Paso a Paso en 7 das |

Paso 02: Creando el controlador

Aprender ASP .NET Paso a Paso en 7 das |

Paso 03: Creando la vista para mostrar el objeto customer

Paso 04: Finalmente ejecutar el proyecto

Aprender ASP .NET Paso a Paso en 7 das |

Y al hacer clic en el botn enviar, muestra la vista DisplayCustomer.

Lab 05: Usando Razor para crear vistas rpidamente

Agregado a esto, mucho del cdigo manual fue tambin escrito en el

Aprender ASP .NET Paso a Paso en 7 das |

El cdigo de arriba genera el siguiente cdigo HTML:

Vamos a crear el formulario de entradas de datos:

Paso 03: Creando una vista Fuertemente tipada