How to use localized messages in javascript file in asp.net

Question

How to use localized messages in javascript file in asp.net.

I have a Javascript file (global-Scripts.js) which contains all my scripts. I use another file (messages.js) which has all the static error messages (ex: "are you sure you want to delete?") so that this can be localized.

Is it possible localize this main script file without having another file (messages.js), so that I can remove one script reference?

Answer 1

The ASP.NET ScriptManager control has the ability to provide localization for your scripts in a couple of ways.

If your script is embedded in your assembly as a resource using the WebResourceAttribute then you can use the ScriptResourceAttribute to let the ScriptManager know that you have some localized strings stored in a .resx file somewhere that you want served up any time your script is served. These strings get injected into the page as a JSON object and then in your main script you output references to the JSON object rather than literal strings.

For example, you would embed your script like this:

[assembly: System.Web.UI.WebResource("ProjectNamespace.MyScript.js", "application/x-javascript")]
[assembly: System.Web.UI.ScriptResource("ProjectNamespace.MyScript.js", "ProjectNamespace.MyScriptResources", "Messages")]

The "ProjectNamespace.MyScript.js" is the full path to the embedded resource that is your script. In the ScriptResourceAttribute, the second parameter is the full path to the embedded .resx file (minus the .resx extension) that contains all of the localized messages. You treat that just like any other .resx, so you'd have MyScriptResources.resx for the default culture, then MyScriptResources.es-MX.resx for Mexican Spanish overrides, etc. That last parameter in the ScriptResourceAttribute is the name of the JSON object that will be generated.

In your script, you reference the JSON object:

function DoSomething()
{
  alert(Messages.ErrorMessage);
}

In the above snippet, "ErrorMessage" is the name of one of the string resources in the .resx file.

If you embed the script, reference it from the ScriptManager using a tag that specifies an Assembly and a Name.

Alternatively, you can keep fully localized copies of the script, like "MyScript.js," "MyScript.es-MX.js," "MyScript.en-UK.js," etc. where the localized logic and messages are hardcoded right into the script.

If you do this localization method, reference it from the ScriptManager using a that specifies a Path.

There is a really nice overview and links to detailed walkthroughs on this with code examples on MSDN.

Note that if you are using ASP.NET MVC, the ScriptManager control doesn't really work with it. In that case, you'll want to look at a different solution like the jQuery globalization plugin or potentially a custom ScriptManager replacement for use in MVC.

Answer 2

I have a solution that I have used to solve this. It allows you to use your global resources in held in you asp.net web application within your js files. Essentially it uses a page GetLocalisedScript.aspx to serve your js files.

The page is as follows:

protected void Page_Load(object sender, EventArgs e)
    {
        string retval = "";

        string file = Request["js"].ToString();

        using(StreamReader sr = new StreamReader(Server.MapPath(string.Format("~\\scripts\\{0}.js",file))))
        {
            retval = sr.ReadToEnd();
            sr.Close();
        }

        Regex rx = new Regex("##LOCALISE(.+?)##",RegexOptions.Singleline);
        MatchCollection mc =  rx.Matches(retval,0);
        foreach (Match m in mc)
        {
            string strResxKey = m.Value.Replace("##LOCALISE(", "").Replace(")##", "");
            string val = GetGlobalResourceObject("myResource", strResxKey).ToString();
            retval = retval.Replace(m.Value, val); 
        }
        //Just write out the XML data
        Response.ContentType = "text/xml";
        //NOTE THAT THIS PAGE DOESN'T CONTAIN ANY HTML TAG, WHATSOEVER
        Response.Output.Write(retval);
    }

Mark up

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GetLocalisedScript.aspx.cs" Inherits="TestMulti.GetLocalisedScript" %>

In your page replace the standard src with something like the following:

<script src="GetLocalisedScript.aspx?js=myJS" type="text/jscript" ></script>

Where myJS Is the name of your js file.

Then modify your js file to include the ##LOCALISE()## tags.

function alert2(val) {
alert("##LOCALISE(Yes)##");
}

The GetLocalisedScript.aspx page will replace all of the tags with the resource look ups.

Hope this helps someone.