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 !

Notificaciones no bloqueantes y bonitas: Usando ToastR

Muchas veces queremos que nuestra aplicación web muestre alertas, notificaciones, avisos y errores de una manera personalizada. El problema de las típicas notificaciones que nos ofrece js son feas y bloqueantes. Felizmente hay una libreria js que nos permite hacer estas notificaciones agradables a la vista del usuario de una manera fácil. Esta librería se llama ToastR y la puedes descargar desde Github. Desde aquí nos bajamos el js y el css y lo integramos a nuestro proyecto. En esa página puedes ver también toda la documentación pero en este post te lo resumo un poco :).

- Una vez añadidos los archivos .js y .css de Toasr (ojo, este librería hace uso de jquery, asi que tambien es necesario que esta librería este en nuestro proyecto) a tu proyecto creamos una nueva página html y referenciamos a la hoja de estilos, a jquery y a toastr.js:

-Lo siguiente es crear unos cuantos botones dentro del body de nuestra página para ver los diferentes tipos de notificación que nos ofrece toastr.

 

Usando ToastR

-Y por ultimo escribir el siguiente script en la parte final de la página (aunque puedes escribirla donde quieras, pero por temas de optimización post que espero escribir más adelante se recomienda poner los scripts al final del todo.

Resumiendo,

• Descargamos el js y css de ToastR y lo añadimos al proyecto. 
• Luego creamos una nueva página y lo referenciamos al proyecto. 
• Creamos cuatro botones, cada con una función onclick() diferente.
• Y por ultimo creamos el script necesario para ejecutar la aplicación. En el documento.ready() de la página ponemos el siguiente código:

 
 toastr.options.closeButton = true;

Esto nos indica que las notificación podrán mostrar el boton de Cierre. En caso no lo quieras mostrar, le pones false y ya está :).

Y bueno el resultado es el siguiente:

Notificación Info

Notificación Warning

Notificación Succcess

Notificación Error

Como vean Toasr nos permite mostrar notificaciónes bonitas de una manera fácil. Además tambien ofrece otras propiedas para mostrar tu notificación de diferentes maneras, posiciones y animaciónes. Todo esto lo puedes ver en la documentación. Aquí te dejo un ejemplo

http://codeseven.github.io/toastr/demo.html

Que lo disfrutes, hasta la próxima.

LLamar a una función js desde un controllador en Asp .Net MVC

Al fin tengo el blogspot libre y sin bloqueos desde el curro =)... Este post va para responder la pregunta a alguién que me pregunto hace un tiempo como hacer esto.

Aunque la verdad es raro querer ejecutar una funcion js desde un controlador, aquí muestro la manera en que "yo" como lo haría.

1. Crearia una clase que tendra como propiedad un string que tendra el código js que queremos ejecutar:

 
    public class DemoJs
    {
        public string JsFunction { get; set; }
    }

2. Luego sigo con el controlador, en mi caso es un ejemplo simple ya que solo quiero llamar a la funcion js.

 
    public class DemoController : Controller
    {
        //
        // GET: /Demo/
        public ActionResult Index()
        {
            var demoJs = new DemoJs();
            demoJs.JsFunction = "$( window ).load(function() { DisparaAlert();}); ";
            return View(demoJs);
        }
    }    

Aquí la explicación, inicializo el objeto y en la propiedad JsFunction escribo el código js que quiero ejecutar, en este caso lo que hago es disparar la función "DisparaAlert()" cada vez que la página ha sido cargada.

3.Genero la vista de este ActionResult

@model Demo.Models.DemoJs

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


Index

La vista lo que hace es llamar a jquery y luego más abajo en la sección js de la página acceder al modelo de la vista y mostrar la propiedad que tenia la funcion js que queriamos que se ejecute en nuestra aplicación. Como la función que seteamos en esta propiedad dijimos que se ejecute la función DisparAlert cada vez que se cargue la página, en la parte de js de la vista tambien declaramos esta función y dentro de ella ponemos un alert sólo para mostrar que esto funciona.

Como ven es un artificio, aunque como dije al principio del post, me parece raro llamar una función js desde un controlador pero como en MVC no tenemos un método RegisterClientScriptBlock o parecidos, esta puede ser una manera. Espero que les sirva de algo , hasta la prox !