MVC 5 route not working

Question

Help please... I've seen a few posts on this, but they don't seem to help...

I have a route defined that works perfectly when called directly; http:// localhost : 53505/GetLocationData/Canada/Ontario/Toronto and I get exactly what I expected - a result from my AddressController.

...

Now, in my application, my ClientController starts up a view ~/Views/Client/Index.cshtml

via a call to Client/Index

That View has an .ajax javascript that tries to asynchronously call the same AddressController function noted above, after getting a result from a good GEO-IP service: $(document).ready(function() {

    var urlGeoIeoip = "http:// smart-ip . net/geoip-json?callback=?";

    $.ajax({
        url: urlGeoIeoip,
        type: "GET",
        dataType: "json",
        timeout: 2000,
        success: function (geoipdata) {

        $("#AddressCity").data("kendoComboBox").value(geoipdata.city);
        $("#AddressState").data("kendoComboBox").value(geoipdata.region);
        $("#AddressCountry").data("kendoComboBox").value(geoipdata.countryName);

        var $form = $(this);

        $.ajax({
            url: "getlocationdata",
            type: "GET",
            data: { 'country': geoipdata.countryName, 'region': geoipdata.region, 'city': geoipdata.city },
            timeout: 500,
            success: function(data) {
                var $target = $($form.attr("data-htci-target"));
                var $newHtml = $(data);
                $target.replaceWith($newHtml);
            }
        });


        }
    }).fail(function(xhr, status) {
    if (status === "timeout") {
         // log timeout here
        }
    });
});

It works, BUT the request gets answered by my ClientController and not the Address Controller!!

I see it comes into /Client/Index with the Request.Url being: http:// localhost : 53505/Client/Index/GetLocationData?country=Canada&region=Ontario&city=Toronto Why isn't it reaching my AddressController?

Here is my RouteConfig:

   public static void RegisterRoutes(RouteCollection routes)
    {
        routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
        routes.IgnoreRoute("{resource}.ashx/{*pathInfo}");

        routes.MapRoute(
            name: "GetLocationData",
            url: "getlocationdata/{country}/{region}/{city}",
            defaults: new { controller = "Address", action = "GetLocationData"}
        );

        routes.MapRoute(
            name: "Default",
            url: "{controller}/{action}/{id}",
            defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
        );
    }
}

Answer 1

What if you change the url inside $.ajax to "/getlocationdata" (instead of just "getlocationdata")?

Answer 2

It looks like you are trying to send the data through query string (passing parameters through the data option):

$.ajax({
        url: "getlocationdata",
        type: "GET",
        data: { 'country': geoipdata.countryName, 'region': geoipdata.region, 'city': geoipdata.city },
        timeout: 500,
        success: function(data) {
            var $target = $($form.attr("data-htci-target"));
            var $newHtml = $(data);
            $target.replaceWith($newHtml);
        }
    });

OPTION 1 Because of this you should define your route like this:

routes.MapRoute(
        name: "GetLocationData",
        url: "getlocationdata",
        defaults: new { controller = "Address", action = "GetLocationData"}
    );

This listens for the route: http://localhost:53505/GetLocationData?country=Canada&region=Ontario&city=Toronto

Then you can use the UrlHelper to get the url in your View (assuming cshtml below):

$.ajax({
        url: "@Url.RouteUrl("GetLocationData")", //Notice this is the Name of the Route
        type: "GET",
        data: { 'country': geoipdata.countryName, 'region': geoipdata.region, 'city': geoipdata.city },
        timeout: 500,
        success: function(data) {
            var $target = $($form.attr("data-htci-target"));
            var $newHtml = $(data);
            $target.replaceWith($newHtml);
        }
    });

This will allow you to freely change the route in your route config without having to modify your views.

OPTION 2 If you want to keep the route like it is (using inurl data), you will have to define your ajax call like this:

    $.ajax({
        url: "/getlocationdata/" + geoipdata.countryName + "/" + geoipdata.region + "/" + geoipdata.city, //This will manually build the route as you defined it
        type: "GET",
        timeout: 500,
        success: function(data) {
            var $target = $($form.attr("data-htci-target"));
            var $newHtml = $(data);
            $target.replaceWith($newHtml);
        }
    });

You can still use the UrlHelper for this type of route, but you can't use it easily in javascritpt:

    $.ajax({
        url: "@Url.RouteUrl("GetLocationData", new{country = "SomeCountry",region="SomeRegion",city="SomeCity"})", //unfortunately, you need these while you are in C# code
        type: "GET",
        timeout: 500,
        success: function(data) {
            var $target = $($form.attr("data-htci-target"));
            var $newHtml = $(data);
            $target.replaceWith($newHtml);
        }
    });