I have a WCF service hosted in IIS and returns JSON data properly when called through a browser.
I'm trying to consume the service via Jquery Ajax call. Both WCF and Jquery app are in same domain.
I have checked comments for a similar question :
Consuming a WCF Service in jQuery via AJAX Call in a different Project (Cross Domain) , unfortunately i could solve my problem from above.
My WCF Service Web.config
<system.serviceModel>
<services>
<service name="MyWCFService.Service1" behaviorConfiguration="MyWCFService.Service1Behavior">
<endpoint address="Service1"
binding="basicHttpBinding"
contract="MyWCFService.IService1"/>
<endpoint address="../Service1.svc"
binding="webHttpBinding"
contract="MyWCFService.IService1"
behaviorConfiguration="webBehaviour" />
</service>
</services>
<behaviors>
<serviceBehaviors>
<behavior name="MyWCFService.Service1Behavior">
<serviceMetadata httpGetEnabled="true"/>
<serviceDebug includeExceptionDetailInFaults="false"/>
</behavior>
</serviceBehaviors>
<endpointBehaviors>
<behavior name="webBehaviour">
<webHttp/>
</behavior>
</endpointBehaviors>
</behaviors>
</system.serviceModel>
Method Signature:
[OperationContract]
[WebInvoke(Method = "GET", ResponseFormat = WebMessageFormat.Json, BodyStyle = WebMessageBodyStyle.Wrapped, UriTemplate = "GetEmployeeIDs/{value}")]
List<Employee> GetEmployeeIDs(String value);
Employee Class :
[DataContract]
public class Employee
{
[DataMember]
public string ID { get; set; }
}
Data returned when i hit below URL from broswer
URL : http://MyServerDSN.com/MyWCFService/Service1.svc/GetEmployeeIDs/23984
Result from Browser :
{"GetEmployeeIDsResult":[{"ID":"239840"},{"ID":"239841"},{"ID":"239842"},{"ID":"239843"},{"ID":"239844"},{"ID":"239845"},{"ID":"239846"},{"ID":"239847"},{"ID":"239848"},{"ID":"239849"}]}
Jquery Call:
function Call_WCF_JSON() {
var result = ""
var ArgValue = '23984';
$.getJSON("http://MyServerDSN.com/MyWCFService/Service1.svc/GetEmployeeIDs/23984", {},
function(data) {
alert(data);
console.log(data);
});
//GetEmployeeIDs is a function which has Value as String Argument
$.ajax({
type: "GET",
url: "http://MyServerDSN.com/MyWCFService/Service1.svc/GetEmployeeIDs",
async: false,
data: '{"value":"' + ArgValue + '"}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
var oObj;
oObj = jQuery.parseJSON(data);
alert(oObj);
console.log(oObj);
var oRealObj;
oRealObj = jQuery.parseJSON(oObj.GetEmployeeIDsResult);
alert(oRealObj);
console.log(oRealObj);
},
failure: function (response) {
alert(response);
console.log(response);
}
});
}
Edit 1 : Entire App is recreated with below code
Webconfig File with Single JSON Binding
<?xml version="1.0"?>
<configuration>
<system.web>
<compilation debug="true" targetFramework="4.0" />
</system.web>
<system.serviceModel>
<services>
<service name="Emp_JSON_Srvc.Service1" behaviorConfiguration="Emp_JSON_Srvc.Service1Behavior">
<endpoint address="../Service1.svc"
binding="webHttpBinding"
contract="Emp_JSON_Srvc.IService1"
behaviorConfiguration="webBehaviour" />
</service>
</services>
<behaviors>
<serviceBehaviors>
<behavior name="Emp_JSON_Srvc.Service1Behavior">
<serviceMetadata httpGetEnabled="true"/>
<serviceDebug includeExceptionDetailInFaults="false"/>
</behavior>
</serviceBehaviors>
<endpointBehaviors>
<behavior name="webBehaviour">
<webHttp/>
</behavior>
</endpointBehaviors>
</behaviors>
</system.serviceModel>
<system.webServer>
<modules runAllManagedModulesForAllRequests="true"/>
</system.webServer>
</configuration>
Interface Code:
namespace Emp_JSON_Srvc
{
[ServiceContract]
public interface IService1
{
[OperationContract]
[WebInvoke(Method = "GET", ResponseFormat = WebMessageFormat.Json, BodyStyle = WebMessageBodyStyle.Wrapped, UriTemplate = "GetEmployeeIDs/{value}")]
List<Employee> GetEmployeeIDs(String value);
}
[DataContract]
public class Employee
{
[DataMember]
public string ID { get; set; }
}
}
Service Class
namespace Emp_JSON_Srvc
{
public class Service1 : IService1
{
public List<Employee> GetEmployeeIDs(String value)
{
List<Employee> results = new List<Employee>();
results.Add(new Employee() { ID = "239840" });
results.Add(new Employee() { ID = "239841" });
results.Add(new Employee() { ID = "239842" });
results.Add(new Employee() { ID = "239843" });
results.Add(new Employee() { ID = "239844" });
return results;
}
}
}
Result when i type URL in Browser
URL : http://localhost:60529/Service1.svc/GetEmployeeIDs/98
(I have fixed the port number in Visual Studio. hence it wont change for each run)
{"GetEmployeeIDsResult":[{"ID":"239840"},{"ID":"239841"},{"ID":"239842"},{"ID":"239843"},{"ID":"239844"}]}
Javascript to Consume Json
function Call_WCF_JSON() {
var result = ""
alert('Method 1 : Start');
$.getJSON("http://localhost:60529/Service1.svc/GetEmployeeIDs/98", {},
function (data) {
alert(data);
console.log(data);
});
alert('Method 2 : Start');
var query = { sValue: '98' };
$.ajax({
type: "POST",
url: "http://localhost:60529/Service1.svc/GetEmployeeIDs/98",
data: JSON.stringify(query),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
alert("Method 2 : Success");
/*
for (var i = 0; i < data.length; i++) {
alert(data[i].Name);
}
*/
},
error: function (e) {
alert('Method 2 : Error');
alert('Method 2 : --> ' + e.responseText);
}
});
alert('Method 3 : Start');
var value = '98'
$.ajax({
type: "GET",
url: "http://localhost:60529/Service1.svc/GetEmployeeIDs/98",
cache: false,
data: JSON.stringify(value),
contentType: "application/json; charset=utf-8",
dataType: "json",
processData: true,
success: function (msg) {
alert("Method 3 : Success");
alert(JSON.stringify(msg));
},
error: function (err) {
alert('Method 3 : Error');
}
})
alert('Method 4 : Start');
var ArgValue = '98';
$.ajax({
type: "GET",
url: "http://localhost:60529/Service1.svc/GetEmployeeIDs",
async: false,
data: '{"value":"' + ArgValue + '"}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
alert("Method 4 : Success");
var oObj;
oObj = jQuery.parseJSON(data);
alert(oObj);
console.log(data);
var oRealObj;
oRealObj = jQuery.parseJSON(oObj.GetHostServersResult);
alert(oRealObj);
console.log(oRealObj);
//alert(data.GetHostServersResult[0].Name);
},
failure: function (response) {
alert('Method 4 : Error');
alert(response);
}
});
}
and the result i get from javascript is
Method 1 : Start
Method 2 : Start
Method 2 : Error
Method 2 : --> undefined
Method 3 : Start
Method 3 : Error
Method 4 : Start
any suggestions are appriciated.
Thank you !!
Check the 