Posts Tagged ‘jquery’

Alright, this time I decided to talk a little bit about JSON and AJAX calls. Think about a scenario where you do not want the page to post back and you want  to get some Data from Database would work but how there are lot of times we mess our head finding this out and yet no solution…chill, following will take you through on how to load data Asynchronously or Synchronously :

  • First things first, lets create a Simple ASP.NET Application and remove everything except the new Scripts folder that gets created in new template of Visual Studio 2010.
  • Make sure the jQuery files are there
  • Add a new asp.net page and add jQuery references to the page as below:
  • jquery_reference

    jquery_reference

  • Add a Method in your Code behind to call the Business Logic in JSON Format, something like below, for this example I am adding it in the same aspx page’s code behind:
[WebMethod]
    [ScriptMethod(UseHttpGet = false, ResponseFormat = ResponseFormat.Json)]
    public static string GetJSONData()
    {
        //Call your Business Logic
        BusinessDataClass objBDC = new BusinessDataClass();
        //Call the Method that returns Data in JSON string
        return objBDC.GetDataInJSON();
    }
  • Now the main part comes into picture, which is calling the above mentioned method using jQuery and Ajax, come to your aspx page and under the head section code the following script, right below jquery references:
 <script type="text/javascript">
       $(function getData() {
           $.ajax({
               type: "POST",
               url: "GetData.aspx/GetJSONData",               
               contentType: "application/json; charset=utf-8",
               dataType: "json",  
               success: function (data) {
                   alert(data.d);
               }
           });
       });
    </script>

The main this to see here is the attributes that we are using while making an Ajax call under  the getData function:

  1. url :A string containing the URL to which the request is sent. In our example we are calling the method “GetJSONData” from the page “GetData.aspx”, following is how the GetJSONData method looks like:
 [WebMethod]
    [ScriptMethod(UseHttpGet = false, ResponseFormat = ResponseFormat.Json)]
    public static string GetJSONData()
    {
        //Call your Business Logic
        BusinessDataClass objBDC = new BusinessDataClass();

        //Call the Method that returns Data in JSON string
        return objBDC.GetDataInJSON();
    }
  1. type, Default: ‘GET’ The type of request to make (“POST” or “GET”), default is “GET”. Note: Other HTTP request methods, such as PUT and DELETE, can also be used here, but they are not supported by all browsers.
  2. dataType, Default: Intelligent Guess (xml, json, script, or html). The type of data that you’re expecting back from the server.

Run your app and you will see the Ajax request being server , to see more about it open the Developer toolbar and start capturing the network and you will see the type of data being sent across. Here’s a quick screen shot:

Developer Toolbar Capture

Developer Toolbar Capture

Hope the post would help you learn little about jSON and Ajax requests.

Advertisements