Hi in post i will show how to call a asp.net 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;
[ServiceContract]
public interface IService
{
[OperationContract]
[WebInvoke(Method = "POST", ResponseFormat = WebMessageFormat.Json)]
string GetDate(string Date);
}
1. Take a new website empty template add aspx page and wcf service page.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.Text;
using System.ServiceModel.Web;
[ServiceContract]
public interface IService
{
[OperationContract]
[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:
<system.serviceModel>
 <behaviors>
  <serviceBehaviors>
   <behavior name="ServiceBehavior">
    <serviceMetadata httpGetEnabled="true"/>
    <serviceDebug includeExceptionDetailInFaults="true"/>
   </behavior>
  </serviceBehaviors>
        <endpointBehaviors>
            <behavior name="ServiceAspNetAjaxBehavior">
                <enableWebScript />
            </behavior>
        </endpointBehaviors>
 </behaviors>
    <serviceHostingEnvironment aspNetCompatibilityEnabled="true"/>
    <services>
  <service behaviorConfiguration="ServiceBehavior" name="Service">
   <endpoint address="" binding="webHttpBinding" contract="IService" behaviorConfiguration="ServiceAspNetAjaxBehavior">
    <identity>
     <dns value="localhost"/>
    </identity>
   </endpoint>
   <endpoint address="mex" binding="mexHttpBinding" contract="IMetadataExchange"/>
  </service>
 </services>
</system.serviceModel> 
5. Now writing the jquery ajax code to call the wcf service.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://code.jquery.com/jquery-1.8.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        var d = new Date();
        function CallWCF() {
            $.ajax({
                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);
        }
    </script>
</head>
<body>
    <input id="Button1" type="button" value="Call WCF Service" onclick="CallWCF();" />
    <div id="DisplayOutput">
    </div>
</body>
</html>
6. Result:


 
 
Nice Article chandan sir.its really helfpul. keep posting articles like this...
ReplyDeletesure :)
DeleteActuall am getting Service call failed: 500 Internal Server Error ,any idea how to get rid of it?
ReplyDelete