[Tips] Utilizando Helper JSON con WebMatrix & Razor

Una de las formas más comunes de intercambio de datos entre el cliente y el servidor en la web es JSON, (Javascript Object Notation).  Es por esto que se incluyó en WebMatrix un Helper que nos va a permitir utilizar esta notación para obtener los datos desde el servidor, para luego consumirlos con jQuery.

Este Helper tiene los métodos Decode, Encode y Write. para Este ejemplo vamos a utilizar Write, cuya declaración:

public static void Write(

         Object value,

         TextWriter writer

)

Este método toma un objeto  y un textwriter,la propiedad de salida de la clase HttpResponse es un objeto TextWriter que envía mensajes de texto desde el servidor web al cliente que solicita la petición.

El ejemplo (BackEnd)

La idea es que el objeto select que muestra las regiones obtenga los datos desde la base    asíncronamente,  además cuando se selecciona un ítem desde el select vamos a imprimir en un lista las ciudades asociadas a la región:

image

Vamos a crear dos archivos ObtCiudades y ObtRegiones, cada uno nos va permitir obtener los datos necesarios desde las tablas:

image image
Tabla Regiones Tabla ciudadaes

Archivo ObtRegiones

@{

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

var sql =“Select IdRegion, NombreRegion from Regiones order by IdRegion asc”;

var data = db.Query(sql);

Json.Write(data,Response.Output);

 

}

Archivo ObtCiudades

@{

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

    var IdRegion =UrlData[0] ;

    var sql =“Select IdCiudad, NombreCiudad from Ciudades where IdRegion=@0
              order by IdCiudad asc”
;

    var data = db.Query(sql,IdRegion);

    Json.Write(data,Response.Output);

   

}

Puedes observar que en los dos casos, se hace la selección a la tabla y se utiliza el Helper JSON para escribir los datos. En ObtCiudades, aprovechamos el helpers de UrlData para obtener el parámetro IdRegion, ya que la llamada que hará jquery a este archivo tendrá la forma:

http://localhost:/ObtCiudades/8

El FontEnd

Vamos a utilizar JQuery para hacer las llamadas a los archivos que nos van a entregar los datos:

<script type=”text/javascript”>

 $(document).ready(function(){

       $.getJSON(‘ObtRegiones’, function(data) {

            $.each(data, function(index, region) {

                    $(“#cbregiones”).append(“<option value='”+
                      region.IdRegion +
“‘>”

                    + region.NombreRegion +“</option>”);

            });

     

        });

       

  (“#cbregiones”).change(function(){

     $(“#ulciudades”).html(“”);

     $.getJSON(‘ObtCiudades/’+ $(this).val(),

       function(data) {

          if (data.length>0){

            $.each(data, function(index, ciudad) {

              $(“#ulciudades”).append(“<li>”+ ciudad.NombreCiudad +“</li>”);

            });

           }else{

            $(“#ulciudades”).append(“<li>No hay Datos para la Región</li>”);

           }

        });

    });

 });

</script>

Cuando carga la página (evento ready de document), hacemos la llamada al archivo ObtRegiones, e iteramos sobre los datos (data) que se obtienen mediante la sentencia .getJSON.  Vamos agregando con append el html necesario para armar el select.

Luego cuando se gatilla el evento change del select de regiones, hacemos la llamada a ObtCiudades y concatenemos el idRegion a esa llamada:
$.getJSON(‘ObtCiudades/’+ $(this).val()

En el caso de no haber datos (data.length), enviamos un mensaje en la misma lista de que no existan datos para la selección.

image

Y listo!, ejemplo funcionando, bastante sencillo como lo es WebMatrix & Razor y su gran cantidad de helpers que nos facilitan el desarrollo.

Espero que te sirva!

Saludos,

Gonzalo

Recomendación – Jo HTML5 Mobile App Framework

Hola, quería mostrar un excelente framework de JavaScript para crear aplicaciones web móviles, se llama JO, así se simple el nombre, pero es bastante poderoso, dando compatibilidad para IOS, Android y Symbian (lo estoy testeando en Blackberry).

Es bastante rápido, tiene distintos Widgets para trabajo con formularios.

image image image

Como indica su creador en  http://joapp.com JO es:

  • Una framework que genera  bonita interfaz de usuario
  • Con manejo de DOM, eventos y datos
  • Open Source Sonrisa
  • Bajo licencia OpenBSD
  • Multiplataforma (webOS, iOS,Android, Symbian, Safari, Chrome y Dashboard Widgets
  • Liviano y eficiente
  • Minimizado y Gzipeado alcanza un poco más de 12K sin utilizar dependencias
  • Compatible con PhoneGap (para crear apps que parezcan nativas)
  • Combinable con la mayoría de los otros frameworks existentes

Personalmente me gustó  mucho este frameworks, más aun después de ver el siguiente video, simplemente espectacular.

A diferencia de jquerymobile, este fx es 100% uso de JavaScript (no agregar etiquetas data a los elementos),  lo que hace que nos de cosquillas en los dedos para programar. En donde las UI se van instanciando  y cada elemento es un objeto creado por JS y utilizamos listeners para asociar el comportamiento, bastante cool.

Toda la documentación, librería y ejemplos están en :http://joapp.com

Eso es todo! nos vemos
Saludos,
Gonzalo

PD: Mira el video!

Tutorial–Creación de un Helper para WebMatrix & Razor

Hola, que tal, en este tutorial vamos a revisar como crear un Helper sencillo para utilizar con WebMatrix. Hay dos formas de crearlo, como DLL con Visual Studio (más adelante vamos a hacer uno), y como clase en el mismo WebMatrix. Justamente de esta forma vamos a crear nuestro Helper.

Lo que quiero conseguir es un helpers al que le pase un valor y presente un cuadro en pantalla indicando que el producto está en oferta y cual es el valor a pagar:

image

Paso 1:
Nos vamos a ir paso a paso,  lo primero es crear una carpeta llamada App_Code en nuestro proyecto de WebMatrix. (Si, el mismo nombre de la carpeta de nuestros proyectos con Visual Studio).

image

Paso 2:
Creación del helper propiamente tal, para esto vamos a crear dentro de la carpeta App_Code el archivo Descuento.cshtml, es en esta clase, que vamos a programar nuestro helper.

@helper RenderDescuento(double precio)

{

<text>

    <style type="text/css">

    .caja

    {

           width: 200px;

           padding: 15px;

           background-color:#FFFFCC;

           border: 2px solid red;

           border-radius: 9px;

           box-shadow: 0 0 4px #999999;

           position:relative;

    }

    .caja img{

           position:absolute;

           left:-11px;

           top:-11px;     

      

    }

    </style>

    <div class="caja">

        <p>Compre hoy solo por <strong>$ @(ObtDescuento(precio))</strong>
         
con<strong>10%</strong>  de descuento!
       
</p
>

        <img src="img/oferta.png"/>

    </div>

</text>

  

}

 

@functions {

    public static double ObtDescuento(double precio)

    {

    return precio * 0.9;

    }

}

Como puedes ver, con la etiqueta text podemos agregar HTML y CSS (también JavaScript) a nuestro helper, de manera no solamente efectuar una operación matemática sencilla en este caso, si no también poder presentar un efecto visual.

Hay ciertas consieraciones que tenemos que revisar, por ejemplo se comienza con la sentencia @helper, esto le indica a webmatrix la naturaleza de esta clase, este helper que se llama RenderDescuento no devuelve valor, por lo que no es una función, si no que escribe el html generado dentro. 

Sin embargo podemos crear funciones, siempre dentro de la sentencia @funcion, en este ejemplo se calcula el 90% del valor ingresado, y mediante el uso de CSS podemos lograr el efecto que deseamos.

Paso 3:
La Llamada al helper, que es sin duda la parte más simple (si es que hay algo difícil!),

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
         <p>
            @{
              var precio =30000;
            }

        Compre una bicicleta por @precio

            @Descuento.RenderDescuento(precio)

        </p>

       

    </body>

</html>

Como puedes ver, se hace la llamada al herper con @Descuento.RenderDescuento(precio),obviamente esto puede estar aplicado a una lista de registros desde la BD, etc.

Y al momento de ejecutarlo:

image

Tenemos nuestro Helper funcionando Sonrisa,

Espero que te sirva!
Chalalo

[Tips] WebMatrix & Razor, trabando con gráficos.

Una de las tareas más recurrentes en los desarrollos web es el trabajo con gráficos, es por eso que WebMatrix & Razor proveen un helper Chart que nos permite trabajar con gráficos de barra, columnas, de torta y más.

Para que te hagas una idea de lo que se puede lograr:
image

Voy a resumir mostrando ejemplos de como crear gráficos, el primer caso es mostrar un gráfico a partir de un arreglo.

@{  // chartType: “Pie”,

  var myChart = new Chart(width: 600, height: 400)

    .AddTitle(“Horas Extras del Mes – Abril”)

    .AddSeries(

    name: “Empleados”,chartType: “Pie”,

    xValue: new[] {  “Gonzalo”, “Felipe”, “Carolina”, “José”, “Cristina” },

    yValues: new[] { “2”, “6”, “4”, “5”, “3” })

    .Write();

}

Solo este simple código nos permite generar un gráfico de torta:

image

Ahora si cambiamos chartType: “Pie”, a “Line” obtendremos:

image

Lo cambiamos a “Bar”

image

y ahora “Radar”

image

En realidad, puedes ver todos los tipos por acá , la lista es grande, prueba que tal van quedando Sonrisa (el Default es Column)
http://msdn.microsoft.com/en-us/library/system.web.ui.datavisualization.charting.seriescharttype.aspx

Ahora bien, si quieres agregar contenido, te vas a dar cuenta se esta generando una imagen que se visualiza a partir de la url en donde se ejecuta el helper:

image

Ahora, veremos como incrustar este gráfico en una página web, con contenido (la nada misma, es solo para ejemplo) y obteniendo los la info desde la base de datos.

Vamos a tener una página que es donde se va “incrustar” el gráfico, noten que podemos pasarle parámetros por Get a al archivo que va a generar el gráfico(GraficoBD.cshtml?valor=4)

<!DOCTYPE html>

<html>

  <head>

    <title>Ejemplo de Grafico</title>

  </head>

  <body>

    <h1>Ejemplo</h1>

    <p>El siguiente gráfico se genera en  <em>GraficoBD.cshtml</em></p>

    <p><img src=”GraficoBD.cshtml?valor=4″ /> </p>

  </body>

</html>

Ahora si revisamos el archivo GraficoBD.cshtml veremos:

  @{

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

    var valor = Request[“valor”];

  var data = db.Query(“SELECT Nombre, Precio FROM Productos where
                       id<@0″
,valor);

   

    var myChart = new Chart(width: 300, height: 200)

        .AddTitle(“Precio de Productos”)

        .AddSeries(“Default”, chartType:“pie”,

                   xValue: data,

                   xField: “nombre”,

                   yValues: data,

                   yFields: “Precio”)

        .Write();

 

}

En este caso se esta consultado una tabla desde la base de datos y se filtra por Id (si, si sé el ejemplo es burdo y quizás la consulta es peor, pero se entiende no?).  Entonces al ahora momento de ejecutar el ejemplo (la página contenedora).

image

Como ves, es bastante fácil, el helper Chart es bastante útil para crear gráficos de manera bastante rápida y sencilla.

Si están interesados en WebMatrix & Razor puedes ver este resumen de WebCast con sus materiales de ejemplo y presentación:

http://geeks.ms/blogs/gperez/archive/2011/05/28/webmatrix-recopilaci-243-n-de-todas-las-sesiones-del-ciclo.aspx

Nos vemos!
Chalalo