In this article I will explain with an example, how to populate / bind / fill ASP.Net DropDownList using jQuery AJAX and JSON in C# and VB.Net.
The ASP.Net DropDownList items (options) will be populated by fetching data from database in JSON format by calling WebMethod (PageMethod) using jQuery AJAX in ASP.Net.
Database
I have made use of the following table Customers with the schema as follows.
![Populate (Bind) ASP.Net DropDownList using jQuery AJAX and JSON in C# and VB.Net]()
I have already inserted few records in the table.
![Populate (Bind) ASP.Net DropDownList using jQuery AJAX and JSON in C# and VB.Net]()
Note: You can download the database table SQL by clicking the download link below.
HTML Markup
The following HTML Markup consists of an ASP.Net DropDownList.
<asp:DropDownList ID="ddlCustomers" runat="server">
</asp:DropDownList>
Namespaces
You will need to import the following namespaces.
C#
using System.Data;
using System.Web.Services;
using System.Configuration;
using System.Data.SqlClient;
VB.Net
Imports System.Data
Imports System.Web.Services
Imports System.Configuration
Imports System.Data.SqlClient
The WebMethod
The following WebMethod gets the list of Customers from the Customers table and then creates a generic list of ListItem class. In each object of ListItem, the Customer Name is set in the Text part and the CustomerId is set in the Value part.
Finally the generic list of ListItem objects is returned.
C#
[WebMethod]
public static List<ListItem> GetCustomers()
{
string query = "SELECT CustomerId, Name FROM Customers";
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand(query))
{
List<ListItem> customers = new List<ListItem>();
cmd.CommandType = CommandType.Text;
cmd.Connection = con;
con.Open();
using (SqlDataReader sdr = cmd.ExecuteReader())
{
while (sdr.Read())
{
customers.Add(new ListItem
{
Value = sdr["CustomerId"].ToString(),
Text = sdr["Name"].ToString()
});
}
}
con.Close();
return customers;
}
}
}
VB.Net
<WebMethod()> _
Public Shared Function GetCustomers() As List(Of ListItem)
Dim query As String = "SELECT CustomerId, Name FROM Customers"
Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Using con As New SqlConnection(constr)
Using cmd As New SqlCommand(query)
Dim customers As New List(Of ListItem)()
cmd.CommandType = CommandType.Text
cmd.Connection = con
con.Open()
Using sdr As SqlDataReader = cmd.ExecuteReader()
While sdr.Read()
customers.Add(New ListItem() With { _
.Value = sdr("CustomerId").ToString(), _
.Text = sdr("Name").ToString() _
})
End While
End Using
con.Close()
Return customers
End Using
End Using
End Function
Populating DropDownList Items (Options) on Client Side using jQuery
Inside the document ready event handler of the jQuery, first the WebMethod is called using jQuery AJAX function.
Inside the Success event handler of the jQuery AJAX function, first the ASP.Net DropDownList is referenced and a default Item (Option) is added to it.
Then a jQuery each loop is executed over the JSON array and one by one each item is added as an Option element to the DropDownList.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$.ajax({
type: "POST",
url: "Default.aspx/GetCustomers",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
var ddlCustomers = $("[id*=ddlCustomers]");
ddlCustomers.empty().append('<option selected="selected" value="0">Please select</option>');
$.each(r.d, function () {
ddlCustomers.append($("<option></option>").val(this['Value']).html(this['Text']));
});
}
});
});
</script>
Screenshot
![Populate (Bind) ASP.Net DropDownList using jQuery AJAX and JSON in C# and VB.Net]()
Browser Compatibility
The above code has been tested in the following browsers.
![Internet Explorer]()
![FireFox]()
![Chrome]()
![Safari]()
![Opera]()
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
