DB based translation for JavaScript

Question

In my web application all texts are rendered trough a method like:

@GetLangText("SomeKeyForText")

Texts not yet existing in the DB will be added automatically. If someone adds a translation in the DB it iwll be shown during runtime instead of just the key.

I started to play with Ext JS.

I am looking for a straight forward approach to get all my own texts from the DB. I can live with the existing localization for the standard texts.

I want to manage the translation of my web application in the database. The administrator should be able to define or correct any texts of the application during runtime in the DB.

I was thinking about using one of the workarounds to use razor in JavaScript (like shown here). But maybe there are better ways especially when we talk about the combination Ext JS and ASP.NET C#.

I am using Sencha Cmd. If it is possible I want to avoid producing some razor code that cannot be compiled with Sencha Cmd.

The sencha documents and examples do not have a lot information regarding the translation of custom texts.

Answer 1

Before you initialise your Ext JS application, use output a JavaScript object containing your translations:

var LANG = @appTranslations;

/*
The above should render as:

var LANG = {
    alert: {
        title: 'Alert Title',
        message: 'Alert message'
    }
};

*/

Ext.onReady(function() {
    Ext.Msg.alert(LANG.alert.title, LANG.alert.message);
});

Where appTranslations is a view variable set by ASP.NET MVC. It's been a while since I've done any C# but I found a few methods for outputting JSON:

Razor syntax error serializing ASP.NET Model to JSON with Html.Raw

The general idea of this approach is that you're not doing anything Ext JS-specific. Instead you're asking the server to output some JSON into a variable that you can use within Ext JS.

Here's some code to detect missing translations:

var LANG = {
    THIS: {
        THAT: 'HELLO'
    }
};

function getLangText(key, source) {
    var parts = key.split('.'),
        current = source;

    for(var i = 0; i < parts.length; i++) {
        current = current[parts[i]];
    }

    if(current) {
        return current;
    } else {
        return 'Key "' + key + '" not found.';
    }
}

// HELLO
alert(getLangText('THIS.THAT', LANG));

// Key "THIS.THAT.THERE" not found.
alert(getLangText('THIS.THAT.THERE', LANG));

Untested!