Globalization And Localization In ASP.NET AJAX
(
Jul 03 2007 - 08:16:19 PM by
Timothy Khouri) - [
print article]
Globalization and localization are often overlooked features in ASP.NET. The fact that the names sound alike, and the functionality is similar doesn't help either. ASP.NET AJAX has refreshed the face of these two beauties now by bringing them to the client-side world. We'll see what these two topics cover as well as how easy it is to utilize them in JavaScript with ASP.NET AJAX.
Globalization - What Is It?
One definition for globalization puts it nicely: "A process of creating a product or service that will be successful in many countries without modification." Basically, as a web developer building a multi-national web application, you can utilize ASP.NET (and in this case ASP.NET AJAX) to automatically format dates, currency and other things according to the preferences of your visitors.
This article (and attached source code) will demonstrate how use globalization features to format a date and a numeric field using the extended functions added to JavaScript by ASP.NET AJAX.
Localization - What Is It?
This is similar to globalization, but it focuses on translating parts of your site (primarily the UI) based on the user’s culture (or language). Unlike globalization, with localization the translation itself is not done by ASP.NET. You will need to create "resource" files for each culture that you want to support. The job of ASP.NET AJAX is to detect the culture of the user coming to your site, and to show him the right text.
Keep in mind that both globalization and localization are not new concepts, and they are not new features to ASP.NET. The part of this that is new is the tie-in to JavaScript brought about by ASP.NET AJAX.
Formatting Dates and Numbers with Globalization
The following code and screen shots will show the how easy it is to change the formatting of dates and numbers based on the culture of someone visiting your site. We are going to build a page which simply displays the current date and time, and also a number formatted as currency. Then we'll see how they automatically change as we switch to a different culture.
Here is some basic HTML that we are going to use to display the current date and a currency field.
<p>
Currency for the culture selected: <span id="currencySpan" />
</p>
<p>
A date for the culture selected: <span id="dateSpan" />
</p>
Now we'll look at a simple JavaScript function that will display values into the above spans.
window.onload = function() {
$get("currencySpan").innerHTML = String.localeFormat("{0:c}", 12345.67);
$get("dateSpan").innerHTML = String.localeFormat("{0:dddd, dd MMMM yyyy hh:mm:ss tt}", new Date());
}
If you have been using JavaScript for a long time you might be wondering what "$get" and "String.localeFormat" are. Those are functions that are added into JavaScript just by having the ASP.NET AJAX ScriptManager object on your ASP.NET page. The "$get" function is similar to the "document.getElementById" function in JavaScript.
The String.localeFormat function does exactly what you think it would do: it converts a value into a string in the format that you would expect from your locale (culture or language). Here are the results of the two conversions above:
Now, notice what happens to the values as we change to a different culture. Keep in mind; we are not changing our code at all.
Download the source code for the demos in this article at the end and see it for yourself. Now we are going to how we can change our user interface using localization in ASP.NET AJAX. We are going to pretend that we have some client side validation that will display an error message to the user in their local language.
Multi-Lingual UI with Localization
Localization gives you the power to support different languages in your web application. You can choose to translate your UI (the text on buttons, labels etc) or you can change other things such as error messages (which we will do in this demo). It is important to note (again) that the localization features will not translate your text for you (as globalization does), but will simply use the translation you provide for the right culture.
We've added the following HTML to our above example:
<button onclick="DisplayStandardError();">
Show "Standard Error" Message</button>
And here is the JavaScript code that contains the function "DisplayStandardError":
function DisplayStandardError()
{
alert(ErrorCodes.StandardError);
}
Notice that we are alerting "ErrorCodes.StandardError", but we are not defining that value anywhere. This is where localization comes in. We are going to tell ASP.NET AJAX that we have some resources in another DLL that will contain the "ErrorCodes" object which has a "StandardError" string value in there. Also, we are going to provide a translation for French, Spanish and Japanese.
We are not going to show all the code here, but you can download the source at the end of the article and see how easy it is for yourself. We will, however, show the results here:
Conclusion
As I said before, the topics of globalization and localization are not new. The amazing ability of to utilize them on the client side with JavaScript is new. Download the source for yourself and see how easy it is add some multi-lingual functionality to your web applications. Here is the full source code: AJAX Globalization and Localization Source Code