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">
  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>
  36. <body>
  37. <input id="btn" type="button" value="Create PDF" />
  38. </body>
  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">
  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>
  32. <body>
  33. <input id="btn" type="button" value="Create PDF" />
  34. </body>
  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: