Localize Web Applications with Microsoft MVC. The Ajax part.


As you can read in this post, it is easy to maintain a localized web application with Microsoft MVC.

This quick post is to add functionality to the client side.

Ajax Calls

In this kind of application, it’s usual to add a lot of ajax calls. This ajax calls, used to have an url without the host, something like:


$.ajax({
 type: "GET",
 url: '/ajaxService/dataValues',

...

In our example, this will fail, because the routing system is not finding any match of that pattern.

As we are always using a two characters in the url to set the language to retrieve, it is easy to get this characters from javascript and add them to the url. Note that if there is no language set in the url (default language), the code is setting the language to ‘en’, which is the default language of the site:


var url = '/ajaxService/dataValues';
var path = window.location.pathname.split('/');
var lang = (path[1].length != 2 ? "en" : path[1];
var urlService = '/' + lang + url;
$.ajax({
   type: "GET",
   url:urlService,

   ...

Messages

Another milestone to acquire is the messages showed in the browser. We have all the messages coming from the server in the render already translated, but in a rich client application, many of them will produce in the client side, so, we need a mechanism to show them in the proper language.

We can leverage jStorage to make the hard job. this tool is compatible from IE6!!!, so you will not have problems with browsers, even in mobile browsers.

E.g., if we need to get a string to display into a warning div, we can write a simple function to retrieve the value translated:

function getText(lang, key) {
   var langkey = lang + key;
   var value = $.jStorage.get(langkey);
   if (!value) {
      value = loadKeyFromServer(lang, key);
      $.jStorage.set(langkey, value);
   }
};

And, of course, a function to get through ajax, the translation required in a simple way:

function loadKeyFromServer(lang, key) {
   var urlService = '/' + lang + '/home/GetTranslation?key=' + key;
   $.ajax({
      type: "GET",
      url: urlService,
      data: {},
      contentType: "application/json",
      success: function(data) {
         return data;
      }
   });
};

As you can see, the system is looking for a translation sending the current language and the key to find. In this example, it is necessary to implement an Action called GetTranslation in the Controller called Home, but we are focused only on the client side, so, I left this implementation to you.

With this system, if the translation required is not found on the local storage, it will ask the server for it. This way, we are only storing the data we are using, and we are only asking for the data we need.

The usage of this function can’t be easier, e.g.:


var lang = (path[1].length != 2 ? "en" : path[1];
$(".alert-error").append("<h4>" +  getText(lang, "ERRORTITLE") + "</h4><p>" + getText(lang, "ERRORMESSAGE") + "</p>");

I hope this post will be useful merged with this one.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s