Parse JSON string over AJAX using C# and JQuery (or Javascript)

0

json

Adding AJAX functionality to your website reduces the load time on the webpage, AJAX (Asynchronus Javascript and XML) functionality is specifically called when a click event or load event is called, the most common example of ajax events are the notifications on mouse click (that loading sign is the time when the event is initiated and result is displayed).

Before proceeding with this tutorial, its expected that you have basic knowledge of sending ajax scripts via jquery.

Topics covered :-

  • What is JSON ?
  • Representing JSON
    • Representing single object in JSON
    • Representing multiple objects in JSON
  • Sending data to C# via AJAX
  • Parse JSON string in $.ajax() in JQuery (Convert JSON string into Objects)

What is JSON ?

JSON (Javascript Object Notation) is light weight, human readable data interchange format which the information is stored in an organised and logical manner. Its completely language independent and uses conventions that are familiar to C language family (C, C++, C#, Java, JavaScript, Perl, Python, and many others), this make JSON an ideal data interchange language.

json

 

Storing JSON data

Consider the following code
This creates a JSON object (anything representing within { …. } is an object and [{…},{….}…] is an array. Now inorder to access the information, we can refer to the name of the property, for example :-

Storing array of JSON data

Array means group of objects, storing more than one object is possible in JSON, consider the following example showing how to store more than one object in JSON.

Inorder to access, we need to get the index number of the array access their properties, the following example shows how to access any member of an array object.

Till now we have a fair idea about JSON, how to access the properties of objects in JSON. Now we will learn how to serialize and deserialize JSON objects and how to send JSON over AJAX and recieve a JSON object after processing over C# and parse this JSON object from string received and display.


Sending data to C# via AJAX

Now since we have a fair idea how to create JSON, but that’s for the later part, the important part is to send data via ajax and recieve a JSON string. Inorder to send data we would use $.ajax() in JQuery which is competitively easier and shorter as compared to using Javascript. ( Head over here where I wrote some differences between javascript and jquery and why we should use JQuery over Javascript¬†).

Head over this article if you aren’t familiar with serialization and deserialization of JSON files.

The code for sending data via ajax via jquery is given as follows :-

In this code we are sending “POST” request to page “getprofile.aspx” having some webmethod “getprofiledetails” with parameters “id” i.e. your method name should be

Till now we have learnt how JSON works and how to return JSON string when we have sent data via ajax.


Parse JSON string in $.ajax() in JQuery (Convert JSON string into Objects)

We have now recieved a JSON string which is kind a useless untill we convert the JSON string into objects. The following code explains how to convert a JSON “String” into JSON Object and then access the JSON string.

so finally we have covered the following topics :

  • We have learnt what is JSON, how to create a single JSON object or array of JSON objects.
  • How to pass data over ajax in JQuery.
  • How to return JSON object in C#
  • How to parse JSON object back in ajax and convert the JSON string into objects

 

Thats all for now, stuck at some point ? leave a comment below and share your views regarding this article.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CommentLuv badge