Calling Web Method Which Takes Object as an Input Parameter Using AJAX & JavaScript

Here you will see how to call a Web Method which takes an object as an input parameter Using AJAX, The object is created using JavaScript and passed as an input parameter.

Step 1: Create a class with a few properties, such as:

public class Customers
    {
        private int _intCustomerID;
        private string _strFirstName;
        private string _strAddress;
        private string _strDesignation;
        public int CustomerID{
            get{
                return _intCustomerID;
            }
            set{
                _intCustomerID = value;
            }
        }
        public string FirstName{
            get{
                return _strFirstName;
            }
            set{
                _strFirstName = value;
            }
        }
        public string Address{
            get{
                return _strAddress;
            }
            set{
                _strAddress = value;
            }
        }
        public string Designation{
            get{
                return _strDesignation;
            }
            set{
                _strDesignation = value;
            }
        }

Step 2: Add a web service and the ScriptService Attribute to the service.

Step 3: Include a web method which takes an object as an input parameter as in:

[WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
     [System.Web.Script.Services.ScriptService]
    public class Customer : System.Web.Services.WebService
    {
        [WebMethod]
        public string TestMethod(Customers cust)
        {
            return "Hi " + cust.FirstName + " you are living in " + cust.Address + " and your desc is " + cust.Designation;
        }
    }

Step 4: Create an aspx page and include a ScriptManager.

Step 5: Add a Services tag and asp:ServiceReference and in the path give the webservice url:

        <asp:ScriptManager ID="ScriptManager1" runat="server">
            <Services>
                <asp:ServiceReference Path="~/Customer.asmx" />
            </Services>
        </asp:ScriptManager>

Step 6: Create a JavaScript function to call the webmethod.

Step 7: Create a JavaScript object manually which is similar to a C# class:

        var cust = new Object();
        cust.CustomerID = 1;
        cust.FirstName = "Shyam";
        cust.Address = "Live in India";
        cust.Designation = "Software Developer";


Step 8: webmethod with the delegate with the following parameters:

• First input parameters
• Second function to be bind the values
• Third function handles error
• Last function handles timeout

function callwebservicewithobj()
      {
            var cust = new Object();
        cust.CustomerID = 1;
        cust.FirstName = "Shyam";
        cust.Address = "Live in India";
        cust.Designation = "Software Developer";

        // CALLINGWEBMETHODUSINGAJAX is name space of webservice
        // Customer = webservices name.
             CALLINGWEBMETHODUSINGAJAX.Customer.TestMethod(cust, BindData, ErrorHandler, TimeOutHandler);
        }

Step 9: Create a JavaScript bind function

function BindData (varResult)
        {
            alert(varResult);
        }

Step 10: Create a JavaScript ErrorHandler function:

function ErrorHandler(result)
        {
            var msg = result.get_exceptionType() + "\r\n";
            msg += result.get_message() + "\r\n";
            msg += result.get_stackTrace();
            alert(msg);
        }

Step 11: Create JavaScript TimeOutHandler function:

        function TimeOutHandler(result)
        {
            alert("Timeout :" + result);
        }

Step 12: Create a link in aspx which calls the js function:

<a href="javascript:callwebservicewithobj();">Call webservices with input parameters</a>