microsoft web matrix

51
1 Presentación de Microsoft Web Matrix y guía para la instalación de la herramienta y una primera prueba de uso. Cuando alguien se inicia en una tecnología, ya sea .NET, Java, PHP, etc., siempre se enfrenta con un primer desafío en las herramientas con las que va a tener que empezar a trabajar. Cualquiera que se haya aproximado por primera vez a Java o .NET se habrá sentido al menos un poco intimidado por Eclipse o Visual Studio. Microsoft lleva tiempo intentando ofrecer herramientas sencillas que permitan a los desarrolladores iniciarse con sus tecnologías de la forma más “indolora” posible. Como fruto de este esfuerzo ha nacido WebMatrix. Introducción a WebMatrix Microsoft WebMatrix es una herramienta con la que podremos empezar a crear proyectos con ASP.NET de una forma muy sencilla, pero que también nos permitiría, para aquellos cuyo dominio actual sea PHP, trabajar con esta tecnología. Pero como no sólo de frameworks vive el desarrollador, en el capítulo de bases de datos también podremos gozar de una gran interoperabilidad, puesto que WebMatrix es capaz de manejar SQL Server Compact (un “versión” de SQL Server especialmente pensado para proyectos web), SQL Server e incluso MySQL, para que ningún desarrollador PHP eche de menos las herramientas a las que más acostumbrado está. De este modo, aquellos que empiecen a utilizar WebMatrix podrán hacerlo con las tecnologías que ya conocen y, posteriormente si están interesados en ello, crear proyectos con nuevas tecnologías sin salir del entorno que ya conocen bien. En este artículo veremos cómo instalar WebMatrix y nos familiarizaremos con la organización de la interfaz de la herramienta y la forma en que se utiliza. Instalación de WebMatrix Actualmente Microsoft ha simplificado la instalación de la mayoría de sus productos web mediante el uso de Web Platform Installer, un programa gracias al que con un par de clicks tendremos no sólo la aplicación que queramos instalar sino las dependencias de la misma. Para utilizarlo, simplemente tenemos que navegar a www.microsoft.com/web/webmatrix/download. Desde aquí hay que pulsar sobre el botón verde “Install Now” para descargarnos un pequeño instalador (apenas 85KB). Atención: Es muy importante asegurarse de que el combo de idioma de la parte superior izquierda está configurado para mostrarnos la página en English (United States). La razón es que si seleccionamos Español, nos bajará la versión 2.0 de Web Platform Installer, en lugar de 3.0 que es la que necesitamos para poder descargarnos WebMatrix. Ojo! sobre este asunto, que es de vital importancia al menos en el momento de escribir este artículo. La siguiente imagen nos muestra cómo es la pantalla y el combo que tenemos que configurar correctamente.

Upload: cblanquiv7186

Post on 14-Aug-2015

202 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Microsoft Web Matrix

1

Presentación de Microsoft Web Matrix y guía para la instalación de la

herramienta y una primera prueba de uso.

Cuando alguien se inicia en una tecnología, ya sea .NET, Java, PHP, etc., siempre se enfrenta con un

primer desafío en las herramientas con las que va a tener que empezar a trabajar. Cualquiera que se

haya aproximado por primera vez a Java o .NET se habrá sentido al menos un poco intimidado por

Eclipse o Visual Studio.

Microsoft lleva tiempo intentando ofrecer herramientas sencillas que permitan a los desarrolladores

iniciarse con sus tecnologías de la forma más “indolora” posible. Como fruto de este esfuerzo ha

nacido WebMatrix.

Introducción a WebMatrix

Microsoft WebMatrix es una herramienta con la que podremos empezar a crear proyectos con ASP.NET

de una forma muy sencilla, pero que también nos permitiría, para aquellos cuyo dominio actual sea

PHP, trabajar con esta tecnología. Pero como no sólo de frameworks vive el desarrollador, en el

capítulo de bases de datos también podremos gozar de una gran interoperabilidad, puesto que

WebMatrix es capaz de manejar SQL Server Compact (un “versión” de SQL Server especialmente

pensado para proyectos web), SQL Server e incluso MySQL, para que ningún desarrollador PHP eche

de menos las herramientas a las que más acostumbrado está.

De este modo, aquellos que empiecen a utilizar WebMatrix podrán hacerlo con las tecnologías que ya

conocen y, posteriormente si están interesados en ello, crear proyectos con nuevas tecnologías sin

salir del entorno que ya conocen bien.

En este artículo veremos cómo instalar WebMatrix y nos familiarizaremos con la organización de la

interfaz de la herramienta y la forma en que se utiliza.

Instalación de WebMatrix

Actualmente Microsoft ha simplificado la instalación de la mayoría de sus productos web mediante el

uso de Web Platform Installer, un programa gracias al que con un par de clicks tendremos no sólo la

aplicación que queramos instalar sino las dependencias de la misma. Para utilizarlo, simplemente

tenemos que navegar a www.microsoft.com/web/webmatrix/download.

Desde aquí hay que pulsar sobre el botón verde “Install Now” para descargarnos un pequeño

instalador (apenas 85KB).

Atención: Es muy importante asegurarse de que el combo de idioma de la parte superior izquierda está

configurado para mostrarnos la página en English (United States). La razón es que si seleccionamos Español, nos

bajará la versión 2.0 de Web Platform Installer, en lugar de 3.0 que es la que necesitamos para poder

descargarnos WebMatrix. Ojo! sobre este asunto, que es de vital importancia al menos en el momento de escribir

este artículo.

La siguiente imagen nos muestra cómo es la pantalla y el combo que tenemos que configurar

correctamente.

Page 2: Microsoft Web Matrix

2

Una vez que se haya bajado “Web Platform Installer” y esté funcionando, sólo tenemos que pulsar en

“Products” y, posteriormente, en el botón “Add” junto a “Microsoft WebMatrix Beta 3” para

seleccionarlo como descarga.

Page 3: Microsoft Web Matrix

3

Tras pulsar sobre el botón “Install” nos aparecerá una pantalla a modo de resumen, indicándonos las

dependencias que es necesario instalar para que WebMatrix funcione. Esto incluye, entre otros, la

base de datos SQL Server Compact o un cliente de la tecnología WebDeploy, que facilita los

despliegues. Aceptando se iniciará el proceso de instalación. Cuando termine procederemos a cerrar la

pantalla y arrancar, posteriormente, WebMatrix desde el enlace correspondiente en el menú de Inicio.

La pantalla de Web Platform Installer nos ofrece un enlace en cuyo interior podemos leer “Launch”,

que nos permitiría arrancar WebMatrix directamente desde ahí. Sin embargo, debemos tener en

cuenta que de hacerlo de esta forma, estaremos ejecutando WebMatrix con los permisos de

Administrador de la máquina (puesto que Web Platform Installer los requiere para realizar las

instalaciones que le indiquemos), lo que puede no ser nuestra intención.

Primeras pruebas

Al arrancar WebMatrix podremos elegir siempre entre cuatro opciones.

• My Sites: desde esta opción podremos acceder a los proyectos que ya hayamos creado con

anterioridad con WebMatrix.

• Site From Web Gallery: esta opción nos da acceso a poder modificar con WebMatrix muchas

de las aplicaciones web más populares, como WordPress, Umbraco, DotNetNuke, etc.

• Site From Template: podemos usar este menú si queremos crear un sitio nuevo, pero a

partir de una cierta estructura. En este menú tendremos, entre otras, plantillas para galerías

de fotos, listas de deseos, etc. También incluye un sitio “vacío”.

Page 4: Microsoft Web Matrix

4

• Site From Folder: con esta opción podremos crear un sitio web a partir del contenido de un

directorio ya existente, ideal si tenemos un proyecto ya creado con otra herramienta que

queremos mejorar con WebMatrix.

Supongamos que queremos empezar desde cero. Tendríamos que elegir la opción de “Site From

Template”, pulsar sobre “Empty Site”, darle un nombre al nuevo sitio que estamos a punto de crear y

pulsar en OK. La siguiente imagen nos indica qué campos habría que rellenar para lograrlo.

Este nuevo proyecto creará una serie de ficheros y carpetas que, en caso de buscarlas, encontraremos

alojadas en el directorio “My Web Sites”, dentro de una carpeta con el mismo nombre que le hayamos

dado al proyecto web. El directorio “My Web Sites” podemos encontrarlo en el directorio de

“Documentos” del usuario con el que estemos ejecutando la aplicación. Una vez hayamos pulsado

sobre el botón de OK la herramienta da paso a la pantalla principal de trabajo de WebMatrix.

pantalla principal del programa. WebMatrix es una herramienta con la que Microsoft tiene la intención de facilitar la vida a los

desarrolladores que quieran realizar proyectos web con ASP.NET, pero que también admite diversas

otras tecnologías. En el artículo anterior explicamos cómo se puede instalar WebMatrix y en este

artículo veremos cuáles son los componentes de la pantalla principal que nos encontraremos al

trabajar con el programa.

En la pantalla principal, tal como podemos ver en la siguiente imagen, podemos distinguir cuatro

zonas fundamentales.

Page 5: Microsoft Web Matrix

5

Banda de controles superior

En la zona superior tenemos la ya clásica “Ribbon” que viera la luz en Office 2007 y que poco a poco

se extiende por la mayoría de productos de Microsoft. En esta zona tenemos dos partes bien

diferenciadas: a la izquierda se sitúan controles para manejar el servidor web IIS que lleva en su

interior WebMatrix. Podemos, por tanto, desplegar, arrancar, parar, etc., nuestros proyectos web.

A la derecha de la primera línea vertical de división se sitúan controles que son “sensibles” al

contexto. Esto quiere decir que, en función del espacio de trabajo que estemos usando en ese

momento en WebMatrix, aparecerán distintos conjuntos de botones que nos faciliten acciones

únicamente relacionadas con ese espacio de trabajo. Por ejemplo, cuando tengamos seleccionado el

espacio de trabajo de Ficheros, los botones nos permitirán acciones como crear uno nuevo, guardar,

abrir, etc.; en cambio, con el espacio de trabajo de bases de datos, los botones nos ofrecerán crear

una nueva base de datos, ejecutar una consulta, etc.

Espacios de trabajo de la aplicación

En la parte inferior izquierda podemos seleccionar entre los diferentes espacios de trabajo de la

aplicación. WebMatrix es una herramienta que pretende abarcar todas las funciones que un desarrollo

web tiene que realizar para poner una aplicación web en producción. Para mantener un conjunto de

funcionalidades tan dispar accesible y organizado, los espacios de trabajo permiten mostrar y ocultar

botones y menús en función del tipo de trabajo que queramos realizar en ese momento con el

proyecto.

Existen cuatro espacios de trabajo para elegir:

Page 6: Microsoft Web Matrix

6

• Site: este espacio de trabajo nos da acceso a funciones generales del sitio, como establecer

una nueva configuración de despliegue, investigar las peticiones que se han realizado a

nuestro sitio alojado en el IIS embebido en WebMatrix, configurar la ruta virtual de la

aplicación, etc.

• Files: este espacio de trabajo sirve para gestionar los ficheros que componen nuestro

proyecto, incluida su edición. Desde aquí haremos buena parte del trabajo de desarrollo, como

son editar y modificar nuestro código, crear carpetas, etc.

• Databases: este espacio de trabajo nos permite manejar las bases de datos sobre las que

van a correr nuestros sitios web. Desde aquí será posible crear nuevas bases de datos, nuevas

tablas, añadir datos, consultarlos, etc.

• Reports: desde este espacio de trabajo podremos realizar funciones de SEO sobre nuestros

sitios web, con el objetivo de mejorar su posicionamiento y su amigabilidad hacia los

buscadores web.

Pulsar en cada uno de estos espacios de trabajo hará que la funcionalidad que nos ofrece la pantalla

principal cambie.

Elementos del proyecto

En la parte izquierda de la ventana, sobre la selección de espacios de trabajo del proyecto, podemos

comprobar de qué elementos se compone nuestro sitio. Esta zona es sensible al espacio de trabajo

elegido, con lo que, cuando tengamos seleccionado el espacio de trabajo de ficheros, podremos ver

qué archivos y carpetas componen el proyecto. En cambio, al pulsar sobre bases de datos, nos

aparecerán las tablas, conexiones, etc., que hemos definido hasta ese momento.

Page 7: Microsoft Web Matrix

7

Zona central

La zona central es la zona de trabajo. Cuando abramos un elemento del proyecto, será en esta zona

donde se cargará para que podamos interactuar con él. En esta zona se nos cargará, por ejemplo, el

editor de código que nos permite modificar ficheros ASP, ASP.NET. PHP, HTML, JavaScript y CSS.

También aquí podremos interactuar con nuestras base de datos, obteniendo tanto resultados de

consultas ejecutadas contra ellas, como introduciendo nuevas tuplas en ellas.

Conclusión de la presentación de WebMatrix

Hasta el momento hemos tratado simplemente de presentar las características principales de esta

herramienta de Microsoft. Hemos visto cómo instalar WebMatrix, cómo crear un primer proyecto y

cómo está organizada la ventana principal sobre la que se realiza la mayor parte del trabajo. A partir

de ahora nos será más sencillo ir aprendiendo las distintas posibilidades que WebMatrix nos ofrece

para cada uno de los distintos “roles” que un desarrollador web termina asumiendo cuando crea un

proyecto web: un poco de administrador del servidor web, un poco de administrador de bases de

datos, algo de SEO… y mucho de programador.

En sucesivos artículos continuaremos hablando sobre esta herramienta y cómo utilizarla para hacer

proyectos web.

Enlaces de referencia sobre WebMatrix

Antes de terminar esta introducción a WebMatrix queremos ofrecer algunos enlaces donde los

interesados pueden obtener más información, directamente de los sitios de Microsoft.

Centro de desarrollo ASP.NET: http://msdn.microsoft.com/es-es/asp.net/default.aspx

Sitio Oficial de WebMatrix: http://www.microsoft.com/web/webmatrix/

Descarga de WebMatrix: www.microsoft.com/web/webmatrix/download

Iniciamos las explicaciones sobre Razor, una de las sintaxis con las que

podemos crear aplicaciones web con la herramienta WebMatrix de

Microsoft. Después de haber hablado sobre WebMatrix en anteriores entregas del Manual de WebMatrix, vamos a

comenzar a poner manos en la masa y ver cómo se crearían aplicaciones web con esta herramienta.

Pero antes queremos comenzar explicando una sintaxis que utilizaremos en nuestro día a día, llamada

Razor, que quizás el lector no conozca todavía.

Page 8: Microsoft Web Matrix

8

Este es el primero de tres artículos que van a tratar de dar a conocer una de las sintaxis que se utiliza

para crear aplicaciones web en WebMatrix. Su nombre es Razor y, originalmente, nació como opción

para programar aplicaciones web en ASP.NET MVC 3.

Motor de Vistas

Razor no es en realidad un lenguaje de programación, sino simplemente un motor de vistas. ¿Qué

significa esto? Básicamente, hay que analizar qué significan las siglas MVC: corresponden al término

Modelo-Vista-Controlador, forma en que se denomina a uno de los patrones de arquitectura más

populares. En MVC se pretende separar completamente la información que gestiona nuestra aplicación

(el Modelo) de la forma en que se presenta (la Vista), desacoplando ambas capas mediante una capa

intermedia (el Controlador) que contendrá toda la lógica para trasladar los datos a la presentación

visual que deseamos realizar.

ASP.NET MVC 3 respeta firmemente estos principios, hasta el punto de existir varias sintaxis con las

que expresar de qué modo queremos crear nuestra vista, siendo 100% reutilizables tanto los

controladores como los modelos que tengamos por debajo. De este modo han ido naciendo distintos

motores de vistas, como Razor, que nos permiten crear dichas vistas de la forma en que nos sintamos

más cómodos.

Objetivos de Razor

Son varios los objetivos que Microsoft se ha marcado en la creación de este motor de vistas, entre los

que destacaríamos:

• Compacto, expresivo y fluido: buscan reducir la cantidad de código que necesitamos para

crear las vistas, evitando que tengamos que denotar de una forma especial cada línea de

código procedural. El compilador será lo suficientemente inteligente como para inferir, en

muchas ocasiones, qué tipo de código estamos escribiendo.

• Fácil de aprender: aunque esto es siempre relativo, puesto que depende del bagaje previo

del desarrollador y de sus capacidades, con sólo este artículo y los dos próximos dejaremos

asentados conceptos lo suficientemente amplios como para hacer frente al 80% de la

funcionalidad que podamos necesitar de Razor.

• Funciona en cualquier editor de texto, luego no vamos a tener que estar anclados a Visual

Studio, WebMatrix o cualquier otra herramienta para crear nuestros ficheros Razor.

Obviamente, el soporte al lenguaje es superior en una herramienta como Visual Studio, donde

tendremos toda la potencia de IntelliSense a nuestro alcance, que si editamos simplemente

con el Block de Notas, pero la decisión última será nuestra.

• Testeable: podremos crear tests unitarios de las vistas.

El Hola Mundo con Razor

Vamos a hacer nuestro primer y clásico “Hola Mundo” con Razor. Para ello, nos vamos a apoyar en

WebMatrix. En un artículo anterior vimos cómo podemos crear un proyecto vacío. Para añadir un

fichero a este proyecto tenemos que situarnos en el espacio de trabajo de “Files” y, posteriormente,

pulsar el botón “New” en la barra de botones superior. Al pulsar “New” se nos desplegarán dos

opciones bajo él: “New File…” y “New Folder”. Elegimos la primera puesto que sólo queremos añadir

un fichero. Veremos entonces aparecer una pantalla como la siguiente:

Page 9: Microsoft Web Matrix

9

En esta pantalla simplemente tenemos que darle un nombre al nuevo fichero (algo como

“HolaMundo.cshtml” y después de aceptar, en el fichero que nos aparecerá listo para editar, sustituir

el HTML que nos crea por defecto por algo parecido a esto:

@{ var nombre = "Pedro"; } <html> <body> <h2>Hola @nombre, son las @DateTime.Now</h2> </body> </html>

Este ejemplo es algo más complejo que el clásico “Hola Mundo”, pero nos permitirá analizar unos

cuantos detalles fundamentales de Razor.

En primer lugar, como se puede ver, es posible mezclar código procedural y código HTML de forma

sencilla y sin tener que recurrir a montones de secuencias “<%” como ocurre en ASP.NET clásico, o

cualquiera que sea el carácter de “escape” que se utilice en el lenguaje al que uno esté acostumbrado.

Aquí, con una simple @, el compilador de Razor será capaz de interpretar que estamos describiendo

código procedural, ejecutable en el servidor en el momento de mandar la página al navegador bajo

solicitud, en lugar de HTML puro tratable como simple texto. En este ejemplo vemos dos apariciones

de esta @ con la que nos iremos familiarizando cada vez más:

• En la primera llamada, “@nombre”, estamos haciendo referencia a una variable. Esta variable

está definida en la zona superior del código. Esta definición es código C#. Este detalle es

Page 10: Microsoft Web Matrix

10

importante: en Razor todo el código que no es HTML (es decir, el código procedural) se puede

programar en C# y en VB.NET a día de hoy.

• En esta primera llamada, en el código procedural, le hemos dado un valor a la variable

nombre, una cadena de texto que contiene el nombre propio “Pedro”.

• En la segunda llamada, “@DateTime.Now”, estamos haciendo uso de la propiedad de un

objeto para obtener la fecha actual. Veremos más adelante qué significa esto.

El resultado de este bloque de información sería una página “dinámica”, puesto con cada nueva

recarga de la misma obtendremos un saludo con la fecha en este instante. La siguiente imagen nos

muestra el resultado.

Conclusiones

Hemos aprendido que Razor es un motor de vistas, hemos desgranado sus objetivos y hemos hecho

un primer ejemplo, el clásico “Hola Mundo” pero con algo más de funcionalidad. En los próximos dos

artículos analizaremos más en profundidad los aspectos fundamentales del lenguaje, como la

definición de clases, objetos, variables, tipos de datos, bucles, etc

sintaxis Razor Estamos aprendiendo acerca del desarrollo de aplicaciones con WebMatrix y dedicando nuestros

esfuerzos en estos momentos a aprender Razor.

En el primer artículo sobre esta serie de tres dedicada a Razor conocimos que la denominación más

correcta para Razor es la de “motor de vistas”, descubrimos los objetivos que busca su creación y

aprendimos a crear el clásico “Hola Mundo”. En este artículo empezaremos a desgranar de forma

individual los aspectos fundamentales de Razor.

Los caracteres especiales: @, { } y ;

Hay tres caracteres fundamentales para Razor: la arroba (“@”), las llaves (“{ }”) y el punto y coma

(“;”). En cuanto a la arroba, nos permite introducir fragmentos de código a ejecutar en el lado del

Page 11: Microsoft Web Matrix

11

servidor. Con este carácter podemos introducir sentencias “inline” y sentencias compuestas por una o

más líneas de código. Ejemplos de cada uno de estos tipos serían:

<h1>Sentencia inline: Son las @DateTime.Now</h1> @{ var cadena = "Esto es una sentencia de una sola linea"; } @{ var otraCadena = "Esto es una sentencia"; otraCadena = otraCadena + "en multiples lineas"; }

En este ejemplo podemos ver ya la participación de los otros dos caracteres especiales: el punto y

coma y las llaves. En el caso del punto y coma, sirve para terminar cualquier sentencia que no sea

“inline”. Las llaves, por su parte, sirven para definir bloques de código, compuestos por una o más

líneas. Cualquiera que haya trabajado con lenguajes cuya sintaxis derive del lenguaje C encontrará

tremendamente familiares estas reglas.

Clases y Objetos

Toda la plataforma .NET está orientada a objetos y Razor no iba a ser una excepción. Cuando

programemos con WebMatrix y hagamos uso de Razor tendremos que usar clases y objetos. No es el

objetivo de este artículo explicar la Programación Orientada a Objetos, campo suficientemente amplio

como para haber inspirado centenares de libros en los últimos 25 años. Sin embargo, una explicación

lo más ligera y sencilla posible no vendrá mal para quienes se aproximen por primera vez a este

concepto.

En la POO tenemos la noción de “Clase” como una forma de representar un concepto del mundo real.

La clase, por tanto, va a definir comportamientos y propiedades compartidas por todos aquellos que

forman parte de él. Trasladando esto al mundo real, podríamos decir que “Perro” es una clase. Todos

aquellos que forman parte de esta clase Perro compartirán en común comportamientos como correr,

comer o ladrar, y propiedades como el color, el peso o la edad.

Un objeto es una instanciación concreta de una clase. Es decir, es tomar ese molde o patrón que es la

clase para crear un elemento concreto. En el mundo real esto lo podríamos traducir como “mi perro”,

“el perro del vecino” o “el perro de la esquina”. Todos ellos pertenecen a un mismo género, la clase

“Perro”, y todos ellos van a correr, comer y ladrar, pero tendrán valores distintos para sus

propiedades, unos serán blancos, otros más delgados, etc.

Hecho este minimalista esbozo de la relación entre clases y objetos, en Razor vamos a tener a nuestra

disposición la programación con clases y objetos. En el ejemplo del “Hola Mundo” descrito en el

artículo anterior, vimos cómo, accediendo a la propiedad “Now” del objeto DateTime, obteníamos la

fecha actual. No será, sin embargo, la única clase y objeto con la que nos iremos familiarizando

conforme nos adentremos en la programación con Razor.

Veremos más adelante como existen clases para gestionar la base de datos, clases para comunicarnos

con servicios web tan conocidos como Twitter o Facebook, clases para gestionar la seguridad, etc. Y

todas estas clases las instanciaremos en objetos concretos antes de hacer uso de ellas; es decir, antes

de invocar a sus métodos. Por ahora es suficiente con conocer esta relación entre clases, objetos,

propiedades y métodos.

Variables y Cadenas

Las variables nos van a servir para almacenar información. En Razor podemos elegir entre crearlas

como “var” para no tener que darles un tipo, o bien indicarles explícitamente dicho tipo, ya sea “int”

Page 12: Microsoft Web Matrix

12

para enteros, “string” para cadenas de texto, “decimal” para números decimales, etc. Es importante

reseñar que los nombres que les demos a las variables son sensibles a mayúsculas. Es decir, no será

lo mismo una variable “tabla” que una variable “Tabla” o “TABLA”. Esto es, en realidad, porque toda la

sintaxis de Razor es sensible a mayúsculas, por lo que tampoco podríamos definir una variable como

“INT variable”. Veamos algunos ejemplos:

@{ // Declaración de variables con y sin tipo var variableSinTipo = 5; int variableConTipo = 5; int variableCONTIPO = 6; // diferente a la anterior }

En cuanto a las cadenas, se definen utilizando el carácter comillas dobles, como suele ser habitual. En

caso de necesitar escapar un carácter especial, la forma de fácil es utilizar el carácter @. Ojo, no

debemos confundir este carácter @ con el otro carácter @ del que hemos estado hablando hasta

ahora y que sirve para definir fragmentos de código en Razor. Unos ejemplos a continuación:

@{ // Declaracion de cadenas var cadena = "Esto es una cadena estandar"; var cadenaBackslash = @"Cadena con backslash \"; var cadenaComillas = @"Cadena con ""comillas"""; }

toma de decisiones, ejecución de bucles y el uso de colecciones de valores.

Toma de decisiones en Razor

Existen varios operadores en Razor tanto para definir distintos flujos de ejecución en función de una

condición lógica. Existe un tipo concreto conocido como “bool” que nos sirve para definir variables que

sólo podrán contener uno de estos dos valores: verdadero o falso. En el siguiente fragmento de código

podemos ver un ejemplo:

@{ bool resultado = miObjeto.HaSidoExitoso(); if (resultado == true) { <h1>Ha salido bien.</h1> } else { <h1>Ha fallado.</h1> } }

Analicemos el fragmento. En primer lugar recogemos en la variable “resultado” lo que nos devuelve el

método “HaSidoExitoso” de un objeto “miObjeto”. Este resultado, al estar almacenado en una variable

booleana, sólo puede ser verdadero o falso.

A partir de ahí, utilizando el operador de decisión if/else, podemos mostrar en el HTML final dos

posibles mensajes: uno si el resultado ha sido exitoso (valor “true”) y otro si el resultado ha fallado

(valor contrario, “false”).

Page 13: Microsoft Web Matrix

13

Existe otro operador de decisión, llamado switch, que nos facilitar trabajar con rangos de opciones.

Por ejemplo, si el valor de un resultado es un entero de entre 1 y 3, y queremos ejecutar sentencias

distintas para cada caso, podríamos definir tres etiquetas “case” para cada uno de esos tres valores. El

siguiente ejemplo nos aclara cómo hacerlo.

@{ int resultado = miObjeto.OtroMetodo(); switch (resultado) { case 1: // Codigo para el resultado igual a 1 break; case 2: // Codigo para el resultado igual a 2 break; case 3: // Codigo para el resultado igual a 3 break; default: // Codigo para resultado distinto de 1, 2 y 3 break; } }

Como vemos, por cada posible valor del resultado definimos una etiqueta case con el valor que aplica.

Estas etiquetas se cierran con la instrucción break y contendrán todas las instrucciones que queremos

ejecutar para ese caso. En el ejemplo, sin embargo, nos hemos limitado a definir unos cuantos

comentarios (que nunca aparecerán en el HTML devuelto al cliente, al igual que todo el código que se

ejecuta en el servidor).

Por último, la etiqueta “default” nos sirve para definir un caso por defecto en caso de que el valor de

la variable sobre la que se ejecuta el switch, sea distinto a todos los considerados. Suele servir, en la

mayoría de casos, para realizar control de errores.

Bucles y colecciones en la sintaxis de Razor

En cuanto a los bucles, en un artículo anterior hablábamos sobre clases y objetos. Vamos a introducir

un nuevo concepto: las colecciones. No son más que lo que su propio nombre indica, colecciones u

estructuras de datos que contienen múltiples objetos de un mismo tipo. Es decir, que una colección

podrá serlo de enteros, de booleanos, de cadenas de texto, pero no podrá serlo de varios tipos a la

vez.

Será frecuente que queramos ejecutar instrucciones repetidas sobre todos los objetos que forman

parte de una colección. Por ejemplo, si el resultado de un método es una colección de enteros con las

edades de los usuarios de una página y queremos mostrar por pantalla dichos valores, lo más práctico

es iterar por esta colección de elementos y, para cada uno, generar el mismo fragmento HTML para

visualizar su valor por pantalla. El operador principal para lograr esto es “for”. Veamos un ejemplo:

@{ int[] coleccion = new int[] { 1, 2, 3, 4 }; for (int i=0; i<coleccion.Length; i++) { <h1>Numero @coleccion[i]</h1> } }

Page 14: Microsoft Web Matrix

14

Como se puede ver en el código, en primer lugar se define una colección de enteros del 1 al 4. Esto se

hace creando una variable “colección” cuyo tipo será “int[]”. Es importante indicar que, en C# (y por

ende en Razor), podemos crear una colección o array de cualquier tipo situando los caracteres [] tras

el tipo, como en este ejemplo.

Una vez creada la colección, la recorreremos con el operador for. Para ello, necesitamos una variable

contador, que nos permite saber en qué posición de la colección nos encontramos. Desde los tiempos

de C, 40 años atrás, i ha sido el nombre más popular para este tipo de variables (seguido de j, k, l,

etc.), así que sigamos la tradición.

Una vez definida la variable, tenemos que indicar el límite del bucle con una sentencia lógica. En este

caso estamos accediendo a la propiedad “Length” de la colección (no olvidemos que todo son objetos

y los objetos tienen propiedades con valores que les definen, como el número de elementos en este

caso).

La última cláusula sirve para indicar cuantos avances queremos en nuestra variable contadora al

finalizar cada iteración del bucle (el operador ++ nos sirve para indicarle que sólo uno). Resumiendo,

el bucle entero se leería, en lenguaje natural, así:

“Define una variable contador i con valor inicial 0, que no puede ser mayor que el número de

elementos de la colección, y que avanza una posición en cada iteración”

Posteriormente, con el bloque de llaves definimos el código que queremos ejecutar en cada iteración

del bucle. En este caso lo que estamos haciendo es, para cada iteración, acceder a un elemento de la

colección. Para ello utilizamos la sintaxis siguiente:

Nombre_Variable_Coleccion[Variable_Contador];

Con esta sintaxis lo que estamos haciendo es acceder a un de los elementos que compone la

colección; en concreto, al elemento que ocupa la posición representada por el valor de la variable

contador. Como es habitual, el primero de los elementos de la colección ocupa la posición 0. El

resultado del fragmento de código que hemos visto sería una imagen parecida a la siguiente.

Page 15: Microsoft Web Matrix

15

Existen otros operadores de bucle, como While y Foreach, que dejaremos para investigación del lector

en los enlaces que se proveen en la sección de Bibliografía.

estructurar un proyecto web desarrollado con la herramienta WebMatrix.

Estructurar el aspecto

Hoy en día cualquier sitio web se estructura de una forma más compleja que simples páginas

enlazadas las unas a las otras. Como mínimo, en la mayoría de sitios nos encontramos con una

cabecera y un pie compartido por cada página, formando una estructura estática sobre la que se van

mostrando los contenidos del sitio.

Como no podía ser de otro modo, WebMatrix nos ofrece la posibilidad de recrear estas estructuras, por

complejas que sean. A continuación vamos a crear una bastante común: una página “maestra”, una

página de cabecera y otra de pie. Partiendo de un proyecto vacío (en un artículo anterior se vio cómo

crearlos), vamos a ver cómo hacerlo.

Crear la cabecera y el pie:

Para empezar, nos situaremos sobre el espacio de trabajo de “Files” en WebMatrix. Sobre el menú de

espacios de trabajo veremos la estructura de nuestro proyecto. Siendo como es éste un proyecto

vacío, sólo aparecerá el nombre del mismo.

Con el botón derecho del ratón haremos aparecer el menú contextual, en el que elegiremos la opción

de “New Folder”. A este nuevo directorio le vamos a dar el nombre de “Compartido”, puesto que los

contenidos que en él introduzcamos van a ser compartidos por todo el sitio web.

Cuando lo hayamos hecho, de nuevo con el menú contextual añadiremos un nuevo fichero con la

opción “New File”. Nos aparecerá un cuadro de diálogo similar al que podemos ver en la siguiente

Page 16: Microsoft Web Matrix

16

imagen. Elegiremos “CSHTML” como tipo de fichero, que es el que corresponde a los ficheros HTML

con sintaxis Razor en C#. El nombre que le daremos a este nuevo fichero será “_Cabecera.cshtml”.

Nombrar al fichero con un signo ‘_’ delante no es casual. En WebMatrix, los ficheros con ese signo

como prefijo no se pueden navegar directamente. Es decir, estos ficheros sólo podrán visualizarse si

se cargan como parte de otros ficheros que no tengan ese prefijo.

Del nuevo fichero HTML borraremos todo el código y simplemente escribiremos lo siguiente:

<div>Esto es la cabecera</div>

Repetiremos la operación para añadir un fichero “_Pie.html”, que contendrá el siguiente fragmento

HTML:

<div>Esto es el pie</div>

Ahora que tenemos la cabecera y el pie estamos listos para crear nuestra página maestra. Añadimos

un nuevo fichero a la carpeta “Compartido” de nombre “_Maestra.cshtml”. El código de esta nueva

página será el siguiente:

<!DOCTYPE html> <head> <title> Titulo de la pagina </title> </head> <body> @RenderPage("/Compartido/_Cabecera.cshtml") <div id="main"> @RenderBody() </div> @RenderPage("/Compartido/_Pie.cshtml") </body> </html>

Page 17: Microsoft Web Matrix

17

Analicemos este fragmento de código. Puesto que va a ser la página contenedora de todas las demás,

es necesario que defina las etiquetas html, head y body. En el interior del cuerpo estamos cargando el

contenido de las páginas Cabecera y Pie que hemos creado anteriormente, utilizando el comando

RenderPage, que como se puede deducir por su nombre permite renderizar una página como un

fragmento HTML dentro de otra.

Nos quedan dos pasos para poder ver el resultado: crear una página de contenido y enlazar en ella a

la página maestra que acabamos de definir. Añadimos un nuevo fichero MiPrimerContenido.cshtml.

Destacar que no vamos a ponerle el signo ‘_’ como prefijo, puesto que esta página sí será navegable.

En el interior de esta nueva página, algo tan simple como esto:

@{ Layout = "/Compartido/_Maestra.cshtml";} <div>Esto es el contenido principal</div>

Si tenemos abierta la página MiPrimerContenido.cshtml, podemos navegar directamente a ella

pulsando el botón “Run” que aparece en la banda de iconos de la zona superior de WebMatrix. El

resultado debería ser algo parecido a lo que podemos ver en la siguiente imagen.

Añadir un estilo:

A nivel de presentación, no es especialmente impactante, pero estamos simplemente estructurando

contenido y compartiéndolo. Sin embargo, desde WebMatrix también podemos trabajar con archivos

CSS y aprovechar que su editor de código nos resalta este lenguaje. Añadamos una carpeta “Estilo” y

dentro un nuevo fichero de tipo CSS con un nombre tan original como “Estilos.css”. En su interior

podríamos definir algo muy sencillo, como esto:

body { margin: 0;

Page 18: Microsoft Web Matrix

18

padding: 1em; background-color: #ffffff; font: 125%/1.75em Verdana, sans-serif; color: #006600; } #cabecera, #pie { margin: 0; padding: 0; color: #996600; font: 200%/2.00em Times New Roma; }

Ahora hagamos un pequeño cambio en el fichero _Maestra.cshtml. Vamos a enlazar en él este nuevo

fichero de CSS, además de definir un par de etiquetas div para aprovechar los estilos que hemos

creado. El resultado podría ser algo así:

<!DOCTYPE html> <head> <title> Titulo de la pagina </title> <link href="@Href("/Estilo/Estilos.css")" rel="styl esheet" type="text/css" /> </head> <body> <div id="cabecera"> @RenderPage("/Compartido/_Cabecera.cshtml") </div> <div id="main"> @RenderBody() </div> <div id="pie"> @RenderPage("/Compartido/_Pie.cshtml") </div> </body> </html>

Si refrescamos veremos cómo se alteran tanto los colores como los tamaños de la página. De este

fragmento de código lo más interesante es el método @Href. Su función consiste en crear una URL

que sea compatible con cualquier navegador, a partir de un fichero local.

Comunicación entre páginas

Hemos visto cómo podemos ir organizando el aspecto de nuestra página web añadiendo distintos

bloques, en forma de páginas web independientes. Sin embargo, el ser independientes puede llegar a

ser un problema. Por ejemplo, supongamos que queremos modificar el Título de la ventana,

haciéndolo de forma acorde al contenido que estamos cargando. Necesitaríamos comunicar la página

que aloja el contenido (y conoce dicho Título) con la página Maestra, que es la única que tiene acceso

a la etiqueta <title>.

La forma de lograr esta comunicación es tan sencilla como todas las cosas en WebMatrix. Tenemos

que hacer uso del objeto PageData, una colección de parejas nombre/valor que nos permite comunicar

entre distintas páginas.

En nuestro ejemplo, el primer paso sería modificar la página de contenido MiPrimerContenido.cshtml

que añadimos anteriormente. Desde ella situaríamos el valor del Título, que posteriormente va a leer

la página maestra. La sentencia para lograrlo es muy sencilla:

Page 19: Microsoft Web Matrix

19

@{ PageData["Titulo"] = "Mi Primer Contenido"; }

Ahora, para consumir este valor desde la página maestra, que es la única que puede establecer el

título, introduciríamos esta sentencia:

<head> <title>@PageData["Titulo"]</title> </head>

Sencillo, ¿verdad? Tan sencillo como potente, puesto que de este modo podremos intercambiar

información entre páginas, al tipo que cada una se ocupa de recuperar la información que le

corresponde.

Conclusiones

Con muy poco esfuerzo y aún menos código hemos conseguido definir una estructura básica pero lo

suficientemente potente como para gestionar muchos sitios web, permitiendo reutilizar una gran

cantidad de código. También hemos visto cómo comunicar los fragmentos que componen la página

web, para poder cargar contenido desde unos referenciado por otros.

Gestionar una base de datos con WebMatrix.

1. Introducción

Pocas son las aplicaciones web que no hacen uso de alguna clase de persistencia de datos. Entre las

distintas opciones, sin duda una base de datos es la más habitual. En WebMatrix tenemos un muy

buen soporte para gestionar las bases de datos de nuestras aplicaciones, tanto para su definición

como para la introducción y consulta de datos.

En cuanto a las bases de datos que pueden gestionarse con WebMatrix, SQL Server Compact Edition

viene como opción por defecto. SQL Server CE no es precisamente un producto novedoso, puesto que

ya hace años que salieron sus primeras versiones, eminentemente orientadas a aplicaciones en

SmartPhones.

Sin embargo, con WebMatrix se ha decidido dar un gran impulso a su desarrollo y reorientarla hacia

un entorno más web. Para ello, entre las novedades que presenta, destacaríamos las siguientes:

• Funciona perfectamente con las APIs existentes de manejo de datos, como ADO.NET, Entity

Framework e incluso ORMs de terceros como NHibernate.

• No requiere instalación ninguna. Simplemente hay que copiar los binarios de SQLCE al

directorio bin de nuestra aplicación ASP.NET.

• Se ejecuta sobre entornos "medium trust", es decir, no es necesario que el administrador de

nuestro hosting nos instale SQL Server CE para poder utilizarlo en nuestras aplicaciones web.

Nosotros mismos podemos hacerlo, simplemente moviendo los binarios a la carpeta bin de

nuestra aplicación web.

• Diseñadores gráficos tanto para WebMatrix como para Visual Studio (en todas sus ediciones).

En cualquier caso, SQL Server CE no es la única base de datos que podemos utilizar. Todas las

versiones de SQL Server están soportadas, con lo que en cualquier momento podemos pasar a una

base de datos más potente si nuestra aplicación web comienza a demandarlo.

Para la gente que esté más familiarizada con MySQL, WebMatrix también ofrece soporte. Por lo tanto,

no quedan excusas para no utilizarlo, vengamos del entorno que vengamos.

Page 20: Microsoft Web Matrix

20

2. Definir una base de datos

Antes de ver cómo podemos insertar, actualizar, borrar y consultar información de una base de datos,

empecemos por lo más básico: cómo definir esa base de datos. En WebMatrix todas estas operaciones

se hacen desde el espacio de trabajo de "Databases".

Si nuestra aplicación no tiene todavía una base de datos, en la parte central podremos ver un enlace

directo para añadir una nueva base de datos, bajo el mensaje "Add a Database to your site". Si

pulsamos en él automáticamente nos creará un nuevo fichero .sdf (por defecto tendrá el mismo

nombre que el proyecto), en la zona de la ventana dedicada a los elementos que comenten dicho

proyecto. Podemos verlo en la imagen:

Una vez creada la base de datos, el siguiente paso es empezar a crear tablas en ella. Vamos a crear

una primera tabla de nombre "Post". Es tan sencillo como pulsar el botón "New Table" que aparece en

la barra de iconos superior.

Page 21: Microsoft Web Matrix

21

Como vemos en la imagen, al crear la tabla se crea automáticamente una columna. Es necesario darle

un nombre a esta columna si queremos poder guardar la tabla, de lo contrario nos aparecerá un

mensaje de error indicándonos que es necesario cuando queramos guardar la tabla. Y si borramos la

columna e intentamos guardar la tabla vacía, tampoco nos lo permitirá.

Para poder darle nombre a esta columna, simplemente nos dirigimos al grid de propiedades y en la

sección (Name) indicamos el valor. En la imagen anterior también podemos ver resaltados los

controles que podemos utilizar para añadir nuevas columnas (o eliminarlas), así como establecer

relaciones entre tablas cuando ya exista más de una. Analicemos las propiedades que podemos definir

para una columna y qué significa cada una:

• (Name): es el nombre que queremos darle a la columna. La columna no podrá guardarse si

no le damos un identificador.

• Allow Nulls: nos sirve para indicar si permitimos que se almacenen valores nulos en la

columna.

• Data Type: el tipo de datos que corresponde a la columna.

• Default Value: valor por defecto para la columna

• Is Identity?: sirve para indicar si la columna es identidad. SQL Server asigna

automáticamente un valor a las columnas identidad cuando se inserta una fila. Las columnas

de clave primaria suelen ser de identidad, para poder delegar la creación del valor de la clave.

Sólo aplica a columnas de tipo numérico

• Length: sirve para indicar la longitud de la columna, en aquellas que tenga sentido, como

cuando son de tipo nvarchar.

• Is Primary Key?: permite para indicar si la columna forma parte de la clave primaria de la

tabla.

Añadamos las siguientes columnas a nuestra tabla "Post":

• PostId: columna de clave primaria y de identidad, de tipo bigint, no aceptará valores nulos.

• Titulo: columna de tipo nvarchar de 1000 de longitud.

• Contenido: columna de tipo ntext, para permitir que el contenido crezca sin límites.

Page 22: Microsoft Web Matrix

22

• Autor: columna de tipo nvarchar de 100 de longitud. Permitiremos valores nulos en ella.

• Fecha: columna de tipo datetime.

Con esto ya tendríamos nuestra tabla configurada. Para guardarla, pulsaríamos el botón de Guardar o

bien Control+S, lo que hará aparecer una ventana emergente para introducir el nombre que queremos

darle a esta nueva tabla: Post.

En cuanto a las relaciones entre tablas, en este momento no es posible su creación para bases de

datos SQL Server CE. Sin embargo, es una característica que se espera que esté próximamente

disponible.

Con WebMatrix también podemos introducir datos en las tablas de nuestra base de datos. Basta con

pulsar sobre el botón "Data" en la pestaña Table, una vez que hayamos seleccionado la tabla en la que

queremos introducir la información. El proceso de edición es el típico de cualquier grid de datos. Es

importante recordar que no podemos dejar sin información aquellas celdas asociadas a columnas que

no soportan valores de nulo y que no podemos modificar las celdas de columnas de tipo identidad,

puesto que esos valores son asignados por la base de datos de forma automática. WebMatrix nos

avisará en caso de introducir datos cuyo formato no se ajusta al tipo de datos definido para la

columna, evitando así que cometamos errores.

En la imagen podemos ver unas cuentas filas introducidas a través del editor de WebMatrix en la tabla

"Post" creada anteriormente.

Page 23: Microsoft Web Matrix

23

introducir y consumir información en nuestras bases de datos.

1. Introducir información

Partiremos de la tabla Post que creamos en el artículo anterior y veremos cómo introducir datos en

ella mediante código, que es el procedimiento que habitualmente seguiremos. Para ello, vamos a crear

una página nueva, "Postear.cshtml", que servirá para introducir un nuevo post en la base de datos. El

código de esta página sería algo parecido a esto:

@{ Layout = "/Compartido/_Maestra.cshtml"; PageData["Titulo"] = "Postear"; if (IsPost) { var db = Database.Open("Mi Blog"); var sentenciaInsercion = "INSERT INTO Post (Titulo, Contenido, Autor, Fecha) VALUES (@0, @1, @2, @3)"; db.Execute(sentenciaInsercion, Request["titulo"], Request["contenido"], Request["autor"], DateTime.Now.ToString()); var id = db.GetLastInsertId(); Response.Redirect(@Href("/MostrarPost?PostId=" + id )); } } <form method="post" action=""> <table> <tr> <td><label>Titulo</label></td> <td> <input type="text" name="titulo" size="52" value="@Request["titulo"]"/> </td> </tr> <tr> <td><label>Contenido</label></td> <td> <textarea name="contenido" rows="15" cols="40" value="@Request["contenido"]"></textarea> </td> </tr> <tr> <td><label>Autor</label></td> <td> <input type="text" name="autor" size="52" value="@Request["autor"]"/> </td> </tr> <tr> <td> <input type="submit" value="Publicar" /> </td> </tr> </table>

Page 24: Microsoft Web Matrix

24

</form> Empecemos analizando el HTML. Se compone de una tabla con 3 campos para introducir

título, contenido y autor, más un botón para procesar la información. Cuando pulsemos el botón, el

posteo se realizará sobre la propia página, y ahí entrará en juego el código que hemos definido en la

parte superior.

Analicemos cada uno de los pasos que están descritos y qué métodos están involucrados:

1. En primer lugar, definimos que sólo se ejecutará este código si la petición a la página se ha

realizado mediante HTTP-POST, al estar comprobándose a variable "IsPost", que nos indica si

hemos llegado a la página mediante una petición de este tipo.

2. En caso de que estemos ejecutando una petición por POST, abrimos una conexión con la base

de datos mediante el método Open de la clase Database, pasándole como parámetro el

nombre de dicha base de datos. Un detalle, la clase DateTime contiene una propiedad "Now"

que nos devuelve la fecha de ese instante, ideal para poder indicar en qué momento hemos

insertado el post.

3. Una vez abierta la conexión, escribimos la sentencia SQL que queremos ejecutar y se la

pasamos al método Execute, junto con los parámetros que hemos definido en dicha sentencia.

Estos valores los obtenemos de Request, que es donde los hemos situado con el HTML que

acompaña a la página (campos "value" de las etiquetas input y textarea)

4. Recuperamos el ID que la base de datos nos ha generado para esta nueva fila en la tabla Post.

Recordemos que hemos definido la columna PostId como identidad en nuestra tabla, lo que

significa que SQL Server CE se encargará de generar un valor para ella con cada nueva

inserción.

5. Por último, realizamos una redirección a una página pasándole como parámetro este id.

Utilizamos el método Href para calcular la URL de una forma independiente del navegador que

esté renderizando la página, y recurrimos a Response.Redirect para hacer efectiva la

redirección.

Idealmente, la página MostrarPost se encargaría de enseñarnos el resultado de la información que

hemos introducido, ya convenientemente formateada. Para ello, deberíamos recuperar de la base de

datos la información previamente insertada. Veamos cómo podríamos hacer eso.

2. Consultar información

Necesitamos poder leer información en las tablas de nuestra base de datos, así como mostrarla a

través de un fragmento de código HTML. A continuación un ejemplo de ambas necesidades

combinadas para generar una página con información dinámica.

@{ var db = Database.Open("Mi Blog"); var consulta = "SELECT Titulo, Contenido, Autor, Fecha FROM Post W HERE PostId = @0"; var postInfo = db.QuerySingle(consulta, Request["Po stId"]); } <h1>@postInfo.Titulo</h1> <h3> publicado el @postInfo.Fecha por @postInfo.Aut or</h3> <div style="border: .2em dotted #900; width:350"> @postInfo.Contenido </div>

El HTML de nuevo es lo más sencillo posible, puesto que no es objeto de estos artículos poner el

acento sobre cómo realizar una página web vistosa. Como se ve, mostramos la información que

Page 25: Microsoft Web Matrix

25

contiene un objeto llamado postInfo; en concreto, los campos Titulo, Fecha, Autor y Contenido. Pero,

¿cómo hemos obtenido este objeto postInfo? Echemos un ojo al código en la parte superior.

En primer lugar, abrimos una conexión a la base de datos y creamos una sentencia SQL como ya

hemos aprendido en la sección anterior. La diferencia es que ahora no vamos a ejecutar sino consultar

nuestra base de datos. Existen tres métodos distintos para realizar esta operación:

• Query: ejecuta la sentencia y devuelve una colección de resultados. Podremos iterar por todos

ellos utilizando el operador "foreach", que nos devolverá una fila cada vez hasta recorrer

entera la colección.

• QueryValue: nos devuelve un valor único. Es ideal, por ejemplo, si nuestra consulta tiene que

devolvernos el número de filas que cumplan una condición, o el valor que suman todas ellas

para una columna concreta.

• QuerySingle: es el método que estamos ejecutando y sirve para devolver un único registro. En

nuestro caso, al estar buscando por el ID, sabemos que sólo habrá una fila que cumpla este

criterio (o ninguna, algo a tener en cuenta puesto que en tal caso nos devolverá un valor

nulo).

Ya sabemos que nuestra fila está contenida en el objeto postInfo. No es difícil imaginar que,

dinámicamente, nuestro código es capaz de inferir cómo se llaman las columnas que queremos

consultar y crea propiedades en este objeto, para que podamos acceder a los valores concretos de

esta fila por sus nombres, en lugar de tener que utilizar engorrosos índices basados en la posición de

la columna, algo mucho más propenso a errores y menos legible.

El resultado de nuestra página MostrarPost.cshtml podemos verlo en la siguiente imagen:

En este artículo aprenderemos cómo utilizar los mecanismos de seguridad

que ASP.NET WebPages nos ofrece y cómo podemos hacer uso de ellos

desde WebMatrix.

Page 26: Microsoft Web Matrix

26

Este es el primero de los artículos dedicados a la seguridad en el desarrollo bajo WebMatrix, que

estamos viendo dentro del Manual de Microsoft WebMatrix.

En esta primera parte veremos cómo crear la infraestructura para registrar usuarios, es decir, crear la

tabla en la base de datos y el formulario de registro de usuarios. En la segunda parte dedicada a la

seguridad, repasaremos de cómo forma podemos autenticarnos y autorizar en base a estos

mecanismos.

1. Crear base de datos de usuarios

Antes de pretender realizar ninguna clase de autenticación, es necesario que tengamos una base de

datos contra la que poder realizar esta operación. En ella deberemos guardar información sobre los

usuarios y sus roles, para poder autorizar ciertas acciones en función de la pertenencia del usuario a

ellos.

En WebMatrix no puede ser más sencillo crear esta base de datos. WebSecurity es el helper que nos

va a acompañar durante éste y el siguiente artículo, pieza central sobre la que gira toda la seguridad.

Esta clase nos ofrece un método llamado InitializeDatabaseConnection, que servirá para definir las

tablas que respaldarán nuestro sistema de seguridad.

Esta llamada debemos hacerla sólo una vez y debe hacerse antes que cualquier otro proceso de carga,

por razones obvias. Pero, ¿dónde podríamos realizarla para asegurarnos que no se realiza más de una

vez y que las tablas estén listas antes de estarlo, prácticamente, la propia aplicación? La respuesta es

sencilla: en el archivo _AppStart.cshtml.

Este fichero permite definir procesos y acciones que queramos que se realicen antes de ejecutarse

ninguna página web, permitiéndonos establecer valores globales (como podrían ser claves

compartidas por todas las páginas) o ejecutar procesos que son necesarios antes de arrancar la

aplicación, como éste que estamos explicando.

Para ello, añadiremos una nueva página _AppStart.cshtml en la carpeta raíz de nuestro proyecto e

introduciremos en ella el siguiente fragmento de código:

@{ WebSecurity.InitializeDatabaseConnection( "Mi Blog", "Usuario", "UsuarioId", "Nombre", true); }

Vamos a analizar cada uno de los parámetros que pasamos a esta llamada:

• El primero es el nombre de la base de datos donde se van a crear las tablas relacionadas con

la seguridad.

• El segundo es el nombre de la tabla que va a contener los usuarios

• El tercero es el nombre de la columna que va a servir de identificador para cada una fila

• El cuarto es el nombre de la columna que va a contener el nombre del usuario.

• El quinto nos sirve para indicarle a la llamada que debe crear las tablas por nosotros. En caso

de que ya tuviéramos unas tablas para la seguridad de nuestra aplicación, deberíamos pasar

"false" en este parámetro.

Una vez ejecutada correctamente esta sentencia, vamos a poder ver mediante el espacio de trabajo

de "Databases" que hay cuatro tablas nuevas en nuestra base de datos. El siguiente diagrama

muestra estas tablas y sus campos:

Page 27: Microsoft Web Matrix

27

Como vemos, se ha creado una tabla Usuario. Esta tabla podría ser una tabla que utilizáramos para

almacenar información extra sobre cada uno de nuestros usuarios, como direcciones de correo, físicas,

datos personales, etc. Está conectada con la verdadera tabla de usuarios, desde el punto de vista de

la seguridad, que es la tabla Membership que contiene un buen número de campos relacionados con la

contraseña y su gestión.

También se crea una tabla "Roles", para poder gestionar en qué roles queremos tener a nuestros

usuarios y poder darles acceso o no a recursos y operaciones en función de su pertenencia. Ambas

tablas están conectadas a través de la tabla intermedia UsersInRoles. Es, en conjunto, un modelo

sencillo y fácilmente comprensible.

2. Registrar usuarios

Ya tenemos nuestra base de datos lista para almacenar nuevos usuarios y permitirnos posteriores

operaciones de autenticación y autorización. Sin embargo, lo primero será facilitar a los visitantes a

nuestro sitio web registrarse como usuarios. Para ello deberíamos crear una página "Registrar.cshtml"

desde la que los usuarios puedan introducir su nombre y su contraseña. Un ejemplo de código lo más

sencillo posible sería el siguiente:

@{ if(IsPost) { var sentenciaInsercion = "INSERT INTO Usuari o (Nombre) VALUES (@0)"; var db = Database.Open("Mi Blog"); db.Execute(sentenciaInsercion, Request["nomb reusuario"]); WebSecurity.CreateAccount(Request["nombreusu ario"], Request["password"]); } } <form method="post" action=""> <fieldset> <legend>Registrarse como usuario</legend> <div> <label for="nombreusuario">Nombre:</la bel> <input type="text" name="nombreusuario " value="@Request["nombreusuario"]"/> </div> <div> <label for="nombreusuario">Clave:</label> <input type="password" name="password" value ="@Request["password"]"/>

Page 28: Microsoft Web Matrix

28

</div> </fieldset> <div><input type="submit" value="Registrarse" /></d iv> </form>

El código HTML es lo suficientemente sencillo como para no necesitar mayores comentarios. En cuanto

al código en la parte superior, podemos ver que se realizan dos operaciones. En primer lugar, se

inserta el nuevo usuario en la tabla Usuario. Una vez que ya tengamos una nueva fila en Usuario

podremos proceder a registrarle en nuestras tablas de seguridad, con la llamada

WebSecurity.CreateAccount, a la que le pasaremos el nombre y la contraseña.

A esta llamada podemos pasarle también un booleano para indicar si queremos que el usuario no sea

efectivo hasta estar confirmado. En caso de hacerlo así, la llamada a WebSecurity.CreateAccount nos

devolverá un token. Dicho token sería necesario enviarlo por correo al usuario que se acaba de

registrar, para que posteriormente procediera a confirmar el registro pasándole, a la página

correspondiente, dicho token y realizando nosotros una llamada WebSecurity.ConfirmAccount con el

token como único parámetro. Sin embargo, en aras de la sencillez, vamos a dejar el registro tal cual,

sin necesidad de realizar una posterior confirmación con ese token.

En este segundo artículo dedicado a la seguridad en aplicaciones

desarrolladas con WebMatrix aprenderemos cómo gestionar la

autenticación y autorización de usuarios.

1. Autenticarse

En el anterior artículo aprendimos cómo registrar nuevos usuarios. Una vez hecho eso, el siguiente

paso es permitir que se autentiquen en nuestra aplicación para darles acceso a mayores privilegios.

Para ello crearíamos una página "Loguear.cshtml" para proceder a la autenticación que podría tener

un código como el siguiente:

@{ if(IsPost) { if(WebSecurity.Login( Request["nombreusuario"], Request["password"]) == t rue) { <text>Usuario autenticado</text> } else { <text>Autenticación fallida</text> } } } <form method="post" action=""> <fieldset> <legend>Loguearse como usuario</legend> <div> <label for="nombreusuario">Nombre:</label> <input type="text" name="nombreusuario" value="@Request["nombreusuario"]"/> </div> <div> <label for="nombreusuario">Clave:</label>

Page 29: Microsoft Web Matrix

29

<input type="password" name="password" value="@Request["password"]"/> </div> </fieldset> <div><input type="submit" value="Loguear" /></div> </form>

La parte del código HTML es prácticamente idéntica a la que veíamos en el anterior artículo. En cuanto

al código procedural, se realiza una llamada al método Login del helper WebSecurity. Este método

acepta como parámetros el nombre de usuario y la contraseña, más un parámetro opcional de tipo

booleano que sirve para indicar si queremos que la aplicación web nos recuerde, mediante el

establecimiento de una cookie.

La llamada devolverá un booleano para indicarnos si hemos sigo correctamente autenticados. Como

vemos, mediante las etiquetas "" podemos definir un mensaje directamente en el código HTML de la

página, con un resultado como el que se puede ver en la siguiente figura:

Con esto completaríamos la funcionalidad necesaria para realizar autenticaciones, pero nos faltaría la

parte de la autorización, es decir, asegurarnos de que un usuario tiene los permisos necesarios para

poder acceder a un recurso o funcionalidad. Veamos cómo hacerlo.

2. Autorización

El proceso habitual de autorización consiste en tres pasos:

1. Comprobar las credenciales. Si existen, se le da acceso al recurso.

2. Si no existen las credenciales, se le pide al usuario que se autentique.

3. Se le redirige a una página de forma automática para que pueda autenticarse.

4. Una vez que se ha autenticado correctamente, se le redirige al recurso que inicialmente quería

acceder.

Page 30: Microsoft Web Matrix

30

Veamos cómo podemos reproducir este proceso con WebMatrix. En primer lugar, necesitaríamos una

página para hacer la autenticación como la que hemos creado antes. En segundo lugar,

necesitaríamos crear una página que tuviera control de acceso. Vamos a añadir una página

"Comentar.cshtml" que permita dejar un comentario en un post. Para poder comentar, vamos a

requerir que el usuario esté autenticado. Una primera aproximación al código sería algo así:

@{ if (WebSecurity.IsAuthenticated == false) { Response.Redirect("/Loguear?UrlRetorno=/Comentar"); } else { if(IsPost) { /* Insertar en BD el comentario */ var db = Database.Open("Mi blog"); string sentenciaInsercion = "INSERT INTO Comentario (Autor, Contenido, Fecha, P ostId) VALUES (@0, @1, @2, @3)"; db.Execute( sentenciaInsercion, WebSecurity.CurrentUserName, Request["comentario"], DateTime.Now.ToString(), Request["postid"].AsInt()); } } } <form method="post" action=""> <fieldset> <legend>Comentar el post</legend> <div> <label>Post ID</label> <input type="text" name="postid" value="@Request["postid"]" /> </div> <div> <label>Comentario</label> <textarea name="comentario" rows="15" cols="40" value="@Request["comentario"]"></textarea> </div> </legend> </fieldset> <div><input type="submit" value="Comentar" /></div>

</form> En el código HTML recogemos los dos datos que necesitamos: el identificador del post al que

vamos a enlazar el comentario y el contenido del comentario. Podríamos no requerir este identificador

si enlazáramos la página de comentarios desde la página del post, pero no es objeto de este artículo

entrar en este tipo de complejidades.

En cuanto al código procedural, podemos ver que el primer paso es comprobar si el usuario está

autenticado. De no estarlo, se realiza una redirección automática a la página de Logueo, pasando

como parámetro la URL a la que queremos que se retorne una vez se haya completado

satisfactoriamente la autenticación.

En caso de que el usuario sí esté autenticado y hayamos llegado a la página por HTTP-POST (por

ejemplo, tras pulsar el botón de "Comentar", introducimos el comentario en la base de datos.

Page 31: Microsoft Web Matrix

31

Destacar que utilizando el helper WebSecurity tenemos acceso a mucha información sobre el contexto

de seguridad. Algunos de los métodos más destacados serían:

• WebSecurity.ChangePassword: nos permite cambiar el password para un usuario

determinado.

• WebSecurity.CurrentUserId y WebSecurity.CurrentUserName: nos devuelve el id y el nombre

del usuario actualmente autenticado.

• WebSecurity.Login y WebSecurity.Logout: como su nombre indica, autentica o revierte la

autenticación del usuario, volviendo a ser un usuario anónimo.

En este artículo iremos desgranando algunos de los Helpers sociales que

dispone WebMatrix, para integrar las aplicaciones web desarrolladas con

servicios de la web 2.0, como Facebook, Twitter, Delicious, etc. Todos conocemos, a estas alturas, de la importancia de integrar correctamente nuestras aplicaciones

web con lo que se ha dado en llamar la Web 2.0. Facebook, Twitter, Delicious, Google Buzz, etc., son

algunos de los servicios de la web social que es importante tener presentes en nuestros sitios, puesto

que nos proporcionan visibilidad e información valiosa.

WebMatrix, en su afán por simplificar el desarrollo de sitios web, ofrece un gran número de clases

Helper para facilitarnos trabajar con este tipo de servicios con apenas un par de líneas de código.

1. Twitter

Cada vez quedan menos sitios web que no tengan su propia cuenta en Twitter, desde la que ofrecer

enlaces a la información que van publicando, dialogar con los usuarios, etc. Tener presencia en Twitter

e integrar dicha presencia en el sitio web, viene a ser un todo en uno. En la gran mayoría de los

casos, la presencia de Twitter en el sitio web se realiza mediante la integración de uno de los controles

de timeline que nos ofrece la propia web de Twitter.

La integración es sencilla, basta con copiar y pegar un trozo de código relativamente grande en

nuestras páginas. Sin embargo, que sea relativamente sencilla y rápida no significa que sea ni

elegante ni cómoda, puesto que estamos introduciendo algo totalmente ajeno en nuestro desarrollo.

Sería, por tanto, mucho más deseable hacer esa integración con código propio. Aquí es donde aparece

WebMatrix y uno de sus Helpers para ayudarnos: el helper Twitter.

Este helper tiene dos métodos principales con los que poder trabajar:

• Profile: este método recupera la información específica para una cuenta determinada. Sus

parámetros, además del nombre de la cuenta, sirven para personalizar el aspecto que va a

tener la caja en la que se presenta la información.

• Search: este método sirve para mostrar la información relacionada con una cadena de

búsqueda, dentro de Twitter. Al igual que el método anterior, tiene un gran número de

parámetros que sirven para personalizar el aspecto de la caja que muestra los resultados.

Veamos un ejemplo de uso rápido. Imaginemos que tenemos una aplicación con una barra lateral y

queremos mostrar en ella la información relacionada con una cuenta de Twitter. El fragmento de

código que necesitaríamos sería algo como lo siguiente:

<h4>Barra lateral</h4> @Twitter.Profile("deswebcom")

Page 32: Microsoft Web Matrix

32

Como podemos ver, una y nada más que una línea de código necesitamos para integrar

correctamente Twitter en nuestras páginas. Si quisiéramos, en lugar de mostrar un perfil concreto,

hacer una búsqueda la forma sería la misma, salvo que llamaríamos al método "Search". El resultado,

en ambos casos, sería algo parecido a la siguiente imagen.

Ambos, como ya comentábamos antes, pueden recibir una serie de parámetros opcionales que sirven

para personalizar el aspecto de la caja. En la bibliografía se pueden encontrar enlaces a páginas en las

que se enumeran estos parámetros así como su uso.

2. Facebook

Junto con Twitter, la otra red social por excelencia a día de hoy. En este caso, el Helper que tenemos

a nuestra disposición nos permite añadir el famoso botón "Me Gusta". Este Helper, llamado como es

obvio "Facebook", tiene un único método Like. Este método tiene 6 parámetros opcionales. Aparte de

los habituales relacionados con el aspecto, estos son los más relevantes:

• Url: el primer parámetro nos permite modificar la url que el usuario va a indicar que le gusta.

Por defecto, la url será la de la página que contiene el botón.

• Action: podemos cambiar la acción por defecto, "Me gusta", por una como "Recomiendo",

mediante este parámetro.

• ShowFaces: nos sirve para para indicar, mediante un booleano, si queremos que se muestren

las caras de aquellas personas que ya han indicado que les gusta este mismo ítem.

Un ejemplo de código con varios botones mostrando los valores para los distintos parámetros:

<div> <br/> @Facebook.LikeButton("http://www.desarrollo.com") <br/> @Facebook.LikeButton(

Page 33: Microsoft Web Matrix

33

url: "http://desarrolloweb.com", action: "recommend", width: 350, layout: "button_count", showFaces: true) <br/> @Facebook.LikeButton( url: "http://desarrolloweb.com", width: 350, layout: "box_count", showFaces: true) <br/> @Facebook.LikeButton( url: "http://desarrolloweb.com", width: 350, showFaces: true, colorScheme: "dark") </div>

Y una imagen sobre el aspecto que van a tener los distintos botones.

3. Enlaces para compartir

Existen bastantes agregadores de webs, sitios de enlaces, páginas de Microblogging, etc., desde las

que nuestros usuarios se pueden hacer eco de los contenidos de nuestras aplicaciones web. Hacer uso

de estos enlaces también resulta tan sencillo como los ejemplos que hemos visto hasta ahora de

integración con otros servicios de la web 2.0, como Facebook o Twitter.

Esta integración de enlaces de compartición se hace mediante el Helper LinkShare, que nos genera

automáticamente enlaces a los siguientes sitios: Delicious, Digg, Google Buzz, Facebook, Reddit,

StumbleUpon y Twitter. Sólo tiene un método que podamos invocar, "GetHtml", y un único parámetro

obligatorio: el título de la página, para que conste en algunos sitios que lo pueden necesitar (como

Delicious, por ejemplo).

Page 34: Microsoft Web Matrix

34

El resultado sería una ristra de botones similares a la siguiente imagen:

Y si pulsamos, por ejemplo, en el botón de Twitter nos conectará a Twitter.com y tras loguearnos nos

creará automáticamente un twitt para compartir el enlace como se muestra en la siguiente imagen.

4. Bing

El último servicio que podemos consumir no es exactamente "social", pero no por ello deja de resultar

útil conocer las posibilidades que su Helper nos ofrece.

Se trata del buscador Bing, con cuyo Helper podremos realizar búsquedas de forma sencilla. Este

Helper expone dos métodos: SearchBox y AdvancedSearchBox. En cuanto al primero, puede recibir

dos parámetros, la url del sitio y el ancho de la caja, ninguno de los cuales es obligatorio. Un ejemplo

de su uso de ambas cajas en código sería éste:

<div> <br/> @Bing.SearchBox() </div> <div> <br/> @Bing.AdvancedSearchBox() </div>

El resultado sería la clásica caja con un botón a la derecha en forma de lupa, con fondo naranja. Si

utilizamos dicha caja para realizar una búsqueda, se nos abría una nueva ventana en la que podremos

navegar por los resultados de Bing para ese término.

Sin embargo, mucho más espectacular es la opción de búsqueda avanzada, puesto que aunque la caja

es idéntica, al buscar no se nos abrirá una nueva ventana, sino una especie de popup enganchado a la

caja que nos mostrará los resultados, sin salir de nuestro sitio web. En la siguiente imagen se puede

ver esta ventana emergente conteniendo los resultados de búsqueda para el término "Prueba".

Page 35: Microsoft Web Matrix

35

En lo relativo a la denominada Web Social, lo más rápido, simple y

funcional, se puede obtener con la ayuda de los ASP.NET Web Helpers. A lo largo del artículo veremos el soporte, que si bien muy variado en cuanto a potencial, nos da en

los siguientes ámbitos de acceso a sites, blogs, foros, …:

1. Twitter

2. FaceBook

3. LinkShare

o Delicious (del.icio.us)

o Digg

o Google Buzz (Google Reader)

o FaceBook

o Reddit!

o Stumble it!

o Twitter

4. Bing

Instalación de ASP.NET Web Helpers Library

Iniciamos en WebMatrix un nuevo proyecto basado en una plantilla (Template).

Page 36: Microsoft Web Matrix

36

Seleccionamos una plantilla de tipo Sitio vacío y le damos un determinado Site Name (optamos en

nuestro ejemplo porque sea WebHelpers). Finalmente hacemos clic sobre el botón OK.

Page 37: Microsoft Web Matrix

37

Ya en la vista de Site en el entorno de desarrollo de WebMatrix, vemos en el panel de la derecha un

enlace a ASP.NET Web Pages Administration, hacemos clic sobre él y esto nos llevará a una ventana

del explorador de Internet en dónde podremos realizar las correspondientes tareas administrativas.

Entre ellas, se encuentran la gestión de los denominados Web Helpers, que es lo que nos interesa más

inmediatamente.

Page 38: Microsoft Web Matrix

38

Dado que es la primera vez que acudimos a las labores de administración en éste proyecto, se nos

pide que creemos una contraseña y la confirmemos. Tras lo cual deberemos hacer clic sobre el botón

Create Password, que ya se encontrará activo.

Page 39: Microsoft Web Matrix

39

En el siguiente paso se nos informa que deberemos llevar a cabo inmediatamente una labor previa en

el entorno de desarrollo de WebMatrix y hacer clic donde se indica en el texto (Clic here).

Volvemos temporalmente al entorno de WebMatrix.

Page 40: Microsoft Web Matrix

40

En el entorno de desarr &nsbp; &nsbp;&nsbp;ollo de WebMatrix, si no lo estamos ya, deberemos ir a

la vista Files, haciendo clic sobre la entrada en el panel inferior izquierdo.

En el esquema de carpetas y archivos del Site, pulsamos con el botón derecho del ratón sobre el título

superior (el nombre del proyecto, WebHelpers en nuestro caso) y hacemos clic sobre Refresh, para

asegurarnos que se reflejan los cambios del sistema que debieron haberse producido últimamente.

Finalmente localizamos el archivo _Password.config, dentro de la nueva carpeta Admin, dentro de

App_Data y lo renombramos a Password.config. Nótese, sin la barra de subrayado inicial, es

fundamental éste leve cambio.

Page 41: Microsoft Web Matrix

41

Page 42: Microsoft Web Matrix

42

Volvemos al explorador de Internet y nos disponemos a iniciar sesión en el ASP.NET Web Pages

Administration.

Escribimos la contraseña que habíamos creado y hacemos clic sobre Login.

Tras unos instantes se nos mostrará un listado de todos los paquetes instalables. En condiciones

generales, navegaríamos en búsqueda del deseado o utilizaríamos la opción Search.

Page 43: Microsoft Web Matrix

43

En éste caso concreto el ASP.NET Web Helpers Library, en su última versión, es el primero mostrado.

Hacemos clic sobre el botón Install que se encuentra inmediatamente a su derecha.

Page 44: Microsoft Web Matrix

44

En éste caso concreto el ASP.NET Web Helpers Library, en su última versión, es el primero mostrado.

Hacemos clic sobre el botón Install que se encuentra inmediatamente a su derecha.

Page 45: Microsoft Web Matrix

45

Se nos pedirá confirmación para la instalación. Léase detenidamente que en efecto es ese el paquete

deseado y prosígase haciendo clic en el botón Install.

Page 46: Microsoft Web Matrix

46

Al final ya podremos cerrar la sesión, haciendo clic en Logout, cerrar el explorador de Internet si no lo

estábamos utilizando y volver al entorno de desarrollo de WebMatrix.

En el entorno de desarrollo de WebMatrix, si no lo estamos ya, deberemos ir a la vista Files, haciendo

clic sobre la entrada en el panel inferior izquierdo.

En el esquema de carpetas y archivos del Site, pulsamos con el botón derecho del ratón sobre el título

superior (el nombre del proyecto, WebHelpers en nuestro caso) y hacemos clic sobre Refresh, para

asegurarnos que se reflejan los cambios del sistema que debieron haberse producido últimamente.

Podremos observar que se ha creado una nueva carpeta (packages) en la que se encuentra otra con

los archivos del paquete recién instalado y que en la carpeta Admin se ha creado un nuevo archivo,

ahora hay dos, el de contraseñas y el de configuración de los paquetes.

Page 47: Microsoft Web Matrix

47

A partir de estos momentos estamos en condiciones de sacar partido de todo el potencial que nos

proporcionan los ASP.NET Web Helpers.

Pasamos a ver algunos ejemplos ilustrativos de su sencillez de implementación.

Soporte para Twitter

Con los ASP.NET Web Helpers podemos ya dar soporte para:

• Profile: Listado de Tweets de un usuario

• Search: Búsqueda de Tweets acerca de un determinado tema

• List: Listado de Tweets de una determinada lista de Twitter de un usuario

• TweetButton: Botón de crear un Tweet de la página

• FollowButton: Botón para seguir al usuario Twitter propietario de la página

Los pasos a seguir son muy sencillos:

1. Crear un archivo nuevo de tipo cshtml, al que daremos cómo nombre, por ejemplo, Twitter.

2. Sustituimos todo su código por el que se muestra en el listado que sigue.

3. Hacemos clic con el botón derecho del ratón sobre el nombre del archivo y seleccionamos la

opción Launch in browser.

Se mostrará en el explorador de Internet, en el que observaremos entradas parecidas a las mostradas

en las figuras adjuntas.

@{ &nsbp; &nsbp;&nsbp; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> ; <title></title> </head>

Page 48: Microsoft Web Matrix

48

<body> @Twitter.Profile("jpt219", width: 400, avat ars: true, numberOfTweets: 20, scrollBar: true) @Twitter.Search("Windows 8", width: 400, av atars: true, scrollBar: true) @Twitter.List("jpt219", "abierta") @Twitter.TweetButton() @Twitter.FollowButton("jpt219") </body> </html>

Page 49: Microsoft Web Matrix

49

Soporte para FaceBook

Para FaceBook los ASP.NET Web Helpers ofrecen un soporte muy limitado, pero se dispone en

WebMatrix de un muy completo FaceBook Helper, del que hablaremos en un artículo posterior.

Simplemente implementará el LikeButton de FaceBook, para informar que esa página nos ha gustado,

siempre que el usuario que pulse el botón sea a su vez usuario de FaceBook –algo bien conocido por

todos-. Los pasos a seguir son los mismos que antes:

1. Crear un archivo nuevo de tipo cshtml, al que daremos cómo nombre, por ejemplo, FaceBook.

2. Sustituimos todo su código por el que se muestra en el listado que sigue.

3. Hacemos clic con el botón derecho del ratón sobre el nombre del archivo y seleccionamos la

opción Launch in browser. @{ } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title></title> </head> <body> @Facebook.LikeButton() </body> </html>

Hacemos clic con el botón derecho del ratón sobre el nombre del archivo y seleccionamos la opción

Launch in browser.

Se mostrará en el explorador de Internet, en el que observaremos una entrada parecida a la mostrada

en las figura adjunta.

Botonera LinkShare

Discreto, pero el más potente helper de la colección ASP.NET Web Helpers, es una muy simple

botonera que nos abre nuestra página a gran número de sites sociales de la red y eso con –

literalmente- una simple línea de código.

Los pasos a seguir son los descritos:

1. Crear un archivo nuevo de tipo cshtml, al que daremos cómo nombre, por ejemplo, Twitter.

2. Sustituimos todo su código por el que se muestra en el listado que sigue. Ponemos

"LinkShare", porque es el nombre de nuestra página, no porque sea el nombre del Helper.

Téngase bien en cuenta.

3. Hacemos clic con el botón derecho del ratón sobre el nombre del archivo y seleccionamos la

opción Launch in browser. @{ }

Page 50: Microsoft Web Matrix

50

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title></title> </head> <body> @LinkShare.GetHtml("LinkShare") </body> </html>

Hacemos clic con el botón derecho del ratón sobre el nombre del archivo y seleccionamos la opción

Launch in browser.

Se mostrará en el explorador de Internet, en el que observaremos una entrada parecida a la mostrada

en las figura adjunta.

En definitiva, la botonera de LinkShare consta de botones de enlace para los siguientes sites:

• Delicious (del.icio.us)

• Digg

• Google Buzz (Google Reader)

• FaceBook

• Reddit!

• Stumble it!

• Twitter

Búsquedas con Bing

Los ASP.NET Web Helpers permiten crear una SearchBox simple del buscador Bing de una manera

muy rápida y relativamente flexible.

Los pasos a seguir son los ya consabidos:

1. Crear un archivo nuevo de tipo cshtml, al que daremos cómo nombre, por ejemplo, Bing.

2. Sustituimos todo su código por el que se muestra en el listado que sigue.

3. Hacemos clic con el botón derecho del ratón sobre el nombre del archivo y seleccionamos la

opción Launch in browser .@{ Bing.SiteTitle = "Microsoft España"; Bing.SiteUrl = "http://www.microsoft.com/es-es" ; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title></title> </head> <body> @Bing.SearchBox();

Page 51: Microsoft Web Matrix

51

</body> </html>