Etiquetas

, , , , ,


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/&#8221;)]
[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í.