I have a small webservice written in C# and WCF.
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class Service1 : System.Web.Services.WebService
{
[WebMethod]
public string HelloWorld()
{
return "Hello Worlds";
}
}
I have a little jQuery code;
$.support.cors = true;
$.ajax({
type: "POST",
url: "http://localhost:61614/Service1.asmx/HelloWorld",
data: '{}',
dataType: "json",
success: function (msg) {
alert(0);
}, error: function (a, b, c) { alert("Err:" + c );
}
});
This calls the webservice. There are no problems making the call, but it errors out on the return.
The webservice is in one application, and the Web page is simply an HTML page on it's own. Eventually, the HTML will be used within PhoneGap.
I have tried all sorts of things.
Adding in contentType: "application/json; charset=utf-8", causes the whole call to fail.
Using dataType: 'jsonp" causes call to fail.
Basically, the above calls the WS but errors out on return which is weird.
My requirement is that I need to return a JSON object from the webservice, and it has to work in Safari.
Does anyone have complete sample code of a JSONP call?
From jQuery getJSON:
If the URL includes the string "callback=?" (or similar, as defined by the server-side API), the request is treated as JSONP instead. See the discussion of the jsonp data type in $.ajax() for more details.
In order for your request to be treated as a JSONP request, you need to include callback=? in your URL. This tells jQuery to create a callback function and pass the name of that function as the callback parameter to your server.
In the server-side code, your method must then return JSON code wrapped, or padded, with the name of the JavaScript function passed in as the callback parameter in the query string.
Essentially, what you're doing is returning JavaScript to the client browser, which runs immediately, and invokes a function already defined in the context of the page.
JavaScript:
$.getJSON("http://localhost:61614/Service1.asmx/HelloWorld?callback=?",
function(data) {
// alert raw JSON data
alert(JSON.stringify(data));
// access the "say" property and alert it
alert(data.say);
}
);
Server-Side:
This is a crude version of what you'd need to do on the server-side:
// get the callback parameter value and assign to the String callback
...
return callback + "( { 'say' : 'HelloWorld' } );";
Further technical explanation of what is happening under the hood:
While this is not something you need to know today, this may help you understand more about how jQuery is implementing JSONP.
This evaluates to something that might look like this:
return "jquery43214321432143242({'say':'HelloWorld'});"
where jquery43214321432143242 is the random name given for your success callback function. Again, since the returned text is returned using text/javascript, it runs immediately, passing the {'say':'HelloWorld'} object in as a parameter to the function.
The resulting output should be an alert message representing the raw JSON, and the words "HelloWorld", pulled from the .say property.
Related
I have done a web service using Visual Studio 2012 into C#.
I'm usually use SOAP but now I need to use JSON.
So I've used this code to create a SOAP method:
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public string test()
{
var testArray = new List<clienti>();
testArray.Add(new clienti() {nome = "Mark", cognome = "Reed", email = "mark.reed#test.com"});
var serializer = new JavaScriptSerializer();
return serializer.Serialize(testArray);
}
Can I call this method directly from an URL?
(that is the real goal that I want to obtain)
A stuff like this: http://ws.mysite.com/serice1.asmx/test.
If I try to type the URL with the name of the method after the slash not return data but an error on the URL format!!!
In debug mode all works perfectly if I click the button method
So the answer to your question is Yes I believe, but let's start for sure with an Ajax scenario that 100% works.
Something I want to clarify for you though, your "test()" method in service1.asmx is not a "Soap method" as you called it. Its a "Web Service method" and it returns JSON. It is callable using HTTP protocol or SOAP protocol. Because you added the [ScriptMethod] to the Web Method you can now call it using an HTTP Get request. If you remove the [ScriptMethod] attribute, you can only call "test()" with an HTTP POST request or a SOAP request.
The following jQuery Ajax call will work with service1.asmx/test:
$.ajax({
type: "POST",
url: "Service1.asmx/test",
data: "{ ifTestHadAParameter: 'hello world'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
var myData = JSON.parse(data.d); // data.d is a JSON formatted string, to turn it into a JSON object
// we use JSON.parse
// now that myData is a JSON object we can access its properties like normal
}
});
If you are using ASP.NET 3.5 or below, ASP.NET Web Services wrap JSON responses to HTTP Get and Post requests in an outer JSON {} to project against a certain type of hacking. Hence the data.d in my jQuery Ajax code snippet. If you using ASP.NET > 4.0 then, in your success function data contains your response from service1.asmx/test, no data.d required.
Now to call http://ws.mysite.com/serice1.asmx/test, this will not work in a "browser" as you say but you probably ultimately do not want to use the URL in a browser, that is just how you stated your question for simplicity.
You need to format your Get request correctly with http://ws.mysite.com/serice1.asmx/test.. So in C#, using the HTTPRequest .NET lib you should be able to prepare a proper HTTP Get Request to call your Web Services URL, basically simulating a browser request in your C# code if you have the right contentType in your Get request header.
A great tool to use for this problem is called Fiddler, you can easily create HTTP Get requests and change the content type.
No as asmx webservices have no router's like webapi or MVC best create a webapi project, add a controller with empty read write methods and return your array in there it will serialize automatically in JSON,XML or BSON default JSON (you can change this in the accept header in you client request) example method
public class mycontroller: ApiController
{
public string Get()
{
var testArray = new List<clienti>();
testArray.Add(new clienti() {nome = "Mark", cognome = "Reed", email = "mark.reed#test.com"});
return testArray ;
}
you can access the url like this site/api/controller
I am having unexplained behavior when I post from jquery using ajax to C#.
1) The main page is called not the method I am requesting in jQuery.
To work around this I simply put an if in the page load so that if a particular item is in the querystring it will trigger a series of commands. It does hit that if statement and runs the code perfectly fine. There are some methods that do things like change a color on the map. These never actually happen. I can set a label and it will pass right over it but the label remains unset.
2) strangely enough.... my page has a timer with a refresh on it. It refreshes the page and now the changes are processed.
Here is the way I am calling my method in jQUery:
function mycmethod(param)
{
//alert(precinct);
$.ajax({
url: "myPage.aspx/someMethod",
type: 'POST',
data: "params=" + param,
success: function iGotData(responseJSON) {
// alert("Worked");
},
error: function (xhr, status, errorThrown) {
console.log("Error: " + errorThrown);
console.log("Status: " + status);
console.log(xhr);
alert("Didnt work:" + errorThrown);
},
})
};
It was originally set to async: true but that didn't make a difference.
The method its not calling on load is:
[WebMethod][ScriptMethod]
public Boolean someMethod(string param)
{
setFeatures();
GenerateMap();
return true;
}
I doubt its relevant but I am calling a jquery call with over mouse over of a specific element. That jquery calls a function which calls a asmx web service that returns some jSON. I am calling the mycmethod after the JSON is returned.
Why is my UI elements not responding until the page refreshes. If not, is there a way I can force a refresh like the timer does?
[WebMethods] methods should be declared as static.
I've also found that you might need to specify the content type in your ajax call:
contentType: "application/json; charset=utf-8"
Also, your data option looks suspicious. Maybe you should append it to the url option:
url: "myPage.aspx/someMethod?params" + parm
or, more ideally, send it as either a JSON object or a JSON string:
data: {
params: param
}
or
data: JSON.stringify({
params: param
})
If I understand you correctly, you're loading the page, then calling the server via ajax and expecting the server to change UI elements of the currently loaded page.
It doesn't work like that, unfortunately. Once you've served the page, the server itself cannot manipulate that page without doing a refresh/post back (or something along those lines).
If you want to update the UI without doing a refresh/post back you can have your WebMethod return HTML, and your jQuery success method can update the relevant controls.
Alternatively you could use jQuery's .get() to retrieve a fresh copy of the page via ajax, and update your current page like that. (although it's less efficient)
I'm doing a project for college where one WebSite sends commands to a Windows Forms application. This application is responsible for access to serial port and send and receive commands.
Communication between the Website and the Windows Forms application, I used Web Api, however after publishing, auditioning remembered that the localhost in a C # WebSite. Net's own site and not my Windows Forms application.
I changed the call to the Web Api directly use Ajax and not a controller.
In the examples I found I saw that I use JSONP, but I can not read the results and use it on my website.
The calling code and return seen by Chrome are below
function cmdLocal() {
$.ajax({
type: "GET",
dataType: "jsonp",
url: "http://local host:8089/api/gps/",
jsonpCallback: "cmdTorre",
jsonp: "cmdTorre"
});
}
function cmdTorre(data) {
alert(data);
}
Response Header
Content-Length:10
Content-Type:application/json; charset=utf-8
Date:Tue, 10 Jun 2014 11:18:30 GMT
Server:Microsoft-HTTPAPI/2.0
Response
No Properties
Windows Forms APIController
namespace TCCWindows.Lib
{
public class GPSController : ApiController
{
[HttpGet]
public string Posicao()
{
var coordenada = TCCWindows.FormPrincipal.PegarCoordenadas();
return coordenada.Latitude + "|" + coordenada.Longitude + "|" + coordenada.Altitude;
}
}
}
First, you ajax call looks overly complicated try replacing it with :
function cmdLocal() {
$.ajax({
type: "GET",
dataType: "jsonp",
url: "http://local host:8089/api/gps/",
success: cmdTorre,
error: function(err){
alert("You have a error"+err);
}
});
}
function cmdTorre(data) {
alert(data);
}
Please validate the new code carefully. I just typed it in here so can have errors. If this runs at this point you should probably see the error message. That is because your GPSController doesnt seem to be returning a valid JSONP (or JSON for that matter). Please read up on JSONP for more clarification but, I think if you modify your return statement to make it look like following, it should work. Assuming your controller is actually getting called and your network stuff is working:
return "cmdTorre({\"lat\":"+coordenada.Latitude+" , \"lon\":"+coordenada.Longitude+" });"
Basically your return string should look like following when printed on console:
function cmdTorre({
"lat": 23.34,
"lon":34.23,
"alt":50
});
Again I suggest you check the code I wrote for syntax issues as i just typed it up in here, but it should give you the idea.
So problems were:
The return string you are generating is NOT in JSON format
It is also not wrapped in a function call making it a invalid JSONP too.
Lastly my solution should get your code working and JSONP started but its not the right way to do things. Its more of a ugly hack. Your GPS controller should read the HTTP request for parameter called 'callback' which is a accepted convention for JSONP calls. Then instead of hardcoding the function name in the return statement, you should use the value of this callback parameter. Then you dont need to use a specific function like 'cmdTorre' in your jQuery. Instead a anonymus function like success:function(response){...} will work just fine.
Hope that helps.
I have a asp.net asmx service and i would like to convert it to a wcf service.
I'm having problems calling the wcf service from jquery ajax POST request with parameters.
if i call the WCF service without parameters or pass the parameter in a json format it works OK.
When executing the below jquery post to the wcf service i get error 500.
Please note , i cannot change the way the jquery request is made.
Original ASMX Service:
[WebMethod(EnableSession = true)]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public void SendStatus(string param1, string param2)
{
..................
}
jQuery POST:
var d = { param1: 1, param2: 2 };
$.ajax({
type: "POST",
url: "/Service1.asmx/SendStatus",
data: d,
success: function () { }
});
NEW WCF Service:
[OperationContract]
[WebInvoke]
public void SendStatus(string param1, string param2)
{
}
jQuery POST:
var d = { param1: 1, param2: 2 };
$.ajax({
type: "POST",
url: "/Service2.svc/SendStatus",
data: d,
success: function () { }
});
-- EDIT --
I recall this issue drove me nuts once before, so I went back for another look. Sure enough ... Given the requirement that the Javscript remain as written, I maintain that this is literally impossible with the current release of WCF. Consider the following points:
1) You need to use webHttpBinding, because that's the only binding that supports REST style services (basicHttpBinding and WSHttpBinding both use SOAP wrappers). (ref. here: BasicHttpBinding vs WsHttpBinding vs WebHttpBinding)
2) The AJAX call as written in this question uses a content-type of "application/x-www-form-urlencoded" (you can confirm this using Fiddler).
3) You can also confirm that WCF throws an exception before the service method even gets invoked. The exception is as follows:
The body style 'Bare' is not supported by 'WebScriptEnablingBehavior'. Change the body style to be 'WrappedRequest'.
But "bare" body style is Microsoft-speak for a REST request using basic parameters (ie, not "wrapped" in JSON or XML). That is, there is no possible configuration that would allow WCF to handle this specific AJAX request. You can even implement your own WebContentTypeMapper, and it still won't work. This guy is on to them: http://visualstudio.uservoice.com/forums/121579-visual-studio/suggestions/2473190-consider-making-the-system-servicemodel-channels-r
My conclusion is that (given you can't use MVC, which would make this a piece of cake), you need to somehow route this request to a basic .ASPX page, and use the trusty old Webforms methods (Page.IsPostBack, Request.Params["param1"], etc).
-- END EDIT --
Per the other thread above, looks like there are a few parameters you need to add/fix in your AJAX call:
...
dataType: 'json',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify(d)
...
If you can't change the client-side code, you should not migrate these endpoints from ASMX to WCF. WCF uses a different, less-flexible serializer than ASMX and it's likely that you'll run into trouble that can only be resolved by changing how data is sent, received, and/or handled on the client-side.
If you're willing to deal with that turmoil anyway, a much better migration path would be waiting until ASP.NET Web API is shipped and moving to it. If you move to WCF now, you'll just be behind again later this year when Web API is released.
I think you have to pass string parameter values in double quotes (""). Like this:
var d = { param1: "1", param2: "2" };
$.ajax({
type: "POST",
url: "/Service2.svc/SendStatus",
data: d,
success: function () { }
});
Hope this will work.
500 error code means parameter values didn't match with required values.
I have a table where the users are allowed to drag and drop rows in the order they want, and then save them. I have no problem with getting the drag and drop part to work. It's the saving I'm having issues with. I'm sending an Ajax call to a web service which will then make the save. I can't seem to actually catch the request in the web service though.
My JavaScript function looks like so:
$(document).ready(
function () {
$(".sortable").sortable({
update: function () {
serial = $('.sortable').sortable('serialize');
$.ajax({
url: "MyWebService.asmx/SortTable",
type: "post",
data: serial,
error: function () {
alert("theres an error with AJAX");
}
});
}
});
});
The JSON string looks fine from what Firebug is showing me. The web service function is like so:
[WebMethod]
public string SortTable(String[] rows)
{
//SaveChanges();
return "Called!";
}
When I put a breakpoint in there, it never gets hit. When there are no arguments in the function though, it will get hit. I've tried replacing "String[]" with "object" and it still doesn't get hit, which I find odd. What is going on here?
You might need to decorate your web service with the [ScriptService] attribute in order to allow client scripts to invoke it. Also if you are sending a JSON request you need to specify the content type. Another remark is about sending the request as an actual JSON object which could be achieved using the JSON.stringify method (maybe the $('.sortable').sortable('serialize') call already does this, I am not familiar, you just need to ensure that the POSTed value looks like this: [ 'row1', 'row2', ... ]):
$.ajax({
url: 'MyWebService.asmx/SortTable',
type: 'post',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify([ 'row1', 'row2', 'row3' ]),
error: function () {
alert('theres an error with AJAX');
}
});