Relative URL in JQuery Post Call

Question

I have the following situation.

I developed my first MVC Asp.Net application. it runs on my server at the following adress

http://localhost:59441/


        

Answer 1

Pass @Url.Action("action","controller") to the javascript from the view. This will allow it to be update dynamically at run time.

<script>
   myJavascriptfunction(@Url.Action("action","controller"),param1,param2);
</script>

There may be a function to get the root path also which you could use to initialize the root variables in the previous answers.

Answer 2

http://localhost:59441/ and
http://testServer/JprApplication/ will both work with your

$.ajax({ type: "POST", url: "/CeduleGlobale/UpdateCheckBox", ...

if your hosting in iis you just need to create a virtual host in your
C:\Windows\System32\drivers\etc\hosts

file. Add this line at the bottom of your hosts file

127.0.0.1 CeduleGlobale

create a new site like this select sites, right click and create a new site

fill in your details and set the same hostname as you created above 'CeduleGlobale'

then deploy your mvc appliation to this site

Answer 3

As far as I know there is no other way around this. Unless you are willing to user relative URL's i.e:

$.ajax({
        type: "POST",
        url: "./CeduleGlobale/UpdateCheckBox", ...

But that can get messy for various reasons when you refactor code. Alternatively prepend the URL which is globally defined and therefore you then only need to change it in once place before going to production.

i.e.

//Globally defined serverRoot
serverRoot = "http://someaddress/somevirtualdirectory";

$.ajax({
        type: "POST",
        url: serverRoot + "/CeduleGlobale/UpdateCheckBox", ...

That way if you don't need it you can just set serverRoot = ''; and all will be back to how it is now.

Answer 4

Depending on where you actually have your JavaScript located (inside the View or a separate JS file), you have a couple of options.

Option 1 - Inside the View

Simply use the Html Helpers to generate the links for you

<script type="text/javascript">
   $(function(){
        $.ajax({
           type: "POST",
           url: "@Url.Action("UpdateCheckBox", "CeduleGlobale")"
        });
   });
</script>

Option 2 - Standalone JS File

We typically have a function per page that sets up that page's handlers. So, we can do something like the following:

View

<script type="text/javascript">
    $(function(){
        SetOrderPage('@Url.Action("UpdateCheckBox", "CeduleGlobale")');
    });
</script>

Standalone JS File

function SetOrderPage(ajaxPostUrl){
       $.ajax({
           type: "POST",
           url: ajaxPostUrl
       )};
}

Option 3 - Standalone JS file Method 2

You could have a global variable in your in your JS file that is the siteroot. The draw back here is that you will need to hand create each of your action method paths. On each page, you could set the site root global variable as such:

Standalone JS File

var siteRoot;

View

<script type="text/javascript">
    siteRoot = '@Request.ApplicationPath';
</script>

Keep in mind you cannot use Razor syntax in a stand alone JS file. I believe that it is best to let Razor/MVC/.NET dynamically give you the site path or URL route as it will really cut down on the mistakes that could be made when moving between sites/virtual directories.

Answer 5

I know this is an old post. But, I had the same issue and ended up here. And managed to fix that issue with UrlHelper.Action method. It should be used something like this. (Note that this specific solution will works within the view.)

url: "@Url.Action("UpdateCheckBox", "CeduleGlobale")",

Hope this helps. :)

Answer 6

I had this kind issue on MVC 5 using JQuery, so I went to this solution that gets rid of the problem when you are in Localhost, and in any Navigator even when you're deploying app in a subfolder.

var pathname = window.location.pathname;
var VirtualDirectory;
if (pathname.indexOf("localhost") >= 0 && pathname.indexOf(":") >= 0) {
    VirtualDirectory = "";
}
else {
    if ((pathname.lastIndexOf('/')) === pathname.length + 1) {
        VirtualDirectory = pathname.substring(pathname.indexOf('/'), pathname.lastIndexOf('/'));
    } else {
        VirtualDirectory = pathname;
    }
}

And then in any ajax call :

$.post(VirtualDirectory + "/Controller/Action", { data: data}, "html")
             .done(function (result) {
                 //some code             
});