Usando el RenderSection en MVC, aprendiendo a colocar el código en su lugar

Una buena práctica al diseñar una página web para obtener un buen rendimiento en la carga de esta, es cargar los archivos .css al inicio de la página y los scripts al final de esta. Lamentablemente hoy en día sigue habiendo muchas páginas que al renderizarse terminan mostrando los estilos o scripts en muchas partes de la página generando un pobre rendimiento o muchas veces rompiendo código. Normalmente esto sucede al usar vistas parciales que contienen sus propios scripts y al renderizarse en la página que las contiene, estos scripts son renderizados en la posición de su vista parcial.

Está claro que hay casos en el que es necesario cargar ciertos scripts al inicio de la página cuando queremos tener cierta funcionalidad. Un ejemplo claro sería cuando quieres implementar AMD usando Require.js y en este caso es necesario declarar Jquery al inicio de la página para que funcione.

Veamos un ejemplo:

Master Page:
Partial Page:

 
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}


Index

En este código mostramos una página maestra y una pagina parcial. En la página maestra en la línea 12 se referencia al bundle que contiene la librería de jquery, y en la página parcial en la línea 9 se utiliza jquery para lanzar un alert cuando la página este lista. Si ejecutamos debería "en teoría" mostrarse el alert de hola cuando se halla cargado la página, pero sucede esto:

Y se le damos a continue vemos el código total de la página renderizada

Si nos fijamos en la imagen, el código de la vista parcial es añadido antes del final del código de la página maestra y como en la página parcial se hace uso de jquery, cosa que recién se declara al final de la página maestra, es por eso que obtenemos este error.

Felizmente ASP .NET MVC nos permite poder ordenar nuestros scripts de nuestra páginas de una manera ordenada. Si vemos nuevamente el código de la página maestra, en la línea 13 encontramos esta línea:

  @RenderSection("scripts", required: false)

Esta linea de código hacemos uso de la función RenderSection. Esta función nos permite mapear nuestros scripts de nuestra páginas parciales en este parte de la página maestra. Esta función tiene dos sobrecargas en las cuales tiene los siguientes parámetros:

- name: Este será el nombre de la sección con el cual vamos a identificar esta parte de la página que contendrá los scripts que le pasemos.
- required: Es un booleano que sirve para indicar si la sección es requerida o no.

De vuelta al problema inicial, necesitamos que el código js de nuestra vista parcial se pinte al final de todo de la página principal. Para eso hacemos lo siguiente:

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}


Index
@section scripts{
    
}

Como podemos ver en el código en la linea 7, se ha añadido @section scripts donde scripts es el nombre de la sección que antes había declarado en la página principal. Luego he abierto y cerrado llaves y dentro de esas llaves puse el código js de la página parcial. El resultado es el siguiente:

Y el html renderizado sería el siguiente:

De esta manera MVC coge todos los section que tengan scripts al costado y este los pinta en la página principal donde halla declarado @RenderSection con el nombre scripts. Está claro que la página principal u otra página pueda tener varios @RenderSection y @section con diferentes nombres y en la ubicación que quieran. Espero les sea útil. Hasta la próxima :D

Windows Azure - Instalación y primeros pasos

Hola, hoy vamos a hablar de un tema que tenía pendiente y seguro muchos de ustedes ya habrán escuchado pero nunca se hallan puesto a trastear con esto, hablo de Windows Azure. Como sabrán Windows Azure es la plataforma en la nube que nos proporciona Microsoft para crear y consumir servicios en la nube y tener nuestro negocio en la nube de una manera fácil y escalable. Click aquí para más información.

Pero bueno iremos a lo que nos interesa, ¿cómo empezar con esto? ¿cuánto me costará? ¿por que es necesario registrar mi tarjeta de crédito?, muchas preguntas que me hice antes de empezar, felizmente Microsoft nos regala 150$ para probar Windows Azure, los pasos son los siguientes:

- Nos creamos una cuenta de prueba http://azure.microsoft.com/es-es/

Regresando a una de las preguntas que hacia, ¿por qué Microsoft quiere mi tarjeta de crédito?. Pff yo también tengo cierto recelo en esto pero por lo que leí es una forma de Microsoft de asegurarse e identificarte ya que te abre acceso a sus centro de datos y no cometas diabluras (cosa que a lo mejor puede ser cierta o no), a ver si los entendidos en estos comentan por acá :)

Pero bueno seguimos con el tema, nos inscribimos dejamos nuestra tarjeta de crédito.

Y al final después de haber hecho todo correctamente debemos tener la siguiente ventana:

Ya que tenemos el panel de windows azure  vamos a la parte de maquinas virtuales.

Le damos a crear una maquina virtual y tenemos dos opciones

Creación rápida: Esta opción nos permite crear una maquina virtual sin SO, es decir una VM de 0 donde podemos indicar el SO que queremos instalar.

De la galería: Esta opción nos permite escoger una VM ya preconfiguradas como vemos en la imagen, para este post crearemos una VM desde la galería:

Para este ejemplo seleccionaremos una VM con Windows Server 2012 R2 Datacenter y le damos siguiente mostrándose la siguiente ventana:

Esta ventana nos sirve para configurar los datos de esta VM además en la parte de arriba sale un dropdrownlist que nos permite seleccionar la fecha de lanzamiento de la versión de la imagen disponible. Aunque es recomendable utilizar siempre la ultima versión, esto puede ser útil cuando no hemos hecho pruebas de nuestra aplicación en determinadas versiones y no estamos seguros de que pueda funcionar correctamente

Luego damos siguiente y tenemos la siguiente ventana:

Esta ventana nos indica que se va a crear un servicio en la nube. Este servicio en la nube nos permitirá administrar nuestra maquina virtual en la nube.  Luego toca ponerle el nombre a la dos, a través de este nombre junto a .cloudapp.net vamos a poder acceder a nuestra máquina virtual

Luego escogemos la reunión, este tema es muy importante ya que debemos escoger una región que esté cerca a donde tu o tu aplicación se va a usar con mucha más frecuencia, de esta manera evitamos que nuestro servidor se demore mucho en devolver información dando saltos hasta que llegue a donde estemos. La cuenta de almacenamiento es el disco duro y por lo pronto lo dejaremos así. Le damos siguiente

Y por último click al visto bueno de la parte de abajo en la derecha y ya está, nuestra VM se está creando

Esto puede tardar varios minutos ya que se esta inicializando nuestra máquina virtual con el SO y todos sus servicios. Una vez finalizada se muestra la siguiente ventana:

Y si se fijan en la parte de abajo ya podemos conectarnos a ella y si damos doble click en el nombre de la máquina en el listado de maquinas virtuales vemos la siguiente ventana

Acá tenemos varias opciones para administrar nuestra VM, cosa que veremos en el siguiente post para no alargar más este. Espero les sirva para iniciar en el mundo de Windows Azure. Hasta el siguiente post :)

Quitar lineas punteadas del editor de Visual Studio

Hola, un post rapidito :)

Hace unos minutos andaba codeando y sin querer apreté no sé que combinación de teclas y  mi código en Visual Studio se volvió de la siguiente manera:

Como se puede ver, aparecen lineas punteadas en los espacios en blanco, como personalmente no me gusta, es más hasta me resulta algo cansado y fastidioso para la vista quise quitarlo. Así que después de intentar un poco en el menú de Options/Text Editor de Visual Studio me puse a googlear y di con la solución.

Esta funcionalidad de mostrar puntitos en el editor de Texto de Visual Studio se activa y desactiva pulsando la siguiente combinación de teclas:

CTRL + E + S  (en ese orden y sin mantener pulsadas las teclas, sólo el CTRL)

Así que volví a pulsar esa combinación de teclas y listo :D!!

Ps ya saben por si les pasa :D, hasta la próxima :D!

HTML5: Introducción

Hola, ya sé, ya sé, como que este post llega muy tarde, pero como dicen, mejor tarde que nunca. Mi idea es ir creando unos cuantos tutoriales para que la gente que aún no ha migrado a HTML5 y aún no tenga claro de que va, empiece a tener una idea. Empezamos!!

HTML5 es el nuevo standard de HTML el cual trae consigo nuevas funcionalidades y también elimina unas cuantas que pasamos a enumerar.

LO NUEVO

- Nuevos elementos, como el <header>, <section>, <article>, <footer>,<nav>, <aside>, <figure> entre otros.
- Nuevos controles de formulario como  number, date, time, calendar, and range.
- Nuevos elementos gráficos: <svg>, <canvas>.
- Nuevos elementos multimedia: <video>, <audio>.
- Nuevas apis: HTML Geolocation, HTML Drag and Drop, HTML Local Storage, HTML     Application Cache, HTML Web Workers y HTML SSE.

LO QUE SE HA QUITADO

Ya no existen los siguientes tags:

• <acronym>
• <applet>
• <basefont>
• <big>
• <center>
• <dir>
• <font>
• <frame>
• <frameset>
• <noframes>
• <strike>
• <tt>

(Así que ir eliminando estos tags de sus aplicaciones si quieren migrar a la nueva versión.)

NAVEGADORES QUE SOPORTA

En principio HTML5 debería ser soportado por todos los navegadores modernos, aunque no tiene soporte para versiones de IExplorer anteriores a la IE9. 

Si un día quieres saber si tu navegador soporta html5 o algunas de sus nuevas características entra a http://html5test.com/

Felizmente existen herramientas para poder usar(simular) las nuevas características en navegadores que no soportan HTML5 como Modernizr. También puedes hacer uso de los Polyfills, los cuales son scripts que nos permiten realizar tareas de HTML5 en navegadores que no lo soportan.

Creo que para ser una introducción vamos bien, la idea es hacer un post por cada nueva característica o funcionalidad que he comentado acá, a ver que tal se no da :D.. hasta la próxima :)

Reordenando, estructurando los estilos, usando SuitCSS

Hola a todos,

Uno  de los temas que más me fastidia de la parte front de las aplicaciones, es la falta de orden y standard para la nomenclatura y acoplamiento que hay en los archivos css de una aplicación. He visto aplicaciones con archivos .css inmensos, otros en los cuales se machacaba un estilo con otro por encontrarse duplicado, o simplemente que se mezclaban.

Reconozco que es un calvario mantener los .css pero felizmente existen los preprocesadores que nos ayudan mucho en esta tarea como SASS, LESS o Stylus y del cual hablaremos más adelante. Hace unas semanas descubrí un standard para la nomenclatura de estilos que me parece muy interesante y esta teniendo acogida por parte de muchos desarrolladores. Se trata de SUITCSS, un proyecto de GitHub que aparte de también de ser un preprocesador, pretende establecer un standard para nombrar a nuestras clases de estilos de dos maneras.

Empecemos explicando el primer caso:

.namespace-ComponentName-descendentName--modifierName.is-stateName {...}

.namespace: SuitCSS pretende que empecemos nombrando nuestras clases con un namespace. Aunque este parámetro es opcional, se recomienda utilizarlo para tener que evitar conflictos con otros archivos css. Esto debe ser escrito en Camel Case.

-ComponentName: Es el nivel más alto de nuestro componentes. Si nos guiamos a la nueva estructura que propone HTML5, acá se podría declarar los elementos header, section, article, footer, etc. Esto debe ser escrito en Pascal Case.

Archivo CSS usando el namespace y ComponentName juntos

.main-Header{...}
.main-Footer{...}

.popup-Header{...}
.popup-Footer{...}

Página HTML

   ...
   ...


   ...
   ...

-descendantName: Es la parte del componente al cual aplicaremos el estilo. Por ejemplo podría ser un <figure> que esta dentro de un <header>. Esto debe ser escrito en Camel Case.

Archivo CSS 

.main-Header{...}
.main-Header-figure {....}

Página HTML

   
   

      ...
      ...
   

--modifierName: Esta clase nos permite modificar el elemento base de una cierta forma, un ejemplo sería un estilo determinado a un botón por defecto, o los campos de texto que son obligatorios de llenar. Esto debe ser escrito en Camel Case.
Archivo CSS 

.main-Header{...}
.main-Header-figure {....}
.main-Header-button {....}
.main-Header-button--default {....}

Página HTML

   
   

      ...
      ...
   
   
   

.is-stateName: Esta clase nos permite indicar un estado que puede tener un determinado elemento, como habilitado, deshabilitado, seleccionado, etc. Esta clase se escribe con un punto al inicio, lo cual indica que es una clase aparte y que puede ser reutilizada por diferentes elementos, pero es recomendable tenerlo dentro del mismo ámbito del componente por temas de orden y para facilitar luego el uso de preprocesadores. Esta clase se debe escribir en Camel Case también.

Archivo CSS 

.main-Header{...}
.main-Header-figure {....}
.main-Header-button {....}
.main-Header-button--default {....}
.main-Header-button--default.disabled {....}
.main-Header-button--default.enabled {....}

Página HTML

   
   

      ...
      ...
   
   
   

Por último hablaremos del segundo caso:

.u-utilityName {...}

.u-utilityName: Esta clase está pensada para crear estilos globales. El nombre de la clase debe empezar con u seguido de un guión, lo cual nos permite indicar que será un utilitario capaz de aplicar estilos a muchos elementos. Nos puede ser util para establecer estilos para cosas comunes en toda la aplicación, como los tag de title, h1, h2 o para indicar un tipo de posicionamiento o alineación. La idea es que sea una clase que contengan estilos comunes en la aplicación. Debe ser escrito tambien en Camel Case.

.main-Header{...}
.main-Header-figure {....}
.main-Header-button {....}
.main-Header-button--default {....}
.main-Header-button--default.disabled {....}
.main-Header-button--default.enabled {....}
.u-title {...}
.u-buttons {...}

Página HTML

   
   
   

      ...
      ...
   
   
   

Como podemos ver SuitCSS viene a poner orden en la manera en como declarar las clases de estilos en nuestras páginas html. Hace uso del selector por clases y es una manera ordenada y clara de ver los documentos. Sería genial que los desarrolladores empiecen a usar este tipo de standar de nomenclatura para que el mantenimiento de estilos esté más controlado. Espero les sirva, hasta la próxima :)

OFFTOPIC: Nuevas Tecnologías

Hola, aunque en un principio traté de orientar este blog a sólo temas de Visual Studio, poco a poco la cosa va evolucionando y como buen amante de la programación me gusta estar viendo y actualizándome con nuevas tecnologías. Asi que poco a poco (si el tiempo me lo permite) iré posteando sobre nuevos temas que voy tocando en el día a día o sobre temas que me van interesando, así que pronto tendrán temas de MongoDB, HTML5, CSS3, Bootstrap, Angular, Windows Azure, NodeJs, Xamarin y demás tecnologías. Estar atentos y disculpen si a veces pasan semanas y no posteo nada, el trabajo a veces es absorvente, un saludo :)

Generando datos de prueba, usando NBuilder

Muchas veces tenemos la necesidad de generar datos de pruebas por distintas razones. Ya sea para generar prototipos, test unitarios o pruebas de concepto.Imaginemos que tenemos la siguiente clase y queremos crear un listado de 50 nuevos objetos Customer:

 
    public class Customer
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public int Age { get; set; }
    }

Y queremos mostrar un grid con un listado de 50 personas. Reconozco que hace tiempo hacia lo siguiente:
Otros hacen uso de un XML lo cual aún es mas coñazo, o quien sabe que otras técnicas usarán por ahi. No digo que esto no esté mal, pero para que reinventar la rueda cuando tenemos herramientas que ya hacen esto. Para esto tenemos NBuilder Para instalarlo, puedes ir a su página y descargartelo. Yo prefiero instalarlo via Nuget, para lo cual vamos a la Consola de Paquetes de Nuget e escribimos lo siguiente:

 Install-Package nbuilder

Después de tenerlo instalado es tan simple generar la lista de 50 objetos Customer:

Vamos a mostrar el resultado en una vista de MVC de la siguiente manera:

Y generamos la vista con un listado de customers. El resultado es el siguiente:

Espero les ayude, hasta la próxima :)

Usando Sublime Text y instalando el package control.

Hace un tiempo descubrí un editor de texto que me encantaba por la cantidad de plantillas y la forma en que te ayuda a crear diferentes tipos de documentos, sobre todo html y css3 de una manera fácil y rápida. Estamos hablando de Sublime Text, una herramienta open source que tiene una versión de pago pero que también puedes trabajar sin problemas con la versión free.

Entre algunas cosas que me gusta hacer con esto es crear html ya que te permite hacerlo de una manera fácil. Para esto lo que hacemos es abrir un nuevo documento en Sublime, lo guardamos como demo.html por ejemplo y empezamos a crear nuestro html.

Como Sublime sabe que estamos editando un documento html utiliza el marcado respectivo para este tipo de documento, por lo que si escribimos solo html y pulsamos la tecla tab, se genera automaticamente el cuerpo básico de un documento html.

Lo mismo por ejemplo si queremos crear un div con una clase especifica por ejemplo con la clase "header". Lo único que tenemos que hacer es posicionar el cursor dentro del editor de texto en la parte que queremos crear ese div y escribir lo siguiente:

div.header + tecla tab 

El resultado será el siguiente:

Como ven, con algunas reglas podemos ir creando un documento html rápidamente. Pero Sublime tiene muchas cosas más, pero para ello necesitamos instalar un paquete de controles, por defecto al instalarlo por primera vez no lo tiene, pero para que tú puedes verificarlo haces lo siguiente:

- Dentro de Sublime pulsas CTRL + SHIFT + P y te aparece una ventana flotante, dentro de ella escribes Package Control y si es que no devuelve ningún resultado, es porque aún no lo tienes instalado.

Para instalarlo vamos al siguiente enlace:

https://sublime.wbond.net/installation

Copiamos el texto que sale dentro del cuadrado rojo de la imagen:

Vamos a Sublime, al Menú View/Show Console y lo pegamos ahí:

Luego de eso vuelves a dar a las teclas CTRL+SHIFT+P y escribes PackageControl y deben aparecer esta vez resultados:

De la lista de resultados, seleccionamos la que dice Package Control: Install Package. Una vez instalado aparece un listado de los plugins disponibles del Package Control para utilizar en nuestro editor de texto. Como ejemplo utilizaremos el plugin "EMMET" y le damos a enter. Debe salir la siguiente imagen:

Como se ve en la imagen, nos pide reiniciar el editor. Una vez reiniciado volvemos al documento y podemos empezar a jugar con este plugin. En el documento html que estábamos creando ponemos lo siguiente.

div.padre>div.hijos*2

Y pulsamos la tecla tab y el resultado debe ser el siguiente:

Como ven se ha generado un div con la clase padre y dos divs hijos con la clase hijos de una manera super fácil. Si quieren profundizar en esto, busquen en google Zen Coding con sublime y sáquenle partido a todas las funcionalidades y ayudas que nos ofrece Sublime Text.

Un abrazo

Compilando vistas de MVC antes de ejecutarlas

Si trabajas con Asp .Net MVC seguro que te has topado que tu proyecto compila perfectamente en Visual Studio pero si esta vista tiene un error, este error no se mostrará hasta que lo veas en el navegador. Esto puede ocasionarte problemas, perdidas de tiempo al compilar algo que está fallando o un dolor de cabeza muy grande en producción, para entenderlo mejor vamos al código!

Supongamos que tenemos la vista siguiente:

@{
    ViewBag.Title = "Home Page";
    var mensaje = "Aqui va mi mensaje";
}
@section featured {
    

        

            

                
@ViewBag.Title.
                
@ViewBag.Message
            
        
    
}
Compilando vistas en MVC

@mensajes

Si vemos el código, veremos que es una vista simple y que en la línea 3 declaramos una variable que se llama "mensaje" en la cual almacenaremos un string. Luego si nos vamos a la linea 17,  llamamos a esa variable pero escribiéndola mal "mensajes". Si damos a ejecutar el Visual Studio no nos bota ningún error y sólo este error se muestra cuando se muestra la vista ya en ejecución.

El Visual Studio compila satisfactoriamente

El error sólo se muestra en ejecución

Como ven Visual Studio no nos indica que la vista está fallando lo cual nos puede traer problemas más adelante, ya que nadie sabrá que esa página esta mal hasta que la encuentren en tiempo de ejecución. Felizmente VS nos permite configurar esto, lamentablemente esto se logra editando el archivo del proyecto, para lo cual tenemos que hacer lo siguiente:

1- Ir al explorador de soluciones, seleccionar el proyecto que queremos editar, darle click derecho y seleccionar "Unload Project"

2- Una vez descargado el proyecto le das click derecho y seleccionar "Edit [Nombre del proyecto]"

3- Despues de esto se abré el proyecto para editarlo, buscamos el tag "MVCBuildViews" (que por defecto tiene el valor a false) y lo cambiamos a true y le damos a guardar.

4. Por ùltimo volvemos al explorador de soluciones, seleccionamos el proyecto modificado, le damos click derecho y seleccionamos la opción "Reload Project"

Con esto ya tenemos configurado nuestro proyecto para que VS compile nuestras vistas y nos ahorremos dolores de cabezas y collejas inesperadas en producción. Si intentas compilar la solución ahora Visual Studio te mostrará el error en la vista.

Espero les sirva,  hasta la próxima.

Documentando código javascript

Si ya llevas un tiempo en el desarrollo de aplicaciones web, te darás cuenta la evolución e importancia que esta pegando la parte de FrontEnd. Antes se usaba código javascript para lo justo, pero poco a poco ha ido ganando muchas importancia, lo cual genera archivos de js grandes y algunos hasta complejos, con lo que viene bien tenerlos documentados para que la gente que use tu función pueda ver de que se trata y que parámetros necesita.

Para documentar las funciones javascript es casi tan simple como lo haciamos en c#, pero en lugar de poner los comentarios arriba del método o función como lo haciamos en c#, se tiene que hacer dentro de ella.

Ejemplo: Como se comenta el código en c#

Ejemplo: Como se comenta el código en javascript

Es más, si te das cuenta podemos indicarles al parámetro el tipo de valor que tendrá. Con esto, cada vez que llames a tu función js, en mi caso, SaveCustomer, verás que te sale la documentación de la función.

Espero que les sea útil, hasta la próxima :)

Mostrar el número de lineas en el editor de Visual Studio

Hola, les dejo un post cortito que puede ser útil sobre todo para gente nueva que empieza con Visual Studio, aunque valido tambien para gente como nosotros, que llevamos mucho tiempo en ello y se nos olvidó como era.

Personalmente me gusta tener el número de líneas al lado de mi código, entonces al lío.

- Vamos al menú Tools/ Options (Herramientas/Opciones si tienes el VS en español)
- Seleccionamos Text Editor y desplegamos, luego seleccionamos All Languages y por ultimo damos check a Line Numbers.

Damos aceptar y eso es todo.

Editor si números de líneas en el código:

Editor con números de líneas en el código:

Espero les sirve de algo, hasta la próxima :)

Activando el Intellisense de Javascript en Visual Studio 2012 - un poco de kendo

Ya que he empezado a usar habitualmente Visual Studio 2012 en los últimos días, me he topado con características muy interesantes como es el Intellisense para Javascript. A lo mejor este artículo va algo tarde (ya que VS2012 lleva mucho tiempo entre nosotros), pero de seguro mucha gente aún no ha tenido la oportunidad de trabajar con él como hasta poco era mi caso. Pero bueno, para no extenderme más, empezamos!

Cuando creamos un proyecto de MVC4 en Visual Studio 2012, en la carpeta Scripts de tu proyecto web hay un js llamado _references.js

Si abrimos este archivo nos toparemos con algo parecido a esto:

 
/// 
/// 
///  
/// 
/// 
/// 

Este js lo que hace es indicar al Visual Studio que archivos js tendrán Intellisense cuando los referenciemos. Pero ¿qué pasa si queremos tener Intellisense en un js que no está referencia en este archivo? como por ejemplo si queremos tener Intellisense si queremos usar Kendo. La solución es simple, sólo editamos el archivo _references.js y añadimos la referencia a los archivos de js de Kendo que querramos que hagan uso del Intellisense cuando los referenciemos. En mi caso añadimos tres referencias más:

• kendo/jquery.js
• kendo/kendo.web.js
• kendo.aspnetmvc.js

Entonces el _references.js quedaría de la siguiente manera (linea 7, 8 y 9 del código)

 
/// 
/// 
///  
/// 
/// 
/// 
/// 
/// 
/// 

A continuación muestro un par de imagenes de un js, una sin el intellisense js de Kendo, y otra cuando ya por fin el reference.js ya ha sido configurado.

Js llamando a función Kendo sin el Intellisense:  como vemos el intellisense de Javascript nisiquiera reconoce la función.

Js llamando a función Kendo con el Intellisense: al fin el intellisense de Javascript reconoce a la función js de Kendo y nos muestra todos sus parámetros.

En el siguiente artículo mostraré la manera en la que se tiene que documentar los métodos en un js para que cuando se accedan a ellos puedas ver la información del método y la documentación de cada parámetro como se hace en c# con el summary, espero les sirva, hasta la próxima :)

¿Dónde está el 'unshelve' en Visual Studio 2012?

Para los que venimos de Visual Studio 2010 o anterior, pasar al entorno de Visual Studio 2012 a veces puede ser un poquito complicado. Hoy me encontré con la necesidad de recuperar un shelve que realicé hace ya un tiempo y busco el unshelve de la manera en la que buscaba antiguamente. Así que pongo el cursor en la solución, doy click derecho y no encuentro la opción de UNSHELVE  :S:S:S

Entonces para los que se encuentren con la misma situación que yo,  aquí les muestro como encontrar la tan preciada opción de unshelve.


1. Te vas al TeamExplorer -> Pending Changes.

2. Una vez que estés en la parte de Pending Changes, le das click al menú de Actions y le das click a la opción de Find Shelvesets.

3. Esta opción te redigirá a todos los shelves que tengas.

4. Finalmente pones el curso sobre el shelve que quieras recuperar, le das click derecho y ahi encontrarás la opción de unshelve.

Y ya lo tienes, espero les sirva, hasta la prox !