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.

Example:

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.

HTML:

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

 

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

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

            $('#<%= FillDropDownListButton.ClientID %>').click(function () {
                doAjaxCall('/Test.asmx/FillDropDownList');
                return false;
            });

 

JQuery function to do the AJAX call:

            function doAjaxCall(url, data) {
                $.ajax({
                    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 %>');
                myDropDownList.find('options').remove();
                var data = response.d;
                var doc = $('<div></div>');
                for (var i = 0; i < data.length; i++) {
                    doc.append($('<option></option>').
                            attr('value', data[i].CountryID).text(data[i].CountryName)
                            );
                }
                myDropDownList.append(doc.html());
                doc.remove();
            }

 The failure function:

            function ajaxFailed(xmlRequest) { alert(xmlRequest.status + ' nr ' + xmlRequest.statusText + 'nr' + xmlRequest.responseText); }

        }); 
    </script>

 

Now, as for the Test.asmx:

    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    [ScriptService]
    public class Test:System.Web.Services.WebService
    {
        [WebMethod]
        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.

© Copyright Duke Hall - Designed by Pexeto