jQuery to Web Service AJAX

jQuery to Web Service AJAX

This is a bit wacky, but in the end it all makes perfect sense.

jQuery has two functions you could use: get and put, but the function you’ll end up using is.ajax.


Let’s say I want to use JQuery to fill a Drop Down list on my ASP.Net page.

Here’s the basics of how that flows:

On whatever event (in this example it is a button click) you will wire up a JQuery function to fire off an AJAX call.

On the web, most examples call a PHP page, and that’s not what we want to do.


    <form id="form1" runat="server">
        <asp:DropDownList ID="MyDropDownList" runat="server">
        <asp:Button ID="FillDropDownListButton" runat="server" Text="Fill DropDownList" />


JQuery function to tap into the click event for the button:

    <script type="text/javascript">
        $(function () {

            $('#<%= FillDropDownListButton.ClientID %>').click(function () {
                return false;


JQuery function to do the AJAX call:

            function doAjaxCall(url, data) {
                    type: 'POST',
                    url: 'Test.asmx/FillDropDownList',
                    data: "{}",
                    contentType: 'application/json; charset=utf-8',
                    dataType: 'json',
                    success: successHandler,
                    error: ajaxFailed

You can see that this is using the HTTP POST protocol, and thus, the function being called must either be an actual web page .aspx or a user control .asmx/.svc or it could be the rarely seen .ashx (not covered here).  It cannot be a library .cs because that doesn’t communicate via HTTP protocol.

Also note the data object being passed is an undefined empty object. 

The url has the page/function.  That function must be a web method.

The success function:

            function successHandler(response) {
                var myDropDownList = $('#<%= MyDropDownList.ClientID %>');
                var data = response.d;
                var doc = $('<div></div>');
                for (var i = 0; i < data.length; i++) {
                            attr('value', data[i].CountryID).text(data[i].CountryName)

 The failure function:

            function ajaxFailed(xmlRequest) { alert(xmlRequest.status + ' \n\r ' + xmlRequest.statusText + '\n\r' + xmlRequest.responseText); }



Now, as for the Test.asmx:

    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    public class Test:System.Web.Services.WebService
        public Collection<Location> FillDropDownList()
            var locations = new Collection<Location> 
                    new Location {CountryID = 0, CountryName = "Please Select"}, 
                    new Location {CountryID = 1, CountryName = "Country1"}, 
                    new Location {CountryID = 2, CountryName = "Country2"}, 
                    new Location {CountryID = 3, CountryName = "Country3"}, 
                    new Location {CountryID = 4, CountryName = "Country4"}, 
                    new Location {CountryID = 5, CountryName = "Country5"} 
            return locations;
        public class Location
            public int CountryID { get; set; }
            public string CountryName { get; set; }


So, while I’m returning a collection from the code, it could also make a call to SQL or the WebCache, etc.


One comment on “jQuery to Web Service AJAX

  1. Pingback: JQuery Addons: dataTables (a JQuery GridView) | Mike Duke Hall's .Net blog

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 )

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s