WCF – Ajax Calling WCF Services

Posted on December 15, 2015 by WUDI

This is will demo a simple example on how Ajax calling WCF Services.

see what does it look like?

Ajax_Service

1. define service data contract

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

    // Define a service contract.
    [ServiceContract(Namespace = "ConfigFreeAjaxService")]
    public interface ICalculator
    {
        [OperationContract]
        double Add(double n1, double n2);
        [OperationContract]
        double Subtract(double n1, double n2);
        [OperationContract]
        double Multiply(double n1, double n2);
        [OperationContract]
        double Divide(double n1, double n2);
    }
 
    public class CalculatorService : ICalculator
    {
 
        public double Add(double n1, double n2)
        {
            return n1 + n2;
        }
 
        public double Subtract(double n1, double n2)
        {
            return n1 - n2;
        }
 
        public double Multiply(double n1, double n2)
        {
            return n1 * n2;
        }
 
        public double Divide(double n1, double n2)
        {
            return n1 / n2;
        }
    }

2. services.svc

1
2
3
4
5
6

<%@ServiceHost 
    language="c#"
    Debug="true"
    Service="Microsoft.Ajax.Samples.CalculatorService"
    Factory="System.ServiceModel.Activation.WebScriptServiceHostFactory" 
%>

3. aspx file to call services hosting by IIS

the following javascript to call WCF data contract class and call methods:

1
2

var proxy = new  ConfigFreeAjaxService.ICalculator();
proxy.Add(parseFloat(n1), parseFloat(n2), onSuccess, onFail, null);

Here is all data.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

<!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>Config Free AJAX Service Client Page</title>
 
    <script type="text/javascript">
    // <![CDATA[
 
    // This function creates an asynchronous call to the service
    function makeCall(operation){
        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  ConfigFreeAjaxService.ICalculator();
 
            // Call correct operation on proxy       
            switch(operation){
                case "Add":
                    proxy.Add(parseFloat(n1), parseFloat(n2), onSuccess, onFail, null);            
                break;
 
                case "Subtract":
                    proxy.Subtract(parseFloat(n1), parseFloat(n2), onSuccess, onFail, null);                        
                break;
 
                case "Multiply":
                    proxy.Multiply(parseFloat(n1), parseFloat(n2), onSuccess, onFail, null);            
                break;
 
                case "Divide":
                    proxy.Divide(parseFloat(n1), parseFloat(n2), onSuccess, onFail, null);            
                break;
            }
        }
    }
 
    // This function is called when the result from the service call is received
    function onSuccess(mathResult){
        document.getElementById("result").value = mathResult;
    }
 
    // This function is called if the service call fails
    function onFail(){
        document.getElementById("result").value = "Error";
    }
    // ]]>
    </script>
</head>
<body>
    <h1>
        Config Free 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="btnAdd" type="button" onclick="return makeCall('Add');" value="Add" />
    <input id="btnSubtract" type="button" onclick="return makeCall('Subtract');" value="Subtract" />
    <input id="btnMultiply" type="button" onclick="return makeCall('Multiply');" value="Multiply" />
    <input id="btnDivide" type="button" onclick="return makeCall('Divide');" value="Divide" />
    <p>
        Result:
        <input type="text" id="result" /></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>
This entry was posted in WCF. Bookmark the permalink.