Can not access variable from @Url.Action

Question

I have this Javascript in a ASP.Net MVC page

onComplete: function (id, fileName, responseJSON) {
    if (responseJSON.success) {
        $('#divImgs ul').append(
            $('<li>').append(
            $('<a>').attr('href', 
                '@Url.Action("DeleteFile", "Upload", new { id = fileName})').append(
            $('<img>').attr('src', responseJSON.filePath))
         ));
     }
 }

This gives Compilation error

The name 'fileName' does not exist in the current context

Why can't I access fileName variable within the @Url.Action?

mccow002 · Accepted Answer · 2013-07-01 17:34:55Z

3

This issue is that @Url.Action is resolved server side while filename is a javascript variable on the client side. You're best bet is something like this:

onComplete: function (id, fileName, responseJSON) {
    if (responseJSON.success) {
        $('#divImgs ul').append(
            $('<li>').append(
            $('<a>').attr('href', '@Url.Action("DeleteFile", "Upload", new { id = "' + filename + '" })').append(
            $('<img>').attr('src', responseJSON.filePath))
         ));
     }
}

There might be a better way to append the filename to the url, but the idea here is to render out the base url from the server, then modify it as needed with the javascript.

EDIT: I agree with haim77. You need to have the route be rendered server side instead of just appending on the client side in case the format of the route changes. But in this case, we need to inject some javascript. So just inject the variable into the route so it resolves to the right format, but also outputs javascript compatible code.

edited Jul 1, 2013 at 17:34

answered Jul 1, 2013 at 15:55

mccow002

6,9343 gold badges28 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

haim770 Over a year ago

This approach may not generate the correct url as registered in the routing collection. there could be a registered route that would match only certain pattern (like /Upload/DeleteFile/filename.jpg).

mccow002 Over a year ago

The point is to generate the base of the url and append according to your own needs. You would get '/Upload/DeleteFile' and from there, append either '?id=' or '/filename'.

haim770 Over a year ago

Well, if you already know whether the url to your action uses ?id= or /filename then Url.Action is almost redundant.

mccow002 Over a year ago

Did a little googling. This has already been answered. stackoverflow.com/questions/2012610/…

haim770 · Accepted Answer · 2013-07-01 15:58:42Z

Because filename is a JavaScript variable that only exists in the client-side, while @Url.Action is executed (beforehand) in the server-side when the View renders itself.

To solve the problem, i usually do something like:

@object URL_ACTION_PLACEHOLDER = "__MYPLACEHOLDER__";

// ...

onComplete: function (id, fileName, responseJSON) {
    if (responseJSON.success) {
        var myActionUrl = '@Url.Action("DeleteFile", "Upload", new { id = URL_ACTION_PLACEHOLDER })';
        myActionUrl = myActionUrl.replace('@URL_ACTION_PLACEHOLDER', fileName);

        $('#divImgs ul').append(
            $('<li>').append(
            $('<a>').attr('href', myActionUrl).append(
            $('<img>').attr('src', responseJSON.filePath))
         ));
     }
 }

Collectives™ on Stack Overflow

Can not access variable from @Url.Action

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related