Welcome to the "Understand jQuery Ajax function" article series. In this article series we are learning to consume various C# methods using a jQuery Ajax function. In the previous two articles we learned to consume a code-behind C# method and a Web Service method using a jQuery Ajax function. You can get them here.
Understand jQuery Ajax function: call code behind C# method
Understand jQuery Ajax function : Call Web service method
In this article we will learn to consume a WCF service using a jQuery Ajax method. This article requires a basic understanding from the reader. At least, the terminology like DataContract, OperationContract, ServiceContract and so on.
Step 1: create WCF service and configure it
In this step we will create one sample WCF service and we need to configure it.
Define the interface first.
Here we will define the interface in the WCF service. The interface is very simple to implement, we only need to specify the following attribute above the method declaration. Here is the attribute.
[WebInvoke(Method = "POST",BodyStyle = WebMessageBodyStyle.Wrapped,ResponseFormat = WebMessageFormat.Json)]
This attribute specifies that the method can be invoked by client script and then it will be executed by the POST verb. Here is the complete code of the interface definition.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Web;
using System.Text;
namespace WebApplication
{
[ServiceContract]
public interface IWCFService
{
[OperationContract]
[WebInvoke(Method = "POST",BodyStyle = WebMessageBodyStyle.Wrapped,ResponseFormat = WebMessageFormat.Json)]
string GetData();
}
}
Implement interface in class
This is the second part of configuration. Here we will implement the interface in a C# class within a WCF application. The class definition is very simple, like interface, we only need to specify the attribute called.
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
Just before the class definition. Have a look at the following example.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Activation;
using System.Text;
namespace WebApplication
{
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class WCFService : IWCFService
{
public string GetData()
{
return "Hello";
}
}
}
Configure web.config file in WCF service
This is the last step to the WCF configuration. Here we will configure the web.config, so that the client application can talk with our WCF service. This is the full code of my web.config file.
![Call method in WCF service]()
Basically, we need to configure the service section (red box in the image). Here we specified the name attribute in the service tag and the contract attribute in the endpoint tag.
The contract is nothing but our interface name and the service name is the class name.
So, here we completed the entire WCF setting and our service is ready to serve data.
Step 2: Create client code to consume the service
In this part we will create a jQuery Ajax method to consume the service. Have a look at the following code.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="WebApplication.JavaScript" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
$.ajax({
type: "POST",
url: "WCFService.svc/GetData",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
var value = JSON.stringify(response);
alert(value);
},
failure: function (response) {
alert(response.d);
}
});
});
</script>
</head>
<body>
<form id="frm" method="post">
<div id="Content">
</div>
</form>
</body>
</html>
Here is sample output.
![Output method in WCF service]()
Ha..Ha.. We did not decorate the output for the sake of simplicity. Because in this article our purpose is to understand how to consume a WCF service using a jQuery Ajax method.
Conclusion
In this article we learned to consume a WCF service using a jQuery Ajax method. Hope you have understood the concept and enjoyed it. In the next article we will explain more about the jQuery Ajax method. Keep reading, keep learning.