creación de crud con llamados jquery

CREACIN DE CRUD CON LLAMADOS JQUERY, AJAX & JSON

1. Agregamos una nueva pgina de contenido al Site.Master llamado Bodegas2 y lo movemos a la carpeta

correspondiente.

2. Colocamos un ttulo y arrastramos la tabla bodegas para que nos cree el GridView, luego cambiamos los

nombres tal y como muestra este cdigo:

Bodegas

3. Descargamos unos conos para editar, borrar, guardar y cancelar, pequeos, puede ser de 16 x 16. Y colocamos

los respectivos conos al GridView, luego colocamos las operaciones como un template field.

4. Probemos lo que hemos hecho hasta el momento:

5. Cambiar:

Por:

runat="server" ToolTip="Borrar registro" CausesValidation="False" AlternateText='' OnClientClick="javascript:return confirmarBorrado(this.alt);" CommandName="Delete" ImageUrl="~/Images/Icons/delete.png" Text="Eliminar" />

6. Agregue el siguiente Script:

function confirmarBorrado(ID) { alert(ID); $("").html("Realmente desea borrar el registro?"). dialog({ title: "Mensaje", modal: true, buttons: [ { text: "Si", click: function () { alert("Yes"); $(this).dialog("close"); } }, { text: "No", click: function () { alert("No"); $(this).dialog("close"); } } ] } ); return false; }

7. Probemos lo que llevamos hasta el momento:

8. Reemplacemos los alert por el verdadero llamado a la funcin que valida y borra la bodega. Reemplace el script

por:

function confirmarBorrado(ID) { $("").html("Realmente desea borrar el registro?"). dialog({ title: "Mensaje", modal: true, buttons: [ { text: "Si", click: function () { BorrarRegistro(ID); $(this).dialog("close");

} }, { text: "No", click: function () { $(this).dialog("close"); } } ] } ); return false; }

9. Agreguemos la funcin BorrarRegistro:

function BorrarRegistro(ID) { var pageUrl = ''; var parameter = { "ID": ID } $.ajax({ type: 'POST', url: pageUrl, data: JSON.stringify(parameter), contentType: 'application/json; charset=utf-8', dataType: 'json', success: function (data) { $("").html(data.d). dialog({ title: "Confirmacin", modal: true, buttons: [ { text: "Ok", click: function () { $(this).dialog("close"); } } ] } ); }, error: function (data, success, error) { $("").html("No se puede borrar bodega, tiene registros relacionados"). dialog({ title: "Error", modal: true, buttons: [ { text: "Ok", click: function () { $(this).dialog("close"); } } ] } ); } }); }

10. Creamos el mtodo DeleteBodega en el CADBodega

11. Agreguemos el Web Method BorrarRegistro:

[WebMethod] public static string BorrarRegistro(int ID) {

CADBodega.DeleteBodega(ID); return "Bodega borrada"; }


13. Ahora agreguemos un botn de nuevo, despus del ttulo de bodegas:

14. Y creemos el div con el contenido de nueva bodega:

Descripcin:

15. Adicionemos este cdigo al script para que llame el dialogo (antes de ):

$(document).ready(function () { $("#dialog-nuevo").hide(); $(".nuevoButton").click(function () { $("#dialog-nuevo").dialog({ resizable: false, height: 200, width: 350, modal: true, buttons: { "Agregar": function () { alert("Yes"); $(this).dialog("close"); }, "Cancelar": function () { $(this).dialog("close"); } } }); return false; });

});


17. Cambien el alert(Yes) por el verdadero llamado la funcin que agrega la bodega:

Cambie:

alert("Yes");

Por:

InsertBodega();

18. Y agreguemos la funcin InsertBodega(), antes del $(document):

function InsertBodega() { var pageUrl = ''; var descripcion = $(".descripcionTextBox.ClientID").val(); var parameter = { "descripcion": descripcion, } $.ajax({ type: 'POST', url: pageUrl, data: JSON.stringify(parameter), contentType: 'application/json; charset=utf-8', dataType: 'json', success: function (data) { $("").html(data.d). dialog({ title: "Confirmacin", modal: true, buttons: [ { text: "Ok", click: function () { $(this).dialog("close"); } } ] } ); }, error: function (data, success, error) { $("").html("Error: " + error). dialog({ title: "Error", modal: true, buttons: [ { text: "Ok", click: function () { $(this).dialog("close"); } } ] } ); } }); }

19. Y creemos el Web Method InsertBodega():

[WebMethod] public static string InsertBodega(string descripcion) { if (descripcion == string.Empty) { return "Bebe ingresar una descripcin"; } CADBodega.InsertBodega(descripcion); return "Bodega agregada correctamente"; }

20. Probemos lo que hemos logrado!!!

21. Para que la pgina haga una recarga automtica, agregue estas lneas antes del ltimo asp:content

22. Y en el evento fakeButton_Click coloque est lnea:

protected void fakeButton_Click(object sender, EventArgs e) { Response.Redirect("~/Mantenimientos/Bodegas2.aspx"); }

23. Ocultemos esta divisin, justo despus donde ocultamos del dialog-nuevo:

$("#dialog-nuevo").hide(); $("#hide").hide();

24. Agreguemos un llamando al fakeButton justo antes de cerrar los dialofos de confirmacin de agregar y eliminar

bodega:

title: "Confirmacin", modal: true, buttons: [ { text: "Ok", click: function () { $(".fakeButton").click(); $(this).dialog("close"); } } ]

25. De esta manera ya no tenemos el problema de refrescado de pantalla!!!

26. Ahora vamos con el botn de editar, primero cambie el llamado del botn editar, por nuestra funcin

personalizada. Cambie las propiedades del botn editar por:

ID="ImageButton1" runat="server" CausesValidation="False" CommandName="Edit" AlternateText='' OnClientClick="javascript:return editar(this.alt);" ImageUrl="~/Images/Icons/edit.png" ToolTip="Edita el registro" Text="Editar" />

27. Agregue esta divisin al final del documento, antes del asp:content

Descripcin:

28. Oculte esa divisin donde oculta las otras:

$("#dialog-nuevo").hide(); $("#dialog-edit").hide(); $("#hide").hide();

29. Agregue la funcin que llama el botn editar:

34. Coloquemos funcionalidad al botn editar, cambie la funcin editar por:

function editar(ID) { GetDescripcion(ID); $("#dialog-edit").dialog({ resizable: false, height: 200, width: 350, modal: true, buttons: { "Editar": function () { var descripcion = $(".descripcionTextBox2").val(); if (descripcion == "") { $("#dataEdit").empty(); $("#dataEdit").append("Debe ingresar una descripcin"); return; } editar2(ID, descripcion); $(this).dialog("close"); }, "Cancelar": function () { $(this).dialog("close"); } } }); return false; }

35. Agregue la funcin editar2 y probemos lo que llevamos hasta el momento:

function editar2(ID, Descripcion) { alert("ID: " + ID + " Des: " + Descripcion); }

36. Agregue el mtodo al CAD para editar el registro:

public static bool UpdateTipoDocumento(string Descripcion, int IDTipoDocumento) { try { adapter.UpdateTipoDocumento(Descripcion, IDTipoDocumento); mensaje = "ok"; return true; } catch (Exception ex) { mensaje = ex.Message; return false; } }

37. Reemplace la funcin editar 2 por:

function editar2(ID, Descripcion) { var pageUrl = ''; var parameter = { "ID": ID, "Descripcion": Descripcion, } $.ajax({ type: 'POST', url: pageUrl, data: JSON.stringify(parameter), contentType: 'application/json; charset=utf-8', dataType: 'json', success: function (data) { $("").html(data.d). dialog({ title: "Confirmacin", modal: true, buttons: [ { text: "Ok", click: function () { $(".fakeButton").click(); $(this).dialog("close"); } } ] } ); }, error: function (data, success, error) { $("").html("Error: " + error). dialog({ title: "Error", modal: true, buttons: [ { text: "Ok", click: function () { $(this).dialog("close"); } } ] } ); } }); }

38. Adicione el nuevo mtodo WEB:

[WebMethod] public static string EditTipoDocumento(string ID, string Descripcion)

{ int id = int.Parse(ID); if (CADTipoDocumento.UpdateTipoDocumento(Descripcion, id)) { return "Tipo documento actualizado correctamente"; } return CADTipoDocumento.Mensaje; }

39. Probar:

40. Ahora coloquemos un botn de buscar:

41. Adicionar la divisin para la bsqueda:

Criterio:

42. Ocultar la divisin de la bsqueda:

$("#dialog-nuevo").hide(); $("#dialog-edit").hide(); $("#dialog-buscar").hide(); $("#hide").hide();

43. Colocar este llamado dentro de $document ready:

$(".buscarButton").click(function () { $("#dialog-buscar").dialog({ resizable: false, height: 500, width: 700, modal: true, buttons: { "Cerrar": function () { $(this).dialog("close"); }

} }); return false; });

44. Probemos:

45. Agreguemos el cdigo que llena la tabla de bsqueda dependiendo del criterio ingresado, antes de cerrar el

$(function adicione estas lneas al script

$("#buscar2Button").click(function () { var pageUrl = ''; var criterio = $(".criterioTextBox").val(); var parameter = { "criterio": criterio } $.ajax({ url: pageUrl, type: "POST", data: JSON.stringify(parameter), contentType: "application/json; charser=utf-8", datatype: "json", success: function (result) { $("#dataBuscar").empty(); var data = JSON.parse(result.d); var array = data.Table; var temp = "ID Tipo DocumentoDescripcinSeleccin"; for (var i = 0; i < array.length; i++) { temp += ""; temp += "" + array[i].IDTipoDocumento + ""; temp += "" + array[i].Descripcion + ""; temp += ""; temp += ""; } temp += ""; $("#dataBuscar").append(temp); }, error: function (err) { alert("Fail"); } }); });

46. Para poder probar, debemos crear el Web Method GetRecords, pero primero debemos de agregar un paquete

JSon a nuestro proyecto. En herramientas -> Administrador de paquetes NuGet -> Consola del administrador de

paquetes, ejecute el siguiente comando:

install-package newtonsoft.json

Debe aparecer una ventana como esta:

47. Ahora s, procedamos a crear el Web Method GetRecords:

[WebMethod] public static string GetRecords(string criterio) { SqlConnection cn = new SqlConnection(ConfigurationManager.ConnectionStrings["CAD.Properties.Settings.GYMConnectionString"].ConnectionString); SqlDataAdapter da = new SqlDataAdapter("SELECT IDTipoDocumento, Descripcion FROM TipoDocumento WHERE Descripcion LIKE '%" + criterio + "%' ORDER BY Descripcion", cn); DataSet ds = new DataSet(); da.Fill(ds); string data = JsonConvert.SerializeObject(ds, Formatting.Indented); return data; }


49. Agreguemos la funcin SelectEdit antes de la funcin editar:

function selectEdit(control) { var ID = $(control).closest("tr").find("label").html(); editar(ID); }

50. Probemos:

Taran!!!!

creación de crud con llamados jquery

Documents