1

Currently what I'm doing in my js file is this (and it works):

    var root = "http://mydomain.com";

$.ajax({
    type: "POST",
    url: root + "/MyController/MyAction",
    data: { 'id': myId },
    dataType: "html",
    success: function (response) {
    blah blah...

However the problem is if someone types in www.mydomain.com instead of mydomain.com, the path is not found. I tried following the advice in this post: Relative Image URL in Javascript File - ASP.net MVC and IIS 7, namely setting root to ../ or document.location.host, but both don't work.

What's the correct way to specify paths (to actions in controllers, images, etc) in a js file?

Thanks.

Community
  • 1
  • 1
Prabhu
  • 12,995
  • 33
  • 127
  • 210

1 Answers1

7

In your view:

<script type="text/javascript">
    var url = '<%= Url.Action("MyAction", "MyController") %>';
</script>

and in your external javascript file:

$.ajax({
    type: "POST",
    url: url,
    data: { 'id': postId },
    dataType: "html",
    success: function (response) {
    blah blah...

or even better: if you are AJAXifying an existing link or form:

<%= Html.ActionLink("foo", "MyAction", "MyController", null, new { id = "foo" })

and in your javascript:

$('#foo').click(function() {
    $.ajax({
        type: "POST",
        url: this.href,
        data: { 'id': postId },
        dataType: "html",
        success: function (response) {
        blah blah...
    });
    return false;
});
Darin Dimitrov
  • 1,023,142
  • 271
  • 3,287
  • 2,928
  • I have all my js code in an external javascript file and not embedded in the view, so I can't use <%= Url.Action. That's the problem. – Prabhu Mar 08 '11 at 22:41
  • @Prabhu, that's why I started my answer with **In your view**. – Darin Dimitrov Mar 08 '11 at 22:42
  • I was going to say regular expression but this is obviously better. – The Muffin Man Mar 08 '11 at 22:42
  • Oh ok got it...so you're saying declare the url in the view and use it in the js file? Not a bad idea actually. Is this the standard way to do it? – Prabhu Mar 08 '11 at 22:44
  • 1
    @Prabhu, there are two possibilities: either you are AJAXifying an existing element of your DOM such as an anchor or a form in which case you already have the url in the DOM (see second part of my answer) or you don't in which case you could declare it as a global javascript variable. – Darin Dimitrov Mar 08 '11 at 22:47
  • I'm wondering now if I could also set the global variable url to the root domain in my masterpage--that way I won't have to change a bunch of code for now. Do you think that's a good idea and if it's possible? – Prabhu Mar 08 '11 at 22:54
  • I like the solution. Consider using namespaces for your global variables like this http://stackoverflow.com/questions/881515/javascript-namespace-declaration/881556#881556. Right now the variable url sits directly on window. – jimmystormig Mar 08 '11 at 22:55
  • This declaration in the masterpage seems to do the trick: var root = '<%= Request.Url.Scheme + "://" + Request.Url.Host %>'; Thanks! – Prabhu Mar 08 '11 at 23:08