Reto Razor: Acceso a Bases de Datos y Helpers Sociales

En nuestro primer reto de Razor vimos cómo empezar a manejarnos con la sintaxis y a consecuencia del reto de crear un formulario aprendimos a dar los pasos básicos con WebMatrix, en este segundo reto de webmatrix aprenderemos a trabajar con bases de datos y algún helper.

¡Herramientas!

Como es habitual, para seguir el laboratorio y hacer el reto que os proponemos, necesitaras algunas herramientas, nada muy complicado, pero sin ellas va a ser difícil que lo sigas! :)

WebMatrix . WebMatrix es un pack de herramientas en una única descarga… editor, base de datos, servidor Web… que vale tanto para desarrollar, como para descargar e instalar conocidos paquetes web (Wordpress, Joomla, motores de blog, screwturnwiki…)

 

Si surge cualquier duda o complicación durante el reto, no dudes en añadir un comentario un este post o comentárnoslo por twitter a @esmsdn o en el hashtag #retosmsdn

Bases de datos con SQL Compact

WebMatrix incorpora entre otras Herramientas SQL Compact, una versión de SQL Server que corre en el propio proceso, muy sencilla de utilizar y mantener. Desde la propia herramienta de webmatrix, en la pestaña databases podemos crear una nueva base de datos, tablas… para utilizar en nuestra aplicación.

Para este artículo, vamos a crear una tabla de contactos, donde indicaremos el id del contacto, nombre y apellidos y twitter ( así podemos reaprovechar el formulario creado en el reto anterior ). Creamos una nueva tabla con el botón derecho y vamos añadiéndole las diferentes columnas

Con esta información es suficiente, al guardar, nos pedirá un nombre para la tabla, en mi caso la he llamado TablaContactos, también aprovecho para renombrar la Base de datos (el .sdf) a Contactos.sdf

Para cargar algo de información previa, podemos hacer click en el botón de Data

Conectar con la Base de Datos

Tenemos el formulario que recoge la información preparada del reto anterior, solo queda almacenar esa información en base de datos. Vamos a mostrar cómo se conecta con el Servidor y cómo se realiza una sentencia select, pero enlazarlo con el formulario, hacer las insert… es parte del reto!

Notas:

• El método Open añade el .sdf al nombre que le pasamos y busca el archivo en la carpeta App_Data
• Podríamos conectar con cualquier otra base de datos utilizando un Connection String tradicional
• La variable fila tendrá las mismas propiedades que las columnas que hayamos consultado
• Lo he mostrado en etiquetas de <p> … pero también hay un control/helper con la funcionalidad de grid, el WebGrid

Helpers

A los helpers podemos considerarlos componentes, son una forma de encapsular funcionalidad para luego reutilizarla e incorporarla en diversas páginas con solo una línea de código. Hay una serie de Helpers/componentes que vienen instalados por defecto, en este enlace podéis encontrar la referencia completa.

Instalar/Habilitar los helpers

Para poder utilizar los helpers, hay que habilitarlos/instalarlos, para ello nos dirigimos a la pestaña de Site y hacemos click en ASP.NET Web Pages Administration

Tras crear una contraseña para poder acceder a la administración, borrar el guión bajo ‘_’ del archivo Password.config y entrar, estamos en disposición de seleccionar qué helpers queremos instalar en nuestro Site.

Al buscar por “Twitter” en la herramienta, encuentro que hay un paquete de Helpers que incluye la funcionalidad que busco, hago click en Install

Una vez instalado, de vuelta en el editor de código, ya tendremos acceso a los helpers =)

Nota: Es fácil crearte tu propio helper para encapsular funcionalidad, pero para este reto, vamos a pediros únicamente que experimentéis con ellos, concretamente incluyendo alguna funcionalidad del helper de Twitter o del WebGrid en la aplicación.

Tu turno… ¡el Reto! – Completa los huecos

Hemos visto diferentes piezas, pero falta unir los puntos!

1- El formulario tiene que conectar con la base de datos para almacenar y recuperar  información  Pista: Nahhhhh no te hace falta ;)

2- Experimenta con los Helpers, de modo que nuestra página web quede con alguno de estos aspectos

Opcion A: Usamos el webgrid, ajustamos el nombre de las columnas y el formato de una de ellas (cursiva)

Opción B

Además de lo anterior, creamos una nueva página, de modo que al hacer click en el twitter de un usuario, vayamos a un página donde se muestra su timeline

En breve… la solución en este mismo post :)

Recursos

Trabajando con Datos en WebMatrix/Razor - https://www.asp.net/webmatrix/tutorials/5-working-with-data

Mostrando información en un Grid - https://www.asp.net/webmatrix/tutorials/6-displaying-data-in-a-grid

Esperamos que con este reto hayáis tenido la oportunidad de trastear un poco más tanto en la sintaxis razor, como en WebMatrix como herramienta, aunque solo hemos visto un par de funcionalidades! Falta toda la parte de desplegar directamente a un hoster, utilizarla para configurar portales opensource, optimizar el SEO de un sitio… pequeña pero matona :)

Happy Hacking!

David Salgado – @davidsb – Technology Evangelist