PROCESO PARA COLOCAR BOTÓN DE AGREGAR BARRA CON JQUERY & JSON

Spread the love

PROCESO PARA COLOCAR BOTÓN DE AGREGAR BARRA CON JQUERY & JSON

  1. Actualizar las librerías de JQuery y JQuery UI




  1. En el Site.Master cambiar:

<link href=”Content/themes/base/jquery-ui.css” rel=”stylesheet” type=”text/css” />

Por:

<link href=”Content/themes/base/all.css” rel=”stylesheet” />

Con esto actualizamos el JQuery en nuestro Proyecto a la última versión aprobada por Microsoft y así evitarnos errores por versiones

  1. Coloquemos un botón html de agregar barra, antes del barrasGridView. No utilice un botón ASP.NET que no camina bien con JQuery:

<input id=”agregarBarraButton” type=”button” value=”Agregar Barra” />

  1. Al final del formulario de productos coloque el div que contendrá el dialogo de agregar barra (antes del último asp:content):

<div id=”dialog-barra” title=”Agregar Barra”>

<p>

Barra:

<asp:TextBox ID=”barraTextBox” runat=”server”></asp:TextBox>

</p>

</div>

  1. Agreguemos el siguiente Script para llamar el dialogo de la adición de barra (antes del <h1> de productos):

<script>

$(function () {

$(“#dialog-barra”).hide();

$(“#agregarBarraButton”).click(function () {

<% barraTextBox.Text = string.Empty; %>

$(“#dialog-barra”).dialog({

resizable: false,

height: 200,

width: 350,

modal: true,

buttons: {

“Agregar”: function () {

alert(“Si”);

$(this).dialog(“close”);

},

“Cancelar”: function () {

alert(“No”);

$(this).dialog(“close”);

}

}

});

});

});

</script>

  1. Probemos lo que llevamos hasta el momento:

  1. Ahora cambiemos el simple alert de prueba por el llamado a la función que realmente hace la inserción de la barra y validemos que haya un producto ingresado al cual le vamos a ingresar la barra. Cambie el script por este:

$(function () {

$(“#dialog-barra”).hide();

$(“#agregarBarraButton”).click(function () {

var idProducto = $(“#<%= idProductoTextBox.ClientID %>”).val();

if (idProducto == “”) {

alert(“Debe ingresar un ID de producto”);

return;

}

<% barraTextBox.Text = string.Empty; %>

$(“#dialog-barra”).dialog({

resizable: false,

height: 200,

width: 350,

modal: true,

buttons: {

“Agregar”: function () {

InsertBarra();

$(this).dialog(“close”);

},

“Cancelar”: function () {

$(this).dialog(“close”);

}

}

});

});

});

  1. Y después de Script agreguemos la función InsertBarra:

function InsertBarra() {

var pageUrl = ‘<%= ResolveUrl(“~/Mantenimientos/Productos.aspx/InsertBarra”) %>’;

var idProducto = $(“#<%= idProductoTextBox.ClientID %>”).val();

var barra = $(“#<%= barraTextBox.ClientID %>”).val();

var parameter = { “idProducto”: idProducto, “barra”: barra }

$.ajax({

type: ‘POST’,

url: pageUrl,

data: JSON.stringify(parameter),

contentType: ‘application/json; charset=utf-8’,

dataType: ‘json’,

success: function (data) {

alert(data.d);

<% barrasGridView.DataBind(); %>

},

error: function (data, success, error) {

alert(“Error: ” + error);

}

});

}

  1. Y agregamos el WebMethod InsertBarra en el código C# de la página:

[WebMethod]

public static string InsertBarra(int idProducto, long barra)

{

if (barra == 0)

{

return “Bebe ingresar una barra”;

}

if (CADBarra.ExisteBarra(barra))

{

return “Barra ya existe para otro producto”;

}

CADBarra.InsertBarra(idProducto, barra);

return “Barrar agregada correctamente”;

}

  1. Probemos lo que llevamos hasta el momento:

Ya tenemos el agregar barra con un llamado AJAX a JSON!!!

  1. Po último para hacer mejor las cosas, reemplacemos los mensajes con alert por diálogos de jquery. Reemplace el alert de “Debe ingresar un producto” por:

$(“<div></div>”).html(“Debe ingresar un ID de producto”).

dialog({

title: “Mensaje”, modal: true, buttons: [

{

text: “Ok”,

click: function () {

$(this).dialog(“close”);

}

}

]

}

);

  1. Reemplace el alert de confirmación por:

$(“<div></div>”).html(data.d).

dialog({

title: “Confirmación”, modal: true, buttons: [

{

text: “Ok”,

click: function () {

$(this).dialog(“close”);

}

}

]

}

);

  1. Reemplace el alert de error por:

$(“<div></div>”).html(“Error: ” + error).

dialog({

title: “Error”, modal: true, buttons: [

{

text: “Ok”,

click: function () {

$(this).dialog(“close”);

}

}

]

}

);

  1. Probemos el cambio completo: