Home Northwind

jueves, 23 de mayo de 2013

Llenar un combo con query y json con aspnet

3 comentarios: Publicadas por Carlos Juan a la/s 10:54 p.m. Etiquetas: ,

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. 






Ver




















        

      










Suscribirse a:
Comentarios (Atom)