Llenar un DropDownList de ASP.Net con AJAX JQuery


Llenar un DropDownList de ASP.Net con AJAX JQuery | jazdian

phone

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.

Imagen de un input tipo button y un DropDownList

Código HTML con un DropDownList

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="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”


Echo Dot (3ra generación) – negro


Echo Dot
Buy on Amazon


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.

DropDownList ya poblado con datos del Servidor

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/


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *