[WebMatrix & Razor] Uso del Helper RunPage() para capturar excepciones

Hola, es un titulo largo pero no encontré otro titulo adecuado. Este es un ejemplo que se mostró en la serie de WebCast de WebMatrix y lo encontré bastante interesante.

Para comenzar a explicar el ejemplo tenemos que revisar cual es el modelo de ejecución de una página ASP.NET Web Pages:

Cuando se hace el request a una pagina, primero se comprueba si existe el archivo _AppStart (luego hablaremos más de ello), si existe, lo ejecutamos, si no, se comprueba si existe  el archivo _PageStart, y es aquí en donde podemos utilizar el helper RunPage(); este helper permite la ejecución de la página dentro del contexto del _PageStart, de manera que podemos “encapsular” la página a la que hicimos request con algún comportamiento dado por el _PageStart.

image

El archivo _PageStart, cuando esta presente se ejecuta antes de que cualquier página se ejecute, y su ámbito es la carpeta, esto es, si tengo una carpeta con su propio _PageStar, va a afectar a la ejecución de todas las páginas de esa carpeta.

Ahora el ejemplo:

Vamos a tener en una carpeta la siguiente estructura:

image

Entonces, tal como se explicaba antes,  al momento de hacer el request sobre la página exception.cshtml primero se ejecutará _PageStart, el código de exception.cshtml provoca una excepción, sin embargo, esta se encuentra en el contexto de la página _PageStart que captura esta excepción y redirecciona hacia Error.cshtml.

Veamos el código de _PageStart.cshtml

@{

try

{

  RunPage();

}

catch (Exception ex)

{

 Response.Redirect("Error.cshtml?source=" +  
  HttpUtility.UrlEncode(Request.AppRelativeCurrentExecutionFilePath));

    }

}

Código de Página Exception.cshtml (Obviamente la BD no existe!)

@{
   var db = Database.Open("DBNoExiste");
}

Código de la Página Error (Obtenemos por Request el error desde la página _PageStart)

<!DOCTYPE html>

<html>

    <head>

        <title>Pagina de Error</title>

    </head>

    <body>

<h1>Reporte de Errores</h1>

<p>Un Error se ha producido en el siguiente archivo: @Request["source"]</p>

    </body>

</html>

Como habíamos revisado,  se va a ejecutar Exception.cshtml en el helper RunPage() de _PageStart, y al capturar la excepción de la página vamos a poder redireccionar sin que se produzca un error no manejado.

Espero que te sirva este tips, como había dicho, es interesante!.

Saludos,
Gonzalo

 

WebMatrix– Recopilación de todas las sesiones del ciclo.

image

Hola!, ya terminamos el ciclo de charlas sobre WebMatrix  por lo que corresponde hacer la recopilación de todas las sesiones ( que fueron 5).

Sesión 1 WebMatrix : Intro a WebMatrix y Razor Sintax – ASP.NET WebPages

Sesión 2 WebMatrix :Creando Layouts Consistentes y manejo de datos con Razor.

Sesión 3 WebMatrix :Agregando componentes en a nuestras páginas, Trabajo con imágenes, Video, Email, componentes de redes sociales a nuestras páginas con WebMatrix & Razor

Sesión 4 WebMatrix: Agregando Seguridad y y MemberShip a nuestras páginas, Análisis de Tráfico y mejoramiento de performance del sitio mediante Caché.

Sesión 5 WebMatrix: Introducción al Debuggin con ASP.NET WebMatrix, customizando el comportamiento, creación de helpers y el salto hacia Visual Studio 2010

Saludos!
Gonzalo

HTML5–Utilizando el LocalStorage, ejemplo práctico.

Hola que tal? Como ya saben hablar HTML5 está muy de moda, entonces como hay que ponerse a tono vamos a hacer un ejemplo de la utilización del localStorage de HTML5.

Con esta funcionabilidad vamos a poder implementar un cache local en el navegador, es decir, almacenar información en el cliente de manera persistente a lo largo de la sesión de un usuario. Esta tecnología viene a sustituir las cookies, además el tamaño máximo es entre 5 a 10 Megas (Depende de cada navegador), puedes revisar esto acá:

http://arty.name/localstorage.html
y revisar el post del Master John Resig sobre el tema:
http://ejohn.org/blog/dom-storage/

Y también es importante remarcar que los datos van a están disponibles mientras el usuario no cierre la ventana y están asociados a un dominio.

Ahora el ejemplo, primero vamos a tener el siguiente HTML, que consiste en una lista:

<!DOCTYPE html>
 
<html lang=”en”>

    <head>

        <meta charset=”utf-8″ />

        <title></title>

    </head>

    <body>

    <header>

       <h1> Mi Lista de Tareas </h1>

       <span id=”mensaje”></span>

    </header>

        <section>

            <ul id=”lista” contenteditable=”true”>

                <li></li>

            </ul>

        </section>

     <input type=”button” id=”limpiar” value=”Limpiar” />

    </body>

 </html>

Podemos observar la propiedad contenteditable=”true” que es de HTML5 y nos permite editar el elemento, de esta manera los elementos de la lista los vamos a poder ingresar desde el teclado Sonrisa

Ahora la idea es que cuando el foco se salga de la lista, podamos almacenar la información de los elementos de la lista en el localStorage de manera de refrescar la página y que los datos no se pierdan (alguien recuerda el viewstate?). Veamos el código Javascript:

<script type=”text/javascript” src=”js/jquery.min.js”></script>

<script type=”text/javascript”>

$(document).ready(function() {

        $(“#limpiar”).click(function(){

               localStorage.removeItem(‘listado’);

         });

           

         $(“#lista”).blur(function(){

                 localStorage.setItem(‘listado’,$(“#lista”).html());

          });

        if (localStorage.getItem(‘listado’)){

                $(“#mensaje”).text(“Desde el LocalStorage”);

                $(“#lista”).html(localStorage.getItem(‘listado’));

            }else{

                $(“#mensaje”).text(“Sin datos en  el LocalStorage”);

            }

        });   

</script>

Primero que nada , tenemos un botón que va a limpiar la lista, con el método removeItem podemos remover el elemento almacenado, también podemos utilizar clear() para remover todos los items dentro del LS.

Luego en el evento  blur() de la lista, esto es, cuando se saca el foco, vamos a almacenar los que se ha escrito, es decir, el contenido html, para esto utilizamos el método setItem en donde especificamos el KeyName y los datos  a almacenar.

El código que viene a continuación nos permite determinar si existe el elemento almacenado dentro de la cache mediante el keyname, y si es así enviamos un mensaje y al elemento lista le asignamos el la propiedad html (esto es por que ocupamos jquery si no, es innerHTML) el contenido desde el LS.

Y el resultado:

image

Comienzo a llenar la lista a mano, la lista es editable.

Luego al recargar la página (o al tener otro IE9 abierto y cerrar la página del ejemplo).

image

Y si presiono Limpiar y luego recargo:

image

Espero que te sirva, vi este ejemplo en un video, lo modifiqué un poco, y quería compartirlo Sonrisa
Nos vemos!

Saludos!
Gonzalo

Webcast MSDN: HTML5, CSS3 y Pinned Site con Internet Explorer 9

Hola! , los quiero invitar al siguiente WebCast donde vamos a revisar HTML5, CSS3 junto a Internet Explorer 9

image Usted ya sabe lo que se ha realizado para hacer que Internet Explorer 9 sea más rápido, conoce las nuevas características, pero sabrá si se puede escribir el código para hacerlas realidad?. Haremos una descripción rápida de lo que es nuevo, pero dive deep algunas de las geniales características de HTML5, CSS3, y ECMAScript 5 para comprender mejor la forma en que va a permitir a los desarrolladores a empezar a construir los sitios web de próxima generación. Veremos en tan sólo un puñado de líneas de código, podemos añadir Jump Lists, notificaciones y otras características Pinned Site. Después de asistir a esta sesión, usted estará listo para comenzar a escribir sus propias aplicaciones HTML5!

Regístrate en

https://msevents.microsoft.com/CUI/WebCastEventDetails.aspx?EventID=1032477259&EventCategory=4&culture=es-AR&CountryCode=AR

Nos vemos!

[Material] Sesión 4 WebMatrix : Agregando Seguridad, MemberShip, Analisis de Tráfico y mejoramiento de performance mediante Cache

Hola!, les dejo la presentación de la cuarta charla de ciclo de WebMatrix, y los ejemplo de código con sintaxis Razor.

Puedes ver el video de la presentación acá:
https://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032480612&Culture=es-AR

Saludos!
Gonzalo

WebMatrix & Razor–Uso del Helper WebCache

Hola que tal,  hace poco di un WebCast sobre WebMatrix y uno de los puntos que toque fue el tema del Helper WebCache. Este Helper nos permite setear, obtener y remover Items desde la Cache. Demás está decir que podemos obtener mejoras sustanciales de performance al almacenar el memoria elementos de baja frecuencia de actualización, y que en ciertas ocasiones, toman un tiempo considerable.

En el webcast surgió un comentario sobre el ejemplo  que había dado, que era simplemente almacenar en cache una variable con la fecha y la hora , se requería algo más “real”, como con bases de datos, así que lo prometido, es deuda.

El ejemplo

Vamos a presentar en pantalla una lista de países (todos empiezan con la letra A), esta lista, por su naturaleza tiene poca frecuencia de actualización, por lo que vamos a consultarla y almacenarla en Cache, de manera que la segunda vez que consultemos, ya no se haga la consulta a la BD.

La BD se llama MiBD y tiene una tabla que se llama Países, que tiene un Id y un Nombre:

image

El código fuente que paso a explicar:

@{

    var cacheItemKey = “Paises”;

    var cacheHit = true;

    IEnumerable<dynamic> paises=null;

   //tratamos de recuperar el dato en el cache

    paises = WebCache.Get(cacheItemKey);

  

    if (paises == null) {

        cacheHit = false;

    }

 

    if (cacheHit == false) {

        var db = Database.Open(“MiBD”);

        paises = db.Query(“SELECT Id,Nombre FROM Paises”);

        WebCache.Set(cacheItemKey, paises, 1, false);

    }

}


<!
DOCTYPE html>

<html lang=”en”>

    <head>

        <meta charset=”utf-8″ />

        <title></title>

    </head>

    <body>

        <h1>Ejemplo de Cache con WebMatrix</h1>

      <div>

        @if (cacheHit) {

            @:Listado de Paises desde la Cache

        } else {

            @:Listado de Paises desde la BD

        }

    </div>

        <ol>

            @foreach(var row in paises){

             <li>@row.Nombre</li>

            }

        </ol>

    </body>

</html>

Para almacenar un ítem en cache, debemos asignarle un nombre único, para esto utilizamos la variable cacheItemKey, utilizaremos también la variable cacheHit, en donde almacenaremos si es que el encontramos el ítem de cache a partir del cacheItemKey.
Con WebCache.Get, tratamos de obtener los datos desde el cache, si no existen entonces vamos a recuperar los datos desde la base de datos y luego seteamos el cache con WebCache.Set, es importante ver en que consisten los parámetros de este método
:

WebCache.Set(cacheItemKey, paises, 1, false);

  • El primer parámetro corresponde al nombre del item de cache.
  • El segundo parámetro corresponde al dato (en este caso, una colección) que se va a almacenar en Cache.
  • El tercer parámetro corresponde a la cantidad de minutos que la info se va a almacenar en la cache.
  • El Cuarto parámetro , si es verdadero, el contador de minutos se vuelve a cero si es que alguien acceso a los datos, y si es falso, si o si la cache se va a limpiar luego de los minutos establecidos.

Puedes ver la documentación oficial de método acá:
http://msdn.microsoft.com/en-us/library/system.web.helpers.webcache.set%28v=VS.99%29.aspx

Luego utilizamos la variable que almacena si es que encontramos el ítem de cache para mostrar el mensaje del origen de los datos a mostrar y a continuación mostramos la colección.

Al ejecutarlo la primera vez:

image

Y la segunda vez:

image

Como dice el mensaje, estos datos se obtuvieron desde la cache.

Espero que este ejemplo deje un poco más claro que en el webcast el uso del Helper WebCache  Sonrisa

Saludos,
Gonzalo

Evento Presencial – El Futuro de la Web, Microsoft Chile

image Hola que tal, los quiero invitar a un evento presencial sobre el “Futuro de la Web”, en donde vamos revisar las principales tecnologías y tendencias, comprar y discutir sobre ventajas y desventajas y el RoadMap que deberíamos seguir según el enfoque de tus proyectos Web

Inscríbete en:
Regístrate aquí:
http://bit.ly/lTXHhf

Si no puedes asistir, síguelo en línea aquí: http://bit.ly/kRYUvX


Conferencia Técnica MSDN: ¿Cuál es el futuro de la Web?

Agenda:

  • Introducción (Historia del desarrollo web)
  • HTML5
    • Introducción y definición
    • Escenarios de Uso
  • ASP.NET WebForm, ASP.NET Web Pages, ASP.NET MVC (MVC muy poco ya que tendremos otro evento para esto)
    • Roadmap
    • Herramientas
    • Selección de Arquitecturas
    • Escenarios de Uso
  • Silverlight
    • Características de Silverlight
    • Escenario de Uso
    • La gran pregunta HTML5 o Silverlight?
    • Conclusiones

Oradores:
Juan Carlos Olamendy, MVP de Visual C# y Gonzalo Pérez, MVP de ASP.NET
INFORMACIÓN IMPORTANTE:
– Microsoft se reserva el derecho de utilizar los espacios disponibles en la sala, una vez comenzado el evento.
– Este evento no incluye el pago de estacionamiento.

Nos vemos allá!,
Saludos,
Gonzalo

[Alerta] jQuery 1.6 Atención con los efectos del cambio en attr

Hoy tenemos la noticia de la nueva actualización de jQuery, ya vamos en la versión 1.6,y si no me apuro en escribir este post, cuando termine, ya habrán liberado una nueva versión.

jQuery 1.6 viene con mejoras de performance en la selección de atributos y además establece una diferencia entre atributo y propiedad (ahora existe el prop()) entre otras cosas, puedes ver más detalle en http://blog.jquery.com/2011/05/03/jquery-16-released/

Sin embargo, el cambio en la funcionalidad de attrib, cambio que se hace necesario para dar soporte a la compatibilidad con HTML5, pero que nos puede complicar si no somos cuidadosos.

Voy a poner un ejemplo en el que podremos ver el problema:

<html>

<head runat=”server”>

    <title></title>

    <script src=”Scripts/jquery-1.4.1.min.js” type=”text/javascript”></script>

    <script type=”text/javascript”>

        $(document).ready(function () {

            $(“#bt_test”).click(function () {

                alert($(“#ck_test”).attr(“checked”));

            });

        });

    </script>

</head>

<body>

    <form id=”form1″ runat=”server”>

    <div>

        <input type=”checkbox” id=”ck_test” checked>

        Test</div>

    <input type=”button” id=”bt_test” value=”Test” />

    </form>

</body>

</html>

 

El diseño de esto extremadamente simple:

image

Como vez estamos utilizando jQuery 1.4.1 y al momento de presionar el botón, el resultado es true:

image

Ahora vamos a utilizar jQuery 1.6 eliminando la referencia a la versión 1.4.1:

<script src=”http://code.jquery.com/jquery-1.6.min.js”
type=”text/javascript”></script
>

y el resultado que vamos a obtener es un string vacío:

image

 

Entonces, es recomendable revisar nuestro código antes de referenciar la nueva versión. Tenemos que modificar el tag a:

<input type=”checkbox” id=”ck_test” checked=”checked” />

De esta manera se logrará compatibilidad con HTML5 y obtendremos el resultado:

image

Espero que te sirva!
Saludos
Gonzalo