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.
