Fill a Dropdownlist using jQuery in ASP.NET

In this article, let’s discuss how to fill a dropdownlist using jQuery in ASP.NET

1. Let’s start by adding a dropdownlist on page.

<asp:DropDownList ID="ddlRecords" runat="server" ClientIDMode="Static"></asp:DropDownList>

Notice that we have set ClientIDMode property to “Static” which means The ClientID value is set to the value of the ID property. So that we can directly refering this control using ID.

2. To fill a dropdownlist, using  jQuery, let’s write a webmethod, which we will call through jQuery Ajax method.

[WebMethod]
 public static string GetResultset()
 {
 DataTable dataTable = new System.Data.DataTable("Employees");
 using (SqlConnection sqlConnection = new SqlConnection(ConfigurationManager.ConnectionStrings["MyConnectionString"].ConnectionString))
 {
 try
 {
 SqlDataAdapter sqlDataAdapter = new SqlDataAdapter("SELECT EmployeeID, FirstName + ' ' + LastName AS Name FROM Employees", sqlConnection);
 sqlDataAdapter.Fill(dataTable);
 return JsonConvert.SerializeObject(dataTable);
 }
 catch (Exception ex)
 {
 throw ex;
 }
 }
 }

Notice that we have applied “WebMethod” attribute to this method which is defined in the namespace “using System.Web.Services;”, so we need to include it in the code.

using System.Web.Services;

Set the connection string in the config file.

<connectionStrings>
 <add name="MyConnectionString" connectionString="Data Source=localhost;Initial Catalog=Northwind;Integrated Security=SSPI;User ID=sa;Password=123456" providerName="System.Data.SqlClient"/>
 </connectionStrings>

Webmethod Explained:

In the webmethod, we have taken a sql connection and sql adapter to fill a datatable. And the datatable object is serialized using json.net.

3. To call this webmethod, let’s write a jQuery code. Before using jQuery, we need to include the reference to it.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

4. On document.ready, we will call our webmethod to fill dropdownlist.

<script type="text/javascript">
 $(document).ready(function () {

//fill dropdownlist
 $.ajax({
 type: "POST",
 url: "Default.aspx/GetResultset",
 data: "{}",
 contentType: "application/json; charset=utf-8",
 dataType: "json",
 success: function (data) {
 $.each(jQuery.parseJSON(data.d), function () {
 $("#ddlRecords").append($("<option></option>").val(this['EmployeeID']).html(this['Name']));
 });
 },
 error: function (msg) {
 //error
 }
 });

});
 </script>

Here data will have number of records, so we have iterated through each record using .each() and appended a record to our dropdownlist. Since we are getting serialized data, we have parsed data using jQuery.parseJSON()

Source Code Download:

Github [Repository Link]

Related articles

• jQuery Advantages over Standard Javascript (surajdeshpande.wordpress.com)
• Calling ASP.Net WebMethod using JQuery (surajdeshpande.wordpress.com)
• Call a Web Service Using JQuery in ASP.NET (surajdeshpande.wordpress.com)