Wcf / June 4, 2014

Wcf calling by javascript and ajax

<!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>
    <title>Complex Type AJAX Service Client Page</title>

    <script type="text/javascript">
    // <![CDATA[
    
    // This function creates an asynchronous call to the service
    function makeCall(){
        var n1 = document.getElementById("num1").value;
        var n2 = document.getElementById("num2").value;
        
        // If user filled out these fields, call the service
        if(n1 && n2){
        
            // Instantiate a service proxy
            var proxy = new ComplexTypeAjaxService.ICalculator();
        
            // Call DoMath operation on proxy
            proxy.DoMath(parseFloat(n1), parseFloat(n2), onSuccess, onFail, null);
        }
    }

    // This function is called when the result from the service call is received
    function onSuccess(mathResult){
        document.getElementById("sum").value = mathResult.sum;
        document.getElementById("difference").value = mathResult.difference;
        document.getElementById("product").value = mathResult.product;
        document.getElementById("quotient").value = mathResult.quotient;
    }

    // This function is called if the service call fails
    function onFail(){
        document.getElementById("sum").value = "Error";
        document.getElementById("difference").value = "Error";
        document.getElementById("product").value = "Error";
        document.getElementById("quotient").value = "Error";
    }
    
    // ]]>
    </script>

</head>
<body>
    <h1>
        Complex Type AJAX Service Client Page</h1>
    <p>
        First Number:
        <input type="text" id="num1" /></p>
    <p>
        Second Number:
        <input type="text" id="num2" /></p>
    <input id="btn" type="button" onclick="return makeCall();" value="Perform calculation" />
    <p>
        Sum:
        <input type="text" id="sum" /></p>
    <p>
        Difference:
        <input type="text" id="difference" /></p>
    <p>
        Product:
        <input type="text" id="product" /></p>
    <p>
        Quotient:
        <input type="text" id="quotient" /></p>
    <form id="mathForm" action="" runat="server">
    <asp:ScriptManager ID="ScriptManager" runat="server">
        <Services>
            <asp:ServiceReference Path="service.svc" />
        </Services>
    </asp:ScriptManager>
    </form>
</body>
</html>

here is the c# code of service

//  Copyright (c) Microsoft Corporation.  All Rights Reserved.

using System.Runtime.Serialization;
using System.ServiceModel;

namespace Microsoft.Ajax.Samples 
{
    // Define a service contract.
    [ServiceContract(Namespace = "ComplexTypeAjaxService")]
    public interface ICalculator
    {
        [OperationContract]
        MathResult DoMath(double n1, double n2);
    }

    public class CalculatorService : ICalculator
    {
        public MathResult DoMath(double n1, double n2)
        {
            MathResult mr = new MathResult();
            mr.sum = n1 + n2;
            mr.difference = n1 - n2;
            mr.product = n1 * n2;
            mr.quotient = n1 / n2;
            return mr;
        }
    }

    [DataContract]
    public class MathResult
    {
        [DataMember]
        public double sum;

        [DataMember]
        public double difference;

        [DataMember]
        public double product;

        [DataMember]
        public double quotient;
    }

}

Leave a Reply Cancel