Displaying Localized Text From Embedded JavaScript

Suppose you’re working on a sophisticated server control which occasionally displays JavaScript alerts and prompts. You put your JavaScript in a separate file, set its Build Action to Embedded Resource, decorate the control with [assembly: WebResource (....)], add the mandatory RegisterClientScriptResource, and you’re all set.

If you build a localizable web app, you have a problem: the text of your alerts and prompts is hard-coded. I really wish I could embed the following code:

<script type='text/javascript'>
function displayHelloWorld () {
   alert (<%$ Resources: WebResources, Hello_World_Greeting %>);
}
</script>

Unfortunately, when a resource is streamed by WebResource.axd, resource substitution is very limited. Nikhil demonstrated how to substitute a localized image, and I’ve seen a plethora of similar examples, but I’ve found nothing on substituting text like that. If somebody happens to know, please leave a comment.

What I’ve seen some folks suggest in forums is to abandon the embedded JavaScript route, build it on the server and spit it out on the page with RegisterStartupScript, for example.

No. I want to keep my client-side code in a separate file. I want to embed it into an assembly as a resource. I want it served in a way that allows a browser to cache it.

Proposed Solution

I believe in namespacing your client-side code. I’ve put together a sample of a dead-simple server control which relies on a client-side resource manager of a sorts:

if (!FABRIKAM)
    var FABRIKAM = {};

FABRIKAM.Resources = function  () {
    var _strings = {};
    
    function _registerResource (r_key, r_value) { 
        _strings [r_key] = r_value;
    }
    
    function _getResource (r_key) {
        return _strings [r_key];
    }
    
    return {
        RegisterResource : function  (r_key, r_value) {
            return _registerResource (r_key, r_value); 
        },

        GetResource :  function  (r_key) { 
            return _getResource (r_key); 
        }
   };
}();

The approach is similar to that of ASP.NET: you register some text (as a key/value pair) with the resource manager based on the user’s language. From there on, the rest of JavaScript talks to the resource manager. My bogus HelloWorld control shows how to do this.

What you end up with in the browser is just this:

<script type="text/javascript">
<!--
FABRIKAM.Resources.RegisterResource (
    'Hello_World_Greeting', 
    'Hello from localized embedded resources!');

FABRIKAM.Utils.displayHelloWorld ();// -->
</script>

Feel free to dissect the sample project.

You can come up with a simple naming convention for script files to append the culture name to the script file name. So, for the first time your page X is requested, you construct the script code (with your localized strings) and save it in a file to your common script files location. You do this for every culture, and maintain a dictionary with what's already there and what's not.

This can also be applied to create many themes (CSS files), with different colors, dimensions, etc., but actually maintaining it in one place only (after all, there's only one version of the markup).