Ajax Calls from an ASP Web Service

1354498027_modem2

As a front end developer, I love working side by side with good back end developers. Web services are a great way to seamlessly transition from the back end role to the front end role. My teammate can setup the service along with any filtering rules I’ll need, and I’m free to grab the data and use HTML, CSS and Javascript to format the page and display my results without having to do much wrangling to show the data I need for my interface.

Step 1 – Get the Web Service

The first step is always the same, we need to retrieve our data from the webservice and get it ready for posting on our page. I wrap this is a function so I can call as needed, you could also pass the data modifiers into the function as well, here I just call my event type and event count directly in the ajax header.

 

Step 2 Method 1 – Append data in a single line

In this method I use a key value loop to cycle through the data I need and place it on the page using an append. In this case I’m looping through a designated number of events and showing the data in rows. Defining the variables first allows me to format as needed and to keep my append semantic and readable. The append in this example is pretty long, and I might break it up into separate statements to make it easier to work with in the future.

 

Step 2 Method 2, Switch Cases

In this example I created a switch with a series of cases to loop through my data and embed each piece of information individually. Note how easy it is to plant a piece of data in multiple definitions or use nested if else statements to manage data that needs special treatment.

 

Step 2 Method 3 – Adding to a jQuery Datatable

jQuery datatables are a great way to show many types of data, we can do just like our append statements, but in this case we use fnAddData to append the rows into the table.

 

 

This entry was posted in Snippets and Demos.