ASP.NET MVC3 Mapquest jquery POST request

Question

5.00/5 (1 vote)

See more:

Hi,

Im working on a mapping application using mapquest, and for us to make a call to their server, they recommend the following URL:
(For POST requests)
http://www.mapquestapi.com/directions/v1/route?key=YourKeyGoesHere

For the request, i need 3 parameters:
1. My App Key
2. A location object representing Source
This can be of type: {street: "SourceCity, SourceState"} which is a JSON object.
3. A Destination just as above.

For this purpose, i've written the code as:

$('#submit').click(function () {

           var appKey = 'MyAppKey';
           var source = { street: "Brookings, SD" };
           var destination = { street: "Sioux Falls, SD" };
           var inputFormat = 'json';

           var completeRequest = { key: appKey, locations: [source, destination], inFormat: inputFormat };

           $.ajax({
               url: 'http://www.mapquestapi.com/directions/v1/route?key=MyAppKey',
               type: 'POST',
               data: JSON.stringify(completeRequest),
               dataType: 'json',
               processData: false,
               contentType: "application/json; charset=utf-8",
               success: function (response) {
                   $('#feedback').html(response);
               },
               error: function (response) {
                   alert("An Error occured when request was made" + response.toString());
               }

           });
       });

The conditions are that, the request needs to have a parameter named "locations" which should be formatted as locations:[{LocationObjSource},{LocationObjDestination}].

I am also using JSON.stringify() to make request properly formatted as JSON.

All the above code is part of a Razor view in an ASP.NET MVC3 App.

When the request fires, each time, im getting the error function hit. The response is supposed to be JSON. But i don't know what is going wrong.

My assumptions of what might be wrong:
1. Request needs to contain a PARAMETER named "locations" which should be of type locations:[] as i've said above, so how do i compose this?

Do I use Source and Destination as in my code, which are already JSON objects, or am i doing something wrong.

If anyone as an insight to this, please let me know.

Just for fun, the below URL shows what i'm trying to accomplish.

Have spent many hours on this, any help would be very much appreciated.

Thank you.

Posted 22-Mar-12 10:14am

robroysd

Updated 22-Mar-12 16:06pm

RaisKazi

v2

Add a Solution

Comments

[no name] 23-Mar-12 1:36am

Can you paste error you got?

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

robroysd · Answer 1 · 2012-03-23T04:39:00

talked with people @ mapquest, they were very helpful.

Below is the perfect working code for Route (to search for a route from source to destination)

HTML

<script type="text/javascript">

    $(document).ready(function () {

        $('#submit').click(function () {

            var requestUrl = 'http://www.mapquestapi.com/directions/v1/route';
            var from = 'Source';
            var to = 'Destination';
            

            $.ajax({
                url: requestUrl,
                dataType: 'jsonp',
                crossDomain: true,
                data: {
                    key: decodeURI("YourMapQuestApiKey"),
                    from: from,
                    to: to
                },
                success: function (response) {
                    $('#feedback').html("Distance from " + from + " To " + to + " : " + response.route.distance + "(miles)");
                }
            }); // end of .ajax


        }); // end of submit.click
    });             // end of doc.ready
</script>