How to use resources in javascript file?

Question

Hy,

I've got a resource file, which entries I want to use in my separate javascript file with following code:

@TestMvc.Resources.Views.Home.Strings.MyString

But in my javascript file the code line would not be interpreted by the MVC 5 framework.

How can I get access to my resource strings?

Thanks for help :)

Solution 1

I don't think you can do that in a JavaScript file.

If you really want to do that, you should write this code inside inline scripts in Razor pages.

Solution 2

It's normal that MVC isn't handling the resource reference in the javascript file, since the javascript is handled client-side, and MVC handling everything server-side... That being said, there are three methods that I can think of that could solve your problem if you would like to...

1) Wrap your javascript code in a separate .cshtml file.

If this is an option for you, you could create a partial view, that contains nothing but a reference to your resources, and a script tag with your javascript inside.. After that, you just render your partial view in your actual view (just like you would render your javascript file), and let MVC render your javascript (with the desired resources) before handing it to your client.

Example of your .cshtml file:

@using TestMvc.Resources.Views.Home
<script type="text/javascript">
    $(document).ready(function(){
        alert('@Strings.MyString'); //Here you can use your resource string
    });
</script>

If you inspect the rendered script client-side, you will see that MVC has inserted the string in your javascript.

2) render your strings in variables in a script block in your .cshtml file

and in your .js file treat them like local variables (ignoring the intellisense that's telling your it cannot access the undeclared variable)

<script type="text/javascript>
    var myResourceString= "@Strings.MyString";
</script>

And in your javascript

alert(myResourceString);

3) Render your strings in a hidden field, and get the value inside your javascript.

If wrapping all your javascript in a .cshtml file isn't an option, you can always put your resource strings in hidden fields like so:

<input type="hidden" id="myResourceString" value="@Strings.MyString">

And in your javascript

alert(document.getElementById('myResourceString').value);

While I'm typing this, I see that the post is a bit old, but it might be useful for someone in the future...

Comments

[Philip Stratford]

Nothing in the thread you've linked to gives a method for using resources directly in a separate Javascript file, which is what the original poster asked. These methods only work if the Javascript is in the same file as the Razor markup, or if you can pass a value from the Razor markup to the Javascript as a variable. As @albusshin says, I don't think it can be done.

[Eric]

I did something very similar to this using Web API. I created a route that returns JavaScript and used it as a script include on my razor page. Its just like any other script reference. All the variables / objects I need are directly returned from the api.