Published articles on other web sites*

Published articles on other web sites*

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.









imageimageimage

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

image

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










imageimage





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


image



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!


image



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


image





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

image

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)










image







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










image


image


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

Recursos



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

Mostrando información en un Grid - http://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

No comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...