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.

http://191.168.1.213/SiteServices/Export.svc/ExportPDF.html?=12345

Interface:

NA

Class:

namespace NS
{
[ServiceContract(Namespace = "")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class Export
{
[WebInvoke(RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json, BodyStyle = WebMessageBodyStyle.WrappedRequest)]
[OperationContract]
public string CreatePDF(string id)
{

Web.config:

<system.serviceModel>
<bindings>
<basicHttpBinding>
<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">
<readerQuotas maxArrayLength="2147483647" maxBytesPerRead="2147483647" maxStringContentLength="2147483647" maxDepth="2147483647" maxNameTableCharCount="2147483647" />
</binding>
</basicHttpBinding>
<webHttpBinding>
<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">
<readerQuotas maxDepth="2147483647" maxStringContentLength="2147483647" maxArrayLength="2147483647" maxBytesPerRead="2147483647" maxNameTableCharCount="2147483647" />
</binding>
<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">
<readerQuotas maxDepth="2147483647" maxStringContentLength="2147483647" maxArrayLength="2147483647" maxBytesPerRead="2147483647" maxNameTableCharCount="2147483647" />
</binding>
</webHttpBinding>
</bindings>
<services>
<service name="NS.Export" service behaviorConfiguration="myServiceBehavior">
<endpoint address="" behaviorConfiguration="myEndpointBehavior" binding="webHttpBinding" bindingConfiguration="AjaxBinding" contract="NS.Export" />
</service>
</services>
<behaviors>
<serviceBehaviors>
<behavior name=" myServiceBehavior ">
<serviceMetadata httpGetEnabled="true" />
<serviceDebug includeExceptionDetailInFaults="true" />
</behavior>
</serviceBehaviors>
<endpointBehaviors>
<behavior name=" myEndpointBehavior ">
<enableWebScript />
</behavior>
</endpointBehaviors>
</behaviors>
<serviceHostingEnvironment aspNetCompatibilityEnabled="true" multipleSiteBindingsEnabled="true" />
</system.serviceModel>

Website JQuery:

ExportPDF.html:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="js/jquery-2.1.0.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#btn').click(function()
{
$.ajax(
{
type: "post", //GET or POST or PUT or DELETE verb
data: '{"ItemID":" ' + 2 + '"}', //Data sent to server
contentType: "text/json", // content type sent to server
async: false,
processdata: true, //True or False
url: "http://192.168.1.213/SiteServices/Export.svc/CreatePDF",
success: function(msg)
{
if (msg.d)
{
window.open(msg.d);
}
},
error: function(XMLHttpRequest, textStatus, errorThrown)
{
alert("error");
}
});
});
});
</script>
</head>
<body>
<input id="btn" type="button" value="Create PDF" />
</body>
</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:

http://192.168.1.213/SiteServices/Export.svc/CreatePDF/ItemID/12345

Interface:

namespace NS
{
[ServiceContract]
public interface IExport
{
[OperationContract(Name = "CreatePDF")]
[WebGet(UriTemplate = "CreatePDF/ItemID/{id}")]
string CreatePDF(string id);
}
}

Class:

namespace NS {
public class Export : IExport {
public string CreatePDF(string id) {

Web.config:

<system.serviceModel>
<services>
<service behaviorConfiguration="myServiceBehavior" name="NS.Export">
<endpoint address="" behaviorConfiguration="myEndpointBehavior" binding="webHttpBinding" name="webHttpBinding" contract="NS.IExport" />
<endpoint address="mex" binding="mexHttpBinding" name="mexHttpBinding" contract="IMetadataExchange" />
</service>
</services>
<behaviors>
<serviceBehaviors>
<behavior name="myServiceBehavior">
<serviceMetadata httpGetEnabled="true" />
<serviceDebug includeExceptionDetailInFaults="true" />
</behavior>
<behavior>
<serviceMetadata httpGetEnabled="true" />
<serviceDebug includeExceptionDetailInFaults="true" />
</behavior>
</serviceBehaviors>
<endpointBehaviors>
<behavior name="myEndpointBehavior">
<webHttp />
</behavior>
</endpointBehaviors>
</behaviors>
<serviceHostingEnvironment multipleSiteBindingsEnabled="true" />
</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:

Launch a local JQuery file (ExportPDF.html) in a browser, and a pdf will be downloaded automatically.
Call the following URL in a browser, and a pdf will be downloaded automatically.
http://192.168.1.213/SiteServices/ExportPDF.html?=12345

Interface:

namespace NS
{
[ServiceContract]
public interface IExport
{
[OperationContract]
[WebInvoke(Method = "POST", BodyStyle = WebMessageBodyStyle.WrappedRequest, ResponseFormat = WebMessageFormat.Json, RequestFormat = WebMessageFormat.Json)]
string CreatePDF(string id);

Class:

namespace NS
{
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class Export: IExport
{
public string CreatePDF(string id) {

Web.config:

<system.serviceModel>
<services>
<service name="NS.Export" behaviorConfiguration="myServiceBehavior">
<endpoint address="" behaviorConfiguration="myEndpointBehavior" binding="webHttpBinding" contract="NS.IExport" />
<endpoint contract="IMetadataExchange" binding="mexHttpBinding" address="mex" />
</service>
</services>
<behaviors>
<serviceBehaviors>
<behavior name="myServiceBehavior">
<serviceMetadata httpGetEnabled="true" />
<serviceDebug includeExceptionDetailInFaults="false" />
</behavior>
</serviceBehaviors>
<endpointBehaviors>
<behavior name="myEndpointBehavior">
<enableWebScript/>
</behavior>
</endpointBehaviors>
</behaviors>
<serviceHostingEnvironment multipleSiteBindingsEnabled="false" aspNetCompatibilityEnabled="true" />
</system.serviceModel>

Website JQuery: Optional, only needed when website HTML call is required.

Local JQuery:

Note: Only worked in IE, instead of Chromed/FF.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="js/jquery-2.1.0.js"></script>
<script type="text/javascript">
$(document).ready(function() { //1
$('#btn').click(function() { //2
$.ajax({ //3
cache: false,
type: "POST",
async: false,
url: "http://192.168.1.213/SiteServices/Export.svc/CreatePDF",
contentType: "text/json; charset=utf-8",
data: '{"WRWORKREQUEST":"' + 12345678901 + '"}',
dataType: "json",
success: function(msg)
{
window.open(msg.d);
},
error: function(XMLHttpRequest, textStatus, errorThrown)
{
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.responseText);
}
}); //3
}); //2
}); //1
</script>
</head>
<body>
<input id="btn" type="button" value="Create PDF" />
</body>
</html>

crossdomain.xml

<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
<allow-access-from domain="*" />
<site-control permitted-cross-domain-policies="all" />
</cross-domain-policy>