TUT: Aprender ASP .NET MVC Paso a Paso en 7 días(Día 6)

¿Que hicimos en los últimos 5 días?

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

• Dia 1: Controladores, vistas fuertemente tipadas y clases helper
• Dia 2: Testeo unitario, ruteo de URL saliente 
• Dia 3: Vistas parciales, anotaciones de datos, Razor, Autenticacion y Autorizacion 
• Dia 4: JSON, JQuery, administrador de sesiones y controladores asíncronos
• Dia 5: Empaquetamiento, Minificacion , ViewModel , Manejo de excepciones y Areas

¿Cuál es la agenda para este dia 6?

Para el día 6 tenemos 5 grandes laboratorios:.

• Lab 22: Modos de Visualización(MVC para móviles).- Soporte móvil usando la característica “DisplayMode”
• Lab 23: Proveedor MVC OAuth.- Integrar la aplicación 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: Diseño Razor.- Sintaxis Razor
• Lab 26: Métodos de ayuda Html Personalizado.- Creando tu propio motor de vista personalizado.
• ¿Que hay para el último día?

Lab 22: Modos de Visualización(MVC para móviles)

Introducción

Este es un mundo de pequeños dispositivos es decir móviles. 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 móviles tienen una alta variación en tamaño.

Si nos gustaría crear diferentes pantallas para escritorio y diferentes pantallas para móviles. Por ejemplo creariamos “Home.aspx” para escritorio normal y “Home.mobile.aspx” para móvil. Si MVC puede automáticamente detectar el tipo de dispositivo y redireccionar a la página apropiada esto salvaría mucho trabajo. Esto es automatizado usando “MVC Display Mode”.

Cuando cualquier solicitud HTTP llega a la aplicación web esta solicitud HTTP tiene un valor llamado “User Agent”. Este valor “User Agent” es usado por el modo de visualización 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 móviles. Adicionalmente en esta vista se debe introducir un texto  identificativo por ejemplo:”Este es para Pantallas Pequeñas Móviles”.

También vamos agregar un controlador llamado ”Inicio” en cual invocará a la vista “index”.

Nota: Puedes  ver en el siguiente código 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 visualización MVC hace honor a su promesa.

Ahora si vas e ingresar el controlador y la acción en el navegador verás como la imagen izquierda de abajo. Si ingresas el mismo controlador y acción usando el emulador de móviles android tu verás la pantalla de la imagen derecha.

Nota: Para probar simulación para móviles en este laboratorio hemos usado el simulador “Opera Mobile”. Tu puedes descargar el emulador de http://www.opera.com/es/developer/mobile-emulator

Paso 03: Más personalización y control

Pero que si queremos más personalización y control.

Si el escritorio muestra “Index.cshtml”

Si el móvil muestra “Index.mobile.cshtml”

Si el móvil Android muestra “Index.Android.cshtml”

Tenemos ya implementado las primeras dos condiciones. Ahora para la tercera condición necesitamos realizar algunos pasos extras. Relajate son absolutamente pequeños y fáciles 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 más 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 colección “Modes” como se muestra en el código  de abajo. El siguiente código busca para la cadena “Android” y si encuentra esto captura y redirecciona a la página “Index.Android.cshtml”.

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 más procesos aburridos para  un usuario final es registrase en un sitio. Algunas veces esos largos formularios y correos de validación sólo posterga el usuario. Entonces cómo hacer las cosas fáciles mediante la validación de los usuarios 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 aplicación y obtener el ID y Clave.
• Realizar la autenticación con el sitio de terceros.
• Una vez autenticado hace navegar el sitio.

Paso 1: Registrar la aplicación y obtener el ID y la Clave

Entonces el primer paso es registrar la aplicación con el sitio de terceros. Para este laboratorio usaremos Google para la autenticación abierta. Por favor nota este paso varía para Twitter, Facebook y otros sitios. Ir a https://console.developers.google.com/ , crear un proyecto

Seleccionar el proyecto y en la columna lateral izquierda la opcion Credentials

En el siguiente apartado especificamos el tipo de aplicación, en nuestro caso una aplicación web e indicamos que la URL es http://localhost.

Pulsamos el botón “Create Cliend ID”  y nos llevará al panel de control donde podremos ver el API Key generado que tendremos que configurar más adelante en nuestra aplicación.

Paso 2: Crear un sitio MVC para autenticación con OAuth

Ahora que tenemos el ID sigamos adelante y crear una Aplicación de Internet. Estamos creando una aplicación 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”.

En este archivo de configuración encontrarás el método “RegisterAuth”, lo habilitamos para GoogleCliente.

Paso 3: Iniciar el navegador

Esto es todo lo que hay que hacer, ahora ejecutar la aplicación y dar click en “Iniciar Sesion”

La siguiente pantalla presenta dos opciones, en el lado izquierdo donde puedes loguearte de forma local usando la autenticación “Forms” y en la derecha dispones de proveedor de terceros. Clickear en el botón Google e ingresar las credenciales de la cuenta.

Lab 24: Enlazador de Modelo MVC

Introducción

El siguiente código es un simple formulario HTML hace un post a “SubmitCustomer”

La acción “SubmitCustomer” esta dentro de un objeto Customer. Este objeto “Customer” es producido automáticamente con los datos que son llenados en los cuadros de texto, sin ningún tipo de unión o asignaciones.

¿Conoces porque el objeto Customer llena automáticamente?. 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.

Model binder mapea los elementos HTML del formulario al modelo. Este actúa 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 acción en el controlador “Customer” porque no podemos invocar directamente a un vista en MVC, necesitamos hacerlo vía 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.

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 código puedes ver como hemos escrito el código de mapeo dentro del método “BindModel”.

Paso 4: Conectar el mapeador con la acción

Ahora que tenemos en conector, tenemos la UI HTML entonces es tiempo de conectarlos. miramos en la acción “SubmitCustomer” del siguiente código.

el atributo “ModelBinder”  conecta con el objeto “Customer”.

Paso 5: Disfruta la salida

Ahora al ingresar la acción “EnterCustomer” el cual incova formulario de entrada de Customer.

Cuando llenas los datos y haces click en el botón Enviar, veras que se llena el objeto “Customer” con un punto de interrupción, con en la siguiente imagen.

Lab 25: Diseño  Razor

Introducción

Layouts son como paginas maestras en ASP.NET web form. Páginas Maestras dan como un aspecto estándar para las vistas Web Form(ASPX) mientras que layout dan  una vista estándar para las vistas Razor(CSHTML). En caso seas nuevo en Razor ver el Lab 12: Vistas Razor MVC.

En este laboratorio veras como implementar  Diseño Razor.

Paso 1: Crear una página de diseño

Lo primero que nosotros necesitamos crear es una pagina de diseño. Dentro de nuestro proyecto web MVCSextoDia, vamos a la carpeta vista y hacemos click derecho , agregar nuevo elemento y seleccionar la plantilla “Página de Diseño de MVC 4” como se muestra en la siguiente imagen.

En la página de diseño MC necesitamos definir la estructura común el cual será aplicado a todas las páginas razor. Puedes ver en la siguiente diseño de página 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.

Paso 2: Crear vista y aplicar el diseño

Ahora una vez que hemos creado el diseño los siguiente es aplicar esto a las vista.

Para aplicar el diseño de página, seleccione el botón “...” como se muestra en la anterior imagen, y seleccione el diseño de página como se muestra en la siguiente imagen.

Una vez que la vista es creada la primera línea de código indica que diseño de página esta usando. esto se ve como el siguiente código.

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 sección y despues lo que queramos asignar en esas secciones. Todos los otros textos  son parte del body(@RenderBody).

Paso 3: Crear un controlador y ver el diseño en acción

Ahora que tenemos todo asignado es tiempo de crear un controlador y método para invocar la vista.

Deberías ver una cosa como se ve en la siguiente imagen. puedes ver como la plantilla de diseño es aplicado a la vista.

Lab 26: Métodos Personalizados HTML Helper

Introducción

En el dia 1 hablamos acerca de clases MVC Helper. Esto nos ayuda a trabajar con controles de ingresos de una manera más eficiente. Cuando tipeas “@Html” en una vista  MVC Razor se consigue algo como esto en IntelliSense.

El método 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 métodos Helper personalizados.

Para crear método Html Helper Personalizados, necesitamos usar extensión de métodos. Extensión de métodos 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 método llamado Index. Crear una nueva carpeta dentro del proyecto MVC llamado ExtensionClases.

Paso 2: Marcar la clase como estática y agregar métodos.

Para el método de extensión necesitamos agregar una clase como estática.

en este clase vamos a crear un nuevo método estático llamado “HolaMundoLabel” el cual retornará un valor de tipo MvcHtmlString y aceptando un parámetro HtmlHelper.

Nota: Asegurar agregar la palabra “this” antes de declarar el primer parámetro porque el objetivo es crear un método extensión 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 métodos de extensión de HTML Helper estén disponibles dentro de este espacio de nombres. Se requiere solo si vamos a usar uno de estos métodos de extension.

Simplemente escribimos el siguiente código en la vista y construir el proyecto.

Nota:Note que en la parte superior se asignó la sentencia using que referencia a la clase extensión creada previamente.

Construya la aplicación, presionando F5 y probar la aplicación.

¿Que hay para el último dia?

El último día será principalmente en cómo integrar los Framework JavaScript de Angular y KO con MVC.