How do I get the correct URL for an MVC action when using Jquery/AJAX?

Question

So I have my first MVC2 site that I'm working on and naturally I'd like to throw some AJAX in there. The problem is, is that I don't know how to get the URL for the action when passing in a URL parameter. Let me explain. The examples I've seen so far show the developer passing in strings like '/MyController/MyAction'. That's great, except if your controllers are not in the root directory of your website (as is the case in my situation). I could always use relative URLs like 'MyAction' except if the URL contains parameters that doesn't work either. Consider http://example.com/myroot/MyController/MyAction vs http://example.com/myroot/MyController/MyAction/PageNumber/SomeOtherValue. Now the relative URL will be incorrect.

In the ASPX code, this is easy. I just write in <%= Url.Action("MyAction") %>. But how do I do this in my javascript file?

Answer 1

This is part of the long-standing issue that including server-sided code in JavaScript files is not really possible :(. (Without serious hacks, that is.)

The best solution is to include the action URL inside your HTML file somewhere, then get that value from JavaScript. My suggestion would be something like this:

<!-- in your view file  -->
<form id="MyForm" action="<%: Url.Action("MyAction") %>"> ... </form>

<!-- or -->
<a id="MyLink" href="<%: Url.Action("MyAction") %>"> ... </a>

combined with

// In your .js file
$("#MyForm").submit(function ()
{
    $.post($(this).attr("action"), data, function (result) { /* ... */ });
    return false;
});

// or
$("#MyLink").click(function ()
{
    $.getJSON($(this).attr("href"), data, function (result) { /* ... */ });
    return false;
});

This feels semantically clear to me, and in some cases even creates degradable fallback behavior for when JavaScript is turned off.

Answer 2

Simple: tell your javascript what the correct URL is.

Tactically, you can get there alot of ways, but they basically break down into two techniques:

• Have a server-side generated javascript "configuration" so you can do something like var url = siteConfiguration.SITEROOT + 'products/pink-bunny-slippers' Note this file can be a normal MVC view, the only trick is you have to tell the controller to send a text/javascript header rather than text/html.
• Basically, dependency inject it into your script. IE function wireUpAjaxLinksToService(linkIdentifier, serviceEndpoint) where you call using something like wireUpAjaxLinks('a.ajax', '<%= Url.Action("MyService", "Services") %>')

Answer 3

You can't do this in your JavaScript file directly, however you can pass these dynamic values into your script by way of a script initializer. Consider the following example:

External Js file

ShoppingCart = function() {
    this.settings = {
        AddProductToCartUrl: '',
        RemoveFromCartUrl: '',
        EmptyCartUrl: '',
        UpdateCartUrl: ''
    };
};

ShoppingCart.prototype.init = function(settings) {
    this.settings = jQuery.extend(this.settings, settings || {});
};

HTML/View

<script type="text/javascript">
    var cart = new ShoppingCart();
    cart.init({ AddProductToCartUrl: '<%=Url.Action("MyAction")%>' });

    alert(cart.settings.AddProductToCartUrl);
</script>