JQuery Ajax with Class Arrays
OK, I took some flack from a buddy of mine who is starting JQuery about my AJAX samples. AJAX with JQuery is all fun and games until you start passing complex data (apparently). So here is a quick demo of how to call a web method that returns a list of custom objects via JQuery.Ajax ($.ajax).
Starting off with the class we are going to return:
1: public class Customer
2: {
3: public int ID { get; set; }
4: public string Name { get; set; }
5: public string Company { get; set; }
6: public string StartDate { get; set; }
7: }
Now the web method that returns the data:
1: [System.Web.Script.Services.ScriptService]
2: public class CustomerService : System.Web.Services.WebService
3: {
4: [WebMethod]
5: public List<Customer> GetCustomers()
6: {
7: var list = new List<Customer>
8: {
9: new Customer { ID =1, Name = "Chris Brandsma", Company="Company 1", StartDate = new DateTime(2004, 3, 14).ToShortDateString()},
10: new Customer { ID =2, Name = "Jason Grundy", Company="Company 2", StartDate = new DateTime(2005, 1, 1).ToShortDateString()},
11: new Customer { ID =3, Name = "Scott Nickols", Company="Company 3", StartDate = new DateTime(2007, 7, 1).ToShortDateString()},
12: new Customer { ID =4, Name = "Tony Rasa", Company="Company 4", StartDate = new DateTime(2009, 6, 14).ToShortDateString()},
13: };
14: return list;
15: }
16: }
So far nothing really special here. Standard web method. I uncommented the ScriptService attribute on the class to allow for JSON style results, just like I always do. And I’m returning data.
Ok, on think you might have noticed: StartDate is a string – not a DateTime. This is because DateTime gets converted to “DATE(1231231231231)” when passed to the browser. Now I could parse that out using JavaScript and regular expressions, but I find it is much easier to just convert the date to a string that I want to look at in the first place. If you think I am wacked, read Dave Ward.
Next I am going to load the data into a table in the most raw way I know how. First the table:
1: <table id="CustomerTable">
2: <thead><tr>
3: <td>ID</td>
4: <td>Name</td>
5: <td>Company</td>
6: <td>Start Date</td>
7: </tr>
8: </thead>
9: <tbody>
10: </tbody>
11: </table>
That table just defines the bare structure of the table for us to load into. Now to call the web method and then load it into the table:
1: function GetCustomerList() {
2: $.ajax({
3: type: "POST",
4: url: "CustomerService.asmx/GetCustomers",
5: data: "{}",
6: contentType: "application/json; charset=utf-8",
7: dataType: "json",
8: success: function(data) { LoadCustomers(data.d); },
9: failure: function() { alert("Sorry, we were unable to find the customers."); }
10: });
11: }
The url is the relative url. So in this case my page is in the same directory as my web service (CustomerService.asmx). Then, in success, I take the data (data.d because Microsoft AJAX calls wrap everything in d for security purposes) and send the to LoadCustomers:
1: function LoadCustomers(data) {
2: var tbody = $("#CustomerTable > tbody").html("");
3:
4: for (var i in data) {
5: var customer = data[i];
6:
7: var rowText = "<tr><td>" + customer.ID + "</td><td>" + customer.Name + "</td><td>" + customer.Company + "</td><td>" + customer.StartDate + "</td></tr>";
8: $(rowText).appendTo(tbody);
9: }
10: }
When I was talking about raw JQuery, I was really talking about the LoadCustomers method. Here I am creating a table row as a string by hand, handing that to JQuery to load, the appending it to the table’s tbody.
Finally we call the method when the page loads:
1: $(document).ready(function() {
2: GetCustomerList();
3: });
Now complete, my table (as defined above) ends up looking like this:
1: <table id="CustomerTable">
2: <thead><tr>
3: <td>ID</td>
4: <td>Name</td>
5: <td>Company</td>
6: <td>Start Date</td>
7: </tr>
8: </thead>
9: <tbody>
10: <tr><td>1</td><td>Chris Brandsma</td><td>Company 1</td><td>3/14/2004</td></tr>
11: <tr><td>2</td><td>Jason Grundy</td><td>Company 2</td><td>1/1/2005</td></tr>
12: <tr><td>3</td><td>Scott Nickols</td><td>Company 3</td><td>7/1/2007</td></tr>
13: <tr><td>4</td><td>Tony Rasa</td><td>Company 4</td><td>6/14/2009</td></tr>
14: </tbody>
15: </table>
Note: I reformatted the html to look nice. Otherwise, everything between the tbody tags would have been in one long string.
You mentioned Dave Ward, but have you seen Rick Strahl’s JSON2 script and blog post, http://www.west-wind.com/weblog/posts/729630.aspx that adds the methods parseWithDate and dateStringToDate. It is a better solution to the MS AJAX date issue. Also, you will run into a similar problem if you use the TimeSpan struct in MS AJAX. It also has a special serialization format.
Thanks for the post Chris. Very straight forward.
Nice post. Just wondering, would jQuery perform better if in the LoadCustomers function’s for loop, the html string each time was concatenated to a function-level string, then the .append(html) could be called after the iteration is complete?
A good site to look at is QuicksMode.com for JavaScript performance.
You want to be careful how you do things, if you strings get to large you can also have performance issues.
But the general advice I’ve seen is similar to what you are talking about. Create one string and pass that to the append function once.
The more specific tip I’ve seen tho, if you have a lot of text to work with, is to put the text into an array then join the array together later.
http://www.quirksmode.org/dom/innerhtml.html
An alternative to Lightbox and its various clones, with the sole purpose of displaying images: One or more thumbnails point at the full resolution image, and instead of displaying that image on a new page, its displayed, above an overlay, on the current page.
This is an awesome article..But I have a query.Instead of Appending the result with the existing result set is there any way to bind the latest resultset .
function LoadCustomers(data) {
//var tbody = $(“#grdComments”).html(“”);
for (var i in data) {
var customer = data[i];
$(“#grdComments”).append(“” + customer.Comment + “”);
//If I use the above code the existing result set is appended with the new one on evry button click. I want to remove the existing resultset and reassign with the fresh resultset which comes from the Webservice
}
}
Please help me..Thanks a lot in advance
_pep
Thank yo0u!@!!!