Click here to Skip to main content
13,358,041 members (56,047 online)
Click here to Skip to main content
Add your own
alternative version


13 bookmarked
Posted 13 May 2012

MVC JavaScript localization of external .js files

, 13 May 2012
Rate this:
Please Sign up or sign in to vote.
A system that permit you to manage your external javascript files and use server localizations in it.

I Googled some days for a solution for tranlating JavaScript string placed in external files without finding any simple solution. I found many solutions that store resource in separate files or store translated strings in dictionaly. This solutions was not perfect in my scenario becouse store all translated strings in client browser also when the usere require only a language.

Another reason is that in all this solution you need to reference a translated string by reference a special variable like (progect.translation.testMessage['it-IT']).

I think that the user need only his language strings on the client js file and I prefere to use a string like this @Cult.Text("ID") in the JavaScript code.

First Statement: Why not use the MVC Razor view engine to render the javascript external file script ?

I create a JsController.cs:

 public class JsController : Controller
 // Remember to manage the cache here
 public JavaScriptResult Index(string js, string lang, string ver)
  Response.ContentType = "text/javascript";

  var script = RenderRazorViewToString(js, null);
  var jsRet = new JavaScriptResult();

  script = script
   .Replace("<script type=\"text/javascript\">", string.Empty)
   .Replace("<script>", string.Empty)
   .Replace("</script>", string.Empty);

  var javaScriptMinifier = MinifierFactory.Get<JavaScriptBundle, JsMinMinifier>();

  string minifiedJavaScript = javaScriptMinifier.Minify(script);

  jsRet.Script = minifiedJavaScript;
  return jsRet;

 private string RenderRazorViewToString(string viewName, object model)
  ViewData.Model = model;

  using (var sw = new StringWriter())
   var viewResult = ViewEngines.Engines.FindPartialView(ControllerContext, viewName);
   var viewContext = new ViewContext(ControllerContext, viewResult.View, ViewData, TempData, sw);
   viewResult.View.Render(viewContext, sw);
   viewResult.ViewEngine.ReleaseView(ControllerContext, viewResult.View);
   return sw.GetStringBuilder().ToString();



Then in the Views folder I create a test.js.cshtml view. In this view you can generate your javascript libraries using all power of razor engine (Why not??) You can also create a separate file for a different library and you can use intellisense by adding <script></script> tags tha are removed when rendering the view.

The view is also minified with Squishit

     Layout = "";

 <script type="text/javascript"> // Use this line to get Intellisense...
     function Test() {
         return false;

 In _Layout.cshtml I refer to the script (calling the controller) passing it the current language and version only to manage the cached client file.

You need to manage the cache by creating a Helper to generate the controller path (Use reflection to generate the version of the assemply):

<script src="<a>/Js?js=test.js&lang=@Cult.CurrentCulture()&ver=1.4</a>" Type="text/javascript"></script>

I use this great solution to store the current user culture into a cookie and get it server side: Is it safe to use an HttpModule for localization?

I create a Cut class the manage the translation system, this is a simple implementation you can use resource or other system to translate your strings:

public static class Cult
 public static string CurrentCulture()
  return System.Threading.Thread.CurrentThread.CurrentCulture.Name.Substring(0, 2).ToLower();

 public static string Text(string messageID)
  // This is a fake translation repository implementation but you can use a DB o resource...
  var currentCulture = System.Threading.Thread.CurrentThread.CurrentCulture.Name.Substring(0, 2).ToLower();

  var defaultMessage = string.Empty;

  if (messageID == "TEST")
   return currentCulture == "it" ? "Testo di prova in Italiano" : "Text message in English";

  return currentCulture == "it" ? "Clicca qui per effettuare il test di localizzazione" : "Click here to test the localization";;


That's it!! I create a system that permit you to manage your external javascript files and use localizations on it.

The sample is in the attachment file... plese update all referenced packages with NuGet.

The comments are much appreciated.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

No Biography provided

You may also be interested in...


Comments and Discussions

Questionexample doesn't include external js files Pin
frederik prijck14-Apr-14 23:04
memberfrederik prijck14-Apr-14 23:04 
AnswerRe: example doesn't include external js files Pin
Luka20-Jan-15 23:35
memberLuka20-Jan-15 23:35 
GeneralNice Pin
onurag1914-May-12 5:55
memberonurag1914-May-12 5:55 
GeneralMy vote of 5 Pin
onurag1914-May-12 5:54
memberonurag1914-May-12 5:54 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.180111.1 | Last Updated 14 May 2012
Article Copyright 2012 by Riccardo Bassilichi
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid