CODEWITHSUNDEEP
javascriptasp.net-mvc-3localizationrazor-2
aggaton
aggaton

Reputation: 3350

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

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>

Upvotes: 0

Views: 1147

Answers (1)

Mortalus
Mortalus

Reputation: 10712

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>

Upvotes: 1

Related Questions