Post
Ask Question

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.     }  
  10. } 
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:


Similar Articles