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"&gt
        $(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&gt
 
  </body&gt
</html>

Librerias necesarias:
Jquery

Newtonsoft

Agradecimientos a Luis Alberto por su ayuda. 

3 comentarios:

Juan Pablo Rodriguez Mendoza dijo...

Exelenteee amigoo me ayudo muchoo

nexthor dijo...

muchisimas gracias!!! me estaba reventando los sesos buscando esta solución!!!

BenCi dijo...

Me da un error en parseJSON...el error es....Uncaught SyntaxError: Unexpected token u in JSON at position 0

Benjamín