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>

  <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.
Ebook Download
View all
Learn
View all