In this article I will explain with an example, how to populate / bind / fill ASP.Net ListBox using jQuery AJAX and JSON in C# and VB.Net.
The ASP.Net ListBox 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 ListBox using jQuery AJAX and JSON in C# and VB.Net
I have already inserted few records in the table.
Populate (Bind) ASP.Net ListBox using jQuery AJAX and JSON in C# and VB.Net
 
Note: You can download the database table SQL by clicking the download link below.
          Download SQL file
 
 
HTML Markup
The following HTML Markup consists of an ASP.Net ListBox.
<asp:ListBox ID="lstCustomers" runat="server">
</asp:ListBox>
 
 
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 ListBox 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, jQuery each loop is executed over the JSON array and one by one each item is added as an Option element to the ListBox.
<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 lstCustomers = $("[id*=lstCustomers]");
            lstCustomers.empty();
            $.each(r.d, function () {
                lstCustomers.append($("<option></option>").val(this['Value']).html(this['Text']));
            });
        }
    });
});
</script>
 
 
Screenshot
Populate (Bind) ASP.Net ListBox 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