Bind Dropdown with jQuery AJAX & WebMethod in ASP.NET

In modern ASP.NET Web Forms applications, making a smoother user experience often involves avoiding full-page postbacks. One efficient way to do this is by using jQuery AJAX calls to fetch data from server-side [WebMethod] functions and bind it directly to controls like <select> or <asp: DropDownList>.

In this article, we’ll walk through a real-world implementation where three dropdowns—Symbol, Category, and Applicant Name—are dynamically populated using data from SQL Server via AJAX

Web config

<connectionStrings>
  <add 
    name="testor" 
    connectionString="Data Source=softsql;Initial Catalog=ABCIPO;Connect TimeOut=60;Max Pool Size=10000;User ID=sa;Password=capmark@09" 
    providerName="System.Data.SqlClient" 
  />
</connectionStrings>

Client-Side: jQuery AJAX Call

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
    $(document).ready(function () {
        Getsymbol();
        GetCategory();
        GetApplicantName();

        function Getsymbol() {
            $.ajax({
                type: "POST",
                url: "/Admin/test.aspx/Getsymbol",
                data: '{}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (r) {
                    var drpcompany = $("[id*=drpcompany]");
                    drpcompany.empty().append('<option selected value="">All</option>');
                    $.each(r.d, function () {
                        drpcompany.append($("<option></option>")
                            .val(this['Value'])
                            .html(this['Text']));
                    });
                }
            });
        }

        function GetCategory() {
            $.ajax({
                type: "POST",
                url: "/Admin/test.aspx/GetCategory",
                data: '{}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (r) {
                    var drpCategory = $("[id*=drpCategory]");
                    drpCategory.empty().append('<option selected value="">All</option>');
                    $.each(r.d, function () {
                        drpCategory.append($("<option></option>")
                            .val(this['Value'])
                            .html(this['Text']));
                    });
                }
            });
        }

        function GetApplicantName() {
            $.ajax({
                type: "POST",
                url: "/Admin/test.aspx/GetApplicantName",
                data: '{}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (r) {
                    var drpUser = $("[id*=drpUser]");
                    drpUser.empty().append('<option selected value="">All</option>');
                    $.each(r.d, function () {
                        drpUser.append($("<option></option>")
                            .val(this['Value'])
                            .html(this['Text']));
                    });
                }
            });
        }
    });
</script>

Server-Side: [WebMethod] Functions ( 

All WebMethods are static and return a List<ListItem>. Each one reads from an SQL Server table using ADO.NET.

Get Symbols

[WebMethod]
public static List<ListItem> Getsymbol()
{
    string query = "SELECT DISTINCT symbol FROM IPObidfiledetailsNew";
    string constr = ConfigurationManager.ConnectionStrings["testor"].ConnectionString;

    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand(query))
        {
            List<ListItem> symbol = new List<ListItem>();
            cmd.CommandType = CommandType.Text;
            cmd.Connection = con;

            con.Open();
            using (SqlDataReader sdr = cmd.ExecuteReader())
            {
                while (sdr.Read())
                {
                    symbol.Add(new ListItem
                    {
                        Value = sdr["symbol"].ToString(),
                        Text = sdr["symbol"].ToString()
                    });
                }
            }
            con.Close();
            return symbol;
        }
    }
}

Get Category

[WebMethod]
public static List<ListItem> GetCategory()
{
    string query = "SELECT DISTINCT Category FROM IPObidfiledetailsNew";
    string constr = ConfigurationManager.ConnectionStrings["testor"].ConnectionString;

    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand(query))
        {
            List<ListItem> Category = new List<ListItem>();
            cmd.CommandType = CommandType.Text;
            cmd.Connection = con;

            con.Open();
            using (SqlDataReader sdr = cmd.ExecuteReader())
            {
                while (sdr.Read())
                {
                    Category.Add(new ListItem
                    {
                        Value = sdr["Category"].ToString(),
                        Text = sdr["Category"].ToString()
                    });
                }
            }
            con.Close();
            return Category;
        }
    }
}

Get Applicant Names

[WebMethod]
public static List<ListItem> GetApplicantName()
{
    string query = "SELECT DISTINCT ApplicantName, uccId FROM IPObidfiledetailsNew";
    string constr = ConfigurationManager.ConnectionStrings["testor"].ConnectionString;

    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand(query))
        {
            List<ListItem> ApplicantName = new List<ListItem>();
            cmd.CommandType = CommandType.Text;
            cmd.Connection = con;
            con.Open();

            using (SqlDataReader sdr = cmd.ExecuteReader())
            {
                while (sdr.Read())
                {
                    ApplicantName.Add(new ListItem
                    {
                        Value = sdr["uccId"].ToString(),
                        Text = sdr["ApplicantName"].ToString()
                    });
                }
            }

            con.Close();
            return ApplicantName;
        }
    }
}