CODEWITHSUNDEEP
javascriptjqueryasp.netweb-servicesjsonp
RoastBeast
RoastBeast

Reputation: 1115

ASP.NET cross domain web service call error using jquery and jsonp

my problem is very similar to the one described here.

however, in my case I am getting the 500 Internal Server Error in firebug:

Request format is unrecognized for URL unexpectedly ending in '/HelloWorld'.

my asp.net 4.0 web service call is cross-domain, and from going over a dozen other web sites' advice I believe that I have configured everything in order to allow this to happen correctly, but obviously I have not. what am I doing wrong?

I am using JSONP instead of JSON. the web service works as expected if everything is on the same server. my problem is that the hosting provider for the html page that calls the web service does not allow server-side code, otherwise i'd just put everything in one place and be done with it!

below is my code/markup:

web.config:

<?xml version="1.0"?>
    <configuration>
  <system.webServer>
    <httpErrors errorMode="Detailed"></httpErrors>
    <asp scriptErrorSentToBrowser="true"></asp>
    <modules>
      <add name="ContentTypeHttpModule"
                    type="ContentTypeHttpModule.ContentTypeHttpModule, ContentTypeHttpModule" />
    </modules>
  </system.webServer>
  <system.web>
    <customErrors mode="Off"></customErrors>
    <compilation debug="true" targetFramework="4.0"/>
    <trust level="Full"/>
    <pages clientIDMode="Static"/>
    <webServices>
      <protocols>
        <add name="HttpGet"/>
        <add name="HttpPost"/>
      </protocols>
    </webServices>
    <!--<httpModules>
      <add name="ContentTypeHttpModule"
                    type="ContentTypeHttpModule.ContentTypeHttpModule, ContentTypeHttpModule" />
    </httpModules>-->
  </system.web>
</configuration>

html file javascript:

function test() {
            $.ajax({
                url: 'http://designonlinelettering.com/RenderImage.asmx/HelloWorld',
                data: {},
                contentType: "application/json; charset=utf-8",
                dataType: "jsonp",
                success: function (result) {
                    var data = result.d;
                    alert(data);
                },
                error: function (e) {
                    alert('error: ' + e.d);
                }
            });
        }

web service code:

[WebMethod]
[ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]
public string HelloWorld()
{
return "Hello World";
}

the ContentTypeHttpModule code was taken from this very informative blog, from which I got most of my direction.

thanks for any help...

Upvotes: 1

Views: 1870

Answers (1)

Tracker1
Tracker1

Reputation: 19344

As mentioned, if you view http://designonlinelettering.com/RenderImage.asmx/HelloWorld in a browser you will see the error. adding a ?callback=x doesn't help. It will only return JSON for a POST request with the data/response types set properly.

ASMX is problematic and won't return JSON for GET requests... your best bet is to use an ASHX, and Response.Render the JSON (I would recommend using JSON.Net for the encoder).

...
using Newtonsoft.Json;
using Newtonsoft.Json.Converters;
using Newtonsoft.Json.Linq;
...
  var ret = JsonConvert.SerializeObject(
    objectToReturn
    ,new IsoDateTimeConverter()
    ,new DataTableConverter()
    ,new DataSetConverter()
  );
  //only need the datatable, and dataset converters if you're returning those types

  //jsonp should have a callback on the querystring, in your jquery
  // request append  "pathto.ashx?callback=?"
  context.Response.ContentType = "application/javascript";
  context.Response.Write(string.format(
    "{0}({1});"
    ,context.Request.QueryString["callback"]
    ,ret
  ));
...

Upvotes: 1

Related Questions