Making your ASP.NET Global Resource files work in JavaScript. IntelliSense included!

Any modern web application needs localization! You simply can’t ignore the huge amounts of people who doesn’t speak your language, or whose native language is different from yours.

You’re probably using resource files (.resx) in .NET, but how do you go about getting values from your resource files in JavaScript?

Rick Strahl wrote a great blog post about an HttpHandler that serves the content of your resource files in JavaScript. You basically add a script tag to your page that points to the HttpHandler, and the HttpHandler will produce the resources in JavaScript as an object with properties on it, like this:

[code lang=”js”]var localRes = {
AreYouSureYouWantToRemoveValue: “Sind Sie sicher dass Sie diesen Wert l\u00F6schen wollen?”,
BackupComplete: “Der Backup f\u00FChrte erfolgreich durch”,
BackupFailed: “Der Backup konnte nicht durchgef\u00FChrt werden”,
BackupNotification: “Diese Operation macht einen Backup von der Lokalisationtabelle. \nM\u00F6chten Sie fortfahren?”,
Close: “Schliessen”,
FeatureDisabled: “Diese Funktion ist nicht vorhanden im on-line Demo “,
InvalidFileUploaded: “Unzul\u00E4ssige Akten Format hochgeladen.”,
InvalidResourceId: “Unzul\u00E4ssige ResourceId”,
Loading: “Laden”,
LocalizationTableCreated: “Lokalisations Akte wurde erfolgreich erstellt.”,
LocalizationTableNotCreated: “Die Localizations Akte konnte nicht erstellt werden.”
};[/code]

This is awesome! Now you can access your resource files from JavaScript. Though, I see a single improvement to be made. The thing I don’t like about the HttpHandler approach, is that you don’t get IntelliSense support in Visual Studio. So you have to browse your resource file and copy & paste the resource key to your JavaScript files in order for this to work.

Generate static JavaScript files on Post-build

Instead of generating dynamic files at runtime, I prefer to generate static JavaScript files and then dynamically include the file of the current language on my pages. I do this by calling a Console Application I’ve written on the Post-build event of my ASP.NET (MVC) project, which you can set in the property pages of your project (By the way, did you know that you can open property pages of a project by double clicking the default Properties folder?):

image

What my JavascriptResxGenerator App does, is quite messy. But the essence of the App is, of course, to take a single (or several) .resx files and do the following:

  1. Loop through all keys.

  2. Make sure the key is not a JavaScript reserved word.

  3. Add the key and value to a dictionary (in JavaScript).

  4. Write the file.

And for the default culture I generate a –vsdoc file, that I can use for Visual Studio IntelliSense.

Using the JavaScript Resx Generator App

My App supports a single file approach, and directory approach.

*Single file: *JavascriptResxGenerator.exe C:\Folder\Text.resx C:\Output C:\Output\VsDoc MyApp.Namespace.Resources

*Directory: *JavascriptResxGenerator.exe C:\Folder C:\Output C:\Output\VsDoc MyApp.Namespace.Resources

The MyApp.Namespace.Resources value, is the namespace your resource dictionary will get enclosed in.

image

Embedding the file on your pages

To include the JavaScript resource file in your page, you simply add a script include tag that points to the correct language. The App will respect the region token used in your Resx files. So if you have a file called Text.da.resx, the JavaScript file generated will include .da.resx at the end. It’s then up to you to add the correct logic to keep hold of the current language and specify the correct region token in order to include the correct JavaScript resource file.

Download

You can download the App here, as a ZIP file.