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]

Advertisements

5 thoughts on “Fill a Dropdownlist using jQuery in ASP.NET

  1. Ankit

    Good one. But I think you are still sticking to some very old stuff from Microsoft. IN MVC same thing looks much cleaner. Will be good to see some articles on asp.net MVC

    Like

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s