ASP.Net MVC : Trying to store image url in js variable using razor syntax

Question

in js variable i am trying to store image url using razon syntax but getting error. here is my sample code.

$(document).ready(function () {
   var loader = '@Url.Content("~/images/loader.gif")';
});

i follow this post https://stackoverflow.com/a/21486213/728750 https://stackoverflow.com/a/29798960/728750

but i follow the same syntax but in my case i am getting error. my js code is in separate file....not in view file.

looking for suggestion. thanks

EDIT

i have this code in my main view at top.

<script>
    var loaderUrl
    $(document).ready(function () {
        var loaderUrl = '@Url.Content("~/images/loader.gif")';
        alert(loaderUrl);
    });
</script>

later i try to access this variable loaderUrl in external js file which is loading at bottom of my main view......but still no luck.

What is the resulting client-side output? What is the error? — David
– David, Commented Dec 29, 2015 at 18:35

ahmadr · Accepted Answer · 2015-12-29 18:51:15Z

4

You can't. Store url in hidden field value in cshtml:

<input type='hidden' value='@Url.Content("~/images/loader.gif")' id='loaderUrl' />

And in js:

$(document).ready(function () {
   var loader = $('#loaderUrl').val();
});

edited Dec 29, 2015 at 18:51

answered Dec 29, 2015 at 18:36

ahmadr

412 bronze badges

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

Comments

Moe · Accepted Answer · 2015-12-29 18:55:20Z

2

You cannot use @Url.Content("~/images/loader.gif") in a separate JS file. This has to be added to the view. What can you do is to create a global JS variable set it in your view and use it in your external JS.

Add this to your view. Then use the loaderUrl in your external JS file.

<script>
   var loaderUrl= '@Url.Content("~/images/loader.gif")';
</script>

edited Dec 29, 2015 at 18:55

answered Dec 29, 2015 at 18:35

Moe

1,59911 silver badges16 bronze badges

3 Comments

Mou Over a year ago

loaderUrl is getting undefined in externel js file....i checked there by alert() function.

Moe Over a year ago

Make sure it's loaded before your external JS. Remove document.ready and give it a try

Mou Over a year ago

what do u mean by sucks?

vendettamit · Accepted Answer · 2015-12-29 18:37:14Z

1

When you have javascript in separate file then Razor syntax won't work in JS file. What I did when I had this issue it to keep variable in _commonJsGobal.cshtml and declared the variables required to access from JS files.

on _commonJsGlobal.cshtml add below script:

<script>
    var ROOT = '@Url.Content("~/")';
</script>

Then in your JS file use it like:

$(document).ready(function () {
   var loader = ROOT + '/images/loader.gif")';
});

Make sure the this partial gets rendered on required views on top of everything.

answered Dec 29, 2015 at 18:37

vendettamit

14.7k2 gold badges36 silver badges56 bronze badges

2 Comments

Mou Over a year ago

see my edit section. there i said what approach i am following.

vendettamit Over a year ago

You declared the loaderVariable two times. Only declare it once and out of scope of functions.

Collectives™ on Stack Overflow

ASP.Net MVC : Trying to store image url in js variable using razor syntax

EDIT

3 Answers 3

Comments

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

EDIT

3 Answers 3

Comments

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related