Methods Of Consuming WCF Services With JQuery

Datetime:2016-08-23 04:36:05          Topic: jQuery  WCF           Share

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:

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:

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:

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"?>  
<!-- http://www.osmf.org/crossdomain.xml -->  
<!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>

Read more articles on WCF:





About List