Consuming WCF/ASMX/REST service using JQuery

In this article, I will explain how to consume a WCF / ASMX service using jQuery. The scope of the article is limited to creating & consuming different kind of services using jQuery. I have segregated this article into 7 topics based on service consumption.

Calling ASMX Web service using jQuery
Calling WCF service using jQuery and retrieving data in JSON Format
Calling WCF service using jQuery and retrieving data in XML Format
Calling WCF service using jQuery and retrieving data in JSON Format (pass multiple input parameters) & ( Get multiple objects as output using DataContract)
Calling WCF service using jQuery[ Get Method] and retrieving data in JSON Format
Calling REST based WCF service using jQuery
Streaming an image through WCF and request it through HTTP GET verb.

If you have never heard about jQuery or WCF or JSON, please learn it before dwelling into this article. The scope is limited to service creation and consumption.

I used Visual web developer 2008 to develop this sample. Additional tools used: Firebug and HttpAnalyzer

In the below example I have used jQuery version 1.3.2, you can download the same from http://jQuery.com/. This article demonstrates how our jQuery based browser app will retrieve the Provinces for the supplied country. All the services are hosted in the same web application. Please download the source code to experiment with the sample by yourself.

For calling the service we need to use the .ajax method of jQuery which makes XMLHttpRequest to the server. In the below code section I have explained the key value pair attributes to be passed by marking comments on the right side of the attribute.

<script type="text/javascript" language="javascript" src="script/jQuery-1.3.2.min.js" "></script>
<script type="text/javascript">
var varType;
var varUrl;
var varData;
var varContentType;
var varDataType;
var varProcessData;
function CallService()
{
$.ajax({
type : varType, //GET or POST or PUT or DELETE verb
url : varUrl, // Location of the service
data : varData, //Data sent to server
contentType : varContentType, // content type sent to server
dataType : varDataType, //Expected data format from server
processdata : varProcessData, //True or False
success : function(msg) {//On Successfull service call
ServiceSucceeded(msg);
},
error: ServiceFailed// When Service call fails
});
}
lt;/script>

I have made the above method generic to use it for all different type of services which we are going to discuss.

Business Logic

Business logic for below demonstrated service is quite simple, we store Country and Province details in a Name Value collection, When a request supplies the country name it returns the provinces associated with it.

public class CountryProvinceBL
{
NameValueCollection nvProvince = null;
public CountryProvinceBL()
{
nvProvince = new NameValueCollection();
nvProvince.Add("usa", "Massachusetts");
nvProvince.Add("usa", "California");
nvProvince.Add("india", "Tamil Nadu");
nvProvince.Add("india", "Karnataka");
}
public string[] GetProvince(string Country)
{ return nvProvince.GetValues(Country).ToArray();}
}

1. Calling ASMX Web service using jQuery

Step 1

Create web service and add the below code

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// Below line allows the web service to be called through HTTP protocol.
[System.Web.Script.Services.ScriptService]
public class CountryProvinceWebService : System.Web.Services.WebService
{
[WebMethod]
//Business Logic returns the provinces for the supplied country
public string[] GetProvince(string Country)
{ return new CountryProvinceBL().GetProvince(Country); }
}

Step 2

Invoke the below method on button click

function CountryProvinceWebService() {
varType = "POST";
varUrl = "service/CountryProvinceWebService.asmx/GetProvince";
//Pass country from drop down ddlCountry'
varData = '{"Country": "' + $('#ddlCountry').val() + '"}';
varContentType = "application/json; charset=utf-8";
varDataType = "json";varProcessData = true; CallService();
}

Step 3

On Success "ServiceSucceeded" will be called and it will populate the provinces dropdown with the values sent by the server.

function ServiceSucceeded(result) {
var ProvinceDDL = document.getElementById("ddlProvince");
for (j = ProvinceDDL.options.length - 1; j >= 0; j--) { ProvinceDDL.remove(j); }
var resultObject = result.d; // Constructed object name will be object.d //Button
for (i = 0; i < resultObject.length; i++) {
var opt = document.createElement("option"); opt.text = resultObject[i];
ProvinceDDL.options.add(opt)
}
}

2. Calling WCF service using jQuery and retrieving data in JSON Format

Step 1

Define the Contracts in the interface ICountryProvinceWCFService

[ServiceContract]
public interface ICountryProvinceWCFService
{
[OperationContract]
[WebInvoke(Method = "POST",BodyStyle=WebMessageBodyStyle.Wrapped, ResponseFormat = WebMessageFormat.Json)]
string[] GetProvince(string Country);
}

Implement the contract in class CountryProvinceWCFService

public class CountryProvinceWCFService : ICountryProvinceWCFService
{
// Call Business Logic to get provinces
public string[] GetProvince(string Country)
{return new CountryProvinceBL().GetProvince(Country); }
}

Step 2

Define the configuration in web.config

<serviceMetadata httpGetEnabled="true" > enables the user to view the metadata through web browser and generate WSDL file
setting includeExceptionDetailInFaults = "true" allows the WCF service throw original error, it will be useful while debugging the application.
Adding <webHttp/> to endpoint behavior & webHttpBinding to binding enables the web programming model for WCF and allows the service to be accessible through web protocols.
Define contract and name of the service

Figure 1: Web.config

<system.serviceModel>
<behaviors>
<serviceBehaviors>
<behavior name="CountryProvinceBehavior">
<serviceMetadata httpGetEnabled="true" />
<serviceDebug includeExceptionDetailInFaults="true" />
</behavior>
</serviceBehaviors>
<endpointBehaviors>
<behavior name="CountryProvinceBehavior">
<webHttp/>
</behavior>
</endpointBehaviors>
</behaviors>
<services>
<service behaviorConfiguration="CountryProvinceBehavior" name="CountryProvinceWCFService">
<endpoint address="" binding="webHttpBinding" contract="ICountryProvinceWCFService" behaviorConfiguration="CountryProvinceBehavior"/>
</service>
</services>
lt;/system.serviceModel>

Step 3

Invoke the WCF service on the button click event

function CountryProvinceWCFJSON() {
varType = "POST";
varUrl = "service/CountryProvinceWCFService.svc/GetProvince";
varData = '{"Country": "' + $('#ddlCountry').val() + '"}';
varContentType = "application/json; charset=utf-8";
varDataType = "json"; varProcessData = true; CallService();
}

On successful service invocation "ServiceSucceeded" will be called and the province value will get added to province drop down.

function ServiceSucceeded(result) {/
var ProvinceDDL = document.getElementById("ddlProvince");
for (j = ProvinceDDL.options.length - 1; j >= 0; j--) { ProvinceDDL.remove(j); }
// Constructed object name will be object.[ServiceName]Result // Button 2 & 3
var resultObject = result.GetProvinceResult;
for (i = 0; i < resultObject.length; i++) {
var opt = document.createElement("option"); opt.text = resultObject[i];
ProvinceDDL.options.add(opt)
}
}

3. Calling WCF service using jQuery and retrieving data in XML Format

Step 1

In operation contract set ResponseFormat to XML.

[OperationContract]
[WebInvoke(Method = "POST", BodyStyle = WebMessageBodyStyle.Wrapped,ResponseFormat = WebMessageFormat.Xml)]
string[] GetProvinceXML(string Country);

Then implement the service

public string[] GetProvinceXML(string Country)
{
return new CountryProvinceBL().GetProvince(Country);
}

Use the web.config, defined in Figure 1.

Step 2

Invoke the WCF service on the button click event, Make sure you set the expected data type as XML

function CountryProvinceWCFXML() {
varType = "POST";
varUrl = "service/CountryProvinceWCFService.svc/GetProvinceXML";
varData = '{"Country": "' + $('#ddlCountry').val() + '"}';
varContentType = "application/json; charset=utf-8";
varDataType = "xml"; varProcessData = true; CallService();
}

Step 3

On successful service invocation "ServiceSucceeded" will be called and the province value will get added to province drop down.

function ServiceSucceeded(result) {
var ProvinceDDL = document.getElementById("ddlProvince");
for (j = ProvinceDDL.options.length - 1; j >= 0; j--) { ProvinceDDL.remove(j); }
//Below jQuery code will loop through the XML result set
$(result).find("GetProvinceXMLResult").children().each(function() {
var opt = document.createElement("option"); opt.text = $(this).text();
ProvinceDDL.options.add(opt)
});
}

4. Calling WCF service using jQuery and retrieving data in JSON Format

In this example Country and Browser type will be passed as input parameter to the WCF service in JSON format, Upon receiving the values the service will send back provinces for the passed country and some comments for the browser information.

Step 1

Define Data contract and service contact for the service

[DataContract]
public class CustomData
{
[DataMember]
public String BrowserInfo;
[DataMember]
public String[] ProvinceInfo;
}
[OperationContract]
[WebInvoke(Method = "POST", BodyStyle = WebMessageBodyStyle.Wrapped, ResponseFormat = WebMessageFormat.Json)]
CustomData GetProvinceAndBrowser(string Country, string Browser);

And implement the contract in your service call

public CustomData GetProvinceAndBrowser(string Country, string Browser)
{
CustomData customData = new CustomData();
customData.ProvinceInfo = new CountryProvinceBL().GetProvince(Country);
if (Browser == "ie")
customData.BrowserInfo = " Did you learn to program IE 8.0";
else if (Browser == "firefox")
customData.BrowserInfo = " Mozilla rocks, try Firebug & Fiddler addon's";
else
customData.BrowserInfo = " I did not test in this browser";
return customData;
}

Step 2

Use the web.config defined in figure 1.

Step 3

Invoke the WCF service on the button click event, Make sure you set the expected data type as XML

function CountryProvinceWCFJSONMulti() {
var browser = "";
if (jQuery.browser.mozilla == true) browser="firefox"
else if(jQuery.browser.msie == true) browser = "ie"
varType = "POST";
varUrl = "service/CountryProvinceWCFService.svc/GetProvinceAndBrowser";
//We are passing multiple paramers to the service in json format {"Country" : "india", "Browser":"ie"}
varData = '{"Country": "' + $('#ddlCountry').val() + '","Browser": "' + browser + '"}';
varContentType = "application/json; charset=utf-8";
varDataType = "json";varProcessData = true; CallService();
}

Step 4

On successful service invocation "ServiceSucceeded" will be called and the province value will get added to province drop down.

function ServiceSucceeded(result) {
var ProvinceDDL = document.getElementById("ddlProvince");
for (j = ProvinceDDL.options.length - 1; j >= 0; j--) { ProvinceDDL.remove(j); }
//WCF Service with multiple output paramaetrs //First object
var resultObject = result.GetProvinceAndBrowserResult.ProvinceInfo;
for (i = 0; i < resultObject.length; i++) {
var opt = document.createElement("option"); opt.text = resultObject[i];
ProvinceDDL.options.add(opt)
}
//Second object sent in JSON format
$("#divMulti").html(result.GetProvinceAndBrowserResult.BrowserInfo);
}

5. Calling WCF service using jQuery[ Get Method] and retrieving data in JSON Format

This time we will use GET Verb instead of POST to retrieve the data through WCF & jQuery

Step 1

We can use the WebGet attribute instead of WebInvoke to perform the operation,

[OperationContract]
[WebGet(ResponseFormat=WebMessageFormat.Json)]
string[] GetProvinceGET(string Country);

Implement the contract

public string[] GetProvinceGET(string Country)
{return new CountryProvinceBL().GetProvince(Country);}

And use the web.config defined in figure 1

Step 2

Set the verb to GET instead of POST and pass the data as a query string. Invoke the WCF Service using below method

function CountryProvinceWCFJSONGet() {
varType = "GET";
varUrl = "service/CountryProvinceWCFService.svc/GetProvinceGET?Country=" +$('#ddlCountry').val();
varContentType = "application/json; charset=utf-8";
varDataType = "json";varProcessData = false; CallService();
}

On successful service invocation "ServiceSucceeded" will be called and the province value will get added to province drop down.

function ServiceSucceeded(result) {
var ProvinceDDL = document.getElementById("ddlProvince");
for (j = ProvinceDDL.options.length - 1; j >= 0; j--) { ProvinceDDL.remove(j); }
for (i = 0; i < result.length; i++) {
var opt = document.createElement("option"); opt.text = result[i];
ProvinceDDL.options.add(opt)
}
}

6. Calling REST based WCF service using jQuery

Step 1

Define the URI for REST service in the operation contract and set the BodyStyle to Bare.

[OperationContract]
[WebInvoke(Method = "GET", ResponseFormat = WebMessageFormat.Json, UriTemplate = "GetProvinceREST/{Country}", BodyStyle=WebMessageBodyStyle.Bare)]
string[] GetProvinceREST(string Country);

Implement the contract:

public string[] GetProvinceREST(string Country)
{ return new CountryProvinceBL().GetProvince(Country); }

Use the web.config defined in Figure 1

Step 2

While using REST services use GET verb for retrieving data and POST, PUT, DELETE for modifying, adding and deleting information

function CountryProvinceWCFREST() {
varType = "GET";
varUrl = "service/CountryProvinceWCFService.svc/GetProvinceREST/" + $('#ddlCountry').val();
varContentType = "application/json; charset=utf-8";
varDataType = "json"; varProcessData = false; CallService();
}

On successful service invocation "ServiceSucceeded" will be called and the province value will get added to province drop down.

function ServiceSucceeded(result) {
var ProvinceDDL = document.getElementById("ddlProvince");
for (j = ProvinceDDL.options.length - 1; j >= 0; j--) { ProvinceDDL.remove(j); }
for (i = 0; i < result.length; i++) {
var opt = document.createElement("option"); opt.text = result[i];
ProvinceDDL.options.add(opt)
}
}

7. Stream an image through WCF and request it through HTTP GET Verb

Step 1

Define the contract and set the return type to Stream since we are going to send it in Image/jpeg Format

[OperationContract]
[WebInvoke(Method = "GET")]
Stream GetPicture();

Implement the contract

public Stream GetPicture()
{
string fileName = Path.Combine(HostingEnvironment.ApplicationPhysicalPath,"vista.jpg");
FileStream fileStream = new FileStream(fileName, FileMode.Open, FileAccess.Read);
// Set the content type as image/ jpeg
System.ServiceModel.Web.WebOperationContext.Current.OutgoingResponse.ContentType = "image/jpeg";
return (Stream)fileStream;
}

And use the web.config which we defined earlier in this article

Step 2

On Button click event set the src attribute of image element [image1] to the WCF service

<img src="" id="image1" width="500" height="400" />
function ShowImage() {// Call the WCF service
$("#image1").attr('src','service/CountryProvinceWCFService.svc/GetPicture');
}

Conclusion

Thanks for reading the article, I know that I have not gone into the details of each and every aspect to keep the article shorter. Please download the source code to check the examples yourself, I have validated the example in IE 7 and Firefox 3.5. If you have any suggestions/comments/doubts regarding the article don't hesitate to post it.

29 Comments

Join the conversation! Your thoughts help the community grow.

Anas Elaiwat9y ago
I cant download from the above link :(,, please advice
- sandeepkumar panigrahi9y ago
  You have to login to download the sourse code.
kalu singh rao10y ago
Nice...
Ravi Patel11y ago
Nice explained
heba gomaah13y ago
thank uuuuuuuuu and finally it works :))))))))
milin switch14y ago
I have "http://107.22.160.4/ICatService/Service.svc/GetMainCategory/4" this json wcf webservice link and wanted to parse it with jquery and trying to fetch data in HTML5 <ul><li> tag respectively. but failed.
jecky ku14y ago
I am first time trying to consume wcf RestFul service on MVC3. I have services such as http://Service/Login (for login) & http://Service/Registration (for registration). The service will receive and return data in json format. But I don't know how to call them in MVC3 project and implement it best way. Any help with this is appreciated.
Farooq Md14y ago
Thank you for posting
Charudatt Patil15y ago
I am trying for WCF service using JQuery[ Get Method] and get data in JSON Format, but geting 400: Bad Request error. Any help will be much appreciated
Atul Soni15y ago
Hi Sridhar, It is very good article and very helpful.
JM Stephens15y agoedited
.
Mario Prego15y ago
Thank a lot.
jo po15y ago
Thank you very much for these practical examples you have provided !!! I was looking for a quick solution to get jQuery talk to my WCF. You covered different HTTP methods and different jQuery method overloads. Keep on that nice work!
aashi15y ago
Its gudlot
Ravi K16y ago
Thanks a lot for this very easy to get article.
vic16y ago
Sridhar, Your article was very helpful. I used option 2 as a basis for my own service as was able to get it working perfectly in IE8. However Firefox (3.6.3) is returning 401 Unauthorized when I analyze it with Fiddler. Any ideas on how to overcome this? Please note that I am making the jquery calls from within a sharepoint page, and as such had to install the service on a separate IIS website (using the same domain but a different port number). So my function looks something like this: function GetEmail() { varType = "POST"; varUrl = http://server:9999/peoplesearch/Service.svc/GetEmail; varData = '{"name'"}'; varContentType = "application/json; charset=utf-8"; varDataType = "json"; varProcessData = true; CallService(); } Any clues you could offer would be much appreciated.
- bhaskar sharma16y ago
  Hi Sridhar, Thanks for this wonderful post. Can you help me in securing WCf call from Jquery as i am still stuck about its security aspect. When a web application webpage uses Jquery to access JSON packets from WCF Rest service, how can we implement security(authentication) in this. If we put both webservice and webpage in the same web application(in Visual studio), they share the same httpcontext using aspnetcompatibility attribute, but when they don't share same appdomain, what is the way to do authentication in WCF Rest service. I have tried looking into WCF REST kit but it also don't have solution to this Hope i am able to put my query right, otherwise please let me know Cheers TicArch
- Sridhar Subramanian16y ago
  I think Firefox considers it as a cross-domain post, Can you try with the GET method 5th one, it should work.
- Sridhar Subramanian16y agoedited
  Vic:<br>Also check whether your session is authenticated in firefox.<br>
Joe Sauve16y ago
This is a fantastic article, and I really appreciate it! Thank you!!!
- Sridhar Subramanian16y ago
  Thanks Joe.
anil dash16y ago
Very very good helpfull information in a singhle article
- Sridhar Subramanian16y ago
  Thanks Anil.
anil dash16y ago
Very very good helpfull information in a singhle article
Mahesh Chand16y ago
Great article Sridhar. Thank you for sharing. I have just started working with Jquery and found it useful. Cheers!
- Sridhar Subramanian16y ago
  Thanks Mahesh.
Kyaw Ko Ko Thet16y ago
I find the topic using web services from JavaScript before.Thank a lot.
- Sridhar Subramanian16y ago
  You are welcome.