![\"Ajax_Service\"](\"http:\/\/windows.emacslisp.com\/wp-content\/uploads\/2015\/12\/Ajax_Service.jpg\")
<\/a><\/p>\n1. define service data contract<\/p>\n
\r\n \/\/ Define a service contract.\r\n [ServiceContract(Namespace = \"ConfigFreeAjaxService\")]\r\n public interface ICalculator\r\n {\r\n [OperationContract]\r\n double Add(double n1, double n2);\r\n [OperationContract]\r\n double Subtract(double n1, double n2);\r\n [OperationContract]\r\n double Multiply(double n1, double n2);\r\n [OperationContract]\r\n double Divide(double n1, double n2);\r\n }\r\n\r\n public class CalculatorService : ICalculator\r\n {\r\n\r\n public double Add(double n1, double n2)\r\n {\r\n return n1 + n2;\r\n }\r\n\r\n public double Subtract(double n1, double n2)\r\n {\r\n return n1 - n2;\r\n }\r\n\r\n public double Multiply(double n1, double n2)\r\n {\r\n return n1 * n2;\r\n }\r\n\r\n public double Divide(double n1, double n2)\r\n {\r\n return n1 \/ n2;\r\n }\r\n }\r\n<\/pre>\n2. services.svc<\/p>\n
\r\n<%@ServiceHost \r\n language=\"c#\"\r\n Debug=\"true\"\r\n Service=\"Microsoft.Ajax.Samples.CalculatorService\"\r\n Factory=\"System.ServiceModel.Activation.WebScriptServiceHostFactory\" \r\n%>\r\n<\/pre>\n3. aspx file to call services hosting by IIS<\/p>\n
the following javascript to call WCF data contract class and call methods:<\/p>\n
\r\nvar proxy = new ConfigFreeAjaxService.ICalculator();\r\nproxy.Add(parseFloat(n1), parseFloat(n2), onSuccess, onFail, null); \r\n<\/pre>\nHere is all data.<\/p>\n
\r\n\r\n\r\n\r\n Config Free AJAX Service Client Page<\/title>\r\n\r\n <script type=\"text\/javascript\">\r\n \/\/ <![CDATA[\r\n \r\n \/\/ This function creates an asynchronous call to the service\r\n function makeCall(operation){\r\n var n1 = document.getElementById(\"num1\").value;\r\n var n2 = document.getElementById(\"num2\").value;\r\n\r\n \/\/ If user filled out these fields, call the service\r\n if(n1 && n2){\r\n \r\n \/\/ Instantiate a service proxy\r\n var proxy = new ConfigFreeAjaxService.ICalculator();\r\n\r\n \/\/ Call correct operation on proxy \r\n switch(operation){\r\n case \"Add\":\r\n proxy.Add(parseFloat(n1), parseFloat(n2), onSuccess, onFail, null); \r\n break;\r\n \r\n case \"Subtract\":\r\n proxy.Subtract(parseFloat(n1), parseFloat(n2), onSuccess, onFail, null); \r\n break;\r\n \r\n case \"Multiply\":\r\n proxy.Multiply(parseFloat(n1), parseFloat(n2), onSuccess, onFail, null); \r\n break;\r\n \r\n case \"Divide\":\r\n proxy.Divide(parseFloat(n1), parseFloat(n2), onSuccess, onFail, null); \r\n break;\r\n }\r\n }\r\n }\r\n\r\n \/\/ This function is called when the result from the service call is received\r\n function onSuccess(mathResult){\r\n document.getElementById(\"result\").value = mathResult;\r\n }\r\n\r\n \/\/ This function is called if the service call fails\r\n function onFail(){\r\n document.getElementById(\"result\").value = \"Error\";\r\n }\r\n \/\/ ]]>\r\n <\/script>\r\n<\/head>\r\n<body>\r\n <h1>\r\n Config Free AJAX Service Client Page<\/h1>\r\n <p>\r\n First Number:\r\n <input type=\"text\" id=\"num1\" \/><\/p>\r\n <p>\r\n Second Number:\r\n <input type=\"text\" id=\"num2\" \/><\/p>\r\n <input id=\"btnAdd\" type=\"button\" onclick=\"return makeCall('Add');\" value=\"Add\" \/>\r\n <input id=\"btnSubtract\" type=\"button\" onclick=\"return makeCall('Subtract');\" value=\"Subtract\" \/>\r\n <input id=\"btnMultiply\" type=\"button\" onclick=\"return makeCall('Multiply');\" value=\"Multiply\" \/>\r\n <input id=\"btnDivide\" type=\"button\" onclick=\"return makeCall('Divide');\" value=\"Divide\" \/>\r\n <p>\r\n Result:\r\n <input type=\"text\" id=\"result\" \/><\/p>\r\n <form id=\"mathForm\" action=\"\" runat=\"server\">\r\n <asp:ScriptManager ID=\"ScriptManager\" runat=\"server\">\r\n <Services>\r\n <asp:ServiceReference Path=\"service.svc\" \/>\r\n <\/Services>\r\n <\/asp:ScriptManager>\r\n <\/form>\r\n<\/body>\r\n<\/html>\r\n\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>This is will demo a simple example on how Ajax calling WCF Services. see what does it look like? 1. define service data contract \/\/ Define a service contract. [ServiceContract(Namespace = “ConfigFreeAjaxService”)] public interface ICalculator { [OperationContract] double Add(double n1, … <a href=\"http:\/\/windows.emacslisp.com\/index.php\/2015\/12\/15\/wcf-ajax-calling-wcf-services\/\">Continue reading <span class=\"meta-nav\">→<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"_links":{"self":[{"href":"http:\/\/windows.emacslisp.com\/index.php\/wp-json\/wp\/v2\/posts\/28"}],"collection":[{"href":"http:\/\/windows.emacslisp.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/windows.emacslisp.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/windows.emacslisp.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/windows.emacslisp.com\/index.php\/wp-json\/wp\/v2\/comments?post=28"}],"version-history":[{"count":5,"href":"http:\/\/windows.emacslisp.com\/index.php\/wp-json\/wp\/v2\/posts\/28\/revisions"}],"predecessor-version":[{"id":34,"href":"http:\/\/windows.emacslisp.com\/index.php\/wp-json\/wp\/v2\/posts\/28\/revisions\/34"}],"wp:attachment":[{"href":"http:\/\/windows.emacslisp.com\/index.php\/wp-json\/wp\/v2\/media?parent=28"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/windows.emacslisp.com\/index.php\/wp-json\/wp\/v2\/categories?post=28"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/windows.emacslisp.com\/index.php\/wp-json\/wp\/v2\/tags?post=28"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}