Learning jQuery

ASP.NET DropdownList is a common control and now days with jQuery and Ajax technologies asynchronous request makes a better user experience. In this post, you will see that how to populate ASP.NET DropDownList using jQuery and Ajax by making an asynchronous request.

First, we need to create a WebMethod in your code behind to get the data from the server. This WebMethod will be called through ajax using jQuery. This WebMethod should have your logic to get the data (It can be from database or some file as per your requirement). For demo purpose, I have used static data to fill an ArrayList with the list of languages as its list items.

//Code Starts
[WebMethod()]
public static ArrayList GetLanguageList()
{
    ArrayList lstArrLanguage = new ArrayList();
    lstArrLanguage.Add(new ListItem("C#", "C#"));
    lstArrLanguage.Add(new ListItem("Java", "Java"));
    lstArrLanguage.Add(new ListItem("PHP", "PHP"));
    lstArrLanguage.Add(new ListItem("VB.NET", "VB.NET"));
    lstArrLanguage.Add(new ListItem("JavaScript", "JavaScript"));
    lstArrLanguage.Add(new ListItem("jQuery", "jQuery"));
    return lstArrLanguage;
}
//Code Ends

Now, one need to call this function using jQuery and ajax. To make ajax call using jQuery, jQuery provides a function called "$.ajax()" which can be used to perform asynchronous HTTP request. This function takes URL to call and some settings options. You can read more about "$.ajax()" function and it's setting options here.

Okay, now let's see the jQuery code to call above defined WebMethod using $.ajax().

//Code Starts
$(document).ready(function() {
  $.ajax({
     type: "POST",
     url: "Default.aspx/GetLanguageList",
     data: '',
     contentType: "application/json; charset=utf-8",
     dataType: "json",
     success: function(msg) {
       $("#ddlLanguage").empty().append($("").val("[-]").html("Please select"));
       $.each(msg.d, function() {
          $("#ddlLanguage").append($("").val(this['Value']).html(this['Text']));
       });
     },
     error: function() {
      alert("An error has occurred during processing your request.");
     }
  });
});
//Code Ends

As you can see from above jQuery code, I have set some settings of $.ajax() function. Let's see what each setting is.

• type: This setting defines the type of method call (Get or Post). The default is GET. You should use GET when you want to retrieve something from the server. Use Post, when you are posting something to the server or if your call involve some database manipulation then type should be Post.
• url: A string containing the URL to which the request is sent.
• data: This defines if your function is expecting any argument,then you can pass using this setting. Or if you want to send some data to server then you can use this option.
• contentType: When sending data to the server, use this content-type. Default is "application/x-www-form-urlencoded", which is fine for most cases. If you explicitly pass in a content-type to $.ajax() then it'll always be sent to the server (even if no data is sent). Data will always be transmitted to the server using UTF-8 charset; you must decode this appropriately on the server side.
• dataType: The type of data that you're expecting back from the server. It can be xml, json, script, or html.
• success: This event handler is called when ajax request gets completed successfully. In this event, you can process the data returned by the server. As you can see from the above code,  every item gets added in the dropdownlist.
• error: This event handler is called when some error occurred while processing ajax request. You can use this to catch the error and show some message to end user.

Feel free to contact me for any help related to jQuery, I will gladly help you.