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>
<behaviors>
<serviceBehaviors>
<behavior
name="ServiceBehavior">
<serviceMetadata
httpGetEnabled="true"/>
<serviceDebug
includeExceptionDetailInFaults="true"/>
</behavior>
</serviceBehaviors>
<endpointBehaviors>
<behavior
name="EndpBehavior">
<webHttp/>
</behavior>
</endpointBehaviors>
</behaviors>
<services>
<service
behaviorConfiguration="ServiceBehavior"
name="Service">
<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">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head
runat="server">
<title>Untitled
Page</title>
<script
src="jquery-1.4.2.min.js"
temp_src="jquery-1.4.2.min.js"
type="text/javascript"></script>
<script
type="text/javascript">
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>
<form
id="form1"
runat="server">
<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.