0

I am trying to consume a wcf rest api in a asp.net project using jquery. for doing so i have done:

  1. Created a WCF Rest service source code can be downloaded from here.
  2. Created a ASP.Net project to consume that restAPI using jquery. source code here.

In ASP .Net project on the click of button I am trying to call a REST service. But every time I gets two issues:

  1. calling var jsondata = JSON.stringify(request); in TestHTML5.js throws an error saying "Microsoft JScript runtime error: 'JSON' is undefined"

  2. When I press ignore it continues towards WCF Rest API call but it always returns error (Not Found) function. Rest API never gets called.

Thanks for every one's help in advance.

ANSWER: Solution and source link can be found on this link.

Jehof
  • 34,674
  • 10
  • 123
  • 155
nishantcop
  • 977
  • 1
  • 8
  • 24
  • What browser and browser version are you testing with? JSON object is not available in IE7 – Tung Mar 02 '13 at 06:39
  • I am using IE9. the same problem doesn't happen for IE10 in Windows 8. It works (No Json error) perfectly fine. – nishantcop Mar 02 '13 at 17:37
  • Make sure that your page is not being rendered in quirks mode, nor in [compability mode](http://www.sevenforums.com/tutorials/1196-internet-explorer-compatibility-view-turn-off.html). If you want to support these modes of operation, then Sharrooz's suggestion should work. See the answer [here](http://stackoverflow.com/questions/5339232/json-is-undefined-error-in-javascript-in-internet-explorer) – Tung Mar 02 '13 at 19:32
  • yeah the first problem seems to work fine now.. I switched to IE10 in windows 8. I am still struggling with the second problem do you have any idea for that? – nishantcop Mar 03 '13 at 02:55

2 Answers2

1

Did u add this reference?

script type="text/javascript" src="../../json.js"></script>

I have same problem and search i get this and this result

  • Thanks it seems to work fine with IE10 (Windows 8) problem I was having with IE9 in win7. However, do you have idea about 2nd problem that seems to be more troublesome. thanks for everyone help in advance – nishantcop Mar 03 '13 at 02:59
1

I have looked at the sample code you provided and the problem is that you are violating the same origin policy restriction. You cannot perform cross domain AJAX calls. In your example the service is hosted on http://localhost:35798 and the web application calling it on http://localhost:23590 which is not possible. You will have to host both the service and the calling application in the same ASP.NET project. You seem to have attempted to enable CORS on the client side using ($.support.cors = true;) but on your service doesn't support CORS.

Another issue saw with your calling page (TestHTML5.htm) is the fact that you have included jquery twice (once the minified and once the standard version) and you have included your script (TestHTML5.js) after jquery. You should fix your script references. And yet another issue is the following line <script type="text/javascript"/> which is invalid.

So start by fixing your markup (I have removed all the CSS noise you had in your markup in order to focus on the important parts):

<!DOCTYPE html>
<html dir="ltr" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>SignUp Form</title>
    <script type="text/javascript" src="../Scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../Scripts/TestHTML5.js"></script>
</head>
<body>
    <button id="Send" onclick="testHTML5OnClick();">
        Send Me ID!
    </button>
</body>
</html>

and then in your TestHTML5.js you could also clean a little bit. For example your service is listening for the following url pattern json/{id} and accepting only GET verbs and you are attempting to use POST which is not possible. In addition to that you are attempting to use the JSON.stringify method which doesn't make any sense with the GET verb. You should simply send the id as part of the url portion as you defined in your service.

function testHTML5OnClick() {
    var id = 5;
    var url = "../RestServiceImpl.svc/json/" + id;
    var type = 'GET';
    callLoginService(url);
}

function callLoginService(url, type) {
    $.ajax({
        type: type,
        url: url,
        success: serviceSucceeded,
        error: serviceFailed
    });
}

function serviceSucceeded(result) {
    alert(JSON.stringify(result));
}

function serviceFailed(result) {
    alert('Service call failed: ' + result.status + '' + result.statusText);
}
Darin Dimitrov
  • 1,023,142
  • 271
  • 3,287
  • 2,928
  • Perfect explanation Darin. It does the magic :-) Very well explained point to point. I am new to all this therefore having all these glitches. I may just come back to check few more things with you later when I am done with my experimentation. for now thanks you a lot for the exact thing I was looking. – nishantcop Mar 03 '13 at 10:11
  • Hi Darin, A quick question is that if we are hosting a WCF based REST API and there is another application (may be in java, or any other platform) which is using simple HTML5 and jquery, can't they take the benefit of this WCF RIA? – nishantcop Mar 03 '13 at 10:33
  • Since your WCF REST service is dealing with interoperable formats such as XML and JSON there's absolutely no problem consuming it from other platforms. – Darin Dimitrov Mar 03 '13 at 10:34
  • Okay.. then in that case if say I am hosting my WCF service say in http://localhost:35798 and I have another application say a pure HTML5 site and want to query this WCF service using jquery, then how should I call that. Say HTML website is an entirely different project. Plz excuse me for these silly questions since I am new to this ASP and HTML thing. – nishantcop Mar 03 '13 at 12:44
  • This is not possible, because you cannot perform cross domain AJAX calls. There are a couple of workarounds which involve enabling `JSONP` (instead of `JSON`) or `CORS` on your REST service side. – Darin Dimitrov Mar 03 '13 at 13:43
  • Thanks Darin! I run into another issue with the same code I posted in link above. I have converted it to target .net 4.0 instead 4.5 so that I can use and run it over XP machine. But when I try to run the code from a XP machine using VS2010, a "internal server" error appears for rest call. Do you have any idea how to fix that. Thanks for your help again i am really sorry to trouble you again n again. – nishantcop Mar 04 '13 at 01:46