Effectively you get most of the functionality you also see with ASP.NET AJAX for service callbacks without the Microsoft client libraries requirement.
Service Markup:
<%@ ServiceHost Language="C#" Debug="true" Service="Westwind.WebToolkit.Ajax.WcfServiceCallbacks" CodeBehind="WcfServiceCallbacks.svc.cs" Factory="System.ServiceModel.Activation.WebScriptServiceHostFactory" %>
Using the WebScriptServiceHostFactory is the quickest way to set up a Web Service for ASP.NET AJAX compatibility. This service takes JSON messages as input and output and use POST data for input messages.
Service Implementation:
[ServiceContract] public class WcfServiceCallbacks { [OperationContract] public string HelloWorld(string name) { return "Hello World from Wcf, " + name + ". Time is: " + DateTime.Now.ToString(); } [OperationContract] public int AddNumbers(int num1, int num2) { return num1 + num2; } }
Hit the service page and make sure the service responds with the default service page.
<ww:AjaxMethodCallback ID="Proxy" runat="server" Timeout="4000" ServiceType="Wcf" ServerUrl="WcfServiceCallbacks.svc" />
Next in the code behind specify the .NET type of the implementing service class:
protected override void OnInit(EventArgs e) { base.OnInit(e); this.Proxy.ClientProxyTargetType = typeof(WcfServiceCallbacks); }
This ensures that proxy methods that map the service contract are generated.
function SayHello() { // Id is mangled by ASP.NET so use serverVars created with ScriptVariables // component which generates a client object with simple client Id names var name = $("#" + serverVars.txtNameId).val(); Proxy.HelloWorld(name, // function called with the method result function(result) { $("#divHelloMessage") .text(result) .stop() .fadeIn("slow"); setTimeout(function() { $("#divHelloMessage").fadeOut("slow"); }, 8000); }, // error handler onError); }
Proxy in this case is a generated JavaScript class that has the same name as the ID you specified in the AjaxMethodCallback control. Every service method on the service is exposed through this proxy with each of the parameters as input parameters followed by Callback and Error handlers that are called on success and failed requests. The Callback receives the result value from the server as a value (value, array or object).
Here's the code for the AddNumbers callback:
function AddNumbers() { // pick up inputs and turn into numeric values that hte server // AddNumbers expects var num1 = $("#" + serverVars.txtNum1Id).val() * 1; var num2 = $("#" + serverVars.txtNum2Id).val() * 1; // Use the generated Proxy to call the server Proxy.AddNumbers(num1, num2, function(result) { $("#" + serverVars.lblAddResultId).text(result); }, onError); }
Notice that here the values passed are numeric. The server expects a numeric value and that's what the client has to send. The result is in result as a number as well so no conversion is required. Any complex return values are returned as well.
Our preference the technology to use for calling services are (in this order):
Using the West Wind handler/page callbacks provides a little more flexibility as all resources and related dependencies are included. You also get automatic serialization of DataTable, DataSet and DataRows, ISO style date formatting for optimal JSON parsing on the client and support for anonymous types and dictionaries.