Follow by Email

Thursday, May 23, 2013

call a wcf service using jquery | Ajax Json Call to WCF using Jquery

Hi in post i will show how to call a wcf service using jquery.

1. Take a new website empty template add aspx page and wcf service page.

2. Go to App_Code --> IService.cs to define the method signature.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.Text;
using System.ServiceModel.Web;

public interface IService
    [WebInvoke(Method = "POST", ResponseFormat = WebMessageFormat.Json)]
    string GetDate(string Date);    

3. Go to App_Code --> Service.cs to write the implementation for the declared method signature.

using System;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.Text;
using System.Web.Script.Serialization;
using System.ServiceModel.Activation;

[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class Service : IService
    public string GetDate(string Date)
        return "'Hello World' Todays Date is : " + Date.ToString();

4. Now in the Web.config file i will define the address, binding, contract and service behaviours for the WCF Service

Under the configuration tag add this:

<behavior name="ServiceBehavior">
<serviceMetadata httpGetEnabled="true"/>
<serviceDebug includeExceptionDetailInFaults="true"/>
            <behavior name="ServiceAspNetAjaxBehavior">
                <enableWebScript />
    <serviceHostingEnvironment aspNetCompatibilityEnabled="true"/>
<service behaviorConfiguration="ServiceBehavior" name="Service">
<endpoint address="" binding="webHttpBinding" contract="IService" behaviorConfiguration="ServiceAspNetAjaxBehavior">
<dns value="localhost"/>
<endpoint address="mex" binding="mexHttpBinding" contract="IMetadataExchange"/>

5. Now writing the jquery ajax code to call the wcf service.

<html xmlns="">
<head runat="server">
    <script src="" type="text/javascript"></script>
    <script type="text/javascript">
        var d = new Date();

        function CallWCF() {
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: '<%=ResolveUrl("~/Service.svc/GetDate") %>',
                data: '{"Date": "' + d.toDateString() + '"}',
                processData: true,
                dataType: "json",
                success: ServiceSucceeded,
                error: ServiceFailed

        function ServiceFailed(output) {
            Log('Service call failed: ' + output.status + ' ' + output.statusText);

        function ServiceSucceeded(output) {
            var outputValue = output.d;
            Log("Service call Success: <br/> " + outputValue);

        function Log(displayValueFromService) {
            $("#DisplayOutput").append('<br/>' + displayValueFromService);
    <input id="Button1" type="button" value="Call WCF Service" onclick="CallWCF();" />
    <div id="DisplayOutput">

6. Result: