Click here to Skip to main content
15,867,568 members
Articles / Programming Languages / C#

Calling WCF service exposed with different bindings in JQuery

Rate me:
Please Sign up or sign in to vote.
4.84/5 (16 votes)
10 Jan 2012CPOL5 min read 107.2K   4.7K   64   26
The article illustrates how to call differently exposed Windows Communication Foundation services from JQuery.

Introduction

The article illustrates how to call differently exposed Windows Communication Foundation services from JQuery. Here we will expose a WCF service with three different bindings (webHttpBinding, basicHttpBinding and wsHttpBinding) and consume the same in a Client application using JQuery.

Implementing a WCF Service Different with Bindings

First let's create a WCF service which exposes three different endpoints with different bindings. The service consists of a single method GetData(). Go through my previous article Reusing WCF service across several applications using different bindings in order to understand the steps of creating a WCF service with different bindings.

The final Interface definition of the service is as follows:

image001.gif

The service implementation is as follows:

image002.gif

The web.config file exposing the different bindings is as follows:

image003.gif

Once you are done with the development of WCF service, Right click -> View in Browser on the file MyService.svc in order to check the WSDL generated by the WCF service.

Consuming the Service Exposed with webHttpBinding in JQuery

This is the ideal binding in a WCF service for JQuery consumption. Create a new empty ASP.NET project and add a webForm Webpage.aspx. Place three HTML buttons on the form.

image004.gif

image005.gif

Now implement the client code in JQuery. First include the JQuery library. The library can be linked accessing Microsoft CDN. You can also create a “Script” folder in your project and put the jquery-1.5.1.min.js file physically.

JavaScript
<script type="text/javascript" 
src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js"></script> 

Add the following line in the script in order to avoid cross-site transport error while you are linking your JQuery file accessing Microsoft CDN:

JavaScript
//For avoiding "No- Transport" error
//force cross-site scripting (as of jQuery 1.5)
jQuery.support.cors = true;

Now call the service method exposed in a REST way, using the JQuery script. In REST, we can pass parameter value of service methods using query string and generating GET, POST, PUT, DELETE request. Here our service will be called using a HTTP get request. To consume a service in JQuery, you can use JQuery.ajax() method of the library.

image006.gif

The above code sends a request to the service settings different values in the call.

Get the service URL by Right click -> View in Browser on the file MyService.svc and check the port while calling the service. The port in sample might mismatch with your local implementation.

Run the Web application and click on the “Call REST WCF using JQuery” button. You will get values returned by the service.

image007.gif

Consuming the Service Exposed with basicHttpBinding in JQuery

Now let’s try to call the service method exposed using “basicHttpBinding”. For this, we need to form a SOAP request for the “basicHttp” endpoint of the service. We need to format the request exactly as a WCF client would do. We will take the help of WCF Test Client in order to generate the request.

Go to WCF service project, select the MyService.svc file and press F5. In the WCF Test client, select the GetData method exposed by the “basisHttp” endpoint and set a value to the request. Select the XML tag in order to find the formatted SOAP request. Copy the selected section from the request:

image008.gif

We will POST this SOAP request from our JQuery code. For this, we need to form the copied request in our JQuery code:

image009.gif

Also for BasicHttpBinding requests, SOAPAction header is required to be set in the HTTP request using beforeSend function. That will define which operation should receive the message. The SOAPAction header can be found in the WSDL generated by the WCF service. The following code in JQuery POSTs SOAP request to the service exposed through “basicHttpbinding”:

image010.gif

On the successful return of the request, the response XML is being parsed and the output is displayed. In order to get idea about the response XML call the method from WCF Test Client and check the response XML.

Run the Web application and click on the “Call BasicHttp binded WCF using JQuery” button. You will get values returned by the service.

image011.gif

Consuming the Service Exposed with wsHttpBinding in JQuery

We could have called the service method exposed using “wsHttpBinding” binding in the same way as we did above (just sending the SOAP request formed by the WCF Test client for the wsHttpBinding endpoint). But there is a major concern. A service exposed with “wsHttpBinding” binding implements WS-Security of WS-* family of web service specifications. As the binding uses security, the request will be rejected. The service cannot be called without implementing WS-Security at JQuery end. So, in order to call the service method, we have to compromise with the security. Now, if there is an existing service in place, we cannot disable security at WCF service end, as it will affect existing consumers. For this, we can expose a new non-secure “wsHttp” endpoint exclusively for JQuery consumption.

Exposing a Non-secure “wsHttp” Endpoint

image012.gif

For exposing a non-secure endpoint, we need to customize the “wsHttpbinding” with the “security mode” to “none” and use the same in a new endpoint.

image013.gif

Now we will access this new endpoint from JQuery. Construct the SOAP request using after accessing the endpoint from WCF Test Client. We need to POST this request from JQuery.

Modify the SOAP request with a "To" header with addressing information for the endpoint.

We need to modify the content type to “application/soap+xml” in the calling code, as “wsHttpBinding” uses SOAP 1.2. The following code in JQuery POSTs SOAP request to the service exposed through “wsHttpbinding”.

image014.gif

On the successful return of the request, the response XML is being parsed and the output is displayed. In order to get an idea about the elements in the response XML while parsing, call the method from WCF Test Client and check the response XML.

Run the Web application and click on the “Call WsHttp binded WCF using JQuery” button. You will get values returned by the service.

image015.gif

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Architect
India India
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralA good introductory article. Pin
SomPoddar11-May-12 10:58
SomPoddar11-May-12 10:58 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.