How to use Json objects and Jqeury in Asp.net? Part -2

This is continuation of the tutorial how to use JSON objects and JQuery in Asp.net part -1 which explains how to retrieve the data and return it back to the presentation layer from data access layer and then from business layer. Now in this part i will explain aspx page where we will prepare a basic structure of the page and also learn how to use jquery in it.

- Download latest version of Jquery from Jquery.com or you can use Google API link which will be more reliable.
Lets add a aspx page in our Asp.net web project named jqAirlines.aspx
and add the javaScript link to jquery and format your aspx page. I have done mine as below:

Code snippet - How to use Json objects and Jqeury in Asp.net? Part -2 (jqAirlines.aspx) on Snipplr

Now lets analyse this code:

I have div id="pageBody" that lies inside the form. and I have 3 more divs namely "dvLoading" where loading image is displayed, "tableArea" where main grid loads but this table has structure only and finally "btnArea" where my buttons will be located, now i only have Display button.

Now we are done with our aspx page now we need main files where we do our code rendering. Lets add a javacript file called jqAirlines.js , You might have noticed link to jqAirlines.js in the aspx page. Here we write all our JQuery code from where we will render the aspx page.

Lets see the JQuery code from the link provided below and i will try to explain how this javascript functions:

Code snippet - HOW TO USE JSON OBJECTS AND JQEURY IN ASP.NET? PART -2 (jqAirlines.js code)

Now in the above js code $(function(){ is the main jquery function that is called first when page loads and that does all the job.

Now lets look step by step to this function

$("#dvLoading").hide(); --> hides the div named dvLoading

$("#airTable").hide(); --> hide the table first

Then when display is clicked

$("#cmdDisplay").click(function(){

It calls the function

list(0);

Now Lets go to the function list(startRecord, pageSize)

if the page size is not given then make it 10

Now main function $.getJSON gets the json data back after rendering the handler jqAirlines.ashx (or web service)

Analyzing the $.getJSON function it calls jqairlines.ashx and sends the parameters called action, pagesize and startRecord and gets json data "data" back which then passed to function ShowAirlineList(data) for further processing.

Now lets see the function showAirlineList(data)

This function starts assigning the value of data in an array called currentAirList

then hide and empty the table if it is already filled. Then Append the header row in #airTable thead .

Now from the data we loop through a collection inside it called Data that has been returned by jqAirlines.ashx page and append the data to tbody other seem pretty straight forward where page items are shown or hidden.

Now We have completed our .js file as well but the main portion where it calls the business layer function and converts back to json object and returns back for this .js to render is handler jqAirlines.ashx Further explanation of this handler is done in How to use Json objects and Jqeury in Asp.net? Part 3 of this Tutorial.

Related Posts by Categories