Академический Документы
Профессиональный Документы
Культура Документы
Este artculo es parte de Aprender paso a paso ASP.NET MVC en 7 das y puedes revisarlo en los
link siguientes:
Contenido
Pre-Requisitos
Lab 01: Creando una simple Aplicacion ASP.NEt MVC Hola Mundo
Como el nombre del artculo dice, aprender MVC, la agenda es simple, vamos a
aprender ASP.NET MVC en 7 dias.
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)
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.
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 mas acerca del
diseador de la interfaz de usuario, y la lgica de acceso a datos son mas o menos
componentes estndar como los Enterprise Data Blocks.
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 tu tengas un capa de
acceso a datos personalizado este sera fcil de testearlo como son simples clases
.NET.
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 hacindololos de forma manual, desde una perspectiva de tiempo esto no
sera una gran opcin.
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 codigo del boton click cuando se llama via HTTP
POST podra visualizar usando displayinvoice.aspx y cuando llamo via HTTP GEt
podra mostrar en un tree view. En otras palabras deberamos como reusar el code-
behind. Justo pienso como puedo hacer esto usando el actual code-behind.
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 Aplicacin MVC usando la
Plantilla MVC provedaa 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
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
Para MVC nos gustara ver el alcance limitado al controlador y la vista, en otras
palabra nos gustara mantener datos cuando el golpe llega al controlador y alcanza la
vista y despus que el alcance de los datos debe expirar.
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.
el primer paso es crear un controlador y agregar una simple accin que muestre el
Customer.
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).
Tan pronto como el usuario final ingrese los detalles y enve los datos estos sern
direccionados a la siguiente ventana como muestra abajo:
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 mas importante a notar es que la accion
del boton es apuntada al mtodo 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.
Despus siguiendo los pasos anteriores de como crear una vista(Click derecho y Add
View) creamos la vista FillCustomer.
Necesitamos obtener los datos de los controles HTML(form), llena el objeto y enviar el
objeto a la vista.
Los Cdigo HTML fueron escritos manualmente. En pocas palabras esto fue
poco productivo, esto es como escribir codigo HTML usando el notepad.
En este laboratorio veremos como usar clases razor para minimizar el cdigo manual
e incrementar la productividad.
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 razor HTML BeginForm toma tres parmetros nombre de la accin, el nombre del
controlador y el mtodo HTTP(GET, POST).
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.
Muy bien, ahora vamos por unas por unas chelias para celebrar el cumplimiento de
nuestro primer dia con ASP.NET MVC.
Y que hay para el segundo Da?
Para el segundo da hablaremos acerca de Routing URL, fcil manera del testeo
unitario MVC, atributos del controlador y mucho mas.Los siguientes laboratorio van a
ser ms avanzados a comparado con el primer dia. asi que realiza todos los
laboratorios para que estes listo para el segundo dia.
Contenido
Cul es la Agenda?
Lab 08: Validando y Asignando Valores por defecto a las URLs en MVC
Cul es la Agenda?
Este artculo es la continuacin de Aprender paso a paso en 7 dias y puedes revisarlo en los link
siguientes:
Cuando empezamos toda la serie MVC(Dia 1) empezamos con dos problemas relacionados al code-
behind.
problemas:
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 objeto sesion,y aplicacion, cmo accedo a
estos?
Muchos desarrolladores podran hablar acerca de mock tests, rhino mocks,etc. pero todava esto
es desapercibido y la compliacion aumenta con las variables de sesion, objetos de data view,
El primer paso es crear un simple proyecto MVC. Usaremos el mismo proyecto el cual nosotros
temos creado en MVC(Modelo Vista Controlador) del dia 1(MyFirstHelloWorld). En caso no tengas
del proyecto cercanamente, puedes ver fcilmente la clase controlador de Customer con se
muestra a continuacin:
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
Vamos a usar nuestro testeo unitario del framework de VSTS para testear la clase controlador.
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
Una vez escrito la prueba es tiempo de ejecutar caso de prueba para lo cual vamos hacer click en
Si las cosas van bien tu deberias 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.
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
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.
controlador o se puede tener ms de un controlador asigna a una sola URL. Por ejemplo, puedes
.
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
seccion anterior.
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.
Todas las asignaciones de rutas son almacenadas dentro de la coleccin llamada routes. Esta
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
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
pedazo de codigo, nosotros hemos usado { para especificar que podemos tener un parmetro id.
Si quieres definir los parmetros como opcionales puedes usar el enum UrlParameter.Optional.
DisplayCustomer.
Nota: No muestra ningn nombre, porque esto tiene que ser enviado del formulario, y puedes
con Customer y funcin accin como Search entonces el URL ser estructurada automticamente
como htt://www.maninformatic.com/Customer/Search.
Seria bueno si pudiramos validar los datos que se transmiten a travs de estas URL de MVC.
http://localhost/Customer/ViewCustomer/1001.
El cdigo de Customer es un nmero natural. En otras palabras, cualquier persona que ingrese
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.
En este primer paso vamos a trabajar con nuestra simple clase modelo Customer ya creada en los
pasos anteriores.
En el siguiente paso vamos a utilizar la clase controlador Customer ya creada en pasos anteriores
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
Puedes especificar los valores por defecto diciendo id=0 como se muestra en el cdigo de abajo.
esta validacin trabaja. La primera prueba tenemos que especificar 1 y veremos que el
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.
El punto ms importante a notar es que esta validacin se ejecuta antes que la solicitud a la
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
Pero haciendo esto estas violando los principios de MVC. Los principios MVC dicen que la llamada
Lo ideal es que las acciones deberan direccionar a las pginas. Los enlaces deberan tener
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
Ahora vamos a crear las vistas para los tres mtodos definidos en el controlador Site(About,
Home, Product).
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
Para invocar las acciones relacionadas a las vistas necesitamos especificar las acciones en la
El cdigo de arriba fue para la vista Product, pues hacer lo mismo para las vistas About y Home.
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.
Es la tercera sesin, hablaremos acerca de vistas parciales, validacin usando notaciones de data,
ms. Los siguientes laboratorios podran ser mucho ms avanzados comparados al segundo da.
Cul es la Agenda?
Cul es la Agenda?
Este artculo es la continuacin de Aprender paso a paso en 7 das y puedes revisarlo en los link
siguientes:
Razor(MVC 4)
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.
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
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.
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 validacin de data es una de las principales cosas en cualquier aplicacin web. Como
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
Las Anotaciones de data son metadata el cual puedes aplicar en el modelo en el framework MVC
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
Asumiendo que tienes creado el modelo y la vista fuertemente tipada, vamos a empezar a aplicar
Anotaciones de Data.
abajo.
Vamos a decir que tenemos un modelo Customer y queremos asegurar que el campo cdigo es
obligatorio.
Ahora hay algunos cambios de cdigo que deberiamos hacer en el cdigo Home.cshtml. Dentro
del body nos gustara mostrar el mensaje de error si la data no es correcto es es hecho usando el
siguiente cdigo.
generara los controles UI de acuerdo a las propiedades del modelo. Entonces no necesitamos
post sobre el controlador, te gustara conocer si el estado del modelo es correcto o no. Esto
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
Finalmente presionar Ctrl +F5, y al enviar el control en blanco mostrar el mensaje de error, pero
Nota: Note que se ejecut la accin post al mtodo del controlador PostCustomer
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
La validacin en el cliente se puede realizar con jQuery Unobtrusive Validation, para lo cual hay
jQuery.Validation.Unobtrusive.
Ahora, ubicar el archivo web.config abrirlo y asegurar que existen las siguientes teclas de la
el valor true:
Utilizar el ayudante Url.Content () para obtener las direcciones URL de los tres archivos de script,
Finalmente presionar Ctrl +F5, entonces la al presionar el botn enviar la validacin lo realizar
La prueba resultara:
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
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.
de abajo. Todos la sintaxis Razor empieza con @. Si tiene una simple linea de codigo no necesitas
Si comparas la sintaxis de arriba con una vista ASPX, necesitas tipear el cdigo siguiente. Asi que
para bucles y condiciones if llega a ser ms simple como se muestra en el siguiente cdigo:
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.
Prctica 5: Mostrar @
En caso quieras mostrar @ solo tipea esto cada vez como se muestra en el siguiente codigo.
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
Antes de empezar este laboratorio una cosa que necesitamos entender es que MVC al final del da
windows y forms.
nuestro proyecto.
Paso 1: Habilitar la autenticacin Windows.
continuacin:
En la plantilla MVC 4, hay un pequeo defecto. Esto ejecuta la autenticacin Forms por defecto.
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.
Por favor note que el usuario deberia estar presente en su windows Active Directory o su grupo
Tienes que asegurarte que tienes instalado el IIS en su equipo para lo cual lo puede verificar en el
Una vez agregado la caracterstica anterior, ahora vamos a crear la aplicacin en el IIS con la
Autenticacin.
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
publicar.
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:
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.
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
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
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.
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
Una vez que hemos verificado las credenciales el siguiente paso es usar la famosa clase
De modo que en la siguiente solicitud cuando el usuario llegue no tendr que ser validado una y
Tambin necesitamos usar el atributo [Authorize] dentro los controladores, los cuales queremos
Por ejemplo se puede ver el siguiente cdigo para la accin Index del controlador Home que
Si ahora llamas a index este directamente se muestra la vista Login, este test prueba que la
En el cuarto dia veremos una introduccin a Jquery, Json, Controlador Asncrono y diferencia
Contenido
Cul es la Agenda?
Cul es la Agenda?
Este artculo es la continuacin de Aprender paso a paso en 7 das y puedes revisarlo en los link
siguientes:
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
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
Ahora agregamos un controlador Customer, para exponer el objeto customer en formato JSON
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
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.
Puedes entonces hacer una llamada al controlador que esta exponiendo en formato JSON usando
controller/action.
El segundo parmetro es la data a ser pasada. Por ahora esto es nulo como estamos ms
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
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
La vista anterior es invocado usando el mtodo MostrarJson del controlador Customer creado
anteriormente.
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
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.
MVC valida el usuario y enviar la pgina inicial del sitio. La aplicacin MVC ahora se olvida
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
Hay 3 maneras de mantener estados en MVC y estas maneras puede ser usado dependiendo de
Temp Data: Ayuda a mantener los datos sobre las redirecciones para una nica solicitud y
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.
Variables sesin: Usando variables sesin podemos mantener datos hasta cerrar el navegador.
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.
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.
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
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.
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
Debajo est una tabla resumen que muestra los diferentes mecanismo de persistencia.
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
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
Esta situacin es denominado como Thread Starvation. Las situacin Thread Starvation se
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.
AlgunMetodoHeavy y esta accin espera 20 segundos. As que vamos a entender cmo podemos
El siguiente paso es aadir la palabra Async despus de los mtodos. Asi como podemos observar
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
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.
salida.
TUT: Aprender ASP .NET MVC Paso a
Paso en 7 das(Da 5)
IN , ASP.NET MVC - ON 22:02 - 1 COMENTARIO
Este artculo es la continuacin de Aprender paso a paso ASP.NET MVC en 7 das y puedes revisarlo
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.
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.
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.
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.
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.
Vamos hacer un pequeo laboratorio para entender el concepto modelo de vista MVC
usando la siguiente muestra el cual hemos discutido previamente.
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.
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.
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.
Asi que no sean atraidos por la idea de la cracion 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.
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 tecnologia(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.
Introduccion
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:
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
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.
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.
El resultado sera el detalle de la vista Error.
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.
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.
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 un motor de vista personalizada para cada mdulo para buscar la vista
en lugares personalizados en lugar de ubicaciones predefinidas(Views/
{Controller} Views/Shared).
Introduccin
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.
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.
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().
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
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.
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.
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.
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 despues lo que queramos asignar en esas
secciones. Todos los otros textos son parte del body(@RenderBody).
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 extension.
Simplemente escribimos el siguiente cdigo en la vista y construir el proyecto.