CODEWITHSUNDEEP
asp.net-mvcwcf
nishantcop
nishantcop

Reputation: 1017

Consume WCF Rest Service in ASP.net using jquery

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.

Upvotes: 0

Views: 1704

Answers (2)

Darin Dimitrov
Darin Dimitrov

Reputation: 1039238

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);
}

Upvotes: 1

user1968030
user1968030

Reputation:

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

Upvotes: 1

Related Questions