Question

On my website, I’m using webservice to retrieve the data from (SQL Server) database. To improve performance, I like to use jQuery to retrieve the data from the webservice instead of using C#. The data values should be assigned to the drop-down list which I’m using in the aspx. Can anybody tell me how to do this? I’m a newbie to jQuery.

Answer 1

You will have to use C# or Linq to get the data from the database. With jQuery and Javascript you can just avoid making a page reload when you change the dropdown contents.

Let’s say you have an ASP page that get’s the data from the database and displays them as a JSON string. The output should look like this:

{key1:"value1", key2:"value2"}

You can then make an ajax request to that page (from any page on your site) using jQuery:

$.ajax({
  url: 'http://url.to.the.database.page',
  type: 'get',
  success: function(json_data){
     var dd = $('#dropdown_id'); // select the dropdown you want to change
     eval('var data = json_data;'); // you can use a parsing function here instead of eval.
     var options = "";
     for( k in data )
       options += "<option value='"+k+"'>"+data[k]+"</option>";
     dd.empty().append(options);
  }
});

If you go with JSON you may as well use jQuery’s getJSON function. If you go with another data format, you’ll have to do your own parsing.