Llenar un DropDownList de ASP.Net con AJAX JQuery

Para una actualización de este articulo favor de visitar este nuevo blog, Se a actualizado y mejorado el código.

Hace mucho escribí un código, en mi blog anterior, para llenar un DropDownList de Asp.net con Ajax de JQuery. Pero el blog no está muy bien que digamos, y pues ya no esta actualizado. Así que voy a reescribirlo de nuevo.

Necesitamos crear un archivo con el nombre de index.aspx. Este archivo no esta dentro de una Master Page.

Código HTML con un DropDownList

nherits="DemosWeb.index" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Ajax y JQuery</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<form id="form1" runat="server">
    <br />
    <div class="container">
        Recuperar datos desde el servidor con AJAX JQuery
        <br /><br />
        <div>
            <input id="Button1" type="button" class="btn-info" value="Recuperar Datos" onclick="PoblarDropDown('1', 'René')" />
            <asp:DropDownList ID="DropDownListUsers" runat="server"></asp:DropDownList>
                
        </div>
    </div>
</form>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js"></script>


Un vez tenemos el código HTML entonces creamos una función en javascript para llenar un DropDownList con AJAX, en este caso le estamos enviado dos variables separadas por un pipe en la variable “MiValor_”. En el código de servidor recuperaremos esa variable.

<script>
function PoblarDropDown($VariableUno, $VariableDos) {
   var valor = $VariableUno+ "|" + $VariableDos;
   $.ajax({
      type: "POST",
      url: "index.aspx/DatosUsuarios",
      data: "{MiValor_: '" + valor + "'}",
      contentType: "application/json; charset=utf-8",
      dataType: "json",
      success: function (data) {
         // Agregamos un item al DropDownList, Opcional.
         $("#DropDownListUsers")
         .empty()
         .append($("<option></option>")
         .val("0")
         .html(":.Seleccione.:"));
         
         // Con json que viene del servidor poblamos el DDList
         $.each(data.d, function (key, value) {
            var option = $(document.createElement('option'));
            option.html(value.Usuario);
            option.val(value.Id);
            $("#DropDownListUsers")
            .append(option);
         });
      },
      error: function (XMLHttpRequest, textStatus, errorThrown) {
         console.log(textStatus + ": " + XMLHttpRequest.responseText);
      }
   });
}
</script>
</body>
</html>

Ahora vamos a ver la sección del código oculto “index.aspx.cs”

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
namespace DemosWeb
{
  public partial class index : System.Web.UI.Page
  {
    protected void Page_Load(object sender, EventArgs e)
    {
    }
[WebMethod()]
public static CamposDropDown[] DatosUsuarios(string MiValor_)
{
   string CadenaCampos;
   // Aunque estamos recibiendo los datos desde el cliente 
   // en la cadena MiValor_ En realidad no los estoy usando.
   // Pero lo que hago es meter cada valor en un item de un array.
   CadenaCampos = MiValor_;
   string[] CantidadCampos = CadenaCampos.Split(‘|’); 
   
   //En este caso los datos los recupero desde un SP SQLServer
   string Conexion = "Data Source=MISERVER;Database=MiBase;User ID=sa; Password=miPassw0rd;";
   string QuerySQL = "SELECT TOP 50 ID, usuario FROM usuarios";
   using (SqlConnection cn = new SqlConnection(Conexion))
   {
      using (SqlCommand cmd = new SqlCommand(NombreSP))
      {
         cmd.Connection = cn;
         cmd.CommandType = CommandType.Text;
         cn.Open();
            using (SqlDataAdapter da = new SqlDataAdapter(cmd))
            {
               DataTable dt = new DataTable();
               da.Fill(dt);
               List<CamposDropDown> details = new List<CamposDropDown>();
               foreach (System.Data.DataRow dtRow in dt.Rows)
               {
                  CamposDropDown Listado = new CamposDropDown(); 
                  Listado.Id = dtRow["ID"].ToString();
                  Listado.Usuario= dtRow["usuario"].ToString();
                  details.Add(Listado);
                }
                return details.ToArray();
            }
      }
   }
}
public class CamposDropDown
{
   public string Id { get; set; }
   public string NombreLista { get; set; }
}
 }
}

Ya que tenemos nuestro código le damos clic al botón y deberíamos obtener los datos desde el servidor y así llenar un DropDownList con AJAX.

Este código esta funcionando con ASP.Net 2019 y la versión mas reciente de JQuery.

Tambien pudes ver como usar la nueva API de Javascrip. AQUI.

Evolución de Ajax con JQuery

La biblioteca jQuery tiene un conjunto completo de capacidades Ajax. Las funciones y métodos en este nos permiten cargar datos desde el servidor sin una actualización de la página del navegador. De ahí que, JQuery nos brinda una amplia gama de funciones para poder controlar la carga de datos desde el servidor de manera fácil. Aqui algunos ejemplos de como a cambiado Ajax. https://api.jquery.com/jQuery.ajax/

Publicado por jazdian

Desarrollador web freelancer

One thought on “Llenar un DropDownList de ASP.Net con AJAX JQuery

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s

A %d blogueros les gusta esto: