[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.
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.
Es algo sencillo, no creo que sea de una utilidad real, pero nos sirve para el tutorial.
Paso 2.- Crear la aplicación Web
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:
- Seleccionamos la opción Agregar nuevo Item del proyecto, seleccionamos ADO.NET Entity Data Model.
-
Luego le damos un nombre, en mi caso MiAgendaBD, luego seleccionamos “Generar desde una Base de Datos” y seleccionamos nuestra conexión.
-
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:
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é.
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…
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.
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
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