ASP.NET MVC Url.Action in JQuery is not recognized

Question

I am trying to use Url.Action() method in my js file to define urls for my ajax calls. So far I have failed.

 $.ajax(
 {
    type: "POST",
    url: '@Url.Action("SomeAction", "SomeController")',
    data: { 
        fileID: rightClickedFileId
    },
    success: function (data) {

    }
 });

If i define the url in this way, browser tries to post data to

http://localhost:5907/FileManager/@Url.Action(%22SomeAction%22,%20%22SomeController%22)

and as a result my ajax call fails.

However, If I use '/SomeController/SomeAction' instead, everythings works fine.

Second works ok, but I am wondering the problem with first one ? Could it be due to routing configuration ?

Thanks.

Answer 1

Url.Action is an html helper method which will work in your razor view, not in your external javascript files.

What you can do is, get the relative url to your action method using Url.Action helper method in a razor view and set that to a javascript variable and use that in your external js file. When doing this, Always make sure to use javascript namespacing to avoid possible conflict with existing global variables.

You may add this code in the _Layout.cshtml

<script type="text/javascript">

    var yourApp = yourApp || {};
    yourApp.Urls = yourApp.Urls || {};
    yourApp.Urls.baseUrl = '@Url.Content("~")';
    yourApp.Urls.editUserUrl= '@Url.Action("Edit","User")';

</script>

Or in your page specific view,

@section Scripts
{
  <script type="text/javascript">

     var yourApp = yourApp || {};
     yourApp.Urls = yourApp.Urls || {};
     yourApp.Urls.baseUrl = '@Url.Content("~")';
     yourApp.Urls.editUserUrl= '@Url.Action("Edit","User")';

  </script>
  <script src="~/Scripts/PageSpecificExternalJsFile.js"></script>    
}

Now in your external javascript file, you can access it like

var urlToEditUser = yourApp.Urls.editUserUrl;
//you can use urlToEditUser  now

// Or With the base url, you may safely add the remaining part of your url.
var urlToEditUser2 = yourApp.Urls.baseUrl+"User/Edit";
//you can use urlToEditUser2  now

Always use the Url.Action or Url.RouteUrl html helper methods to build the relative url to the action methods. It will take care of correctly building the url regardless of your current page/path.

If you want to do the same thing inside your angular controller's/data services etc, take a look at this post which explains how to use the angular value provider to do the same.

Answer 2

you can write it like this way just

url:'/controllername/Actionname',

Answer 3

You can't use '@Url.Action("SomeAction", "SomeController")' in js file, because this is ASP.NET MVC helper, if you put your code to the view everything will work.

Answer 4

My approach is similar to @Shyju's, except instead of setting one variable in the Razor view, I call an init function in my JavaScript, and pass it all the parameters that I need interpreted by Razor.

So the code would look like this:

MyScript.init({
    editUserUrl: "@Url.Action("Edit","User")",
    anotherUrl: "@Url.Action("AnotherUrl", "User")"
})

Then in JavaScript:

var m_options;
MyScript.init = function(options) {
    m_options = options;
}

// use with m_options.editUserUrl here
$.ajax(
{
    type: "POST",
    url: m_options.editUserUrl,
    data: { 
        fileID: rightClickedFileId
    },
    success: function (data) {
    }
 });

I wrote a more detailed post about it here: http://blog.blanklabs.com/2015/02/aspnet-mvc-refactoring-friendly.html