Published on: 23 October, 2013

How to post complex JSON data to web service using JQuery in ASP.Net C#?

Tumblr Digg Google Plus

In my previous tutorial, I have shown you on how to post basic json data to webservice in Jquery using generic handler in C#. You can check it out previous article by clicking this link "Post json data to webservice in C#"

In this new tutorial, I will give you another more complex example by passing a combination of object properties. We are still going to use the sample data from above article including the webservice code and JQuery functions with a bit of modification.

<table>
	<tr>
    	<td>ID</td>
        <td><input type="text" id="txtID" value="ID"/></td>
    </tr>
	<tr>
    	<td>Name</td>
        <td><input type="text" id="txtName" value="My Name"/></td>
    </tr>
    <tr>
    	<td>Email</td>
        <td><input type="text" id="txtEmail" value="sample@example.com"/></td>
    </tr>
    <tr>
    	<td></td>
        <td><input type="button" id="btnSubmit1" value="Test 1"/> <input type="button" id="btnSubmit2" value="Test 2"/></td>
    </tr>
</table>
<p>The result after you submitted the data will appear below. </p>
<div id="result"></div>

We modify the webservice code and create two updated functions that will accept combination of single property data and object properties. Remember if we want to allow webservice to be called from javascript we have to add ScripService as shown below example.

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

/// <summary>
/// Summary description for TestWebService
/// </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 TestWebService : System.Web.Services.WebService {

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

    [WebMethod]
    public string GetPersonData(int id, Person objPerson) {
        return "You have submitted data with ID: " + id.ToString() + " Name: " + objPerson.Name + " and Email: " +  objPerson.Email;
    }

    [WebMethod]
    public Employee GetEmployee(int id, Person objPerson) {
        Employee objEmployee = new Employee();
        objEmployee.ID = id;
        objEmployee.Name = objPerson.Name;
        objEmployee.Email = objPerson.Email;
        return objEmployee;
    }
    
    public class Person{
        public string Name {get;set;}
        public string Email {get;set;}
    }

    public class Employee : Person {
        public int ID { get; set; }
    }
}

We create the javascript function that will bind two buttons. The first button will return a string data directly. While the second button will return an object property of Employee. If you see carefully for the second button action, after the responseData.d, it will include the properties name of the Employee class.

Comments

There are no comments available.

Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.