Agregar Búsquedas Modales al Formulario de Compras con
Agregar Búsquedas Modales al Formulario de Compras con: JQuery, AJAX & JSon
- Agregue un botón para buscar el producto, junto antes del productoTextBox
<input id=”buscarProductoButton” type=”button” value=”…” />
- Antes del último asp:content creemos la división que servirá de búsqueda para los productos
<div id=”dialog-search-producto” title=”Búsqueda de productos”>
Críterio:
<asp:TextBox ID=”criterioProductoTextBox” CssClass=”criterioProductoTextBox” runat=”server”></asp:TextBox>
<input id=”buscarProducto2Button” type=”button” value=”Buscar” />
<div id=”dataProducto”></div>
</div>
- Agregamos el script que hace el llamado del dialogo, después del efecto de date picker:
$(“#dialog-search-proveedor”).hide();
$(“#buscarProductoButton”).click(function () {
$(“#dialog-search-producto”).dialog({
resizable: false,
height: 500,
width: 700,
modal: true,
buttons: {
“Cerrar”: function () {
$(this).dialog(“close”);
}
}
});
});
- Probemos lo que llevamos hasta el momento:
- Agreguemos el código que llena la tabla de búsqueda dependiendo del criterio ingresado, antes de cerrar el $(function adicione estas líneas al script
$(“#buscarProducto2Button”).click(function () {
var pageUrl = ‘<%= ResolveUrl(“~/Movimientos/Compras.aspx/GetRecordsProducto”) %>’;
var criterio = $(“#<%= criterioProductoTextBox.ClientID %>”).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) {
$(“#dataProducto”).empty();
var data = JSON.parse(result.d);
var array = data.Table;
var temp = “<table><tr><th>ID Producto</th><th>Descripción</th><th>Selección</th></tr>”;
for (var i = 0; i < array.length; i++) {
temp += “<tr>”;
temp += “<td><label>” + array[i].IDProducto + “</label></td>”;
temp += “<td><label>” + array[i].Descripcion + “</label></td>”;
temp += “<td><input itag=’Select’ type=’button’ value=’Seleccionar’ onclick=’return SelectRecordProducto(this)’/></td>”;
temp += “</tr>”;
}
temp += “</table>”;
$(“#dataProducto”).append(temp);
},
error: function (err) {
alert(“Fail”);
}
});
});
- Para poder probar, debemos crear el Web Method GetRecordsProducto , pero primero ebemos 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:
- Ahora si, procedamos a crear el Web Method GetRecordsProducto:
[WebMethod]
public static string GetRecordsProducto(string criterio)
{
SqlConnection cn = new SqlConnection(ConfigurationManager.ConnectionStrings[“DefaultConnection”].ConnectionString);
SqlDataAdapter da = new SqlDataAdapter(“SELECT IDProducto, Descripcion FROM Producto WHERE Descripcion LIKE ‘” + criterio + “%’ ORDER BY Descripcion”, cn);
DataSet ds = new DataSet();
da.Fill(ds);
string data = JsonConvert.SerializeObject(ds, Formatting.Indented);
return data;
}
- Probemos lo que llevamos hasta el momento:
- Agregue la propiedad CssClass al productoTextBox y al consultarButton, por orden se recomienda que sea el mismo id del control
<asp:TextBox ID=”productoTextBox” CssClass=”productoTextBox” runat=”server” Width=”135px”></asp:TextBox>
<asp:Button ID=”consultarButton” CssClass=”consultarButton” runat=”server” Text=”Consultar” OnClick=”consultarButton_Click” />
- Ahora agreguemos el código para seleccionar el producto buscado. Agregue estas líneas al empezar el script:
function SelectRecordProducto(control) {
var ID = $(control).closest(“tr”).find(“label”).html();
$(“.productoTextBox”).val(ID);
$(“.consultarButton”).click();
$(“#dialog-search-producto”).dialog(“close”);
}
- Probemos la búsqueda:
Taran!!!!!
- Ya que implementamos la búsqueda de productos, ahora implementemos la búsqueda de proveedores. Iniciamos creando el botón de búsqueda de proveedores, justo antes del drop down list de proveedores.
<input id=”buscarProveedorButton” type=”button” value=”…” />
- Creemos la división que contendrá la búsqueda, agregue estas líneas antes del último asp:content
<div id=”dialog-search-proveedor” title=”Búsqueda de proveedor”>
Críterio:
<asp:TextBox ID=”criterioProveedorTextBox” CssClass=”criterioProveedorTextBox” runat=”server”></asp:TextBox>
<input id=”buscarProveedor2Button” type=”button” value=”Buscar” />
<div id=”dataProveedor”></div>
</div>
- Agreguemos estas líneas, luego del hide de la división de búsqueda de producto:
$(“#dialog-search-proveedor”).hide();
$(“#buscarProveedorButton”).click(function () {
$(“#dialog-search-proveedor”).dialog({
resizable: false,
height: 500,
width: 700,
modal: true,
buttons: {
“Cerrar”: function () {
$(this).dialog(“close”);
}
}
});
});
- Probemos lo que llevamos hasta el momento para la búsqueda de proveedor:
- Implementemos el código que hace la búsqueda de registros en la base de datos. Agregue estas líneas antes de cerrar el $function(
$(“#buscarProveedor2Button”).click(function () {
var pageUrl = ‘<%= ResolveUrl(“~/Movimientos/Compras.aspx/GetRecordsProveedor”) %>’;
var criterio = $(“#<%= criterioProveedorTextBox.ClientID %>”).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) {
$(“#dataProveedor”).empty();
var data = JSON.parse(result.d);
var array = data.Table;
var temp = “<table><tr><th>ID Proveedor</th><th>Nombre Comercial</th><th>Selección</th></tr>”;
for (var i = 0; i < array.length; i++) {
temp += “<tr>”;
temp += “<td><label>” + array[i].IDProveedor + “</label></td>”;
temp += “<td><label>” + array[i].Nombre + “</label></td>”;
temp += “<td><input itag=’Select’ type=’button’ value=’Seleccionar’ onclick=’return SelectRecordProveedor(this)’/></td>”;
temp += “</tr>”;
}
temp += “</table>”;
$(“#dataProveedor”).append(temp);
},
error: function (err) {
alert(“Fail”);
}
});
});
- Agreguemos el Web Method de búsqueda de registros de proveedor:
[WebMethod]
public static string GetRecordsProveedor(string criterio)
{
SqlConnection cn = new SqlConnection(ConfigurationManager.ConnectionStrings[“DefaultConnection”].ConnectionString);
SqlDataAdapter da = new SqlDataAdapter(“SELECT IDProveedor, Nombre FROM Proveedor WHERE Nombre LIKE ‘” + criterio + “%’ ORDER BY Nombre”, cn);
DataSet ds = new DataSet();
da.Fill(ds);
string data = JsonConvert.SerializeObject(ds, Formatting.Indented);
return data;
}
- Probemos lo que llevamos hasta el momento:
- Coloquemos la propiedad CssClass al Drop Down List de proveedor:
<asp:DropDownList ID=”proveedorDropDownList” CssClass=”proveedorDropDownList” runat=”server” DataSourceID=”provedoresSqlDataSource” DataTextField=”Nombre” DataValueField=”IDProveedor”>
- E implementemos las líneas del botón Seleccionar. Al iniciar el script, coloque las siguientes líneas:
function SelectRecordProveedor(control) {
var ID = $(control).closest(“tr”).find(“label”).html();
$(“.proveedorDropDownList”).val(ID);
$(“#dialog-search-proveedor”).dialog(“close”);
}
- Ya podemos probar la funcionalidad completa:
No comments yet.