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:

Unknown 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