Question

One of the apps I work on is a large ASP.NET 3.5 Web Forms app that is used in the U.S., Central and South Americas, and Europe. We’re also starting to do more work with AJAX, and thus we need to settle on a strategy for localizing strings in our JavaScript controls.

For example, we have a control written as a jQuery plugin that formats data into a sortable table. The buttons and table columns need to be localizable.

We’re currently using two different approaches to handle this scenario, but I’m not completely satisfied with either.

1. Write the bulk of the code in a jQuery plugin style, then place a script block on the .aspx page where we’ll pull in values from a .resx file and feed them into the plugin code. Here’s an example in pseudo code:

    <script>
       var view;
       $(function() {
           view = {
               columnHeaders: { 
                   productNumber = <%$ Resources:WidgetProductNumber_HeaderText %>, 
                   productDescription = <%$ Resources:WidgetProductDescription_HeaderText %> 
               }
           };
   
       });
   </script>
   

2. Place the JavaScript in plain .js files with custom tokens in place of strings. We have a handrolled HttpModule that will parse JavaScript files and replace the tokens with values from any existing .resx file whose file name matches the name of the JavaScript file being processed.

Both approaches have problems. I’d prefer to keep our JavaScript code separate from our .aspx pages to make it more unobtrusive and reusable.

The HttpModule approach is clever but a little opaque to developers. I’m also looking to implement a JavaScript bundler called Rejuicer, which is also written as an HttpModule, and getting these to work together seems like it would require customizing the open source code. I’d prefer to use the code as it’s written so that we can upgrade it as the project progresses.

Are there any other tried-and-true strategies for approaching this problem in ASP.NET?

Answer 1

It seems that both approaches are a little more complex/cumbersome than necessary. Keep it simple.

1) Using an .ashx, custom http handler, or web service, create a .net object (anonymous, custom — doesn’t matter) that matches the client side JSON object.

2) Populate server side object’s properties with the localized values

3) Set the response content type to text/json or text/javascript.

4) Using the JavaScriptSerializer class, serialize the object into the response stream.

From the client side, you have two options:

1) Use an AJAX call to the .ashx/handler/service to set your client side “view” object to the response JSON.

2) Create a script tag with the src=”the/path/to/the/serviceOrHandler”. In this case you would need to include the js variable declaration in your response output.

Let me know if you need a code sample.