Root relative path in MVC4 without @URL

Question

Can someone suggest how to use @URL.Action( "name", "controller", parameters} in your Jquery? Or atleat get the relative root to home directory.

I have to use JQuery get using the following code.

 $(".ag").click(function () {
    var id = this.id.replace("message_", "");
    var cd = this.id.replace("message_", "display_message_");
    $.get("/MRN/_Details_Message", function (data, status) {
        document.getElementById(cd).innerHTML = "Data: " + data + "\nStatus: " + status;
    });
});

The problem is that you cannot use @URL.Action if your JS file is separate and if you google examples there are always complaints when using relative HTML paths with MVC.

You **can** pass url in separate js file from view: [look answer here](http://stackoverflow.com/questions/17394880/getting-rid-of-hardcoded-strings-in-javascript-with-asp-net-mvc/17396877#17396877) — YD1m, Jul 08 '13 at 20:31

score 3 · Accepted Answer · answered Jul 08 '13 at 20:31

3

An easy solution is to put the url as an attribute of the relevant html element.

<a href="#" class="ag" data-url="@Url.Action("ActionName")">Click Here</a>

From within your jQuery code you can reference this easily:

$(".ag").click(function (e) {
    var url = $(this).data("url");
});

answered Jul 08 '13 at 20:31

ZippyV

12,540
3
37
52

This wouldn't be possible for dynamic elements. For example if my js adds a new anchor tag the Razor will not get rendered as html. – edhedges Nov 26 '13 at 17:48

score 1 · Answer 2 · answered Jul 08 '13 at 20:25

1

I created a very simple MVC Controller to expose Routes that you need to access from javascript. You can find it at my GitHub -> https://github.com/tucaz/JSRouteController

answered Jul 08 '13 at 20:25

tucaz

6,524
6
37
60

Will check this tool out as soon as possible. – anar khalilov Jul 08 '13 at 20:35

score 1 · Answer 3 · answered Jul 08 '13 at 20:26

I've ran into similar issues. If your JavaScript is in a different file (which I'm assuming), I just created a global function that kind of takes care of it, that is if you know the part of the relative path:

function getPath(p) {
    var path = "";
    if (window.location.href.indexOf("/MRN") > -1) {
        path = "/MRN";
    }
    if (path.indexOf("/", path.length - 1) !== -1) {
        return path + p;
    } else {
        return path + "/" + p;
    }
}

Probably not the best solution, but it works for my projects.

score 0 · Answer 4 · answered Jul 08 '13 at 20:33

One approach is to pass url as parameter and render all interesting Urls as part of the page. Something like

On the page:

...var detailsUrl = '@Url.Action(....)';

In JavaScript:

  $(".ag").click(function () {
    var resultSelector = this.data("resultselector");
    $.get(detailsUrl , function (data, status) {
        $(resultSelector).html("Data: " + data + "\nStatus: " + status);
    });
});

score 0 · Answer 5 · answered Jul 08 '13 at 20:38

I like to do the following, assuming "MRN" is your controller and "_Details_Message" is your action:

$.get('@Url.Action("_Details_Message", "MRN")', function (data, status) {
    document.getElementById(cd).innerHTML = "Data: " + data + "\nStatus: " + status;
});

This will embed the root action into your javascript as "/MRN/_Details_Message" with the proper root prepended.

Root relative path in MVC4 without @URL

5 Answers5