[Tutorial] Insertando Datos con jQuery + WCF y Bonus Track , HTA

Hola!, había dejado los tutoriales, por un tema de tiempo, de hecho , ahora tampoco tengo, pero el blog tiene gran importancia para mi, así que nos vamos con este tutorial paso a paso, Inspirado por el trabajo de mi Mega Maestro Stephen Walther.Hoy nos convoca  el crear una pequeña aplicación que maneje datos mediante jQuery y WCF, el esquema es simple y es el siguiente.

image

Vamos a tener un formulario HTML y guardado con HTA, de manera de que parezca una aplicación out the browser.Nuestra aplicación consistirá en una pequeña agenda telefónica (sin mucho diseño), pero que permita insertar, modificar, buscar y eliminar registros.Para que no sea tan largo el tutorial, vamos ir avanzando de a poco, en esta entrega, la inserción de datos.

Paso 1. Crear la Base de datos

Para esto voy a utilizar Sql Server 2008 y mediante el Management Studio vamos a crear nuestra BD.

image

 

Es algo sencillo, no creo que sea de una utilidad real, pero nos sirve para el tutorial.

 Paso 2.- Crear la aplicación Web

image

Vamos a seleccionar ASP.NET Empty Web Aplication, que como saben, es una aplicación web limpia, sin los templates que nos ofrece Visual Studio 2010.Según nuestro diseño (Figura 1) , tenemos que crear el Modelo de Entidades, para ello vamos a utilizar ADO.NET Entity Framewok. Para esto:

  1. Seleccionamos la opción Agregar nuevo Item del proyecto, seleccionamos ADO.NET Entity Data Model.
    image
  2. Luego le damos un nombre, en mi caso MiAgendaBD, luego seleccionamos “Generar desde una Base de Datos” y seleccionamos nuestra conexión.
    image
  3. Luego podemos elejir las tablas que van a formar parte del modelo, que en nuestro caso es solo una, finalmente vamos a ver nuestro Modelo Generado:
     image

Ya tenemos nuestro modelo, ahora nos queda crear los servicios WCF para (por lo menos en esta entrega del tutorial), insertar los datos.

Seleccionamos la opción agregar nuevo Item y seleccionamos Ajax – Enabled WCF Service. Ahora veamos el código del servicio.

Imports System.ServiceModel
Imports System.ServiceModel.Activation
Imports System.ServiceModel.Web

<ServiceBehavior(IncludeExceptionDetailInFaults:=True)>
<ServiceContract([Namespace]:=“”)>
<AspNetCompatibilityRequirements (RequirementsMode:=AspNetCompatibilityRequirementsMode.Allowed)>

 Public Class InsertarContacto
    Private _contexto As New MiAgendaEntities
    <OperationContract()> 
    Public Function insertarContacto(
                 
       ByVal Nombre As String, ByVal Apellido As String,
                         ByVal Movil As String, ByVal Email As String,
                         ByVal Observacion As String) As Boolean
        Try
            Dim contacto As New Contactos With {.Nombre = Nombre,
                                            .Apellido = Apellido,
                                            .Movil = Movil,
                                            .Email = Email,
                                            .Observacion = Observacion}
            _contexto.AddToContactos(contacto)
            _contexto.SaveChanges()
            Return True
        Catch ex As Exception
            Return False
        End Try
    End Function
End Class

Tal como lo explica Sthepen, la directiva :

<ServiceBehavior(IncludeExceptionDetailInFaults:=True)>

Esta directiva nos va a servir mientras estemos desarrollando el proyecto, de manera de recibir información detallada de los errores que se sucedan, sin embargo en explotación, s hace necesario removerla.

Paso 3a. Crear la llamada desde JQuery y el Formulario Web

Una exigencia para llamar a un servicio web WCF desde JQuery es que debe ser bajo la notación JSON. El request debe incluir el content-type:application/json y todos los parámetros incluidos n el request deben ir encodeados por JSON. El problema es que jQuery no incluye un método para serializar JSON, aunque existe para deserializar (un poco raro no?), por lo que vamos a utilizar una librería externa que nos provea esta funcionalidad.

La librería que usaremos la puedes descargar desde:
http://www.json.org/js.html

El formulario, tiene como verás un diseño de otro mundo (del mundo de los feos!), pero nos va a servir para el propósito, además no voy a agregar validaciones, en otro post en el futuro si lo haré.

image 
Agregamos las referencias Javascript a jQuery y json2:

<script src=”http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js” type=”text/javascript”></script> 
<script src=”Scripts/json2.js” type=”text/javascript”></script> 

Como ves estamos utilizando Microsoft AJAX CDN (puedes ver mi articulo sobre el tema aquí),

El script jQuery asociado es:
<script type=”text/javascript”>
    $(“#BotonAgregar”).click(function () {
        //Convertir los datos del formulario en un objeto
        var objeto = { Nombre: $(“#Nombre”).val(), Apellido: $(“#Apellido”).val(), Movil: $(“#Movil”).val(), Email: $(“#Email”).val(), Observaciones:$(“#Observaciones”).val()};

        //JSONeasamos la data (objeto) buen verbo!
data = JSON.stringify(objeto); 

  $.ajax({
            type: “POST”,
            contentType: “application/json; charset=utf-8”,
            url: “AgendaService.svc/insertarContacto”,
 
           data: data,
            dataType: “json”,
            success: insertarCallback
        });
    });

function insertarCallback(result) {
        result = result[“d”];
        if (result === true) {
            alert(“Contacto Agregado”);
        } else {
            alert(“Error al tratar de Grabar el contacto”);
        }
    }
</script>

Analizando el código podemos ver que atachamos una función al evento click del botón mediante el selector convertimos los datos el formulario en un objeto, luego ese objeto le aplicamos el método stringify para convertir l objeto a notación JSON.Luego viene la estructura del post, en donde hacemos referencia al type, contenType, url , data, tipo de la data (JSON) y la función Callback , que es la función que se llama al haber concluido la petición.Por razones de seguridad WCF siempre retorna los request con  una variable d encapsulada(wrapper)e se necesita desencapsular, eso lo hacemos con (result = result[“d”];).
Y al Momento de probarlo…

image

Paso 3b. Crear la aplicación HTA

Por si no lo sabias, las Hypertext Application (HTA) es una plataforma construida sobre Internet Explorer para desarrollar aplicaciones de Escritorio. Las capacidades son similares a estar ocupando el browser, pero con toda la interfaz de una app de escritorio.Para crear una aplicación hta, vamos a copiar nuestro html en el escritorio y a renombrar el archivo htm a hta. Luego vamos a agregar a nivel de código el tag hta:application.

image

Luego vamos agregar el tag hta en el header

  <hta:application id=”oHTA” applicationname=”Mi Aplicacion de Contactos” border=”thin” borderstyle=”normal” caption=”yes” icon=”” maximizebutton=”no” minimizebutton=”no”showintaskbar=”no” singleinstance=”no” sysmenu=”yes” version=”1.0″ windowstate=”normal” />

También vamos a modificar la url del servicio que estamos llamando completando la uri

$.ajax({   type: “POST”,
   contentType: “application/json; charset=utf-8”,
   url: http://localhost:51948/AgendaService.svc/insertarContacto,
   data: data,
   dataType: “json”,
  
success: insertarCallback
});

Si quieres saber más sobre las aplicaciones HTA, te recomiendo los siguientes links:
http://www.c-point.com/javascript_tutorial/HTML_Applications.htm
http://msdn.microsoft.com/en-us/library/ms536496(VS.85).aspx

Y luego hacemos doble Click en nuestra “Aplicación” y la hacemos correr

image

Se ve bien :), tenemos una mini aplicación web en el escritorio, conectada a servicios!  si quieres el código puedes descargarlo todo (HTA + App)  desde aquí.

Espero que te sirva,
Gonzalo

[Tips] Debug (de mejor manera) con IE8 y Http Watch

Es raro partir hablando de Firefox (por el título) pero como sabes, Firefox cuenta con una excelente herramienta que se llama Firebug, que nos permite inspeccionar el tráfico HTTP de nuestras páginas, inspeccionar el DOM, estilos, Script, etc.

image

Ahora bien, si creías que en Internet Explorer estabas condenado a solo tener la Internet Explorer Developer Toolbar, estas equivocado, también puedes bajar el complemento HTTP Watch para Intenet Explorer, que al igual que en Firebug, vas a poder ver visualmente  los request http, header, cookies, etc. Http Watch está disponible para FireFox y para IE, existiendo versiones de prueba y otras de pago.

image

Eso, solo un pequeño tip. Yo lo descargué y lo estoy utilizando, está bastante bueno.

Eso !+
Saludos
Gonzalo

[WebCast] Club.Net UOC :Técnicas Ninja: Optimización de tus Sitios Web con ASP.NET

image

Hola!, quería invitarlos a un WebCast sobre Optimización de sitios Web, agradezco a mi amigo Jesús Bosch por la invitación y la posibilidad de dar este WebCast.

Fecha
viernes, 14 de mayo de 2010, 21:00 hrs Madrid – 15:00 hrs Chile , Duración, 120 min.

Club.Net UOC :Tecnicas Ninja: Optimización de tus Sitios Web con ASP.NET
En esta sesión revisaremos algunas reglas de Oro dentro de la Optimización Web /ASP.NET todo esto acompañado de muchas demos para examinar y discutir las mejoras conseguidas.

Compresión HTTP, CSS Sprites , Script Combinados, el uso de CDN, Minificación de Script y CSS, así como también tips para optimización de Microsoft AJAX , todas técnicas que puedes poner en práctica para hacer volar tu Sitio Web
Ponente: Gonzalo “Chalalo” Pérez Correa , Microsoft MVP/ASP.NET  – MCPD ASP.NET Developer 3.5

El Link de Registro es:
https://msevents.microsoft.com/CUI/WebCastEventDetails.aspx?EventID=1032450287&EventCategory=4&culture=es-ES&CountryCode=ES

Y recuerda:
21:00 hrs Madrid – 15:00 hrs Chile (por la diferencia de 6 horas que existe)

Nos vemos allá! (o acá)
Saludos!
Gonzalo

JQuery BubbleUp Plugin, Dale más vida a tus ImageButtons

Hola, yo de nuevo con un dato de JQuery y otro de Diseño que me gustaron bastante y quería compartirlos con ustedes 🙂

Buenos Datos 🙂

Vamos a utilizar el plugin BlubbleUp http://aext.net/2010/02/learn-jquery-first-jquery-plugin-bubbleup/, que nos va a dar el efecto que queremos sobre los imageButtons.

image

Ahora , una buena opción para crear este tipo de botones es la página http://www.mycoolbutton.com/ , si bien hace unos meses era totalmente gratuita, ahora el autor ha puesto un precio, 5.99 Dólares al año, lo que es la nada misma, por mi parte ya estoy inscrito, y me ha servido bastante (hace poco terminé una aplicación para Windows Mobile, y los botones del menú los hice con esto.). Los botones de este ejemplo fueron creados con esta herramienta online:

image

El Código Declarativo

<div id=”demo”>
<ul id=”menu”>
  <li><asp:ImageButton ID=”b1″ runat=”server”ImageUrl=”~/img/b1.png”/></li
  <li><asp:ImageButton ID=”b2″ runat=”server”ImageUrl=”~/img/b2.png”/></li>
  <li><asp:ImageButton ID=”b3″ runat=”server”ImageUrl=”~/img/b3.png”/></li>
  <li><asp:ImageButton ID=”b4″ runat=”server”ImageUrl=”~/img/b4.png”/></li>
 
<li><asp:ImageButton ID=”b4″ runat=”server”ImageUrl=”~/img/b5.png”/></li>
</ul>
</div>

Bastante sencillo, solo dejamos nuestros imageButtons dentro de una lista, y luego el CSS nos dará el diseño que queremos:

Incluimos las librerías JQuery (desde el CDN de Microsoft) y luego la librería del plugin (bubbleup.js)

<script src=”http://ajax.Microsoft.com/ajax/jquery/jquery-1.3.2.min.js” type=”text/javascript”></script>
<script type=”text/javascript” src=”js/jquery.bubbleup.js”></script>

Luego agregamos el siguiente código Javascript dentro de las etiquetas Body o Head

<script type=”text/javascript”>
        $(function () {
            $(“ul#menu li input”).bubbleup();
        });
</script>

En el ejemplo original, nos encontrábamos con un selector a ul#menu li img lo cual tenemos que cambiar, ya que ahora estamos utilizando imagebuttons, que despliegan en el cliente etiquetas Input:
  <input type=”image” name=”b2″ id=”b2″ src=”img/b2.png”/>

El CSS utilizado lo vas a encontrar en el ejemplo que se adjunta a este artículo, tengo que admitir que el tamaño de las imágenes no me quedó uniforme, pero para el ejemplo, sirven :P.

El resultado

Como siempre, un video vale más que mil palabras:

Descarga el Ejemplo Completo desde Acá

Espero que te haya servido!, nos vemos en otro post 🙂
Saludos
Gonzalo

[Tips] ASP.NET 4 Comprime las variables de Session (Para WebFarm)

Una de las posibilidades que nos da ASP.NET es poder manejar las variables de Sesión en una granja de servidores de dos maneras, teniendo un Servidor IIS que maneje las sesiones (fuera de la granja que maneja las peticiones http propiamente tal) o almacenado estas sesiones en un SQL Server. En ambos casos se tiene que serializar el estado de sesión (debido a que el almacenamiento se da fuera del proceso de trabajo de la aplicación web), y es posible que los datos serializados puedan crecer bastante (ya saben , hay amiguitos que les gusta guardar dataset con cientos de datos en el la sesión)

ASP.NET 4 introduce una nueva opción de compresión para ambos escenarios, fuera de proceso de estado de sesión.

Cuando la opción de configuración compressionEnabled="true" como se muestra en el ejemplo ,  ASP.NET comprimirá (y descomprimirá) los datos serializados del estado de sesión utilizando la librería del Framework System.IO.Compression.GZipStream.

Con este simple cambio vamos a ver reducidos considerablemente los datos que se mueven entre los servidores de sesión y nuestra aplicación ( y  vice-versa)

<sessionState
    mode="SqlServer"
    sqlConnectionString="data source=dbserver;Initial Catalog=aspnetstate"
    allowCustomSqlDatabase="true"
    compressionEnabled="true"

/>

Pd: Me recuerdo de las palabras de Eduard Tomas i Avellana,: "como es que no estaba antes?”

Saludos, y happy compression!
Gonzalo

[Tips] ASP.NET 4 – Extensible Request Validation, con ejemplo.

Hola!, seguimos revisando las nuevas características de ASP.NET 4, el cual introduce la característica de que nos customizar la lógica de validación de los request de nuestra sitio.

Como ya saben las validaciones de  ASP.NET sobre los request  HTTP entrantes son analizadas en busca de posibles ataques XSS, en el caso que se encuentre algún elemento sospecho en la cadena , se devuelve un error. Intentos anterior para asegurar que nada se filtre, finalmente resultan en demasiados falsos positivos, por ejemplo cuando queremos utilizar algún WebEditor HTML, y lo que hacemos muchas veces es es desactivar la validación con el ValidateRequest=”false” y con esto nos ponemos en riesgo, aca mi chiste favorito sobre el tema:

[exploits_of_a_mom.png]

Para extender la validación de los  request de nuestro sitio, podemos crear una clase que herede  desde el nuevo tipo System.Web.Util.RequestValidator , y configuramos nuestra aplicación agregando en el web.config la sección httpRuntime, haciendo referencia a la clase que hemos creado.(puedes crear más clases de validación y las puedes ir separando por comas)

<httpRuntime requestValidationType=CustomRequestValidation/>

 

Ahora veamos la clase y vamos a validar que las entradas no contengan el carácter “#”

Imports Microsoft.VisualBasic
Imports System.Web.Util
Imports System.Runtime.InteropServices

Public Class CustomRequestValidation
    Inherits RequestValidator

    Dim caracterInvalido As String = “#”
    Protected Overrides Function _
       IsValidRequestString(ByVal context As HttpContext, _
        ByVal value As String,
        ByVal requestValidationSource As RequestValidationSource, _
        ByVal collectionKey As String, _
        <OutAttribute()> ByRef validationFailureIndex As Integer) As Boolean

       
If requestValidationSource.Form Then
            If value.Contains(caracterInvalido) Then Return False
        End If
        Return True
    End Function
End Class

Entonces si revisamos este pequeño ejemplo, vamos a ver que tiene varios parámetros de entrada:

context
Tipo: System.Web.HttpContext
El contexto del request actual

value
Tipo: System.String
El valor del HTTP request a validar

requestValidationSource
Tipo: System.Web.Util.RequestValidationSource
Es una enumeración que representa el origen del request que se va a validar, hay varios por cada postback, lo puedes comprobar, los posibles valores son:

  • QueryString
  • Form
  • Cookies
  • Files
  • RawUrl
  • Path
  • PathInfo
  • Headers

collectionKey
Tipo: System.String
La clave en la colección de ítems para validar. Es un parámetro opcional.

validationFailureIndex
Tipo: System.Int32%
Cuando este método retorna, indica la posición dentro del texto en donde se produce el problema.Este parámetro se pasa sin inicializar.

En nuestro UI vamos a tener:

image

Al ejecutar y hacer un break en el momento de presionar el botón , el cual genera Postback vamos ver las variables:

image

Obviamente no es lo único que se evalúa, también, como veíamos en el parámetro requestValidationSource

image

 

Al momento de ingresar un signo # en el textbox vamos se va a levantar la Exception con la información del collectionKey y el value

image

Ahora bien,  este es una primera aproximación para que vayamos entendiendo las nuevas características, luego veremos un ejemplo más completo.
Espero que esto te sirva 🙂

Saludos
Gonzalo

[Off-Topic] Microsoft MVP de ASP/ASP.NET por otro año :D

Acabo de recibir el correo de Nombramiento como MVP de ASP/ASP.NET, ya van 4 años y cerca de 3 años de este blog, primero que nada darle las gracias a las personas que leen lo que escribo, ya que ustedes hacen grande este blog (lo digo por la cantidad de comentarios buenos y la cantidad de visitas diarias) .

También agradezco a mi Esposa Carolina, que me soporta cuando son más de las 2:00 am y no voy a dormir por escribir artículos, estudiar sobre últimas tecnologías y programar algunas cosas que creo interesantes (Bueno, no solo en las noches, también los fines de semana, y en todo momento). Te amo Mucho 😀 (PD: Ella también es Informática y programa en PHP, la doña manda, jejeje)

Y obviamente hay retos para este año, espero poder cumplirlos y seguir escribiendo,ojalá más artículos, ojalá más charlas :), vamos que se puede!!!!

image

GRACIAS TOTALES!!!!!!!!!!!

Nos vemos,
Chalalo