Using Url.Action with no route values truncates the URL

Question

I've got a site that's using making heavy use of AJAX, and in-order to keep things like Urls in a sensible place, I'm outputting the required Urls in a script block on the page, and then using them in a Javascript file later.

An example of this would be:

In Index.cshtml

<script>
    if (!app.frontoffice)
        app.frontoffice = {};
    if (!app.frontoffice.urls)
        app.frontoffice.urls = {};

    if (!app.frontoffice.urls.index)
        app.frontoffice.urls.index = "@Url.Action("index", "frontoffice", new { area = string.Empty, id = string.Empty })";
</script>

In a JS file somewhere

$(function() {
    $("myButton").click(function(e) {
        $.ajax({
            url: app.frontoffice.urls.index,
            data: {
                id: 55
            },
            success: ...
            error: ...
        });
    });
});

The issue is that the generated Url is created like so - /frontoffice, notice it's excluding the index action. This is because when it was generated we gave it an empty id, so when we come to use it, the Url that gets requested is actually /frontoffic/55', not/frontoffice/index/55'..

The UrlHelper seems to be culling the action name from url. Is there another method I can use that doesn't remove items from the Url? - I was hoping to get away with a clear, reusable solution as this kind of thing happens all over the site.

Thanks
Kieron

Answer 1

You could use a placeholder for the id.

app.frontoffice.urls.index = function (id) {
    return "@Url.Action("index", "frontoffice", new { id = "000" })".replace('000', id);
}

Then in your .js file

$(function() {
    $("myButton").click(function(e) {
        $.ajax({
            url: app.frontoffice.urls.index(55),
            success: ...
            error: ...
        });
    });
});