How to Consume WCF Service using .ajax() jquery Method

Today I am going to explain how to consume WCF service using .ajax() jquery method. First of all add below tags in Web.config to call wcf service.

<system.serviceModel>

</behavior>

</serviceBehaviors>

</behavior>

</endpointBehaviors>

</behaviors>

<endpoint address="" binding="webHttpBinding"

contract="IService" behaviorConfiguration="EndpBehavior"/>

</service>

</services>

</system.serviceModel>

Now In Iservice.cs

You have to add below code above the Method declaration like :

[OperationContract]

[WebInvoke(Method = "POST",

BodyStyle = WebMessageBodyStyle.Wrapped,

ResponseFormat = WebMessageFormat.Json)]

string DoWork(string str);

Now In service.cs

You have to add below code above of class declaration.

[AspNetCompatibilityRequirements(RequirementsMode =
AspNetCompatibilityRequirementsMode.Allowed)]

Now In Default.aspx page.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>Untitled Page</title>

function CallService() {

var txtValue = $("#TextBox1").val();

$.ajax({

type: "POST", //GET or POST or PUT or DELETE verb

url: "Service.svc/DoWork", // Location of the service

data: '{"str": "' + txtValue + '"}', //Data sent to server

contentType: "application/json; charset=utf-8", // content type sent to server

dataType: "json", //Expected data format from server

processdata: true, //True or False

success: function (msg) {//On Successfull service call

alert(msg.DoWorkResult);

}

});

}

</script>

</head>

<body>

<div>

<asp:TextBox ID="TextBox1" runat="server" onkeyup="CallService();"></asp:TextBox>

</div>

</form>

</body>

</html>

Description

When you run attached application. you will see a textbox on the web page. when you write any text in the textbox

at that time a alert fire with your text which you inserted in textbox.

Please find below attachment to know further Operations.