Enabling localization in ASP.NET, Razor, javascript, dhtmlx or pure javascript

Question

How do you go about enabling Globalization and Localization in ASP.NET, MVC, Razor, javascript and dhtmlx? I have been looking around for answers and all references I found used the Globalization.js library from jquery. Does anybody have example code using dhtmlx or pure javascript instead? I know how to reference resources within the .cshtml files (Razor) with @using Resources, but how do you reference these resources, like @Resources.UserID, within javascripts embeded within cshtml? I am talking about scripts like ~/Scripts/Global.js.

When I put this in web.config under system.web, create a resources.de.resx file and add de-DE to languages in IE, the title changes as expected using below code, my problem is referencing this in javascripts, so I can change text on forms etc.

<globalization culture="auto" uiCulture="auto" enableClientBasedCulture="true"/>

login.cshtml:

@using SquishIt.Framework
@using SquishIt.Mvc
@using Resources 
@{
    Layout = null;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1DTD/xhtml1-strict.dtd">
<html>
<head>
    <title>@Resources.Title</title>
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="-1" />
    <link rel="shortcut icon" type="image/x-icon" href="@Url.Content("~/Content/favicon.ico")" />
    @(Bundle.Css()
          .Add("~/Scripts/dhtmlx/dhtmlxLayout/codebase/dhtmlxlayout.css")
          .Add("~/Scripts/dhtmlx/dhtmlxLayout/codebase/skins/dhtmlxlayout_dhx_skyblue.css")
          .Add("~/Scripts/dhtmlx/dhtmlxWindows/codebase/dhtmlxwindows.css")
          .Add("~/Scripts/dhtmlx/dhtmlxWindows/codebase/skins/dhtmlxwindows_dhx_skyblue.css")
          .Add("~/Scripts/dhtmlx/dhtmlxForm/codebase/skins/dhtmlxform_dhx_skyblue.css")
          .Add("~/Scripts/dhtmlx/dhtmlxForm/codebase/skins/dhtmlxform_dhx_skyblue_custom.css")
          .Add("~/Content/Site.css")
          .MvcRender("~/Content/SquishIt/BaseLogon_#.css"))
</head>
<body oncontextmenu="return false;">
    <!-- Empty on purpose, JavaScript populates HTML -->
    <!-- Text ruler used to measure text from JavaScript -->
    <span id="TextRuler" class="TextRuler"></span>
</body>
<script language="javascript" type="text/javascript">
    var SKIN_NAME          = "dhx_skyblue";

    var URL_WINDOWS_IMAGES = "@Url.Content("~/Scripts/dhtmlx/dhtmlxWindows/codebase/imgs/")";
    var URL_LOGIN_FORM     = "@Url.Content("~/XML/Forms/Base/Logon.xml")";
    var URL_LOGIN          = "@Url.Content("~/Base/Login/")";
    var URL_MAIN           = "@Url.Content("~/Base/Main/")";

    var LOGON_SESSION_ID   = "@(Session["LOGON_SESSION_ID"])";
    var LOGOFF_MESSAGE     = "@(ViewData.ContainsKey("LogOffMessage") ? ViewData["LogOffMessage"] : "")";
</script>
@(Bundle.JavaScript()
      .Add("~/Scripts/dhtmlx/dhtmlxLayout/codebase/dhtmlxcommon.js")
      .Add("~/Scripts/dhtmlx/dhtmlxLayout/codebase/dhtmlxlayout.js")
      .Add("~/Scripts/dhtmlx/dhtmlxLayout/codebase/dhtmlxcontainer.js")
      .Add("~/Scripts/dhtmlx/dhtmlxWindows/codebase/dhtmlxwindows.js")
      .Add("~/Scripts/dhtmlx/dhtmlxForm/codebase/dhtmlxform.js")
      .Add("~/Scripts/Global.js")
      .Add("~/Scripts/Utility/Browser.js")
      .Add("~/Scripts/Utility/XML.js")
      .Add("~/Scripts/Utility/ErrorHandler.js")
      .Add("~/Scripts/Utility/Form.js")
      .Add("~/Scripts/Utility/MessageBox.js")
      .Add("~/Scripts/Base/Logon.js")
    .MvcRender("~/Content/SquishIt/BaseLogon_#.js"))
</html>

Mortalus · Accepted Answer · 2013-02-24 17:27:43Z

1

Take a look at this post, it offers an alternative way that i have implemented on my web app..

http://madskristensen.net/post/Localize-text-in-JavaScript-files-in-ASPNET.aspx

You will have to create an HTTML handler that will translate your js files according to specific tags.

There is also some configuration required for the routing engine of mvc. This code should go in your global.asax.cs:

    public static void RegisterRoutes(RouteCollection routes)
    {
        //This will send .axd filse to the custom translate handler
        routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
        routes.IgnoreRoute("Scripts/{folder}/{resource}.js.axd/{*pathInfo}");

        routes.MapRoute(
            "Default", // Route name
            "{controller}/{action}/{id}", // URL with parameters
            new { controller = "Home", action = "Index", id = UrlParameter.Optional } // Parameter defaults
        );

    }

NOTE! If you use ISS 7 then you should register the handler like this:

 <system.webServer>
    <validation validateIntegratedModeConfiguration="false" />
    <modules runAllManagedModulesForAllRequests="true" />
    <handlers>
      <add name="ScriptTranslatorHandler" path="*.js.axd" verb="*" type="CamelotShiftManagement.HttpHandlers.ScriptTranslator" />
    </handlers>
  </system.webServer>

Use validateIntegratedModeConfiguration="false" to support backward comparability and add the previously known HTTP handler element.

  <system.web>
     <httpHandlers>
          <add path="*.js.axd" verb="*" type="CamelotShiftManagement.HttpHandlers.ScriptTranslator" />
          <add path="*" verb="*" type="System.Web.HttpNotFoundHandler" />
        </httpHandlers>
  </system.web>

edited Feb 24, 2013 at 17:27

answered Feb 24, 2013 at 8:14

Mortalus

10.7k12 gold badges74 silver badges122 bronze badges

Sign up to request clarification or add additional context in comments.

15 Comments

aggaton Over a year ago

Thanks (eller skulle jeg sige tak? :) I tried your example, however could not get it to work. I added the handler as *.js since I got a ton of javascripts that eventually needs to have translations and they all end in .js, when I try referring to Translate(something) in a javascript, I get: Microsoft JScript runtime error: 'Translate' is undefined. Not sure what I'm missing

Mortalus Over a year ago

your not missing anything that means that the HTTP handler is not running... because it had to relapse the "Translate(ResourceKey)" to the actual string from the resource file.. see if called to your script using myScript.js.axd its important to include the AXD suffixe so that IIS will know that it needs to run your custom handler.

aggaton Over a year ago

I change this in login.cshtml .Add("~/Scripts/Base/Logon.js.axd") and I have this in web.config <httpHandlers> <add verb="" path=".js.axd" type="TiPSViewWeb.ScriptTranslator" /> </httpHandlers> since ScriptTranslator is under namespace TiPSViewWeb. I get <data> <action type="notfounderror" message="The URL requested was not valid (item not found)." /> </data> for logon.js.axd and no form shows up

aggaton Over a year ago

I cleared cleaned and recompiled from scratch, cleared the cache and rebooted the system, and now everything seem to work. When I put this in the init for the form this.setItemText("UserID", "Translate(UserID)"); I get german text for that label, after changed the browsers language. Very nice, thanks a bunch Mads. Not really sure which step it was that solved the issues.

aggaton Over a year ago

To clarify for others in need of this solution, I do .Add("~/Scripts/Base/Logon.js.axd") for each module I have translation in, and each string is specified as "Translate(UserID)", where UserID match up with a string in the Resources.

|

Collectives™ on Stack Overflow

Enabling localization in ASP.NET, Razor, javascript, dhtmlx or pure javascript

1 Answer 1

15 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

15 Comments

Your Answer

Sign up or log in

Post as a guest

Related