This is will demo a simple example on how Ajax calling WCF Services.
see what does it look like?
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> |