Chalalo Land

Tecnologías ASP.NET y un poco Más

Contacto


 Si quierer cooperar, yo feliz, muy agradecido :)

De donde me Visitan?

Locations of visitors to this page

Generic Content

Si te gustaron los articulos, y te animas te estaría muy agradecido!


Recent Posts

Tags

Community

Blogs de MVP

Amigos Geeks

Blogs Imperdibles

GODS

Archives

Email Notifications

Invitacion a Evento - Webcast MSDN Latam: Aplicaciones Web en la nube con alimentación en Minutos con Windows Azure Mobile Services‏

image

Hola!, los quería invitar a este evento en donde voy a ser speaker, se trata de crear aplicaciones en la nube con Azure Mobile Services, en donde vamos a revisar los conceptos necesarios para comenzar y a a desarrollar una aplicación web móvil que aproveche la potencialidad de esta plataforma. También revisaremos como crear apps con Android y Windows Phone que permitan conectarse a esta plataforma.

Fecha:viernes, septiembre 20, 2013, de 5:00PM a 6:00PM

Los datos para inscribirse!
https://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032559265&Culture=es-AR&community=0

Nos vemos ahí!

Posted: 12/9/2013 15:40 por Gonzalo Perez | con no comments
Archivado en:
Tips-Utilizar WebServices con JSONP, ejemplo práctico

Hola que tal, acá algo que te puede servir. Cuando queremos hacer una petición por ajax, y estamos en otro dominio, te podrás haber percatado que el server envía un bonito mensaje “Access to restricted URI denied”, y es que por motivos de seguridad parece lógico, cuando todo esto partió, que Ajax no funcione en dominios distintos al que lanza el request, pero sinceramente, hoy en día se hace necesario el poder usar servicios web desde el lado del cliente a dominios diferentes. Para estoy hay varias técnicas, como Cors, XMLHttpRequest Level 2 y JSONP (JavaScript Object Notation with Padding), que básicamente es la llamada mediante JSON a dominios diferentes, en este articulo vamos a ver esta última técnica con un ejemplo sencillo(y por esta vez, sin mucha teoría), personalmente hace un tiempo tuve que implementarlo y fue bastante sencillo.

Utilicé jQuery para la llamada, que debe seguir ciertos patrones:

  • Tu llamada hazla con el verbo http GET
  • Setea crossDomain en true
  • Define la URI con el primer parametro como callback
  • Setea el DataType como “JSONP”

function LlamadaJSONP(param1, param2){

   $.ajax({
          type: "GET",
          crossDomain: true,
          contentType: "application/json; charset=utf-8",
      url: http://otrodominio/myws.asmx/NombreWebmethod?callback=?,
          data: {ID_Param1: param1,ID_Param2: param2 },
      dataType: 'jsonp',
          success: function(msg) { 
                    AjaxOK(msg);
                 },
                 error: AjaxError
            });

            function AjaxOK(result) {
                alert(result.d);
            } 
            function AjaxError(result) { 
                 alert("ERROR " + result.status + ' ' + result.statusText);
             }
}    
        
La variable callback nos sirve para que se devuelva el JSON como una llamada a una función. Esto nos permite el NO hacer una llamada Ajax real , si no incluir el archivo como script (y ahi si se permite las llamadas a otros dominios).

El Webmethod simplemente lo marqué con los siguientes atributos(no quise agregar el cuerpo del webmethod, ya que no influía para el ejemplo)

<ScriptMethod(UseHttpGet:=True,ResponseFormat:=ResponseFormat.JSON)

Puede que te encuentres con el siguiente error: Request format is unrecognized for URL unexpectedly ending in XXXXXX, para esto, lo solucionas agregando en el Web.config

<webServices>
      <protocols>
        <add name="HttpGet"/>
        <add name="HttpPost"/>
      </protocols>
</webServices>

y listo!, funcionando sin problemas Sonrisa, problema del dominio cruzado solucionado.
Espero que te sirva
@chalalo!

Posted: 5/9/2013 7:24 por Gonzalo Perez | con no comments
Archivado en: ,
Grabación de WebCast HTML5 y Apps híbridas.

Hola amigos, les dejo la grabación del WebCast llamado:” Todos a bordo para el Futuro de HTML5 Mobile y Aplicaciones web híbridas para Windows Phone 8 y tabletas de Windows”, Esta sesión fue más bien de tips sobre como enfrentar los desafíos del desarrollo con HTML5 en Dispositivos Móviles.

Espero que les sirva!,

@Chalalo

Invitación a Evento- MSDN - Todos a bordo para el Futuro de HTML5 Mobile y Aplicaciones web híbridas para Windows Phone 8 y tabletas de Windows

Hola!,los quería invitar al siguiente evento :

Windows 8 y Windows Phone 8 frente a este desafío mediante la inclusión de Windows Internet Explorer 10 con aceleración por hardware de HTML y los gráficos, compilación JIT JavaScript, seguridad mejorada y un gran soporte para HTML 5. En esta sesión, se muestra Internet Explorer 10 capacidades proporcionadas por el Grupo de Trabajo de Aplicaciones Web W3C incluyendo IndexedDB y almacenamiento Web de datos sin conexión, enchufes Web para la comunicación bi-direccional, Web Workers para roscar y XmlHttpRequest para llamar a los servicios web. Tome sus páginas web sin conexión con caché de la aplicación y hacer que se reconoce la ubicación a través de la API de geolocalización. Te mostramos cómo hacerlo, así como la forma de construir aplicaciones web híbridas Sonrisa

Fecha: 29/08/2013
Hora: 04:00 PM (GMT-05:00 Colombia, Panama). Chile 3:00PM
Si tiene dudas con la conversión de zonas horarias, por favor haga clic aquí

URL de Registro para Asistentes
https://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032559571&Culture=es-AR&community=0

Comenzando Azure Mobile Services–Ejemplo Práctico con HTML5 + JS [Parte 3]

Vamos a profundizar un poco más en el tema de los Script del servidor para el manejo de las acciones, en el post anterior, vimos como validar en la acción de insertar el tamaño de las entradas del nombre y del tipo.

Ahora vamos a realizar puede que no tenga mucho sentido, pero el tema es mostrar un escenario en donde necesitemos leer de un tabla un registro para insertarlo en otra antes de borrar.  Para esto voy a crear otra tabla que se llame “Papelero” , la idea es que antes de borrar un registro en la tabla Películas, leamos el registro, luego lo insertemos en la tabla “Papelero”, súper simple Sonrisa .Puedes ver en la siguiente imagen que tengo dos tablas, son idénticas entre sí.

image

Luego vamos a Datos y a la pestalla de Script y seleccionamos Eliminar:

image

El script es el siguiente:

function del(id, user, request) {
  var Peliculas = tables.getTable('Peliculas');

    Peliculas
        .where({ id: id})
        .read({ success: CopiaRespaldo });

 

    function CopiaRespaldo(data) {
        if(data.length > 0) {
           var obj = {
                Nombre: data[0].Nombre,
                Votos: data[0].Votos,
                Tipo: data[0].Tipo
            };

             var Papelero = tables.getTable('Papelero');
              Papelero.insert(obj, {
                success: insertComplete,
                error: errorHandler
            });
 

    } else {
            console.log('Error, Registro no encontrado');
           
request.respond(statusCodes.NOT_FOUND, 'Error, Registro no encontrado');

       }

    }

   function insertComplete(){
      //Ahora borramos, cuando el insert esté ok
      request.execute();
  }

   function errorHandler(){
       //En Caso de error de inserción....
       console.log('Error, No se pudo insertar');
       request.respond(statusCodes.ERROR, 'Error, No se pudo insertar');

  }

}

Puedes ver que lo primero que hacemos en hacer referencia hacia la tabla, luego leer de la tabla los registros que coincidan con la condición del Id, una vez que se se hace la llamada la función CopiaRespaldo, que revisa si existe un dato asociado para luego crear un objeto (obj) para ser insertado en la tabla Papelero,con los datos de la lectura de la tabla Películas. Puedes notar que se pasa como argumento una colección, por lo que, en mi caso, la lista devuelve un único elemento, lo accedo mediante su índice.  Para la inserción en la tabla Papelero, primero hacemos referencia a la tabla y realizamos la inserción, una vez que esta ok, hacemos el request.execute, que ejecuta la acción de borrado.

Por ejemplo, ingreso la película Superman y la quiero borrar:

image

Presiono borrar y luego verás el registro almacenado en la tabla Papelero:

image

Bastante sencillo, puedes ver más información de los Script Para Azure Mobile Services en la documentación:
http://msdn.microsoft.com/en-us/library/windowsazure/jj554226.aspx

Luego vemos el tema de los permisos Sonrisa
Saludos,
@chalalo

Comenzando Azure Mobile Services–Ejemplo Práctico con HTML5 + JS [Parte 2]

Hola, que tal, vamos a continuar con este tutorial de iniciación de Azure Mobile Services con HTML y JS,  en el post anterior, vimos como insertar datos y listar la cantidad de registros desde la tabla de AMS. Esta vez vamos a ver como listar, borrar y modificar datos. La vista a crear tiene la siguiente gráfica:

image

Además cuando presionen borrar, vamos a mostrar este tipo de confirmación, como ves, todo hecho con jquerymobile.

image

Hay algunos temas de gráfica que no son relevantes para el tutorial, pero de todos modos voy a incluir los fuentes por si los necesitas.

Veamos el data-role con JQM, es muy sencillo, solo tenemos un listview en donde vamos a agregar los datos que  vamos a recuperar desde AMS, luego tenemos un div data-role dialog, para crear el cuadro de diálogo de confirmación de borrado. Finalmente vamos a incluir los script de MobileServices y el listado.js, que es donde vamos a tener la lógica de procesamiento de la UI.

<div data-role="page">
   <div data-role="header">
    <h1>Listado Peliculas</h1>
    <a href="insertar.html"  data-rel="external" data-ajax="false"
      
data-
theme="b" data-role="button">Agregar</a>
      </div><!-- /header –>
      <div data-role="content">

      <div id="cargado"></div>

      <ul data-role="listview" data-count-theme="c" data-inset="true"

           id="lista_peliculas"></ul>

      <p id="cantidad"></p>

      </div><!-- /content -->

      <div data-role="footer">

             <h4>Chalalo.cl</h4>

      </div><!-- /footer -->

        </div><!-- /page -->

          <!-- /Dialogo -->

          <div data-role="dialog" id="sure" data-title="Esta Seguro?">

            <div data-role="content">

                <h3 class="sure-1">???</h3>

                <p class="sure-2">???</p>

                <a href="#" class="sure-do" data-role="button"
                  
data-theme="r" data-rel="back">Si</a
>

                <a href="#" data-role="button" data-theme="c"
                  
data-rel="back">No</a
>

            </div>

        </div>

        <script src="https://peliculassinet.azure-mobile.net/client/MobileServices.Web-1.0.0.min.js"></script>

        <script src="listado.js"></script>

Veamos ahora el archivo listado.js

$(function () {
    var client = new WindowsAzure
                 .MobileServiceClient('https://peliculassinet.azure-mobile.net/'
,'OUkhVzulGkkdtMGpkVoQbEpFVJKt97'
),
    TablaPeliculas = client.getTable('Peliculas');
 
 
    function ObtenerPeliculas() {
        cargando(true);
        TablaPeliculas.read().then(function (peliculaItems) {
            var votos = 0;
            var listItems = $.map(peliculaItems, function (item) {
                votos = votos + item.Votos;
                return $('<li>').attr('data-votos', item.Votos)
                    .attr('data-id', item.id)
                    .append($('<span>').attr('class', 'ui-li-count')
                                       .text(item.Votos))
                    .append($('<h2>').append(item.Nombre)
                                     .append($('<p>').text("-" + item.Tipo))
                                     .append("<br>")
                                       .append($('<button>')
                                             .attr('class', 'item-borrar')
                                             .attr('data-inline', 'true')
                                             .attr('data-theme', 'r')
                                             .attr('data-icon', 'delete')
                                             .text('Borrar'))
                                     .append($('<button>')
                                             .attr('class', 'item-votar')
                                             .attr('data-inline', 'true')
                                             .attr('data-theme', 'b')
                                             .attr('data-icon', 'star')
                                             .text('Votar')));
            });
 
            $('#lista_peliculas').empty().append(listItems)
                                 .toggle(listItems.length > 0);
            $('#cantidad').html('<strong>' + peliculaItems.length +
                               '</strong> Peliculas(s) - <strong>'
                                 + votos + '</strong> Votos');
            $('#lista_peliculas').listview("refresh");
            $('#lista_peliculas').trigger("create");
            $('.item-votar').button('refresh');
            cargando(false);
        }, handleError);
    }
 
    function handleError(error) {
        var text = error + (error.request ? ' - ' + error.request.status : '');
        alert(text);
    }
 
    function getPeliculaId(formElement) {
        return Number($(formElement).closest('li').attr('data-id'));
    }
 
    function getVotos(formElement) {
        return Number($(formElement).closest('li').attr('data-votos'));
    }
 
    $(document.body).on('click', '.item-votar', function () {
        cargando(true);
        TablaPeliculas.update({ id: getPeliculaId(this),
Votos: getVotos(this) + 1 }).then(ObtenerPeliculas()
,
handleError
);
    });
 
 
    $(document.body).on('click', '.item-borrar', function () {
        cargando(true);
        var idPelicula = getPeliculaId(this);
            confirmacion("Esta Seguro"
                         , "Desea Borrar la Pelicula"
,
"Si"
                         , function () {
            TablaPeliculas.del({ id: idPelicula })
                         .then(ObtenerPeliculas, handleError);
        });
        cargando(false);
    });
 
    function cargando(mode) {
        mode ? $("#cargado")
        .html("<img src='ajax-loader.gif' />") : $("#cargado").html('');
    }
 
    function confirmacion(texto1, texto2, button, callback) {
        $("#sure .sure-1").text(texto1);
        $("#sure .sure-2").text(texto2);
        $("#sure .sure-do").text(button).on("click.sure", function () {
            callback();
            $(this).off("click.sure");
        });
        $.mobile.changePage("#sure");
    }
 
    ObtenerPeliculas();
});

 

Vamos por parte en el código, al igual que el ejemplo del post anterior, debemos agregar la URL y la clave de la aplicación, luego obtenemos la referencia a la table peliculas con:

  TablaPeliculas = client.getTable('Peliculas');

Ahora si revisamos la funcion ObtienePeliculas nos damos cuenta que realizamos una iteración con .map en donde vamos agregando a un listado (listItem), este listItem se compone por elementos li cuyos atributos fui creando mediante jquery. Para que el render de los elementos <li> y el de los botones que en el están contenidos en este elemento, debemos escribir las siguientes líneas de código, que nos permiten generar el render en tiempo de ejecución:

  $('#lista_peliculas').listview("refresh");
  $('#lista_peliculas').trigger("create");
  $('.item-votar').button('refresh');
Utilizo las siguientes funciones para obtener el Id y los Votos desde el lista, puedes notar que
 están
definidos como atributos HTML5 compatibles, y son fáciles de acceder:
 function getPeliculaId(formElement) {
        return Number($(formElement).closest('li').attr('data-id'));
    }
 
 function getVotos(formElement) {
        return Number($(formElement).closest('li').attr('data-votos'));
 }
Ahora veamos las funciones que ocurren cuando se presiona votar y cuando se presiona
 eliminar. La primera función, que permite votar, llama a el método Update, con el parámetro Id,
obtenido de la función getPeliculaId y los votos, a los cuales le sumo + 1, cuando esté todo ok
 llamo a la función ObtenerPeliculas para obtener nuevamente el listado y se vean reflejados
 los cambios, o si hay un error, será manejado por la función handleError.
$(document.body).on('click', '.item-votar', function () {
    cargando(true);
    TablaPeliculas.update({ id: getPeliculaId(this),
Votos: getVotos(this) + 1 }).then(ObtenerPeliculas(), handleError
);
 });
 
Esta función al permite borrar un registro llamando al metodo <del> de la
tabla películas, y obtiene el Id del la función getPeliculaId, la función confirmación solo levanta el
cuadro de dialogo con las opciones , y permite capturar la respuesta del usuario, es por ello que 
si el usuario presionó en la opción SI, entonces ejecutamos el método borrar de la tabla. Hacemos lo
mismo que en el método anterior, si esta todo ok, volvemos a obtener las películas para que se 
reflejen los cambios en la UI.
 
$(document.body).on('click', '.item-borrar', function () {
    cargando(true);
    var idPelicula = getPeliculaId(this);
    confirmacion("Esta Seguro", "Desea Borrar la Pelicula", "Si", function () {
    TablaPeliculas.del({ id: idPelicula }).then(ObtenerPeliculas, handleError);
  });
    cargando(false);
});
 
Para que lo pruebes en mas detalle te, dejo el código:

DESCARGAR EJEMPLO

Recursos:

Post Anterior:
http://geeks.ms/blogs/gperez/archive/2013/07/31/azure-mobile-services-ejemplo-pr-225-ctico-con-html5-js.aspx

Eso, espero que te sirva!, nos vemos en el siguiente tutorial de AMS (me quedan dos pendientes), luego lo haré para Windows Phone, Android e iOS.

Saludos!
@chalalo

Comenzando Azure Mobile Services–Ejemplo Práctico con HTML5 + JS [Parte 1]

Hola que tal?, en este post vamos a ver un pequeño ejemplo de como utilizar Azure Mobile Services con HTML + JS + JQueryMobile. AMS simplemente me parece genial, nos abstrae de la comprejidad de un backend para que nuestras apps puedan, un poco tiempo y con el mínimo esfuerzo, almacenar y acceder a recursos en la nube. Si quieres más información te recomiendo que veas estos excelentes videos del build 2013.

AMS permite en pocos pasos descargar una aplicación de ejemplo para HTML, IOS, Android , WP8 y Windows 8, que nos permitirá apreciar la funcionalidad. En mi caso,voy a hacer una app paso a paso de HTML, para no quedarnos solo con el ejemplo y entender como funciona.

Como es un ejemplo , hay cosas que quizás no te parezcan las más lógicas, pero es solo para mostrar algunas funcionalidades, entre las cuales tenemos:

  • Crear el servicio móvil (parte 1)
  • Listar los registros  (parte
  • Validar entradas en el servidor mediante javascript, que los campos nombre y tipo no sean menores, en su largo a 3, caracteres. (parte 1)
  • Modificar registros
  • Eliminar Registros

Gráficamente lo que realizaré será lo siguiente

image image[64]

Básicamente un listado, en donde se muestre una lista de películas, en donde podamos votar por ella o borrarla, además de un formulario de ingreso, como puedes ver, las dos páginas creadas con jQueryMobile.

Entonces, nos vamos con el tutorial Sonrisa

Azure Mobile Services.

Una vez que tengas tu cuenta, vas a poder a la opción de AMS, en mi caso, primero cree la base de datos PeliculasSinet_db:

image

Luego, con la opción Administrar cree la tabla que necesitaba para el ejemplo:

image

Luego seleccioné la opción de crear un nuevo servicio móvil:

image

Si no has creado la base de datos, vas a tener la oportunidad de crearla

image

y luego seleccioné la base de datos que había creado (seleccioné la opción gratis de 20mb)

image

Y listo, tenemos ya el servicio móvil, puedes ver que al lado del nombre hay una flecha, con la cual podremos entrar a las opciones del servicio movil.

image

En esta parte verás que se ofrece soporte para crear una nueva aplicación o conectar una aplicación existente en distintas plataformas, esto tiene como resultado que descargar una app totalmente funcional apuntando a una base de prueba (ToDo-List).

image

Luego podemos ir a la vista panel para revisar el dashboard muy completo de la utilización de este servicio móvil (en mi caso ya había hecho unas pruebas, por eso la gráfica de estas características)

image

Si vamos a la vista de Datos, podremos explorar los datos, ver las columnas de la tabla, intervenir los script de inserción, modificación, eliminación y selección de la tabla (esto lo veremos más adelante en el post) , además podemos establecer los permisos sobre la misma. (esto lo veremos en otro post)

image

Con esto estamos Ok, ahora veamos el desarrollo del cliente

Cliente HTML + JS

Como ya habíamos visto al inicio, el ejemplo tendrá dos vistas, la de inserción y la de listado-modificación-eliminación, primero veremos la vista de inserción. Para el desarrollo de este cliente utilice mi editor favorito, WebMatrix Sonrisa

Pagina de Inserción:

Como ya dije anteriormente, voy a utilizar jQueryMobile, para simplificar la explicación, me voy a concentrar solamente en el tema de la funcionalidad y no el diseño de JQM

image

Voy a incluir dos referencias a archivos JS, uno que permite la conexión a AMS y es obligatorio si deseas ocupar esta tecnología, el otro es la lógica de la pantalla y que vamos a pasar a revisar:

<script src="https://peliculassinet.azure-mobile.net/client/MobileServices.Web-1.0.0.min.js"></script>

<script src="insertar.js"></script>

Veamos el archivo insertar.js para entender como se trabaja desde JS con AMS.

$(function () {
    var client = new WindowsAzure
                   .MobileServiceClient('https://peliculassinet.azure-mobile.net/'
                   ,'OUkhVzulGEkkSCtMGpkVoQbEpFVJK337'),
                    TablaPeliculas = client.getTable('Peliculas');
 
    function manejaError(error) {
        var text = error + (error.request ? ' - ' + error.request.responseText : '');
        alert(text);
    }
 
    function cuentaRegistros() {
        $("#sp_total").html("<img src='ajax-loader.gif' />");
        TablaPeliculas.take(0).includeTotalCount()
                              .read().then(function (results) {
            $("#sp_total").text(results.totalCount);
        });
    }
 
    $('#agregar-pelicula').submit(function (evt) {
        TablaPeliculas.insert({
            Nombre: $('#tx_pelicula').val(),
            Tipo: $('#tx_tipo').val(),
            Votos: $('#rn_votos').val()
        }).then(cuentaRegistros, manejaError);
 
        evt.preventDefault();
 
    });
    cuentaRegistros();
});

 

Puedes ver al inicio del script que se hace la llamada al AMS propiamente tal, mediante el método MobileServiceClient con la URL y la clave de la aplicación. Esta clave de la aplicación la puedes obtener en el panel del AMS en la opción:

image

Luego obtengo la tabla Peliculas, en esta parte puedes crear jqueries para filtrar los registros que vas a obtener (esto lo veremos en un próximo post), en mi caso, estoy recuperando toda la tabla.

Agregamos handler para cuando se presione el botón “Guardar Pelicula” del formulario. Puedes notar que simplemente se hace un insert con los valores, muy parecido a Linq, y es que la referencia a la biblioteca de Azure nos permite esta facilidad. Luego ocupamos los deferred de jquery , en este caso then para llamar a la función cuentaRegistros o manejaError en el caso que algo no saliera según lo previsto.

La función ManejaError es muy simple, solo recibe el objeto error y lo muestra al usuario,  la función cuentaRegistros obtiene el total de contar todos los registros de la tabla, solo trae el resultado, no la lista completa.

Ahora bien, necesitamos que nos valide que no se ingresen valores con menos de 3 caracteres:

image

Esto lo vamos a hacer en el servicio móvil, así que vamos a la opción Datos, y luego Script , en la operación Insert voy a escribir el siguiente código:

image

Como vez es JavaScript , esto trabaja por debajo con Node.js, asi que era natural que los script se definieran de esta forma. Una vez detectado el error, lo que hacemos es responder con un statusCode. BAD REQUEST, puedes ver que en la captura del error.

Ok, sigo en los próximos días entregando la segunda y tercera parte de este post. Les dejo también un par de link para recursos:

Recursos:

http://www.windowsazure.com/en-us/develop/mobile/how-to-guides/work-with-server-scripts/?fb=es-es#register-table-scripts

http://www.windowsazure.com/en-us/develop/mobile/resources/?fb=es-es#header-3

[Tips] Gráficos con Ajax Control Toolkit–Release de Junio 2013

Hola que tal? si bien ya no es tan famosa como antes, debido a que tenemos una gran cantidad de plugins de jquery disponible, la suite de controles Ajax Control Tookit se sigue actualizando, con nuevos y mejorados controles. Uno que me llamó la atención por la facilidad de uso es el nuevo control Bar Chart, el cual permite crear gráficos de barra de una manera bastante sencilla.

Para el ejemplo voy a crear una App ASP.NET WebForm, y luego incluir la biblioteca de controles con NuGet (aunque recuerda que hoy en día, con el nuevo Visual Studio 2013 y ASP.NET 4.5 el concepto de ASP.NET en uno solo)

image

Luego agregamos los controles con Nuget

image

Una vez agregadas todas las referencias, voy a agregar en mi formulario un ToolkitScriptManager y el control BarChart

<ajaxToolkit:BarChart ID="BarChart1" runat="server"

   ChartHeight="300" ChartWidth="450" ChartType="Column"

   ChartTitle="Venta de Telefonos Lumia - Julio (Miles)"

   CategoriesAxis="620,720,820,920"

   ChartTitleColor="#0E426C" CategoryAxisLineColor="#D08AD9"

   ValueAxisLineColor="#D08AD9" BaseLineColor="#A156AB">

   <Series>

    <ajaxToolkit:BarChartSeries Name="EEUU" BarColor="#0404B4"

                 Data="110, 189, 255, 95" />

    <ajaxToolkit:BarChartSeries Name="Europa" BarColor="#FF8000"

                 Data="49, 77, 95, 68" />

   </Series>

</ajaxToolkit:BarChart>

Y el resultado (los datos son de prueba, los inventé):

image

Las Propiedades del Barchar son las siguientes

  • ChartHeight: Permite customizar el alto del gráfico.
  • ChartWidth: Permite customizar el ancho del gráfico.
  • ChartTitle: Setea el titulo del gráfico.
  • CategoryAxis: [Requerido] . Set de valores para setear los valores del eje de categorias para crear el gráfico de barras.
  • ChartType: Permite seleccionar entre diferentes tipos de gráficos de barra (Column, StackedColumn, Bar y StackedBar.)
  • Theme : Permite controlar la apariencia del gráfico mediante un archivo CSS.
  • ValueAxisLines: Esta propiedad le permite establecer el tamaño del intervalo de la línea de eje.
  • ChartTitleColor: Esta propiedad permite setear el color de la fuente del titulo del gráfico.
  • CategoryAxisLineColor:   Esta propiedad permite setear el color del la línea del eje de categorías.
  • ValueAxisLineColor: Este propiedad permite setear el color de las líneas del eje de los valores.
  • BaseLineColor: Este propiedad permite setear el color de las líneas  base del gráfico.

Propiedades de BarChartSeries:

  • Name – El nombre de la serie (requerida)
  • Data : Corresponde a la data  (Arreglo de decimales) de la serie.
  • BarColor : Permite setear el color del la barra de la serie.

En el ejemplo anterior vemos que utilizamos dos BarChartSeries, ahora vamos a probar algo sencillo de pero de manera programática. Para esto voy quitar las series y la propiedad CategoryAxis del código declarativo, luego , la declaración del control queda de la siguiente manera:

<ajaxToolkit:BarChart ID="Grafico" runat="server"

   ChartHeight="300" ChartWidth="450" ChartType="Bar"

   ChartTitleColor="#0E426C" CategoryAxisLineColor="#D08AD9"

    ValueAxisLineColor="#D08AD9" BaseLineColor="#A156AB">

</ajaxToolkit:BarChart>

Y el código programático para definir las series y configurar el gráfico:

protected void Button1_Click(object sender, EventArgs e)

{

   //Definimos el arreglo de Decimales

   decimal[] Datos1 = { 40m, 55m, 67m, 64.7m };

   decimal[] Datos2 = { 45m, 75m, 47m, 44.7m };

   Grafico.ChartTitle = "Total Ventas";

   Grafico.CategoriesAxis = "Limones, Naranjas, Platanos, Uvas";

 

   //Setear la Serie 1

   AjaxControlToolkit.BarChartSeries serie1 = new
                                       AjaxControlToolkit.BarChartSeries
();

   serie1.Name = "Market 1";

   serie1.Data = Datos1;

   serie1.BarColor = "#999999";

  

   //Setear la Serie 2

    AjaxControlToolkit.BarChartSeries serie2 = new
                                       AjaxControlToolkit.
BarChartSeries
();

    serie2.Name = "Market 2";

    serie2.Data = Datos2;

    serie2.BarColor = "#33FFFF";

   

    //Agregamos las series al gráfico

    Grafico.Series.Add(serie1);

    Grafico.Series.Add(serie2);

  

    //Hacermos el Binding

    Grafico.DataBind();

}

Luego al ejecutar el código y al presionar al botón veremos nuestro gráfico:

image

Como vez, bastante fácil y gratis Sonrisa, espero que te sirva!
Links:

@chalalo

Grabación del WebCast ASP.NET MVC 4 para móviles

Hola que tal, se me estaba pasando el tiempo y no había subido la grabación de la presentación de MVC para móviles. Te la dejo acá para que puedas verla

Si quieres velo directamente de youtube, esta en buena calidad Sonrisa

Saludos!
@chalalo

Posted: 9/7/2013 5:17 por Gonzalo Perez | con 1 comment(s)
Archivado en: ,
[Tip] Nueva característica en la barra de desplazamiento de Visual Studio 2013

Sin duda cada vez que hay un nuevo release de visual studio nos encontramos con nuevas características, esta vez una que encuentro muy Cool, que tiene que ver con la barra de desplazamiento en la vista de código, puedes llegar al menú mediante opciones o presionar botón derecho sobre la barra de desplazamiento, este es la ventana de opciones de Visual Studio 2013:

image

En la sección de comportamiento vamos a seleccionar “Usar el modo Mapa para la barra de desplazamiento Vertical”

Y ahora veremos en la barra el siguiente mapa, que al pasar el mouse sobre él nos dará una vista ampliada del código que ahi se encuentra Sonrisa

image

Si bien existían plugin para esto, nunca están demás las ayuditas que se nos entregan en los IDE, mientras más productivos , mejor Sonrisa.
Saludos,
@chalalo

Posted: 1/7/2013 0:52 por Gonzalo Perez | con no comments
Archivado en:
Nuevo y mejorado, el concepto UN solo ASP.NET.

Hola que tal, ha sido una semana llena de excelentes anuncios en el //build/ , realmente increíbles las novedades con un solido Windows 8.1 que me ha dejado asombrado, además de un Internet Explorer 11, cada vez mejorando la experiencia de usuario, Visual Studio 2013 y  muchísimas cosas más, realmente abrumador. En esta oportunidad quiero referirme al nuevo enfoque, y necesario a mi gusto, de ASP.NET, ahora existe el concepto de un 1 solo ASP.NET y indiferenciando si vas a utilizar WebForms, Web Pages, SPA, MVC, Web API o SignalR. Quizás los desarrolladores de WebForms erán los que  de alguna manera , se sentían más excluidos a las nuevas características, pero esta vez, es todo lo contrario, hay motivo para celebrar, ya que los desarrollos hechos con WebForms van a permitir incluir las librerías de MVC y Web API de una manera muy sencilla.  Es así como tu aplicación webform podrá tener, por ejemplo la misma cara de siempre, con WebControls y por otro lado aprovechar las ventajas de Web API para servicios Rest Ful, y esto es, entre otras cosas, utilizar controladores dentro de tu app WebForm.

Veamos un poco el esquema del concepto:

image

Algunos preguntarán , donde quedó WebServices que no lo veo en Services!, y calma, esta todo bien,  WebServices sigue firme en lo que es WebForms, y lo podrás seguir utilizando para conectarse desde tecnología del cliente o del servidor.

Ahora vamos a crear un proyecto, basado en la charla de Scott Hanselman del Build, asi que si ya la viste, este ejemplo te será familiar, la idea es crear una aplicación ASP.NET WebForms para luego  utilizar Scaffolding de una clase , este Scaffolding o “Andamiaje”creará todo lo necesario para que podamos hacer un CRUD.

Lo primero que vamos a hacer es crear un nuevo proyecto con Visual Studio 2013 Preview.

PD: Si no lo tienes, puedes descargarlo por acá.

Ahora verás que existe la opción “Aplicación Web ASP.NET” que ya nos da luces sobre el nuevo esquema “un solo ASP.NET”, de todos modos, vas a ver un submenú que dice “Visual Studio 2012” en donde vas a encontrar la organización separada de los proyectos tal cual vs2012.

image

Ahora podemos elegir que es lo que queremos integrar en nuestra aplicación de ASP.NET, por ejemplo yo voy a elegir Web Foms y voy a incluir las referencias y carpetas de MVC y Web API:

image

Luego en nuestro proyecto, en la carpeta Models vamos agregar una nueva Clase, en este caso es la Clase Persona:image

El código de la clase Persona va a ser el siguiente:

  public class Persona

    {

        [ScaffoldColumn(false)]

        public int PersonaId { get; set; }

        public string Nombre { get; set; }

        public string Apellido { get; set; }

        public int Edad { get; set; }

 

    }

Para utilizar el atributo de columna ScaffoldColum debes agregar la referencia, esto es simplemente para que no se haga el

image

Ahora vamos agregar el “Andamiaje…” en la carpeta de Controladores:

image

Visual Studio 2013 nos ofrece a través del administrador de Paquetes NuGet el Scaffold, vamos a seleccionar:image

Esto nos permitirá contar con las operaciones clásicas de un CRUD. Luego se nos consultará por el nuevo contexto de datos:

image

Luego se nos consultará sobre la clase asociada, el contexto, en este caso es un nuevo contexto, en mi caso, seleccioné la posibilidad de contar con vistas móviles y las de escritorio:

image

y ahora ya me ha creado las páginas aspx e incluyendo la vista móvil que seleccioné anteriormente:

image

Ahora al ejecutar la pagina (/Personas/Insert) tenemos las siguientes vistas para móvil (que utiliza jquerymobile) y la vista de escritorio (que también utiliza CSS3 media queries por defecto):

imageimage

Otro punto interesante es que por defecto se utiliza FriendyURL de manera que la integración Webform , MVC y Web Api sea aún más natural.

El concepto de ModelBinding que teníamos en MVC ahora también está en WebForms, Scott Hanselman remarcó en su charla, que el concepto de ModelBinding ahora es único para todo ASP.NET, independiente de la tecnología Sonrisa

Ahora pasaremos a punto 2 en donde vamos a integrar ASP.NET Web APi, para eso vamos a los controladores y agregamos nuevamente un Andamiaje:

image

Esta vez seleccionaremos Controlador de Web API 5 con acciones de L/E que utilizan EF, de manera tener esta API con las acciones necesarias para un CRUD.

image

Luego se nos consulta como se llamará el controlador , cual es el modelo de dato y el contexto asociado:

image

Veremos a continuación que ya se nos generó el controlador y estamos listos para utilizarlo:image

Ahora simplemente hacemos referencia a Api/Persona y tenemos los datos que ingresamos por el formulario WebForm:

image

Como puedes ver, la integración es total, me parece muy acertado el concepto de un solo ASP.NET, esto permitirá una nueva etapa en la que podremos expandir las posibilidades de nuestros desarrollos fácilmente Sonrisa.

Si quieres ver la charla de Shanselman, está acá:
http://channel9.msdn.com/Events/Build/2013/2-546

Más adelante comentaré otros nuevas características, Enjoy!!!

Saludos,
@chalalo

[Tips]Crear PDF con ASP.NET MVC y RazorPDF

Hola, hace poco escribí un articulo sobre una consulta recurrente de como crear PDF en ASP.NET, y es que es algo que utilizamos bastante en el día día. Ahora es la oportunidad de MVC, ya que también llegan varias preguntas de ello. Para esto vamos a utilizar un package de Nuget que se llama RazorPDF, que internamente utilizada iTextSharp, puedes ver documentación de esta librería acá: https://www.nuget.org/packages/RazorPDF

Ahora veamos un ejemplo simple paso a paso, relacionado con el ejemplo del articulo anterior, la idea es generar lo mismo, pero ahora con MVC, asi que vamos por parte.

Primero vamos a crear el proyecto MVC, voy a crear una aplicación básica:

image

Luego instalamos el paquete Nuget:

image

Si todo salió bien, veremos que se instalaron todas las dependencias:

image

La vista

image

 

Esta vista la he creado con el siguiente código, como no estoy usando un modelo tipado, no voy a utilizar los helpers para ese propósito, así que simplemente es un formulario, en donde indico cuales son los campos:

@{

    Layout = "~/Views/Shared/_Layout.cshtml";

}

<!DOCTYPE html>

<html>

<head>

    <title>RazorPDF Demo </title>

</head>

<body>

    <h2>Ejemplo de creación de PDF con RazorPDF </h2>

    <div>

        @using (Html.BeginForm("Ejemplo", "PDF",

           FormMethod.Post, new { id = "formulario" }))

        {

            <p>

                <label for="tx_nombre">Nombre</label>

                <input type="text" id="tx_nombre" name="tx_nombre" required />

            </p>

            <p>

                <label for="tx_apellido">Apellido</label>

                <input type="text" id="tx_apellido" name="tx_apellido" required />

            </p>

            <p>

                <label for="tx_edad">Edad</label>

                <input type="number" id="tx_edad" name="tx_edad" required />

            </p>

            <input type="submit" value="Generar PDF" />

          

        }

    </div>

</body>

</html>

El controlador

Ahora veremos el código, vamos a crear un controlador que se llame PDFController:

public class PDFController : Controller

{

   public ActionResult Index()

   {

      return View();

   }

    

[AcceptVerbs("POST")]

public object Ejemplo(string tx_nombre, string tx_apellido, string tx_edad)

  {

    var pdf = new RazorPDF.PdfResult(null, "EjemploPdf");

    pdf.ViewBag.Title = "Titulo del Reporte";

    pdf.ViewBag.Nombre = tx_nombre;

    pdf.ViewBag.Apellido = tx_apellido;

    pdf.ViewBag.Edad = tx_edad;

    return pdf;

  }

}

 

Como puedes ver, tenemos un controlador que recibe desde un formulario (POST) un parámetro nombre, apellido y edad, esto lo hice para que tengas la guía de cuando quieras crear un informe en pdf con parámetros de búsqueda. Se instancia un objeto PdfResult, el primero parámetro es el objeto que puedes pasarle como argumento como no estoy utilizando ninguna, queda en null, el segundo parámetro es el nombre de la vista que tiene el informe. Además Le asigno al viewbag de este PdfResult para luego mostrarlo en el informe y se retorna el objeto pdf.

Ahora corresponde revisar la vista EjemploPDF, que va  a contener la estructura del informe PDF.

Archivo EjeploPdf

Este código XML define la estructura del PDF a generar, como vez, agrego los datos desde el controlador mediante el objeto ViewBag, además podemos setear la fuente y agregar una imagen:

 

<itext creationdate="@DateTime.Now.ToString()" producer="RazorPDF">

<paragraph style="font-family: Helvetica; font-size: 18; font-style: italic;">

       <chunk red="255" green="0" blue="0">@ViewBag.Title</chunk>

</paragraph>

<paragraph>

    <chunk style="font-family:Times;font-weight:bold;">Fecha Reporte: </chunk>

    <chunk style="font-family:Times;">@DateTime.Now.ToString("MM/dd/yyyy")</chunk>

</paragraph>

<paragraph>

    <chunk style="font-family:Times;font-weight:bold;">Nombre: </chunk>

    <chunk style="font-family:Times;">@ViewBag.Nombre</chunk>

</paragraph>

<paragraph>

    <chunk style="font-family:Times;font-weight:bold;">Apellido: </chunk>

    <chunk style="font-family:Times;">@ViewBag.Apellido</chunk>

</paragraph>

<paragraph>

    <chunk style="font-family:Times;font-weight:bold;">Edad: </chunk>

    <chunk style="font-family:Times;">@ViewBag.Edad</chunk>

</paragraph>

<newline />

<image url="@Context.Server.MapPath("~/Content/imagen.jpg")"/>

<paragraph style="font-family: Helvetica; font-size: 18; font-style: italic;">

       <chunk red="255" green="0" blue="0">By @@Chalalo</chunk>

</paragraph>

</itext>

Ahora al momento de ejecutarlo, ingresar datos al formulario y luego presionar sobre el botón “Genera PDF”, logramos el siguiente PDF.

image

Como puedes ver, bastante sencillo y útil.
Nos vemos en un próximo post!
Saludos,
@chalalo

Posted: 20/6/2013 5:53 por Gonzalo Perez | con no comments
Archivado en: ,
[WebCast] ASP.NET Desarrollo para móviles y Tablet's

Hola!, te quería invitar a este nuevo evento (de todas maneras lo voy a grabar y a publicar), pero no hay como verlo en vivo, ya que podemos hacer consultas, establecer discusión, etc.

El tráfico móvil en la web está explotando. ¿Estás listo? Microsoft ASP.NET MVC 4 incluye nuevas plantillas para dispositivos móviles, un enfoque en el diseño de response desing El orador muestra lo que puedes hacer hoy y mañana para hacer su sitio amigable en un dispositivo móvil. ¿Cuándo debería su sitio móvil convertido en una aplicación móvil? ¿Debe usar CSS3 media querys?, o ir "all in" y el uso de jQuery móvil u otro marco móvil?

Fecha: 27/06/2013 (dd/mm/yyyy).
Hora: 04:00 PM (GMT-05:00 Colombia, Panamá).
Si tiene dudas con la conversión de zonas horarias, por favor haga clic aquí

Inscríbete acá:
https://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032551084&Culture=es-AR&community=0

image

Material de Charla– Utilizando IE10 para Windows 8 y para WP8

image Hola, hace poco tuve que dar la charla de desarrollo web enfocado a Internet Explorer 10 e Internet Explorer 10 para Windows Phone, agradezco a todos los que fueron. Les dejo las Slides y el material que fue proporcionado y por el gran Jorge Peraza, puedes ver su presentación (en la cual basé parte de la mía) acá:
http://channel9.msdn.com/Events/Build/2012/2-015

Acá están mis slides:

Charla ie from Gonzalo C.

y puedes descargar desde acá los códigos que revisamos sobre

  • Preparar los sitios para Windows 8 (pinned sites, budget, asociar a la tienda, habilitar “compartir”
  • Ejemplos de HTML5 (De Jorge Peraza)
  • Los códigos cool del desarrollo de HTML5 apps para Windows Phone e IE10.

DESCARGA
https://dl.dropboxusercontent.com/u/1303802/IE10Test.zip

Voy a escribir en unos próximos post, en detalle el tema de como preparar nuestros sitios para aprovechar las ventajas de Windows 8.

Muchas gracias por los buenos comentarios de la charla Sonrisa, lo pasamos bastaste bien.

Nos vemos!!!
Saludos!

Posted: 15/6/2013 16:10 por Gonzalo Perez | con no comments
Archivado en:
Invitación a Evento– Las potencialidades de IE10

Hola!, los quería invitar al siguiente evento en el que vamos a hablar de las potencialidades de Internet Explorer 10 SonrisaSortearemos una Xbox 360 entre los asistentes!!!

image

El link de registro es el siguiente!, aprovecha esta oportunidad! Sonrisa, nos vemos allá!!

https://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032555640&Culture=es-CL&community=0

Saludos!!
@chalalo

Posted: 4/6/2013 2:43 por Gonzalo Perez | con no comments
Archivado en: ,
Comenzando con ASP.NET Web API y Odata , Parte 3

Hola que tal?, seguimos con esta serie de artículos sobre Web Api y Odata, esta vez veremos las opciones de consulta.

Una de las potencialidades de Odata es la capacidad de definir consultas personalizadas y parametrizadas mediante la url, siguiendo nuestros ejemplos anteriores, podemos tener:

http://localhost:1927/Odata/Asignaturas?$orderby=Semestre

A estos parámetros Odata les llamara “query Options”, dentro de las que nos ofrece Odata tenemos:

  • $filter: Filtra los resultados, basados en una condición booleana.
  • $inlinecount: Le indica al servidor que incluya dentro del resultado el total de entidades que se obtuvieron por medio de la query, eso está pensado en la páginación eficiente del lado del servidor
  • $orderby: Ordena los resultado por algún criterio establecido en la query.
  • $skip: omite los primeros n resultados, apropiado para la paginación.
  • $top: Retorna solo los primeros n resultados.

Antes que nada, debemos habilitar la posibilidad de utilizar estas Query Options, y se debe hacer explícitamente, así que nos vamos al método Register del archivo WebApiConfig y des comentamos la línea que dice : config.EnableQuerySopport();

image

Si no te aparece esto, es por que debes instalar el WebTools 2012.2 Update, ya que la plantilla  Web API incluye este código.

Algo importante de indicar,  es que el método  EnableQuerySupport habilita las consultas para todos las acciones de los controladores que retornen un tipo IQueryable. Si no quieres que esto suceda, y solo agregar esta característica a algunas acciones, debes agregar el atributo [Queryable] a cada acción:

[Queryable]

public override IQueryable<Asignatura> Get()

{

   return asignaturas.AsQueryable();

}

Veamos entonces algunos ejemplos de consultas, si recordamos el artículo anterior teníamos:

http://localhost:1927/Odata/Asignaturas/

image

Para los filtros tenemos:

Retorna todos las asignaturas con semestre igual a 2:

http://localhost:1927/Odata/Asignaturas?$filter=Semestre eq 2

image

Retorna todas las asignaturas que tienen el string II dentro de Nombre:

http://localhost:1927/Odata/Asignaturas?$filter=substringof('II',Nombre)

image

La misma consulta anterior, pero con el retorno de la cantidad de resultados:

http://localhost:1927/Odata/Asignaturas?$filter=substringof('II',Nombre)&$inlinecount=allpages

image

El mismo ejemplo anterior, le agregamos ordenación descendente por ID

http://localhost:1927/Odata/Asignaturas?$filter=substringof('II',Nombre)&$inlinecount=allpages&$orderby=ID desc

image

Como vez, bastante útil y fácil, en el próximo articulo revisaremos el tema de la paginación con un completo ejemplo, nos vemos!


@chalalo.

Posted: 3/6/2013 7:37 por Gonzalo Perez | con no comments
Archivado en: ,,
Video del WebCast–Lo nuevo de Visual Studio 2012 para desarrolladores Web

Hola, quería compartir esta grabación del webcast que di hace unas horas, está enfocado a las herramientas que nos da el IDE más que a la programación, con mucha demo, asi que sin más que decir, el video!:

Saludos!
@chalalo

[Tips] Exportar String a PDF en ASP.NET con iTextSharp

Una de las consultas recurrentes que recibo es sobre como crear pdf en ASP.NET, para esto hay varias respuestas, esta vez voy a mostrar una bastante sencilla de la mano de iTextSharp, que es una biblioteca gratis con muy buenas opciones para la generación pdf a partir de un string que almacena un HTML.

Lo primero que vamos a hacer es , mediante Nuget, obtener la biblioteca:

image

Una vez instalado, vamos a agregar (esto es opcional) una carpeta en donde estén nuestras plantillas para imprimir nuestro informe:

image

Este archivo test.html no es nada más que un archivo HTML en donde agregué el siguiente código:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

</head>

<body>

    <p>Nombre:[nombre]</p>

    <p>Apellido:[apellido]</p>

    <p>Edad:[edad]</p>

</body>

</html>

Como puedes ver es bastante simple, y tambien verás que tengo [campos] que son los que vamos a remplazar con los datos que se van a agregar desde la siguiente Pagina aspx:

image

Ahora en el botón agregamos:

Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click

      Dim document = New Document(PageSize.A4, 50, 50, 25, 25)

      Dim output = New MemoryStream()

      Dim writer = PdfWriter.GetInstance(document, output)

      document.Open()

      Dim contents As String = File.ReadAllText(Server.MapPath("/HTMLTemplate/Test.html"))

      contents = contents.Replace("[nombre]", tx_nombre.Text)

      contents = contents.Replace("[apellido]", tx_apellido.Text)

      contents = contents.Replace("[edad]", tx_edad.Text)

 

 

      Dim parsedHtmlElements = HTMLWorker.ParseToList(New StringReader
                                                  (contents),
Nothing
)

      For Each var As IElement In parsedHtmlElements

            document.Add(TryCast(var, IElement))

      Next

   document.Close()

   Response.ContentType = "application/pdf"

   Response.AddHeader("Content-Disposition", "attachment;filename=test.pdf")

   Response.BinaryWrite(output.ToArray())

 

End Sub

Como puedes ver, estamos creando el documento con las dimensiones especificadas en el contructor, luego leemos el contenido del archivo html para finalmente reemplazar el contenido del los campos con [corchetes]. Finalmente escribimos el pdf.

image

Abrimos y listo!, PDF creado:

image

Obviamente esto es una simplificación al máximo de lo que se puede realizar , te recomiendo que visites la página del proyecto para muchas más opciones:

http://sourceforge.net/projects/itextsharp/

Saludos!.,
@chalalo

Posted: 18/5/2013 4:23 por Gonzalo Perez | con 1 comment(s)
Archivado en:
Comenzando con ASP.NET Web API y Odata , Parte 2

Hola, vamos a seguir revisando este tema de Web API junto con Odata, está vez voy a utilizar una clase para ver algunas potencialidades del sistema de consulta.

Voy a seguir utilizando el ejemplo del artículo anterior, el cual iremos completando poco  a poco.

Lo primero que vamos a hacer es agregar una nueva clase al proyecto en la carpeta models:

image

A esta clase le voy a llamar Asignatura, la cual va a tener la siguiente estructura:

  public class Asignatura

     {

        public int ID { get; set; }

        public string Nombre { get; set; }

        public int Creditos { set; get; }

        public int Semestre { set; get; }

 

    }

A continuación vamos a agregar un controlador específico para esta clase, la cual nos va a proveer del manejo de los HTTP request para esta entidad, vamos a elegir controlador de la API vacío, ya que crearemos a mano las acciones necesarias.

image

Puedes notar que al agregar el controlador, la clase deriva de APIController, debemos modificar esto a EntitySetController:

image

Ahora, puede ser que veas que no tienes el ensamblado System.Web.Http.OData , por lo que deberás incluir el ensamblado, yo lo hice mediante Nuget

image

Podemos crear el endpoint utilizando la clase ODataController directamente, sin embargo EntitySetController maneja los detalles de la creación correcta de las respuesta HTTP en conformidad con OData.  Esto nos permetirá centrarnos en el código específico de la aplicación. Lac lase EntitySetController toma dos parámetros de tipo de genérico: El primero es el tipo de la entidad (Asignatura) y el segundo es del tipo clave de la entidad, en nuestro caso , lo definimos con int. El esquema es el siguiente:

image

Ahora vamos a agregar una lista de asignaturas al controlador:

 

public class AsignaturaController : EntitySetController<Asignatura, int>

{

static List<Asignatura> asignaturas = new List<Asignatura>()

{

  new Asignatura() { ID=1, Nombre="Calculo I", Creditos=6, Semestre=1 },

  new Asignatura() { ID=2, Nombre="Algebra I", Creditos=6, Semestre=1 },

  new Asignatura() { ID=3, Nombre="Calculo II",Creditos=6, Semestre=2 },

  new Asignatura() { ID=4, Nombre="Algebra II",Creditos=6, Semestre=2 },

};

}

Luego veremos un ejemplo con acceso a bases de datos. Para soportar los request GET, que corresponden a lectura general de la colección y la lectura de un objeto en particular de la colección:

public override IQueryable<Asignatura> Get()

{

  return asignaturas.AsQueryable();

}

 

 

protected override Asignatura GetEntityByKey(int key)

{

    return asignaturas.FirstOrDefault(p => p.ID == key);

}

Ahora solo nos faltaría configurar los endpoint, para esto vamos a ir a la carpeta App_start y abrir el archivo WebApiConfig.cs, la cual tiene la configuración del la web api, vamos agregar en el método Register:

ODataModelBuilder modelBuilder = new ODataConventionModelBuilder();

modelBuilder.EntitySet<Asignatura>("Asignaturas");

 

Microsoft.Data.Edm.IEdmModel model = modelBuilder.GetEdmModel();

config.Routes.MapODataRoute("ODataRoute", "odata", model);

 

Este código realiza dos cosas:

Crea un Entity Data Model para el Endpoint de Odata

Configura el EndPoint

 

 

El EDM es una modelo abstracto de datos, es usado para la creación de la metadata del documento (clase a devolver) para el servicio que creamos.

El método  EntitySet   agrega la entidad al set EDM:

modelBuilder.EntitySet<Asignatura>("Asignaturas");

El String “Asignaturas” define el nombre del entity Set, el nombre del controlador debe coincidir con el nombre del entity set.

Y ya estamos Listos!, vamos a probarlo con la URL http://localhost:1927/Odata/Asignaturas/

y tenemos:

{
  "odata.metadata":"
http://localhost:1927/odata/$metadata#Asignaturas","value":[
    {
      "ID":1,"Nombre":"Calculo I","Creditos":6,"Semestre":1
    },{
      "ID":2,"Nombre":"Algebra I","Creditos":6,"Semestre":1
    },{
      "ID":3,"Nombre":"Calculo II","Creditos":6,"Semestre":2
    },{
      "ID":4,"Nombre":"Algebra II","Creditos":6,"Semestre":2
    }
  ]
}

También podemos probar obteniendo solo un registro con la URL: http://localhost:1927/Odata/Asignaturas(2) y obtendremos:

  {
  "odata.metadata":"http://localhost:1927/odata/    $metadata#Asignaturas/@Element","ID":2,"Nombre":"Algebra I","Creditos":6,"Semestre":1
}

Como puedes ver consultamos el ID del registro que deseamos con el id entre paréntesis.

Bueno, seguiremos viendo OData con este objeto para que veamos más posibilidades de consulta, espero que te haya servido el artículo!

Saludos,
@chalalo

WebCast- Windows Phone 8, celular o herramienta?

Hola que tal?, quiero invitarlos a un evento de tipo “conversación” que vamos a dar con el copado Jorge Díaz, sobre Windows Phone 8, el titulo dice mucho del enfoque del evento, vamos a hablar de las ventajas de Windows Phone para escenarios desarrollo (mi aporte) y por su parte Jorge va a estar hablando de la visión de IT, como ven estamos abarcando los dos ámbitos  que nos interesan (si, también conversaremos sobre la experiencia de usuario).

Personalmente he desarrollado para blackberry, Android y IPhone, así que podremos establecer comparaciones y compartir experiencias. Eso será el próximo sabado 4 de  may0 a las 20:00 horas, es decir es un Saturday Night Webcast‏ Sonrisa

El Link de la conferencia es:
https://www311.livemeeting.com/cc/mvp/join?id=4GFT4W&role=attend&pw=M*Sk9MMbc

Así que agrégalo en tu agenda Sonrisa  nos vemos por allá.
Saludos,
Gonzalo

Más artículos < Página anterior - Página siguiente >