Send and Receive JSON Objects from Web Services using jQuery and Ajax in Asp.Net

In this tutorial i am going to explain send and receive JSON objects from the web services methods with using jQuery and ajax in asp.net with use of C sharp and vb.net.

For send / receive JSON objects from the web services methods in jQuery we should create some function or method which holds the values of our object in asp.net with using c# and vb.net.

To send and receive JSON objects from the web services methods with using jQuery and ajax in asp.net you need to open your .aspx page and write aspx code which is given below.

HTML Source Code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
 
<!DOCTYPE html>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>send and receive JSON objects from the web services</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
    $(function () {
        $('#btn_Send').click(function () {
            var product = { Name: 'iPhone 7', Price: 74000 }
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                data: "{product:" + JSON.stringify(product) + "}",
                url: "JSONexample.aspx/GetDemoData",
                dataType: "json",
                success: function (data) {
                    alert('Name: ' + data.d.Name + "; Price: " + data.d.Price)
                },
                error: function (result) {
                    alert("Error...! Please Try Again..!");
                }
            });
        })
    });
</script>
    <style type="text/css">
        #btn_Send {
            height: 63px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <br />
            <input type="button" id="btn_Send" value="Send and Receive JSON Object" style="background-color: #3366FF; color: #FFFFFF" />
        </div>
    </form>
</body>
</html>

C# Source Code:

using System;
using System.Collections.Generic;
using System;
using System.Web.Services;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
 
public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
 
    }
    [WebMethod]
    public static Product GetData(Product product)
    {
        return product;
    }
    public class Product
    {
        public string Product_Name { get; set; }
        public int Product_Price { get; set; }
    }
}

Vb.Net Source Code:

Imports System.Web.Services
Partial Class Default2
    Inherits System.Web.UI.Page
 
    Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
 
    End Sub
    <WebMethod()> _
    Public Shared Function GetData(ByVal product As Product) As Product
        Return product
    End Function
 
    Public Class Product
        Public Property Name() As String
            Get
                Return m_Name
            End Get
            Set(ByVal value As String)
                m_Name = Value
            End Set
        End Property
        Private m_Name As String
        Public Property Price() As Integer
            Get
                Return m_Price
            End Get
            Set(ByVal value As Integer)
                m_Price = Value
            End Set
        End Property
        Private m_Price As Integer
    End Class
End Class

DEMO:

About Nikunj Satasiya

I am a passionate programmer and a Software Engineer who love developing applications in Microsoft Technologies, blogging and other related technologies like Asp.Net, VB.Net, SEO, Sql Server,My SQL,Asp.Net-MVC, LINQ, C#.Net, Stored Procedures, Ajax, JavaScript, JQuery, xml etc.

Project Plazza