Methods Of Consuming WCF Services With JQuery

In this article you will get to know about some methods of consuming WCF services with JQuery.

In Brief

This article covers two different approaches of consuming WCF services in JQuery: one is webHttp , the other is enableWebScript. The former has a service side interface parameter definition, the latter has JQuery side standard parameter format. Both of them can be run on the client side browser on a remote machine.

Introduction

We have a WCF service app which intakes ItemID, and calls ArcGIS service to output its attributes and nearby geometry layers in PDF format, programmed with C#, ArcGIS Runtime SDK for .NET, and PdfSharp.dll.

To consume the service, the existing interface (Method 1 expressed below), was a website side HTML page for the client to call, which didn’t meet the needs for the client’s application, which queries our WCF service for the attribute-geometry PDF.

Instead of running a website JQuery, the client wanted the website JQuery (ExportPDF.html) to be launched in a local browser as well as the client application. So it came to Method 2, which was the first approach I followed and achieved, which allows the client to call the service with a URL.

Although the above Method 2 was fine for the needs, the client’s original requirement for a local JQuery still remained, so it came to Method 3.

Please see the following part for the details.

Sentiment:

Those methods have enableWebScript / webHttp / enableWebScript endpoint behavior, and JQuery / interface / JQuery parameter setting. Method 1 might have worked on local JQuery if I had more experience as when I was doing Method 3.

Method 1: Center HTML call of WCF services

Endpoint: enableWebScript
Type: POST
Parameter pattern: JQuery “data:{key:value}” format.

Client: Call the following website HTML in a client remote browser, a pdf of layer attributes and nearby geometries of multiple layers could be produced and automatically downloaded.

Interface:

NA

Class:

  1. namespace NS  
  2. {  
  3.     [ServiceContract(Namespace = "")]  
  4.     [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]  
  5.     public class Export  
  6.     {  
  7.         [WebInvoke(RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json, BodyStyle = WebMessageBodyStyle.WrappedRequest)]  
  8.         [OperationContract]  
  9.         public string CreatePDF(string id)   
  10.         {  
Web.config:
  1. <system.serviceModel>  
  2.     <bindings>  
  3.         <basicHttpBinding>  
  4.             <binding name="binding_Custom" maxReceivedMessageSize="2147483647" maxBufferPoolSize="2147483647" maxBufferSize="2147483647" sendTimeout="02:15:00" openTimeout="02:15:00" receiveTimeout="02:15:00" closeTimeout="02:15:00">  
  5.                 <readerQuotas maxArrayLength="2147483647" maxBytesPerRead="2147483647" maxStringContentLength="2147483647" maxDepth="2147483647" maxNameTableCharCount="2147483647" />  
  6.             </binding>  
  7.         </basicHttpBinding>  
  8.         <webHttpBinding>  
  9.             <binding name="AjaxBinding" closeTimeout="00:01:00" openTimeout="00:03:00" receiveTimeout="00:10:00" sendTimeout="00:03:00" allowCookies="false" bypassProxyOnLocal="false" hostNameComparisonMode="StrongWildcard" maxBufferSize="2147483647" maxBufferPoolSize="2147483647" maxReceivedMessageSize="2147483647" transferMode="Buffered" useDefaultWebProxy="true">  
  10.                 <readerQuotas maxDepth="2147483647" maxStringContentLength="2147483647" maxArrayLength="2147483647" maxBytesPerRead="2147483647" maxNameTableCharCount="2147483647" />  
  11.             </binding>  
  12.             <binding name="webHttpBindingWithJson" closeTimeout="00:30:00" openTimeout="00:30:00" receiveTimeout="00:30:00" sendTimeout="00:03:00" allowCookies="false" bypassProxyOnLocal="false" hostNameComparisonMode="StrongWildcard" maxBufferSize="2147483647" maxBufferPoolSize="2147483647" maxReceivedMessageSize="2147483647" transferMode="Buffered" useDefaultWebProxy="true">  
  13.                 <readerQuotas maxDepth="2147483647" maxStringContentLength="2147483647" maxArrayLength="2147483647" maxBytesPerRead="2147483647" maxNameTableCharCount="2147483647" />  
  14.             </binding>  
  15.         </webHttpBinding>  
  16.     </bindings>  
  17.     <services>  
  18.         <service name="NS.Export" service behaviorConfiguration="myServiceBehavior">  
  19.             <endpoint address="" behaviorConfiguration="myEndpointBehavior" binding="webHttpBinding" bindingConfiguration="AjaxBinding" contract="NS.Export" />  
  20.         </service>  
  21.     </services>  
  22.     <behaviors>  
  23.         <serviceBehaviors>  
  24.             <behavior name=" myServiceBehavior ">  
  25.                 <serviceMetadata httpGetEnabled="true" />  
  26.                 <serviceDebug includeExceptionDetailInFaults="true" />  
  27.             </behavior>  
  28.         </serviceBehaviors>  
  29.         <endpointBehaviors>  
  30.             <behavior name=" myEndpointBehavior ">  
  31.                 <enableWebScript />  
  32.             </behavior>  
  33.         </endpointBehaviors>  
  34.     </behaviors>  
  35.     <serviceHostingEnvironment aspNetCompatibilityEnabled="true" multipleSiteBindingsEnabled="true" />  
  36. </system.serviceModel>  
Website JQuery:

ExportPDF.html:
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3.   
  4. <head>  
  5.     <script src="js/jquery-2.1.0.js"></script>  
  6.     <script type="text/javascript">  
  7.         $(document).ready(function()  
  8.          {  
  9.             $('#btn').click(function()   
  10.             {  
  11.                 $.ajax(  
  12.                   {  
  13.                     type: "post"//GET or POST or PUT or DELETE verb   
  14.                     data: '{"ItemID":" ' + 2 + '"}'//Data sent to server  
  15.                     contentType: "text/json"// content type sent to server   
  16.                     async: false,  
  17.                     processdata: true//True or False  
  18.                     url: "http://192.168.1.213/SiteServices/Export.svc/CreatePDF",  
  19.                     success: function(msg)  
  20.                     {  
  21.                         if (msg.d)  
  22.                         {  
  23.                             window.open(msg.d);  
  24.                         }  
  25.                     },  
  26.                     error: function(XMLHttpRequest, textStatus, errorThrown)  
  27.                     {  
  28.                         alert("error");  
  29.                     }  
  30.                 });  
  31.             });  
  32.         });  
  33.     </script>  
  34. </head>  
  35.   
  36. <body>  
  37.     <input id="btn" type="button" value="Create PDF" />  
  38. </body>  
  39.   
  40. </html> 
Local JQuery: NA (could be achieved if doing more research)

Method 2: Client-side URL call of WCF service

Endpoint: webHttp
Type: POST
Parameter: [WebGet(UriTemplate = "CreatePDF/ItemID/{id}")]

Client: can work in a browser on a remote client machine, generating a XML string of a pdf URL, opening it in another browser tab, a file gets downloaded:

Interface:

  1. namespace NS  
  2. {  
  3.     [ServiceContract]  
  4.     public interface IExport  
  5.     {  
  6.         [OperationContract(Name = "CreatePDF")]  
  7.         [WebGet(UriTemplate = "CreatePDF/ItemID/{id}")]  
  8.         string CreatePDF(string id);  
  9.     }  
Class:
  1. namespace NS {  
  2. public class Export : IExport {  
  3. public string CreatePDF(string id) { 
Web.config:
  1. <system.serviceModel>  
  2.     <services>  
  3.         <service behaviorConfiguration="myServiceBehavior" name="NS.Export">  
  4.             <endpoint address="" behaviorConfiguration="myEndpointBehavior" binding="webHttpBinding" name="webHttpBinding" contract="NS.IExport" />  
  5.             <endpoint address="mex" binding="mexHttpBinding" name="mexHttpBinding" contract="IMetadataExchange" />  
  6.         </service>  
  7.     </services>  
  8.     <behaviors>  
  9.         <serviceBehaviors>  
  10.             <behavior name="myServiceBehavior">  
  11.                 <serviceMetadata httpGetEnabled="true" />  
  12.                 <serviceDebug includeExceptionDetailInFaults="true" />  
  13.             </behavior>  
  14.             <behavior>  
  15.                 <serviceMetadata httpGetEnabled="true" />  
  16.                 <serviceDebug includeExceptionDetailInFaults="true" />  
  17.             </behavior>  
  18.         </serviceBehaviors>  
  19.         <endpointBehaviors>  
  20.             <behavior name="myEndpointBehavior">  
  21.                 <webHttp />  
  22.             </behavior>  
  23.         </endpointBehaviors>  
  24.     </behaviors>  
  25.     <serviceHostingEnvironment multipleSiteBindingsEnabled="true" />  
  26. </system.serviceModel>  
Website JQuery: NA
Local JQuery: NA

Method 3: Local JQuery call of WCF services

Endpoint: enableWebScript
Type: POST
Parameter pattern: not requested of an interface definition, JQuery “data:{key:value}” format is used.

Client:

Interface:

  1. namespace NS  
  2. {  
  3.     [ServiceContract]  
  4.     public interface IExport  
  5.     {  
  6.         [OperationContract]  
  7.         [WebInvoke(Method = "POST", BodyStyle = WebMessageBodyStyle.WrappedRequest, ResponseFormat = WebMessageFormat.Json, RequestFormat = WebMessageFormat.Json)]  
  8.         string CreatePDF(string id);  
Class:
  1. namespace NS  
  2. {  
  3.     [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]  
  4.     public class Export: IExport  
  5.     {  
  6.             public string CreatePDF(string id) {  
Web.config:
  1. <system.serviceModel>  
  2.     <services>  
  3.         <service name="NS.Export" behaviorConfiguration="myServiceBehavior">  
  4.             <endpoint address="" behaviorConfiguration="myEndpointBehavior" binding="webHttpBinding" contract="NS.IExport" />  
  5.             <endpoint contract="IMetadataExchange" binding="mexHttpBinding" address="mex" />  
  6.         </service>  
  7.     </services>  
  8.     <behaviors>  
  9.         <serviceBehaviors>  
  10.             <behavior name="myServiceBehavior">  
  11.                 <serviceMetadata httpGetEnabled="true" />  
  12.                 <serviceDebug includeExceptionDetailInFaults="false" />  
  13.             </behavior>  
  14.         </serviceBehaviors>  
  15.         <endpointBehaviors>  
  16.             <behavior name="myEndpointBehavior">  
  17.                 <enableWebScript/>  
  18.             </behavior>  
  19.         </endpointBehaviors>  
  20.     </behaviors>  
  21.     <serviceHostingEnvironment multipleSiteBindingsEnabled="false" aspNetCompatibilityEnabled="true" />  
  22. </system.serviceModel>  
Website JQuery: Optional, only needed when website HTML call is required.

Local JQuery:

Note: Only worked in IE, instead of Chromed/FF.
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3.   
  4. <head>  
  5.     <script src="js/jquery-2.1.0.js"></script>  
  6.     <script type="text/javascript">  
  7.         $(document).ready(function() { //1  
  8.             $('#btn').click(function() { //2  
  9.                 $.ajax({ //3  
  10.                     cache: false,  
  11.                     type: "POST",  
  12.                     async: false,  
  13.                     url: "http://192.168.1.213/SiteServices/Export.svc/CreatePDF",  
  14.                     contentType: "text/json; charset=utf-8",  
  15.                     data: '{"WRWORKREQUEST":"' + 12345678901 + '"}',  
  16.                     dataType: "json",  
  17.                     success: function(msg)  
  18.                     {  
  19.                         window.open(msg.d);  
  20.                     },  
  21.                     error: function(XMLHttpRequest, textStatus, errorThrown)  
  22.                     {  
  23.                         alert(XMLHttpRequest.status);  
  24.                         alert(XMLHttpRequest.responseText);  
  25.                     }  
  26.                 }); //3  
  27.             }); //2  
  28.         }); //1  
  29.     </script>  
  30. </head>  
  31.   
  32. <body>  
  33.     <input id="btn" type="button" value="Create PDF" />  
  34. </body>  
  35.   
  36. </html> 
crossdomain.xml
  1. <?xml version="1.0"?>  
  2. <!-- http://www.osmf.org/crossdomain.xml -->  
  3. <!DOCTYPE cross-domain-policy SYSTEM "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd">  
  4. <cross-domain-policy>  
  5.     <allow-access-from domain="*" />  
  6.     <site-control permitted-cross-domain-policies="all" />  
  7. </cross-domain-policy>

Read more articles on WCF: