lunes, 29 de abril de 2013

CRUD BÁSICO CON WCF DATA SERVICES, AJAX Y JQUERY.


En este artículo vamos a ver cómo implementar un CRUD básico a través de WCF Data Services, pero en esta ocasión lo vamos a hacer totalmente desde el lado del cliente, usando AJAX para invocar nuestros servicios de datos usando los verbos básicos de http GET, POST, PUT y DELETE, y usando el plugin jqxGrid de Jquery  en una versión no comercial, para mostrar los datos en una grilla, para esto vamos a seguir los siguientes pasos:

1.       Crear aplicación Asp.net
2.       Crear modelo de datos con Entity Framework
3.       Crear WCF Data Service
4.       Configurar WCF Data Service para acceso a nuestras entidades.
5.       Referenciar librerías para usar el jqxGrid.
6.       Crear llamados AJAX para interactuar con WCF Data Services.

Para los primeros cuatro pasos remitirse a mi anterior artículo:


5. Referenciar librerías para usar el jqxGrid.

Para usar el plugin jqxGrid, debemos referenciar las siguientes librerías y estilos:
<link rel="stylesheet" href="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css"
        type="text/css" />
    <script src="http://www.jqwidgets.com/jquery-widgets-demo/scripts/jquery-1.8.2.min.js"
        type="text/javascript"></script>
    <script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqx-all.js" type="text/javascript"></script>

6.   Crear llamados AJAX para interactuar con WCF Data Services.

En nuestro ejemplo vamos a crear un CRUD básico para la tabla Customers, visualmente es de la siguiente forma:



Para cargar nuestro grid, vamos a incluir los siguientes scripts en el encabezado del HTML:

$(document).ready(function () {

ConsultarClientes();

       $("#gridClientes").bind('rowselect', function (event) {

             $("#txtID").val(event.args.row.CustomerID);
             $("#txtNombre").val(event.args.row.ContactName);
             $("#txtCompania").val(event.args.row.CompanyName);
             $("#hfAccion").val("Modificar");
       });

       $('#gridClientes').on('rowdoubleclick', function (event) {
if (confirm("Está seguro de eliminar el cliente: " + event.args.owner.rows.records[event.args.rowindex].bounddata.ContactName))
{
EliminarCliente(event.args.owner.rows.records[event.args.rowindex].bounddata.CustomerID);
              }
       });

});

// Cargar grid con los clientes existentes
function ConsultarClientes() {
var source = {
       type: "GET",
       datatype: "json",
       datafields: [
                    { name: 'CustomerID' },
                    { name: 'ContactName' },
                    { name: 'CompanyName' }
                ],
       url: 'NorttwindAccess.svc/Customers',
       cache: false,
       root: 'data'
       };

var dataAdapter = new $.jqx.dataAdapter(source, { contentType: 'application/json; charset=utf-8',
        downloadComplete: function (data, textStatus, jqXHR) {
                                         return data.d;
                           }
            }
        );

       $("#gridClientes").jqxGrid({
                source: dataAdapter,
                columns: [
                    { text: 'ID', dataField: 'CustomerID', width: 200 },
                    { text: 'Nombre', dataField: 'ContactName', width: 200 },
                    { text: 'Compañia', dataField: 'CompanyName', width: 180 }
                ]
            });
 }


Con el código anterior cuando carga la página invocamos la función ConsultarClientes(), la cual permite invocar el servicio de datos con la url 'NorttwindAccess.svc/Customers, y luego lo carga en el grid, además de esto adjuntamos dos eventos al grid, rowselect que usamos para cargar el cliente seleccionado en los campos de texto, y el evento rowdobleclick en el cual vamos a realizar la eliminación del cliente cuando se haga doble click sobre él.
 Ahora para eliminar un cliente, agregamos la siguiente función:
// Eliminar un cliente
        function EliminarCliente(id) {
            $.ajax({
                type: "DELETE",
                url: "NorttwindAccess.svc/Customers('" + id + "')",
                data: "{}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    alert("El cliente se eliminó correctamente.");
                },
                error: function (msg) {
                    alert(msg.responseText);
                }
            });
        }


Y para terminar agregamos la siguiente función para guardar y modificar un cliente:
// guardar o modificar un cliente.
        function GuardarCliente() {

            var cliente = {
                CustomerID: $("#txtID").val(),
                ContactName: $("#txtNombre").val(),
                CompanyName: $("#txtCompania").val()
            };
            var verbo = "POST";
            var mensaje = "Cliente ingresado correctamente.";
            var URL = "NorttwindAccess.svc/Customers";
            if ($("#hfAccion").val("Modificar")) {
                verbo = "PUT";
                mensaje = "Cliente modificado correctamente.";
                URL = "NorttwindAccess.svc/Customers('"+ $("#txtID").val() +"')";
            }
            $.ajax({
                type: verbo,
                url: URL,
                data: JSON.stringify(cliente),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    $("#hfAccion").val("Nuevo");
                    LimpiarCajas();
                    alert(mensaje);
                },
                error: function (msg) {
                    alert(msg.responseText);
                }
            });
        }


Con esto damos por terminado nuestro ejemplo de cómo implementar un CRUD básico usando WCF Data Services mediante llamados AJAX, es una forma sencilla de realizar una implementación sin usar código del lado del servidor, espero les sea de gran utilidad, a continuación el link de descarga del código fuente, para mayor detalle, la implementación está en el archivo PruebaClientes.aspx.


Saludos.

2 comentarios:

  1. Gracias por la explicación, muy detallada y punto a punto

    ResponderEliminar
    Respuestas
    1. Hola amigo, que bueno que te haya servido, gracias a ti por leerme, saludos!!

      Eliminar