How to get texts from Resx to be used in Javascript?

Question

We are building large ASP.NET applications for the intranet use in multiple languages/cultures. We utilize the Globalization with RESX files and use GetResourceText on the server side to get the localized texts.

Lately we are doing more and more client side logic with JQuery.

How do I get the RESX texts to be used in Javascript?

• e.g. texts used for validation, dynamic messages etc.

All our Javascripts are in .JS files, we do not want to mix HTML in the ASPX page and Javascript blocks.

Thanks for your help.

Solution 1

Unfortunately, in an external JS file the server side code is not being processed by the server. However I have seen a workaround where you can set your translated values in hidden fields on the page - this way your javascript will be able to read the values in.

For example:

 <%-- This goes into your page --%>
 <input type="hidden" id="translatedField" name="translatedField" value="<%=Resources.Resources.translatedText %>" />

and use this inside your javascript file:

 // This is the js file
 $(document).ready(function() {
  alert($("#translatedField").attr("value"));
 });

You will be able to separate the values and still see it in your external JS file.

There is also another workaround that creates a .aspx file that only outputs Javascript instead of HTML. Check out the link below:

Using server side method in an external JavaScript file

Solution 2

Create a HttpHandler (.ashx file), and return JSON with your text resource strings.

You may also "publish" it to global namespace, i.e.

Response.Write("window.Resources=");
Response.Write((new JavaScriptSerializer()).Serialize(strings));

set up HTML like:

<script src="Resx.ashx?lang=en-US" />

<button class="LogoutButtonResourceId OtherButtonClasses">(generic logout text)</button>
<a href="#"><span class="SomeLinkTextResourceId OtherClasses">
     (generic link text)
</span></a>

and apply texts like this:

$(document).ready(function() {
  for(var resId in Resources){
    $("."+resId).html(Resources[resId]); 
  }
});

Solution 3

Always separate functionality from human readable strings.

If you're creating jQuery-plugins you should be able to pass an array of localized strings as parameter when you call your different jQuery functions. The array could be defined as inline javascript directly on the page calling the different jQuery plugins or you could load the from external resource in the format /scripts/localization/strings.js?ci=en-US and register a Generic ASP.Net Handler in web.config that would respond to scripts/localization/strings.js

The DatePicker control is a fine example of how to localize text for the jQuery datepick control - this js file is dynamically created from resource files (resx) and when included on a page it will make sure the calendar control will have danish text.

Comments

[Ilya Volodin]

Microsoft provides a client-side localization as part of the ASP.NET AJAX framework. You should take a look at msdn.microsoft.com/en-us/magazine/cc135974.aspx and asp.net/web-forms/tutorials/aspnet-ajax/…

[PeterFromCologne]

Thank you for your answer! I was thinking of a more generic way, not just passing one individual text to the Javascript. The link you put is interesting, I tried this method as well, but in my group we consider it to be "dirty" to use an ASPX page to create a Javascript "file". I am hoping for yet another method... :-) many thanks!

[zaitsman]

This is horrible. Like beyond horrible. Consider a page with hundreds of these. What will it do to DOM? Sure we're spoiled by modern browsers that render very quickly. But for many purposes, this is very, very bad. The link you posted is heaps better.

[ouflak]

If you've only got a few things to translate, and that's all there are ever going to be, then it's very concise and efficient as well as easy to maintain. If things start to grow beyond a handful of translated items, then I agree, it needs to be moved to something like the web config idea.

[JSON]

This feels very hacky. Not ideal when you need to translate a lot of items