jueves, 23 de mayo de 2013
Llenar un combo con query y json con aspnet
1.) Agregar este codigo en el HTML
<Form>
<select id="cboEjemplo">
<option value="">Seleccione uno...</option>
</select>
</Form>
2.) Agregar este jquery al final del documento.
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
type: "POST",
url: "pagina.aspx/llenar",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
var datos = $.parseJSON(msg.d);
$(datos).each(function () {
var option = $(document.createElement('option'));
option.text(this.Nombre);
option.val(this.Codigo);
$("#cboEjemplo").append(option);
});
},
error: function (msg) {
$("#dvAlerta > span").text("Error al llenar el combo");
}
});
});
</script>
3.) Agregar este codigo para crear en webmethod que generar el json basado en entity framework
[System.Web.Services.WebMethod]
public static string llenar()
{
NorthwindEntities db = new NorthwindEntities();
var query = from c in db.Categories
select new
{
Codigo = c.CategoryID,
Nombre = c.CategoryName
};
return Newtonsoft.Json.JsonConvert.SerializeObject(query);
}
Nota: no olvide descargar la libreria Newtonsoft para generar el json, es mas rapida que la nativa de Microsoft.
Ejemplo del HTML Completo.
<!DOCTYPE html>
<html>
<head>
<title>ejemplo</title>
</head>
<body>
<h1>Hello, world!</h1>
<Form>
<select id="cboEjemplo">
<option value="">Seleccione uno...</option>
</select>
</Form>
<script src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
type: "POST",
url: "pagina.aspx/llenar",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
var datos = $.parseJSON(msg.d);
$(datos).each(function () {
var option = $(document.createElement('option'));
option.text(this.Nombre);
option.val(this.Codigo);
$("#cboEjemplo").append(option);
});
},
error: function (msg) {
$("#dvAlerta > span").text("Error al llenar el combo");
}
});
});
</script>
</body>
</html>
Librerias necesarias:Jquery
Newtonsoft
Agradecimientos a Luis Alberto por su ayuda.
Suscribirse a:
Comentarios de la entrada (Atom)
3 comentarios:
Exelenteee amigoo me ayudo muchoo
muchisimas gracias!!! me estaba reventando los sesos buscando esta solución!!!
Me da un error en parseJSON...el error es....Uncaught SyntaxError: Unexpected token u in JSON at position 0
Benjamín
Publicar un comentario