Tuesday, 11 June 2013

JSON(Javascript Object Notation) Examples:

 

Introduction

This article i will explain what is Json and how we will perform operations on data using Json. 

 

JSON: JavaScript Object Notation.

JSON is syntax for storing and exchanging text information. Much like XML.

JSON is smaller than XML, and faster and easier to parse.

JSON is lightweight text-data interchange format

JSON is language independent

JSON is "self-describing" and easy to understand


JSON uses JavaScript syntax for describing data objects, but JSON is still language and platform independent. JSON parsers and JSON libraries exists for many different programming languages.

Examples:

Step 1:  Open visual studio

File->New->Web site-> select ASP.NET web Application.

After selecting new ASP.NET Application Go to solution explorer.

Right click on project in solution explorer -> Add New Item. You will get Add New Item popup window in that select Web Form and give a name to  page in Name Box then click on OK.  New web page will be added to you solution explorer.

                  Again right on Project –> Add New Item –> Select web service –> name it as JSON –> OK .  web service class add to your project.

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;

/// <summary>
/// Summary description for WebService
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
// [System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService {

    public WebService () {

        //Uncomment the following line if using designed components
        //InitializeComponent();
    }

    [WebMethod]
    public string HelloWorld() {
        return "Hello World";
    }
    
}

 

 

Note:  Uncomment

[System.Web.Script.Services.ScriptService]

 

Uncomment.bmp

 

Uncomment the above line. If That NameSpace did not exists add that above class name.

I will give 3 Examples with out using parameters , single parameters, and multiple parameters

 

1  With out using parameters.

In this example web method do not have parameters.  So no need to pass any parameters.

web methods must have.

This method called by JSON and display integer.

web method attribute at above web method, as like below.

[WebMethod]

web service class.

[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService {
    
    public WebService () {

        //Uncomment the following line if using designed components
        //InitializeComponent();
    }
    [WebMethod]
    public int DisplayNumber()
    {
        int x = 10;
        return x;
    }
  }

JSON.aspx page Syntax

To run Query add below script in header section of web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
  </script>

 

Or download Jquery file and add that file to your project.

 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Json.aspx.cs" Inherits="Json" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Json</title>
<%-- <script src="Jquery.js" type="text/javascript"></script>--%>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
  </script>
   
    <script type="text/jscript" >

        function Json() {
           
            var str = "srinu";

            $.ajax({
                url: 'WebService.asmx/DisplayNumber',
                data: '{}',
                dataType: 'json',
                type: 'POST',
                contentType: 'application/json; charset=utf-8',
                success: function (data) {
                    alert(data.d);
                },
                error: function (data) {

                    alert("Error");
                }
            });    // end $.ajax
        }
    
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input id="Button1" type="button" onclick="Json()" value="button" />
    
    </div>
    </form>
</body>
</html>

Note: 

Be careful with single quotes ‘ ’  and double quotes “  ”  They must be nested. if you made any mistakes web method will not be called by this function.

And try to use HTML controls.

In above Code Snippet

URL: It is Url of web method which is going to be calling.

Data:  It is pass parameters to web method. In this Example we are not passing any parameters so data part is empty.

Run This example you will  get following output:

 

OUT PUT:

10.

 

 

 

No comments:

Post a Comment