Issue with wrong controller being called in jquery ajax call

Question

My issue is for some strange reason it seems stuck in the page controller so instead of getting out and going into the ajax controller I have it trying to go down that route in the page controller

1st try

http://localhost:2185/Alpha/Ajax/GetBlah_Name/?lname=Ge&fname=He

2nd try

http://localhost:2185/Patient/~/Ajax/GetBlah_Name/?lname=Ge&fname=He

Objective

http://localhost:2185/Ajax/GetBlah_Name/?lname=Ge&fname=He

Page button to call jquery

<a style="margin-left: 310px;" href="javascript:void(0)" onclick="getBlah()"
                    class="button"><span>Lookup</span></a>

Jquery code

1st try

{
   $.getJSON(callbackURL + 'Ajax/GetBlah_Name/?lname=' + $('#Surname').val() + '&fname=' + $('#FirstName').val(), null, GetResults)
}

2nd try

{
   $.getJSON(callbackURL + '~/Ajax/GetBlah_Name/?lname=' + $('#Surname').val() + '&fname=' + $('#FirstName').val(), null, GetResults)
}

In summary I don't know why it won't break out of the controller and go into the Ajax controller like it has done so in all the other projects I've done this in using the 1st try solution.

What is `callbackURL`? How does your route definitions look like? — Darin Dimitrov, Sep 22 '11 at 07:57

Darin Dimitrov · Answer 1 · 2011-09-22T08:05:46.997

There are a couple of issues with your AJAX call:

You are hardcoding routes
You are not encoding query string parameters

Here's how I would recommend you to improve your code:

// Always use url helpers when dealing with urls in an ASP.NET MVC application
var url = '@Url.Action("GetBlah_Name", "Ajax")';

// Always make sure that your values are properly encoded by using the data hash.
var data = { lname: $('#Surname').val(), fname: $('#FirstName').val() };

$.getJSON(url, data, GetResults);

Or even better. Replace your hardcoded anchor with one which will already contain the lookup url in its href property (which would of course be generated by an url helper):

<a id="lookup" href="Url.Action("GetBlah_Name", "Ajax")" class="button">
    <span>Lookup</span>
</a>

and then in a separate javascript file unobtrusively AJAXify it:

$(function() {
    $('#lookup').click(function() {
        var data = { lname: $('#Surname').val(), fname: $('#FirstName').val() };
        $.getJSON(this.href, data, GetResults);
        return false;
    });
});

Now how your urls will look like will totally depend on how you setup your routes in the Application_Start method. Your views and javascripts are now totally agnostic and if you decide to change your route patterns you won't need to touch jaavscript or views.

thx, I'll be sure to try this as soon as I find a free sec (trying to get all this projects development done by tomorrow, so far I don't think I'm gona make it but heres hoping) — Myzifer, Sep 22 '11 at 08:11
Only reason I wouldn't be able to go directly to called GetBlah_Name is that presently in the getBlah function it does 3 checks to find out what data has been input and then depending on what data is provided it will change the ajax call it does. For example if an Id number is provided then that is more accurate and specific so it would then search by that instead of name or another Id field which doesn't always have data. — Myzifer, Sep 22 '11 at 08:16
@Darin Dimitrov - Hi, can you help me on this question please? http://stackoverflow.com/questions/7508241/ef-4-1-code-first-how-to-load-related-data-parent-child-grandchild - Thank you for any idea and help — amiry jd, Sep 22 '11 at 08:25

amiry jd · Accepted Answer · 2011-09-22T08:19:23.893

It seems you want to cal a controller at ~/Ajax. Is it? If yes, you should use this code:

   $.getJSON(callbackURL + '/Ajax/GetBlah_Name/?lname=' + $('#Surname').val() + '&fname=' + $('#FirstName').val(), null, GetResults)

UPDATE: This will work for your Q, but the complete solution is @Darin Dimitrov's answer. I suggest you to use that also.

UPDATE2 ~ is a special character that just ASP.NET works with it! So http doesn't understand it. and if you start your url with a word -such as Ajax-, the url will be referenced from where are you now (my english is not good and I can't explain good, see example plz). For example, you are here:

http://localhost:2222/SomeController/SomeAction

when you create a link in this page, with this href:

href="Ajax/SomeAction"

that will be rendered as

http://localhost:2222/SomeController/Ajax/SomeAction

But, when url starts with /, you are referring it to root of site:

href="/Ajax/SomeAction"

will be:

http://localhost:2222/Ajax/SomeAction

Regards

Well this fixed it, dunno how the "/" got removed yet it isn't in another project of mine and works so god knows whats going on there. I had tried "~/" since I used that in other routes to get out of everything. — Myzifer, Sep 22 '11 at 08:08

Issue with wrong controller being called in jquery ajax call

2 Answers2