Export .resx to JavaScript using ResxToJs MsBuild task

ResxToJs is a MSBuild task that outputs specified keys from a resx file in RequireJS i18n format.

Download

Install ResxToJs nuget package
PM> Install-Package RequireJsNet.ResxToJs

Create resx files

Add a new resx file to your ASP.NET MVC project and name it Resource.resx. Open the file in VS.NET and set the access modifier to Public, now you can add a file per supported language using the naming: Resource.en-US.resx, Resource.ro-RO.resx.

Add some entries to your resources and mark the ones that you want to use in javascript with the js comment. You only have to add this comment in the Resources.resx file.

JS file structure

Create a new folder inside your scripts folder, named Nls. This is going to be the location where your JavaScript resource files will be generated.

Inside the Nls folder add a new JavaScript file, named app-resx.js, in which we are going to list the cultures that we want to be outputted.

define({
	'root': true,
	'en': true,
	'ro': true
});
MsBuils Task

Create a new folder inside your project, named .build, in which you will add the file containing the task, named ResxToJs.targets, with the following content:

<Project xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
<UsingTask TaskName="ResxToJsTask" AssemblyFile="..\bin\RequireJsNet.ResxToJs.dll" />
<Target Name="ResxForBuild" AfterTargets="AfterBuild">
<MsBuild Projects="$(MSBuildProjectFile)" Targets="Resources" Properties="DestinationDir=$(MSBuildProjectDirectory)" />
</Target>
<Target Name="ResourcesForDeploy" AfterTargets="CopyAllFilesToSingleFolderForMsdeploy">
<MsBuild Projects="$(MSBuildProjectFile)" Targets="Resources" Properties="DestinationDir=$(_PackageTempDir)" />
</Target>
<Target Name="Resources">
<ResxToJsTask RootResx="$(MSBuildProjectDirectory)\Resources\Resource.resx" RootJS="$(DestinationDir)\Scripts\Nls\app-resx.js" />
</Target>
</Project>

Add the following line at the end of your .csproj to import the ResxToJs.targets:

<Import Project=".build\ResxToJs.targets" />
Output files

Now you should build the project and check the Output window. If all goes according to plan you will see a message telling how long it took for the resources to be generated. If you check the Nls folder you will see a similar structure to this:

Because the *-resx.js files will be generated on each build, there is no need to keep them on the source repository, in order to exclude them from git you can add the following lines to .gitignore file.

# ignore ResxToJs generated files
**/Scripts/Nls/*
!**/Scripts/Nls/app-resx.js
Javascript usage

If you want to retrieve the resources in your client side code you should use the i18n RequireJS plugin that comes with the RequireJsNet.Scripts package. Add the i18n plugin to the paths config in RequireJS.json file.

{
    "paths": {
        "jquery": "jquery-1.10.2",
        "bootstrap": "bootstrap",
        "i18n": "Components/RequireJS/i18n",
        "text": "Components/RequireJS/text"
    },
    "shim": {
        "bootstrap": { 
            "deps":  ["jquery"]
        }
    }
}

The current culture is determined on the server-side by the System.Threading.Thread.CurrentThread.CurrentUICulture property and attached to the requireConfig global object.

The following code should output an object containing the js marked keys from your resx file.

require([
'i18n!nls/app-resx'
], function (resx) {
console.log(resx);
});
More info

For more information on RequireJS.NET features please read the wiki and check out the samples. If you have suggestion or any kind of feedback regarding RequireJS.NET project please submit an issue here.