TUT: Aprender ASP .NET MVC Paso a Paso en 7 dias(Día 3)

Contenido

• ¿Cuál es la Agenda?
• Lab 10: Vistas Paciales
• Lab 11: Validación usando Anotación 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 Día?

¿Cuál es la Agenda?

Este artículo es la continuación de Aprender paso a paso en 7 días y puedes revisarlo en los link siguientes:

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

En este día 3 veremos los siguientes cinco laboratorios:

• Vistas paciales
• Validación 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 estaríamos gustosos para crear vistas reusables. Nosotros gustaríamos crear vistas reusables como Vistas de cabecera y pie de página y usarlos dentro de una vista MVC grande.

La vistas reusables podrían se logrados creando “Vistas Parciales”.

Paso 1: crear una simple vista
Para desarrollar este laboratorio vamos a crear un nuevo proyecto vacío 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.
Ingresar algo de texto o lógica 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 función “Html.RederPartial” y pasar el nombre de la vista en la función como se muestra en el siguiente código.

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 función 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 acción
Finalmente presionar Ctrl+F5, y veras como se carga la vista parcial.

Lab 11: Validación usando Anotación de Data
La validación de data es una de las principales cosas en cualquier aplicación web. Como desarrollador deberías ejecutar la validación en el cliente(browser) y en el servidor. Así que probablemente le gustaría escribir la validación de una vez y luego esperar el framework de validación para generar la lógica de validación 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 proveída?, son los valores dentro del rango?.

Las Anotaciones de data son metadata el cual puedes aplicar en el modelo en el framework MVC validara usando la metadata proveída.

En este laboratorio vamos a enfocar la validación 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 Anotación de Data.
Importante importar el espacio de nombres DataAnnotations como se muestra en el código de abajo.

Vamos a decir que tenemos un modelo Customer y queremos asegurar que el campo código es obligatorio.

Entonces aplicar el atributo “Required” como se muestra en el siguiente código. si la validación falla y le gustaría mostrar un mensaje de error, puedes pasar el “ErrorMessage” también.

Paso 2: Cambiar el codigo Home.cshtml
Ahora hay algunos cambios de código que deberiamos hacer en el código Home.cshtml. Dentro del body nos gustaría mostrar el mensaje de error si la data no es correcto es es hecho usando el siguiente código.

También necesitamos codificar nuestro formulario de ingreso de datos. a continuación se muestra el fragmento de código para el mismo. Note que la funcion “EditorForModel” automáticamente 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 validación, cuando el formulario llama un post sobre el controlador, te gustaría conocer si el estado del modelo es correcto o no. Esto puede hacerse verificando con la propiedad ModelState.Isvalid. Si la propiedad es válida 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 continuación se muestra el código del controlador.

Paso 4: Probando la Aplicación.
Finalmente presionar Ctrl +F5, y al enviar el control en blanco mostrar el mensaje de error, pero esta validación se realiza en el servidor, porque el controlador es quien valida.

Nota: Note que se ejecutó la acción post al método del controlador PostCustomer

Paso 5: Habilitando la validación 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 validación, el control pasa al servidor solo para regresar con mensajes de error. para evitar este ida y vuelta se puede agregar capacidades del lado del cliente en la vista Home.cshtml.

La validación 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 sección <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 validación del lado del cliente(home.cshtml). 

Paso 6: Probando la Aplicación.
Finalmente presionar Ctrl +F5, entonces la al presionar el botón enviar la validación lo realizará en el cliente sin ir al servidor.

Otros atributos de anotación de datos

La prueba resultaría:

Lab 12: MVC 4 - Razor
Hasta ahora este artículo 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 fácil que es Razor comparado con las vistas ASPX.

Práctica 1: Simple línea de código

Si quieres mostrar una simple variable puedes hacer algunas cosas como se muestra en el código de abajo. Todos la sintaxis Razor empieza con @. Si tiene una simple linea de codigo no necesitas “{”. Razor se da cuenta de la conclusión lógica.

Si comparas la sintaxis de arriba con una vista ASPX, necesitas tipear el código siguiente. Asi que ¿No es una sintaxis más simple, ordenado y ligero?.

Práctica 2: Múltiples líneas de código

Práctica 3: bucle Foreach y condición If
para bucles y condiciones if llega a ser más simple como se muestra en el siguiente código:

Práctica 4: No te preocupes por @
Si estás pensando si Razor es confuso con @ de Razor y @ de una dirección email, no te preocupes, Razor entiende la diferencia. Para instanciar en la siguiente línea, la primera linea Razor ejecutará como un código y la segunda linea de codigo lo entiende solo como una dirección email.

Práctica 5: Mostrar @
En caso quieras mostrar “@” solo tipea esto cada vez como se muestra en el siguiente codigo. semostraráa la siguiente imagen.

Práctica 6: Mostrar HTML con Razor
En caso quieras mostrar HTML en el browser. para instanciar una simple variable llamada como link el cual tiene código HTML. Estoy mostrando la variable link en el browser.

Si ejecutas el código de arriba, te sorprenderias ver que este no se muestra como HTML, sino como una simple pantalla como se muestra a continuación. ahora como se muestra acontinuación, Ahora eso no es lo que esperamos. Nos esperábamos 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 código:

Lab 13: Seguridad MVC(Windows Authentication).
La seguridad es una de las cosas más importantes en cualquier aplicación independientemente, quien los desarrolla, en cualquier tecnología, lo mismo puede decirse de MVC.

Antes de empezar este laboratorio una cosa que necesitamos entender es que MVC al final del día se encuentra en el motor ASP.NET.

Nota: En este artículo no vamos a estar buscando en los fundamentos de la autenticación de windows y forms.
Vamos a implementar autenticación Windows en una aplicación MVC 4.

Ahora, una manera de implementar autenticación windows es realizando algunos cambios en nuestro proyecto.

Paso 1: Habilitar la autenticación Windows.
El primer paso es habilitar la autenticación Window. Esto lo realizamos en el archivo de configuración Web.config usando la etiqueta authentication y authorization que se muestra a continuación:

Paso 2: Solo algunos defectos.
En la plantilla MVC 4, hay un pequeño defecto. Esto ejecuta la autenticación Forms por defecto. Establezca las etiquetas debajo de la etiqueta appsetings para evitar problemas.

Paso 3: Aplicando etiquetas de autorización en las acciones del controlador.
una vez que tienes habilitado la autenticación Windows en el Web.config, usar la etiqueta “[Authorize]” y especificar cuáles 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 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 Aplicación 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 características de windows.

Una vez agregado la característica anterior, ahora vamos a crear la aplicación en el IIS con la habilitación de autenticación Windows solamente.

Cargamos en administrador de IIS y agregamos aplicación con el nombre MvcTercerDia, creamos un directorio MVC_WINDOWS en donde se publicaran nuestra aplicación desde Visual Studio(esto lo veremos en el siguiente paso) .

Habilitamos la autenticación Windows en nuestra aplicación creada, seleccionando la opción Autenticación.

Paso 5: Publicando nuestra Aplicación
Una vez que haz creado la aplicación en IIS, es tiempo de publicar la aplicación a la carpeta de aplicación 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 aplicación en IIS) y le damos en publicar.

Paso 6: Ejecutar el controlador y la acción
Finalmente ejecutar el controlador y la acción(en el navegador digitarlo directamente) y ver como el cuadro de autenticación Window para el ingreso del usuario y la contraseña. Esto validará de acuerdo a la autorización que se asignó en el controlador Home.

Si las credenciales son ingresados apropiadamente, deberías ser capaz de ver lo siguiente:

Lab 14: Seguridad MVC(Forms Authentication)
En el laboratorio anterior vimos como hacer autenticación windows. La autenticación 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 opción 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 acción 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 acción “Login” del controlador “Home” y es usa el método Post. Así cuando los usuarios presionan el boton enviar, este lanzara la acción “index”.

Paso 3: Validar las credenciales.
En la acción Index la primera cosa que necesitamos hacer es verificar si el usuario es correcto o no. Por ahora tenemos en código el usuario y contraseña. 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
También necesitamos usar el atributo “[Authorize]” dentro los controladores, los cuales queremos restringir para los usuarios no autorizados.

Por ejemplo se puede ver el siguiente código para la acción “Index” del controlador “Home” que esta decorada con el atributo “Authorize”.

Si cualquier usuario no autorizado, accede directamente a cualquiera de estos controladores ellos serán enviados a la vista Login es decir detrás 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 código de abajo es la propiedad “LoginUrl”.

Paso 6: Vemos la acción en Autenticación Forms.
Si ahora llamas a index este directamente se muestra la vista Login, este test prueba que la autenticación “Forms” esta trabajando.

¿Que hay para el cuarto día?
En el cuarto dia veremos una introducción a Jquery, Json, Controlador Asíncrono y diferencia entre variables Viewdata y Tempdata, Viewbag y Session.