A day with .Net

My day to day experince in .net

WCF Cross Domain Call With Jquery and JSONP

Posted by vivekcek on June 5, 2015

In this post i will show you how to enable cross domain call in WCF.
I am using Visual Studio 2010.
1. Create a WCF project.
Create Service Contract and Data Contract

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

namespace CQRS
{
 [DataContract]
 public class Customer
 {
 [DataMember]
 public string Name;

 [DataMember]
 public string Address;
 }

 [ServiceContract]
 public interface IService1
 {
 [OperationContract]
 [WebGet(BodyStyle = WebMessageBodyStyle.Bare,
 RequestFormat = WebMessageFormat.Json,
 ResponseFormat = WebMessageFormat.Json)]
 Customer GetCustomer();

 }

}

Implement the service contract as below

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

namespace CQRS
{

 [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
 public class Service1 : IService1
 {
 [WebGet(ResponseFormat = WebMessageFormat.Json)]
 public Customer GetCustomer()
 {
 return new Customer() { Name = "vivek", Address = "ps" };
 }
 }

}

Go to the mark up of Service1.svc and add Factory reference

<%@ ServiceHost Language="C#" Debug="true" Service="CQRS.Service1" CodeBehind="Service1.svc.cs"
Factory="System.ServiceModel.Activation.WebScriptServiceHostFactory" %>

Now edit your web.config

<?xml version="1.0"?>

<configuration>

 <system.serviceModel>
 <behaviors>
 <endpointBehaviors>
 <behavior name="webHttpBehavior">
 <webHttp />
 </behavior>
 </endpointBehaviors>
 </behaviors>
 <bindings>
 <webHttpBinding>
 <binding name="webHttpBindingWithJsonP" crossDomainScriptAccessEnabled="true" />
 </webHttpBinding>
 </bindings>
 <services>
 <service name="CQRS.Service1">
 <endpoint address="" binding="webHttpBinding"
 bindingConfiguration="webHttpBindingWithJsonP" contract="CQRS.IService1"
 behaviorConfiguration="webHttpBehavior"/>
 </service>
 </services>
 </system.serviceModel>

 <system.web>
 <compilation debug="true" targetFramework="4.0" />
 </system.web>
 <system.webServer>
 <modules runAllManagedModulesForAllRequests="true"/>
 </system.webServer>

</configuration>

2. Create an ASP.NET project
Inside an aspx page add the below code.

 <script type="text/javascript">
 
 
 $(document).ready(function () {
 GetEmployee();
 //GetEmployee1();
 });


 //using getJson
 function GetEmployee() {

 $.getJSON('http://localhost:55973/Service1.svc/GetCustomer?callback=?', null, function (customers) {
 alert(customers.Name);
 });
 }

 //using ajax

 function GetEmployee1() {
 $.ajax({
 url: 'http://localhost:55973/Service1.svc/GetCustomer?callback=?',
 type: "GET",
 data: "{}",
 dataType: "jsonp",
 jsonpCallback: "localJsonpCallback"
 });
 }

 function localJsonpCallback(json) {
 alert('From ajax'+json.Name); 
 }
 

 </script>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s