Virtualize a link in jQuery code inside an external javascript

Question

I am using the following function to virtualize path and reference to my application resources

<%= Html.Image( Url.Content( "~/_assets/images/login.png" ), "Login" )%>

and this works very fine in resolving the virtual directory where the application has been deployed, for example

http://someserver/xyz/_assets/images/login.png

how can I achieve the same result when pointing to resources inside a CSS

body { background: #F4F4F4 url('/_assets/images/backgr_grad.png') repeat-x 0 0; }

and from a javascript function inside an external js file?

function loadCustomers() {
    $.ajax({
        type: "get",
        dataType: "html",
        url: '/Customers/AllCustomers',
        data: {},
        success: function(response) {
        }
    });
}

Answer 1

From CSS you could always use relative paths (in CSS it is relative to the CSS file location):

body { 
    background: #F4F4F4 url('../images/backgr_grad.png') repeat-x 0 0; 
}

From JS there are different techniques but one consist of defining a global js variable in the view:

<script type="text/javascript">
    var customersUrl = '<%: Url.Action("AllCustomers") %>';
</script>

and then use this variable in the external javascript file:

function loadCustomers() {
    $.ajax({
        type: 'get',
        dataType: 'html',
        url: customersUrl,
        data: { },
        success: function(response) {
        }
    });
}

Another technique involves progressive enhancement:

<%: Html.ActionLink("Load customers", "AllCustomers", 
    null, new { id = "customersLink" }) %>

And in js progressively enhance this link:

$(function() {
    $('#customersLink').click(function() {
        $.ajax({
            type: 'get',
            dataType: "html",
            url: this.href,
            success: function(response) {
            }
        });

        // make sure to cancel the default action
        return false;
    });
});