Académique Documents
Professionnel Documents
Culture Documents
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 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)
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.
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.
Una vez hecho click en Aceptar, ya tiene hecho la estructura con las carpetas
apropiadas, donde puedes agregar controladores, vistas y modelos.
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.
10
10
11
11
12
12
13
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
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:
16
17
Despus, siguiendo los pasos anteriores de cmo crear una vista (Click derecho y Add
View) creamos la vista FillCustomer.
17
18
18
19
Los Cdigo HTML fueron escritos manualmente. En pocas palabras esto fue
poco productivo, esto es como escribir cdigo HTML usando el notepad.
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 razor HTML BeginForm toma tres parmetros nombre de la accin, el nombre del
controlador y el mtodo HTTP (GET, POST).
20
21
21
22
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:
22
23
23
24
una
rpida
recapitulacin
si
necesitamos
hacer
testeo
unitario
al
siguiente
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:
26
27
Una vez agregado la referencia, deberas ver en la aplicacin MVC e la referencia de proyecto
como se muestra en la siguiente imagen:
27
28
28
29
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
Al final del da, MVC no es nada ms que una direccin de URL asignada a los controladores y los
controladores asignados a acciones.
Lo siguiente es una simple tabla el cual muestra cmo todo esto se ve as.
30
31
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.
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.
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.
32
33
Ingresamos
el
siguiente
cdigo,
el
cual
significa
cuando
llamamos
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.
Sera 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
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.
34
35
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
36
37
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
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.
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.
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.
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:
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
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:
44
45
Vistas paciales
Razor (MVC 4)
45
46
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.
46
47
carpeta view y agregar vista, marcar el check box Crear como vista parcial como se muestra en
la siguiente figura.
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.
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.
Vamos a decir que tenemos un modelo Customer y queremos asegurar que el campo cdigo es
obligatorio.
49
50
del body nos gustara mostrar el mensaje de error si la data no es correcto es es hecho usando el
siguiente cdigo.
50
51
Nota: Note que se ejecut la accin post al mtodo del controlador PostCustomer
51
52
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).
52
La prueba resultara:
53
53
54
54
55
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?.
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.
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
Antes de empezar este laboratorio una cosa que necesitamos entender es que MVC al final del da
se encuentra en el motor ASP.NET.
57
58
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.
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
61
Si las credenciales son ingresados apropiadamente, deberas ser capaz de ver lo siguiente:
62
62
63
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
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.
64
65
65
66
Contenido
Cul es la Agenda?
Lab 16: Gestin de Sesiones en MVC (ViewData, ViewBag, TempData y Variables Sesin)
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
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.
68
69
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.
El siguiente paso es consumir los datos JSON usando una vista MVC. Asi que adelante Aadimos
una vista con el nombre AprenderJquery.cshtml
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.
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 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
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
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.
73
74
Variables sesin: Usando variables sesin podemos mantener datos hasta cerrar el navegador.
Demostraremos los fundamentos anteriores con una demostracin.
74
75
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
76
77
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
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.
80
81
81
82
82
83
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.
83
84
84
85
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.
86
87
87
88
88
89
89
90
90
91
91
92
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
94
95
Vamos hacer un pequeo laboratorio para entender el concepto modelo de vista MVC
usando la siguiente muestra el cual hemos discutido previamente.
95
96
96
97
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.
99
100
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.
101
102
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:
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.
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
105
106
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
108
109
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:
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 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
112
112
113
Lab 22: Modos de Visualizacin (MVC para mviles).- Soporte mvil usando la
caracterstica DisplayMode
113
114
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
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
116
117
117
118
118
119
119
120
120
121
Una vez que el proyecto es creado abrir la clase OAuthConfig.cs del folder
App_start.
121
122
122
123
123
124
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
125
126
126
127
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
128
129
129
130
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
Deberas ver una cosa como se ve en la siguiente imagen. puedes ver como la
plantilla de diseo es aplicado a la vista.
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
Nota: Note que en la parte superior se asign la sentencia using que referencia a la
clase extensin creada previamente.
133
134
134