Usando JQuery y Ajax para llenar un DropDownList y otros ejemplos prácticos.

Posted by Alex on


El código que pueden ver en este post hace varias cosas que son muy típicas en cualquier aplicación Web , como llenar un dropdownlist en la carga inicial, llenar otro dropdownlist en función del valor del primero, y crear una tabla con algunos valores, la diferencia es que todo lo haremos del lado del cliente usando el framework javascript JQuery y comunicándonos con algún web services que nos devolverá los datos que necesitamos en formato JSON.
Si todavía alguno se pregunta cual es la ventaja de hacer esto con JQuery y del lado del cliente, pues dicha ventaja esta en que nos ahorramos las idas y venidas al servidor y pasar por todo el ciclo de carga de la pagina cuando hace postback lo cual implica envió innecesarios de datos al servidor aunque estemos usando Ajax o un updatepanel, por lo que hacerlo con JQuery y Ajax siempre será mas eficiente.

Los controles de nuestro aspx lucirán algo asi:

<body >

<form id=”form1″ runat=”server”>

<div>

<p>Categorias:</p> <asp:DropDownList ID=”ddlCategorias” runat =”server” ClientIDMode=Static >

<asp:ListItem  Text =”Selecciones una Categoria” Value =”0″ Selected =”True” ></asp:ListItem>

</asp:DropDownList>

<p>Productos:</p> <asp:DropDownList ID=”ddlProductos” runat =”server” ClientIDMode=Static >

<asp:ListItem  Text =”Selecciones un Producto” Value =”0″ Selected =”True” ></asp:ListItem>

</asp:DropDownList>

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

</div>

<div id=”tabla” runat =”server” >

</div>

</form>

</body>

Nuestro Codigo JQuery será el siguiente:

<%–   Cargo la librerya JQuery–%>

<script src=”Scripts/jquery-1.3.2.js” type=”text/javascript”></script>

<script language=”javascript”>

<%–   Leno el dropdownlist de categorias al cargar la pagina–%>

$().ready(function () {

$.ajax({

type: “POST”,

url: “Servicios/ServiciosJson.asmx/GetCategorias”,

data: “{}”,

contentType: “application/json; charset=utf-8″,

dataType: “json”,

success: function (response) {

var models = (typeof response.d) == ‘string’ ? eval(‘(‘ + response.d + ‘)’) : response.d;

for (var i = 0; i < models.length; i++) {

var val = models[i].Codigo;

var text = models[i].Descripcion;

$(“#ddlCategorias”).get(0).options[$("#ddlCategorias").get(0).options.length] = new Option(text, val);

}

//De esta manera tambien podemos llenar el dropdownlist

//                                          $.each(response.d, function (index, item) {

//                                          alert( item.Descripcion);

//                                           });

},

error: function (response) {

if (response.length != 0)

alert(response);

}

});

});

<%–   Leno el dropdownlist de productos al cambiar de categoria–%>

$(document).ready(function () {

$(“#ddlCategorias”).change(function () {

$.ajax({

type: “POST”,

url: “Servicios/ServiciosJson.asmx/GetProductos”,

data: “{categoria: ‘” + $(‘#ddlCategorias’).val() + “‘}”,

contentType: “application/json; charset=utf-8″,

dataType: “json”,

success: function (response) {

var models = (typeof response.d) == ‘string’ ? eval(‘(‘ + response.d + ‘)’) : response.d;

$(“#ddlProductos”).get(0).options.length = 0;

for (var i = 0; i < models.length; i++) {

var val = models[i].Codigo;

var text = models[i].Descripcion;

$(“#ddlProductos”).get(0).options[$("#ddlProductos").get(0).options.length] = new Option(text, val);

}

},

error: function (response) {

if (response.length != 0)

alert(response);

}

});

});

});

<%–   Creo una tabla con el detalle del producto al seleccionar uno–%>

$(document).ready(function () {

$(“#ddlProductos”).change(function () {

$.ajax({

type: “POST”,

url: “Servicios/ServiciosJson.asmx/GetProductosDetalle”,

data: “{codigo: ‘” + $(‘#ddlProductos’).val() + “‘}”,

contentType: “application/json; charset=utf-8″,

dataType: “json”,

success: function (response) {

var models = (typeof response.d) == ‘string’ ? eval(‘(‘ + response.d + ‘)’) : response.d;

var conten;

conten = “<table id=’Mitabla’ border=’2′>”;

conten += “<tr><td>”;

conten += “Codigo”;

conten += “</td>”;

conten += “<td>”;

conten += “Descripcion”;

conten += “</td>”;

conten += “<td>”;

conten += “Precio”;

conten += “</td>”;

conten += “<td>”;

conten += “Categoria”;

conten += “</td>”;

conten += “</tr>”;

for (var i = 0; i < models.length; i++) {

var val = models[i].Codigo;

var text = models[i].Descripcion;

var Precio = models[i].Precio;

var Categoria = models[i].Categoria;

$(‘#txtprueba’).val(‘se selecciono:’ + text);// se le asigna valor al text box

conten += “<tr><td>”;

conten += val;

conten += “</td>”;

conten += “<td>”;

conten += text;

conten += “</td>”;

conten += “<td>”;

conten += Precio;

conten += “</td>”;

conten += “<td>”;

conten += Categoria;

conten += “</td>”;

conten += “</tr>”;

}

conten += “</table>”;

$(“#tabla”).html(conten);

},

error: function (response) {

if (response.length != 0)

alert(response);

}

});

});

});

</script>


También será necesario crear el web services con los métodos que nos devolverá la información que necesitamos:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using TestJquery.Entidades;
namespace TestJquery.Servicios
{
///
/// Summary description for ServiciosJson
///
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
public class ServiciosJson : System.Web.Services.WebService
{

[WebMethod]
public List GetCategorias()
{
List Categorias = new List()
{ new Categoria {Codigo =”1″, Descripcion =”CategoriaA”},
new Categoria {Codigo =”2″,Descripcion =”CategoriaB”}
};
return Categorias;
}

[WebMethod]
public List
 GetProductos(string categoria)
{
List
 Productos = new List
 ();
Productos = GetListaProductos();
var a = from c in Productos where c.Categoria == categoria select c;
return a.ToList();
}

[WebMethod]
public List
 GetProductosDetalle(string codigo)
{
List
 Productos = new List
 ();
Productos = GetListaProductos();
var a = from c in Productos where c.Codigo == codigo select c;
return a.ToList();
}

public List
 GetListaProductos()
{
List
 Productos = new List
 ()
{ new Producto {Codigo =”1″, Descripcion =”ProductoA”,Precio =”100″, Categoria =”1″},
new Producto {Codigo =”2″,Descripcion =”ProductoB”,Precio =”200″, Categoria =”2″},
new Producto {Codigo =”3″, Descripcion =”ProductoC”,Precio =”300″, Categoria =”1″},
new Producto {Codigo =”4″,Descripcion =”ProductoD”,Precio =”400″, Categoria =”2″}
};
return Productos;
}

}
}

Las entidades:
 using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace TestJquery.Entidades
{
public class Categoria
{
public string Codigo;
public string Descripcion;
}
}

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace TestJquery.Entidades
{
public class Producto
{
public string Codigo;
public string Descripcion;
public string Precio;
public string Categoria;
}
}

Y eso es todo, en el ejemplo podemos ver como nuestro web services nos puede devolver cualquier objeto en formato JSON y acceder a las propiedades de dicho objeto o lista de objetos desde nuestra página aspx usando JQuery.
El Código de este pequeño ejemplo lo pueden descargar de aquí.

3 Respuestas a Usando JQuery y Ajax para llenar un DropDownList y otros ejemplos prácticos.

  2. Es un proyecto un poco avanzado vale la pena descargarlo y ver la aplicacion en funcionamiento, el sistema tiene dos listas la cual cuando se selecciona un PAIS en el otro select apareceran las ciudades de este pais, ademas de esto podemos ingresar paises, ciudades, borrar paises, borrar ciudades todo de forma ASINCRONICA con JQUERY, php, mysql y un poco de ajax. espero el proyecto sea de su total agrado pueden ver la aplicacion en funcionamiento aqui: http://www.getvay.com/SeleccionAvanzado/index.php pueden ver un video aqui: http://www.youtube.com/watch?v=Iv4kN7X2Toc&feature=channel y lo pueden descargar de aqui http://www.getvay.com/pg/file/macs1407/read/1792/selects

    Responder

Deja un comentario

Fill in your details below or click an icon to log in:

Gravatar
Logo de WordPress.com

You are commenting using your WordPress.com account. ( Log Out / Cambiar )

Twitter picture

You are commenting using your Twitter account. ( Log Out / Cambiar )

Facebook photo

You are commenting using your Facebook account. ( Log Out / Cambiar )

Cancelar

Connecting to %s