I have found tons of articles and posts about making jquery ajax calls to WCF services. I cannot seem to find one good tutorial for doing this in .net 4.5. I have found an msdn blog post that claims to allow you to do it, but it does not work. Below is what it claims is all you need to change in your web.config and everything else can be left as the basic template code it comes with.
<services>
<service name="WcfServiceAjax.Service">
<endpoint address="ajaxEndpoint" behaviorConfiguration="AjaxBehavior"
binding="webHttpBinding" bindingConfiguration="AjaxBinding"
contract="WcfServiceAjax.IService"></endpoint>
<host>
<baseAddresses>
<add baseAddress="http://localhost:62069"/>
</baseAddresses>
</host>
</service>
When I try to invoke the service either directly using this
http://localhost:62069/Service.svc/GetData
I just get a 404 error
when I try invoking it with
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$.ajax({
type: "POST",
url: "Service.svc/GetData",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
alert(msg.d);
},
error: function () {
alert('eh, fack!');
}
});
</script>
I get "Failed to load resource". I really am just looking for a single easy to follow tutorial on how to call a WCF service with jQuery ajax in .net 4.5. I understand there are a lot of posts like this one, but I have yet to find one targeting 4.5 directly.
Thank you
I think the 404 error is because your ajax call calls Service.svc/GetData
whereas your service is made available at the endpoint address: <endpoint address="ajaxEndpoint"
Related
Im calling my wcf service from dojo and am getting the unable to load error 500. When I test the service using WCF test client in visual studio it works fine. I'm making the call to WCF Service using dojo xhr get:
Module calling service:
define(['dojo/store/Memory', 'dojo/_base/xhr', "dojo/data/ObjectStore"],
function (Memory, xhr, ObjectStore) {
return {
GetReaches: function (url) { //url is: "http://localhost:54052/FormTest/proxy.ashx?http://localhost:57735/Service1.svc/GetReaches/"
xhr.get({//get data from database
url: url,
handleAs: "json",
load: function (result) {
ReachData = result.GetReachesResult;
},
error: function (err) { }//500 error caught
});
} //GetReaches
}
});
I'm not passing any parameters to the service so it cant be a wrong data type being passed to the function. Any ideas of what else could be the problem?
Thanks
Pete
Finally got it to work, I had left this important item out of the web.config file:
<services>
<service name="SARIService.Service1" behaviorConfiguration="ServiceBehavior">
<endpoint address="" binding="webHttpBinding" contract="SARIService.IService1" behaviorConfiguration="web">
</endpoint>
</service>
</services>
I have two projects, one is WCF Service, which is to speak a text/sentence in a text box.
public class Service1 : IService1
{
public string RunTts(string text)
{
using (SpeechSynthesizer synth = new SpeechSynthesizer())
{
// Configure the audio output.
synth.SetOutputToDefaultAudioDevice();
synth.Speak(text);
return "";
}
}
}
Then I call it with ajax in the _Layout.cshtml page in the second project, which is asp.net mvc.
<script type="text/javascript">
function ttsFunction() {
serviceUrl = "Service1.svc/RunTts";
$.ajax({
type: "POST",
url: serviceUrl,
data: '{"text": "' + $('#speak').val() + '"}',
contentType: "text/xml; charset=utf-8",
dataType: "text/xml",
error: function (xhr,status,error) {
console.log("Status: " + status); // got "error"
console.log("Error: " + error); // got "Not Found"
console.log("xhr: " + xhr.readyState); // got "4"
},
statusCode: {
404: function() {
console.log("page not found"); // got
}
}
});
}
</script>
Because I got 404 error, so I think the url is wrong. Please see the structure of files, the web reference is called 'ServiceReference1' I guess.
As shown in your screenshot, the service is not hosted in your web application. You cannot access such a service (hosted outside of your web application) directly from the client side, because you're violating the same origin policy restriction. It's one of the underlying concepts of trust, on which web security is based on (e.g. protection aganist XSS) - you cannot send cross domain AJAX requests. This essentially states that if content from one site (e.g. https://bank.ny.com) is granted permission to access resources on the system, then any content from that site will share these permissions, while content from another site (https://nsa.ny.com) will have to be granted permissions separately (in general, the term origin is defined using the domain name, application layer protocol, and port number).
Nevertheless, you have at least 4 solutions to solve your problem:
First - talk to your service through the middle-controller layer. Going this way implies to have proxy class generated (by svcutil.exe, what you have done by adding service reference using Visual Studio). Communication with this client looks like below:
public class TtsController
{
public JsonResult RunTts(string text)
{
using(var client = new ServiceReference1.Service1Client())
{
var response = client.RunTts(text);
return Json(response);
...
The JavaScript side should then use such an URL: var serviceUrl = "/Tts/RunTts" (along with proper JSON data passing to the AJAX request, which I'll go through a bit further).
Second - talk directly to the service. If you want to communicate directly with the service, you have to host this service in your web application. The correct WCF configuration should be followed to support RESTful services:
<system.serviceModel>
<behaviors>
<endpointBehaviors>
<behavior name="webby">
<webHttp />
</behavior>
</endpointBehaviors>
<serviceBehaviors>
<behavior>
<serviceMetadata httpGetEnabled="true" />
</behavior>
</serviceBehaviors>
</behaviors>
<services>
<service name="Namespace.Service1">
<endpoint address=""
behaviorConfiguration="webby"
binding="webHttpBinding"
contract="Namespace.IService1" />
</service>
</services>
</system.serviceModel>
For a RESTful endpoint, the binding you should use is WebHttpBinding along with appropriate behavior. Alternatively there is configuration-free experience for many RESTful services - WebServiceHostFactory. Your .svc file should look like below (MSDN):
<%# ServiceHost Language="C#" Debug="true" Service="Namespace.Service1"
CodeBehind="Service1.svc.cs"
Factory="System.ServiceModel.Activation.WebServiceHostFactory" %>
WebServiceHostFactory creates an instance of the WebServiceHost, and since the WebServiceHost will auto-configure the endpoint using WebHttpBinding and related behavior, there doesn't need to be any configuration for this endpoint in the web.config at all (of course, if you need to customize the binding, you have to use the configuration) (MSDN).
Then to access the service use appropriate full URL: http://localhost:[port]/Service1.svc/RunTts or relative one: /Service1.svc/RunTts.
Since you're using ASP.NET MVC, based on your routes definitions, the request will dispatched to some controller, where such an action doesn't exist. You have to tell MVC to ignore route to your service:
routes.IgnoreRoute("{resource}.svc/{*pathInfo}");
(BTW: If you put your .svc file under different directory within your application, modify respectively URL and route to ignore.)
Your code needs some additional fixes:
If you want to send message in JSON format, specify dataType and contentType parameters correctly:
$.ajax({
url: serviceUrl,
type: "POST",
dataType: "json",
contentType: "application/json; charset=utf-8",
...
Do not construct your JSON strings manually, as it can lead to further parsing errors - use converters e.g.:
var data = new Object();
data.text = $('#speak').val();
var jsonString = JSON.stringify(data);
$.ajax({
...
data: jsonString,
...
Provide additional declarative information to your service:
[ServiceContract]
public interface IService1
{
[OperationContract]
[WebInvoke(Method = "POST", RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json, BodyStyle = WebMessageBodyStyle.Wrapped)]
string RunTts(string text);
...
Remove service reference from the project. You don't need it as there is no usage of middle-controller here.
Third - JSONP (look here and here) can be used to overcome origin policy restriction. But you can't POST using JSONP because it just doesn't work that way - it creates a <script> element to fetch data, which has to be done via GET request. JSONP solution doesn't use XmlHttpRequest object, so it is not an AJAX request in the standard way of understanding, but the content is still accessed dynamically - no difference for the end user.
$.ajax({
url: serviceUrl,
dataType: "jsonp",
contentType: "application/json; charset=utf-8",
data: data,
...
[OperationContract]
[WebGet(RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json, BodyStyle = WebMessageBodyStyle.Wrapped, UriTemplate="RunTts?text={text}")]
public string RunTts(string text);
RESTful WCF configuration with cross domain requests allowed:
<system.serviceModel>
<bindings>
<webHttpBinding>
<binding name="jsonp" crossDomainScriptAccessEnabled="true" />
</webHttpBinding>
</bindings>
<behaviors>
<endpointBehaviors>
<behavior name="webby">
<webHttp />
</behavior>
</endpointBehaviors>
<serviceBehaviors>
<behavior>
<serviceMetadata httpGetEnabled="true" />
</behavior>
</serviceBehaviors>
</behaviors>
<services>
<service name="Namespace.Service1">
<endpoint address=""
behaviorConfiguration="webby"
binding="webHttpBinding"
bindingConfiguration="jsonp"
contract="Namespace.IService1" />
</service>
</services>
</system.serviceModel>
Fourth - CORS. Implemented in modern browsers alternative to JSON with Padding.
I am developing a mobile application using PhoneGap and jQuery Mobile. My aim is to create a web service which will enable the client (mobile) to query against a database.
After some research, I found out that AJAX Enabled Services might be what I was looking for.
So, I began by creating an AJAX-Enabled WCF Service and for now I added only the following method:
[OperationContract]
[WebInvoke(Method = "POST", RequestFormat = WebMessageFormat.Json)]
public string GetString()
{
return "Hello there";
}
My web.config looks like this:
<configuration>
<system.web>
<compilation debug="true" targetFramework="4.0" />
</system.web>
<system.serviceModel>
<behaviors>
<endpointBehaviors>
<behavior name="WebApplication1.MobileServiceAspNetAjaxBehavior">
<enableWebScript />
</behavior>
</endpointBehaviors>
</behaviors>
<serviceHostingEnvironment aspNetCompatibilityEnabled="true"
multipleSiteBindingsEnabled="true" />
<services>
<service name="WebApplication1.MobileService">
<endpoint address="" behaviorConfiguration="WebApplication1.MobileServiceAspNetAjaxBehavior"
binding="webHttpBinding" contract="WebApplication1.MobileService" />
</service>
</services>
</system.serviceModel>
</configuration>
After finishing off this service, I called from the client using the following method:
$.ajax({
type: "POST",
url: "http://localhost:11634/MobileService.svc/GetString",
contentType: "application/json",
data: "{}",
dataType: "json",
success: function (result) {
$("#textbox").text(result);
},
error: function (textStatus) {
alert(textStatus);
}
});
When calling the service, I am getting the following error [object Object]. Can you guide me on what am I doing wrong and whether I am using the right technologies please?
As Tariqulazam rightly points out [Object object] is not an error but a response object. To access the data you could modify your code to read:
success: function (result) {
var data = result.d
$("#textbox").text(data);
},
If you want to see a text-book example the following looks like a good example of jQuery code which consumes a WCF web-service:
Consuming WCF service using jQuery
Hope this helps!
You need to wrap your
$.ajax({ ... })
inside a function call. That way on a specific action it is called.
Since you are not passing parameters, I would change this to a GET call instead and remove the data portion of the ajax call. Also the way you were returning it was in XML format, change the response format to JSON
[OperationContract]
[WebGet(UriTemplate = "/GetString", RequestFormat = WebMessageFormat.Json)]
public string GetString()
{
return "Hello there";
}
$.ajax({
type: "GET",
url: "http://localhost:11634/MobileService.svc/GetString",
contentType: "application/json",
dataType: "json",
success: function (result) {
$("#textbox").text(result);
},
error: function (textStatus) {
alert(textStatus);
}
});
i've built a WCF web application , exposed it's method into get enabled methods
[OperationContract]
[WebGet]
string getStatistics();
[OperationContract]
[WebGet]
string getVenues(string BrandName, int limit);
and edited the config file :
<endpoint address="json" binding="webHttpBinding" contract="foursquare2RDF.IVenue2rdf" behaviorConfiguration="restBehavior"/>
and in the service behavior :
<endpointBehaviors>
<behavior name="restBehavior">
<enableWebScript/>
</behavior>
</endpointBehaviors>
i hosted the service on the IIS , and it works very fine from the browser so when u hit :
http://localhost:83/venue2rdf.svc/json/getStatistics
it returns a good results
the problem is i can't consume this restful service from if shows those errors :
OPTIONS http://localhost:83/venue2rdf.svc/json/getStatistics?{'venues':'100'} 405 (Method Not Allowed)
XMLHttpRequest cannot load [http://localhost:83/venue2rdf.svc/json/getStatistics][1]. Origin null is not allowed by Access-Control-Allow-Origin.
i'm using that code to call the service :
$.ajax({
type: "get",
url: statisticsURL,
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
eval("var x = " + msg.d);
console.log(x);
}
});
what ive reached so far :
i tried replacing $.ajax with $.getjson like stated in similar question
and the error 405 was removed , the second error just appears
i've found something called Ajax enabled WCF service project , but still i don't want to migrate in to a new project
i know there are similar questions but all don't fit , showing different errors that mine
You should probably make it a JSONP request since your going cross domain, you running into the same origin policy:
$.getJSON(stastatisticsURL + "?callback=?", success: function (msg) {
eval("var x = " + msg.d);
console.log(x);
});
the ?callback=? part tels jquery to make it JSONP. I advise you to read up on what JSONP is since it isn't a silver bullet. To enable JSONP on WCF services read:
C# WCF Web API + JSONP
For you to consume a cross domain WCF REST service using jQuery please find a sample below:
My Service looks as below:
[ServiceContract]
public interface IJSONPService
{
[OperationContract]
[WebGet]
string GetDate();
[OperationContract]
[WebInvoke]
string PostData(string name);
}
Now my config entries for the above service looks as shown:
<services>
<service name="Service.JSONPService">
<endpoint address="" binding="webHttpBinding" behaviorConfiguration="json" bindingConfiguration="defaultRestJsonp" contract="Service.IJSONPService">
</endpoint>
</service>
</services>
<behaviors>
<endpointBehaviors>
<behavior name="json">
<enableWebScript />
</behavior>
</behaviors>
</endpointBehaviors>
<webHttpBinding>
<binding name="defaultRestJsonp" crossDomainScriptAccessEnabled="true">
<readerQuotas maxStringContentLength="2147483647" maxArrayLength="2147483647" maxBytesPerRead="2147483647" maxDepth="64" maxNameTableCharCount="2147483647" />
<security mode="None" />
</binding>
</webHttpBinding>
You need to note the crossDomainScriptAccessEnabled attribute in the binding element "defaultRestJsonp" which takes care of determining the request to be for JSONP and appropriately converting the response to be wrapped in the callback method from the URL which comes as a query string
Now from your page do the below JavaScript that calls the above WCF REST service as shown:
function TestingWCFRestWithJsonp() {
$.ajax({
url: "http://domain.com/Service/JSONPService.svc/GetDate",
dataType: "jsonp",
type: "GET",
timeout: 10000,
jsonpCallback: "MyCallback",
success: function (data, textStatus, jqXHR) {
alert(data);
},
error: function (jqXHR, textStatus, errorThrown) {alert('error');
},
complete: function (jqXHR, textStatus) {alert('complete');
}
});
}
function MyCallback(data) {
alert(data);
}
Check out the jsonpCallback property in the $.ajax method call.
The raw request to the web service call looks as below:
GET http://localhost/Service/JSONPService.svc/GetDate?callback=MyCallback&_=1343391683779 HTTP/1.1
Host: localhost
Connection: keep-alive
And the raw response from the WCF REST service looks as below:
HTTP/1.1 200 OK
Cache-Control: private
Content-Type: application/x-javascript
Date: Fri, 27 Jul 2012 12:21:23 GMT
Content-Length: 27
MyCallback("27\/07\/2012");
NOTE: When you perform a JSONP request your $.ajax methods error/complete/success are not called.
I have a WCF service that I need to run over SSL, I am calling it from a webpage (using jQuery) which may or may not be a secure page. The problem is, if I make the call from a secure webpage on my site, the call runs exactly how I would expect...however, if I make the call from a non-secure page on my site, to the secure web service (using "https://" ;) ) it returns null data (via Firebug). Anything I'm missing? Is this even possible?
Here is the configuration of the service I'm calling (I'm more than happy to provide more stuff if needed):
<behaviors>
<endpointBehaviors>
<behavior name="AspNetAjaxBehavior">
<webHttp/>
</behavior>
</endpointBehaviors>
</behaviors>
<services>
<service name="ClientServices.Membership" behaviorConfiguration="ServiceGatewayBehavior">
<endpoint address="" behaviorConfiguration="AspNetAjaxBehavior" bindingConfiguration="SecureBinding"
binding="webHttpBinding" contract="ClientServices.Membership" />
</service>
</services>
<bindings>
<webHttpBinding>
<binding name="SecureBinding">
<security mode="Transport"/>
</binding>
</webHttpBinding>
</bindings>
Here is the code that calls the service:
$.ajax({
url: serviceUrl,
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: '{"review":{"Username":"' + username + '"}}',
success: function (data) {
$.log(data);
},
error: function (a, b, c) {
$.log(b);
},
cache: false
});
UPDATE
If I change the service call method to "GET" and call it directly over SSL it works fine and outputs the jSon that I would expect. It's only inside the non-secure page where the problem persists.
Assuming both site and service are both at yourdomain.com, then my first thoughts would be that when on the non-secure page, your browser is not attaching the cookie it has for the site domain and so when it calls the service, it isn't authenticated.
Have you used Fiddler to look at the raw HTTP header data and more importantly, what differs in this data when on the working and not-working page?
Luke