Rob Bihun

Since I finally have a few minutes to write a blog post, I'm going to post on something I've been playing with quite a bit lately. AJAX(ified) content using ASP.NET Web Services and jQuery. If you haven't already, you will need to add jquery to the head section of your page.

After many hours; of trial and error, and of course some Google research - I found that the following code is a good starting point to make a successful asynchronous call.

For this example, let's say that we want to obtain a list of users when the page loads. For this example, I am going to assume you are using .NET 3.5 and taking advantage of the LINQ->SQL functionality. First we need to create the web service to pull the information from the database. Inside this web service, we will have a method to retrieve the users from the database and return them as a list. Take note that to call your method from a javascript file you must add "[System.Web.Script.Services.ScriptService]" before your class definition.

[WebMethod()]
public static List GetUsers(){
    //Create an instance of our data context
    DataContext db = new DataContext();
    return db.Users.ToList();
}

That should be it for now in our web service, this example is fairly straight forward and really demonstrates the power of LINQ. Now we need to call the method with jQuery in our aspx page.

$(function() {
    $.ajax({
        type: "POST",
        url: "UserService.asmx/GetUsers",
        contentType: "application/json; charset=utf-8",
        data: "{}",
        dataType: "json",
        success: function(data, stat) {
            var HTML = "
";
            for (var i in data.d) { 
                HTML += "
" + data.d[i].NameF + " " + data.d[i].NameL + "
";
            } 
            HTML += "
";
            $('#users').html(HTML);
        },
        error: function(requ, stat) {
            // handle a failed call here
        }
    });
});

The only things I changed here are on lines 9 - 14. These lines create a variable to hold a string which I will create an unordered list with all of the users from the database. Now before you yell at me for poor programming style, remember, this is an example, in the real world I would use a template to format the output of my users and not generate html in a string like shown here. On lines 10 - 12 you will notice I'm looping through the data and displaying the first name and last name of my users. This is because our web service formatted our data as a JSON object with a single variable "d" which contains the serialized data from our LINQ statement. You may also notice that I was able to use .NameF and .NameL to display the data - this happens to be the name of the columns in the database that holds the values (sweet right!?). Line 14 is fairly uninteresting, all it is doing is looking for a div tag with the id of "users" and setting the inner html to the data contained in the HTML variable. Which appears as follows.

    
Rob Bihun
    
John Doe
    
Another User

If you wanted to pass data to the web method and run a query based on that, all you would need to do is change the line in your javascript that says data: "{}", to say data: "{'param':'value'}", where 'param' is the name of the parameter in you web method and 'value' is the value you would like to pass. With this it is easy to extend this example to be able to display more info dynamically when you click on a users name! I find that using jQuery and .NET web services is typically quicker and easier (in many cases) than using AJAX.NET Update Panels.

AJAX, ASP.NET jquery, ajax, services