Utilizzare i file di risorsa .NET nel javascript

Buongiorno a tutti

oggi vorrei condividere un idea che ho trovato e sviluppato per utilizzare i file di risorse all'interno dei file javascript. La soluzione prevede l'utilizzo dei file di risorse che l'ambiente di sviluppo .NET mette a disposizione.

Negli ultimi tempi, date le nuove tendenze in fatto di sviluppo web, mi sono ritrovato a dover scrivere montagne di file javascript. Le applicazioni che sono solito sviluppare utilizzano interfacce multilingua, quindi mi sono ritrovato a sperimentare diverse soluzioni, per poter restituire dei messaggi all'utilizzatore, nella lingua in cui ha scelto di usare la mia applicazione.

Per massimizzare la resa delle mie applicazioni, in relazione al javascript, mi sono posto i seguenti obbiettivi:

• separare il codice javascript in file statici, di modo che il browser lo possa scaricare e mettere nella sua cache
• separare le traduzioni file diversi, uno per lingua, di modo che l'utilizzatore debba sempre scaricarsi solo il file con le traduzioni per la lingua scelta.

Vediamo come procedere, passo passo

Creare un'applicazione Web. Nel mio caso ho utilizzato il framework MVC, con template Razor.

Aggiungere i file di risorse per le traduzioni. Nel mio caso ho aggiunto un file "Translation.resx" per la lingua principale e un file Translation.de.resx per la lingua tedesca.

Volendo utilizzare questi file in una pagina del sito potremmo mododamente scrivere

Resources.Global.MyResourceName

Per poter fare lo stesso in un file javascript occorre fare ancora qualche passaggio.
Aggiungete un controller all'applicazione. Nel mio caso ho aggiunto un controller "Scripts"

Modificate il codice del metodo Index, come segue. In pratica non dovete fare altro che passare alla vista il codice della lingua corrente.

 public ActionResult Index()
        {
            var cultureInfo = new System.Globalization.CultureInfo((Request.RequestContext.RouteData.Values["id"] ?? "it").ToString());

            return View(cultureInfo);
        }

Modificate la vista Index come segue. Quello che la vista genererà sarà un oggetto Javascript, con tatnte proprietà, quante sono le risorse presenti nel file "Translations.resx"

@model System.Globalization.CultureInfo
@using System.Linq
@using System.Collections.Generic

ResourcesClass = function () {

    GlobalClass = function () {
      return {
            @{var allResources = Resources.Global.ResourceManager.GetResourceSet(System.Globalization.CultureInfo.InvariantCulture, true, true);
              var localizedResources = Resources.Global.ResourceManager.GetResourceSet(Model, true, true);
             }

            @foreach (System.Collections.DictionaryEntry invariantEntry in allResources)
            {
                var entry = invariantEntry;
                foreach(System.Collections.DictionaryEntry localizedEntry in localizedResources)
                {
                    if (localizedEntry.Key == invariantEntry.Key)
                    {
                        entry = localizedEntry;
                    }
                }
                
                @entry.Key<text> : '</text>@Html.Raw(entry.Value.ToString().Replace("'", "\\'"))<text>',</text>@System.Environment.NewLine
            }
        }
    }

    var iGlobalManager = new GlobalClass();

    return {
        Global: iGlobalManager
    };
}


var Resources = new ResourcesClass();

Aggiungete alla masterpage del vostro sito questa riga, con la quale richiamate il risultato della action index del controller Scripts, come fosse un file javascript.

<script src="/Scripts/Index/@System.Threading.Thread.CurrentThread.CurrentUICulture.TwoLetterISOLanguageName"></script>

A questo punto il gioco è fatto. Nei vostri file javascript potete accedere alle risorse dei file resx, esattamente come da una pagina web.

window.load = function()
{
alert(Resources.Global.MyResourceName)
}

Spero che questo articolo possa esservi d'aiuto!