Soporte de snippets para ASP.NET, HTML y JavaScript

Éste es el sexto post de una serie sobre VS 2010 y .NET 4

En el post de hoy veremos otra mejora importante en VS 2010 – Snippets en HTML, ASP.NET y JavaScript. Los Snippets nos permiten ser más productivos cuando escribimos código permitiéndonos crear trozos de código y de lenguaje de markup que podemos aplicar rápidamente y usarlo en nuestra aplicacion  escribiendo pocos caracteres.

Visual Studio ha soportado el concepto de “snippet” para VB y C# en versiones anteriores – pero nunca para HTML, ASP.NET o javaScript. Ahora con VS 2010 esto ya es posible.

Usando snippets ASP.NET

Vamos a ver cómo se usan estos snippets para implementar rápidamente un escenario común de seguridad. Concretamente, implementaremos la funcionalidad necesaria para mostrar tanto un enlace “[login]” o un mensaje “[Welcome UserName]” en la zona superior derecha de la página dependiendo de si el usuario está logado o no:

La funcionalidad anterior se añade automáticamente cuando creamos un proyecto usando la plantilla de proyecto ASP.NET . Para este tutorial supondremos que hemos partido con una master page en blanco y lo crearemos entero desde la nada.

Comenzaremos añadiendo un elemento estándar <div> a una masterpage, y luego pondremos el cursor en él:

Vamos a usar el control <asp:loginview> que nos va a ayudar a implementar nuestro escenario. El control <asp:loginview> es un control personalizable (apareció en ASP.NET 2.0) que nos permite cambiar entre plantillas “anonimas” y “logeadas” que se muestran automáticamente dependiendo de si el usuario está autenticado. En lugar de escribir el código del control manualmente, usaremos el soporte de snippets de VS 2010.

Escribiendo “<log” en el editor nos mostrará el intellisense y mostrará la lista de elementos disponibles, controles y snippets que comienzen con esos caracteres:

Seleccionamos el snippet de “loginview” de la lista y pulsamos la tecla de tabulación del teclado:

Ahora que hemos seleccionado el snippet que queremos usar, le damos otra vez a la tecla tabulador para ejecutar el snippet – lo que hará que se reemplace el nombre del snippet con el siguiente código. Fijáos que el snippet a añadido un control <asp:loginview> y ha definido automáticamente las dos plantillas más comunmente usadas. Fuimos capaces de implementar esto con tan sólo pulsar 6 teclas (4 para escribir “<log” y dos veces el tabulador):

Ahora implementaremos el “AnonymousTemplate”.

Escribimos “<a” en el editor y el intellisense mostrará los snippets que podamos usar:

Seleccionaremos el code snippet “a” de la lista y le damos al tabulador. Cuando le demos de nuevo al tabulador se ejecutará el snippet – y reemplazará el nombre del snippet con el siguiente código:

El valor atributo “href” y el elemento <a>se muestran resaltados con un fondo en berde. Esto indica que esos valores se pueden reemplazar y que podemos tabular automáticamente entre ellos mientras los rellenamos – sin tener que usar las teclas de cursor o tocar el ratón (haciendo las cosas más rápidas).

Sin tener que mover el cursor o el ratón, podemos empezar a escribir la url de la página de login que queremos enviar a los usuarios que no estén autenticados en el sitio:

Cuando lo hagamos, podemos pulsar de nuevo el tabulador y VS sobresaltará el segundo parámetro en el editor (sin tener que mover el cursor o el ratón):

Ahora podemos escribir el texto que queramos (otra vez, sin tener que mover el ratón ni el cursor):

Una vez que hemos terminado con el <Anonymoustemplate> nos podemos mover al template “<LoggedInTempalte>”. Escribimos “<log” en el editor para que nos aparezca el intellisense – y seleccionamos el snippet “loginname”:

Cuando tabulamos se ejecuta el snippet – y nos aparece el siguiente código:

La propiedad “FormatString” se ha preformateado con un texto por defecto. El valor también se ha sobresaltado en el caso de que queramos cambiarlo (sin tener que mover el cursor ni el ratón). Para este ejemplo dejaremos el texto por defecto.

El código final es el siguiente:

Cuando ejecutamos nuestra aplicación se mostrará el enlace “[Login]” cuando no estemos autenticados:

Cuando estemos logados veremos el string siguiente:

El número total de pulsaciones para implementar todo este escenario es de menos del 15% que teníamos que hacer ántes. Escribiendo rápido, he visto que podía implementar todo esto en menos de 15 segundos 🙂

Snippets en ASP.NET MVC

Los snippets integrados están disponibles para todos los controles ASP.NET y HTML.

También están disponibles para escenarios de vistas de ASP.NET MVC, y para todos los ASP.NET MVC HTML helpers.

Por ejemplo, podemos escribir “<act” en una vista ASP.NET MVC y seleccionamos el snippet “actionlink”:

Cuando  lo completamos tabulando nos pondrá este código:

Fijáos que los valores de “linktext” y “actionname” están marcados como parámetros del snippet – es decir, podemos reemplazarlos rápidamente sin tener que mover el cursor o tocar el ratón. El primer parámetro se selecciona por defecto – con lo que podemos escribirlo inmediatamente, luego tabulamos para seleccionar y reemplazar el segundo parámetro:

Snippets personalizados

Visual Studio 2010 incluye más de 200 snippets que podemos usar nada más instalarlo.

Lo que es realmente divertido es que no estamos limitados a usar esos snippets. Podemos crear rápidamente nuestros propios snippets (completarlos con parámetros reemplazables) e importarlos a VS 2010, incluso compartirlos con otros desarrolladores. Esto hace muy fácil automatizar tareas comunes.

Este artículo describe el soporte de snippets que ya existía en VS 2008, y nos muestra más información sobre cómo crear y administrar nuestros snippets.

Resumen

Los snippets son herramientas útiles que nos permiten reducir el número de pulsaciones en el editor, y nos permiten completar escenarios y tareas mucho más rápidamente. Tener snippets no sólo en VB y C# sino también en HTML, ASP.NET y archivos JavaScript, hace esta característica mucho más útil – y te hace más productivo aún.

Espero que sirva.

Scott.

P.D.: he estado usando Twitter más reciente mente para hacer post rápidos y compartir enlaces. Podéis seguirme en Twitter en http://www.twitter.com/scottgu (@scottgu es nombre en twitter).

Traducido por: Juan María laó Ramos.

Artículo original.