ASP.NET MVC 5 Internationalization-1

http://afana.me/post/aspnet-mvc-internationalization.aspx

Introduction

If your website targets users from different parts of the world, these users might like to see your website content in their own language. Creating a multilingual website is not an easy task, but it will certainly allow your site to reach more audience. Fortunately, the .NET Framework already has components that support different languages and cultures.

We will build an ASP.NET MVC 5 web application that contains the following features:

• It can display contents in different languages.
• It autodetects the language from the user's browser.
• It allows the user to override the language of their browser.

Globalization and Localization in ASP.NET

Internationalization involves Globalization and Localization. Globalization is the process of designing applications that support different cultures. Localization is the process of customizing an application for a given culture.

The format for the culture name is "<languagecode2>-<country/regioncode2>", where <languagecode2> is the language code and <country/regioncode2> is the subculture code. Examples include es-CL for Spanish (Chile) and en-US for English (United States).

Anyway, Internationalization is often abbreviated to "I18N". The abbreviation takes the first and last letters and the number of letters between them, so 18 stands for the number of letters between the first "I" and the last "N". The same applies to Globalization (G11N), and Localization (L10N).

ASP.NET keeps track of two culture values, the Culture and UICulture. The culture value determines the results of culture-dependent functions, such as the date, number, and currency formatting. The UICulture determines which resources are to be loaded for the page by the ResourceManager. The ResourceManager simply looks up culture-specific resources that is determined by CurrentUICulture. Every thread in .NET has CurrentCulture and CurrentUICulture objects. So ASP.NET inspects these values when rendering culture-dependent functions. For example, if current thread's culture (CurrentCulture) is set to "en-US" (English, United States), DateTime.Now.ToLongDateString() shows "Saturday, January 08, 2011", but if CurrentCulture is set to "es-CL" (Spanish, Chile) the result will be "sábado, 08 de enero de 2011".

Now, let’s review the terms used so far:

• Globalization (G11N): The process of making an application support different languages and regions.
• Localization (L10N): The process of customizing an application for a given language and region.
• Internationalization (I18N): Describes both globalization and localization.
• Culture: It is a language and, optionally, a region.
• Locale: A locale is the same as a culture.
• Neutral culture: A culture that has a specified language, but not a region. (e.g. "en", "es")
• Specific culture: A culture that has a specified language and region. (e.g. "en-US", "en-GB", "es-CL")

Why do we need a region? Isn’t a language alone enough?

You might not need a region at all. It is true that English in the United States is not the same as English in the United Kingdom but if your application just shows English text readable to people from these English-speaking countries, you will not need a region. The problem arises when you need to deal with numbers, dates, and currencies. For example, compare the following output for two different Spanish-speaking regions (Chile, Mexico):

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

int value = 5600;   Thread.CurrentThread.CurrentCulture = new System.Globalization.CultureInfo("es-CL"); Console.WriteLine(DateTime.Now.ToShortDateString()); Console.WriteLine(value.ToString("c"));   Thread.CurrentThread.CurrentCulture = new System.Globalization.CultureInfo("es-MX"); Console.WriteLine(DateTime.Now.ToShortDateString()); Console.WriteLine(value.ToString("c"));   // Output 26-07-2011 // Date in es-CL, Spanish (Chile) $5.600,00 // Currency in es-CL, Spanish (Chile)   26/07/2011 // Date in es-MX, Spanish (Mexico) $5,600.00 // Currency in es-MX, Spanish (Mexico)

You can notice the difference in date and currency format. The decimal separator in each region is different and can confuse people in the other region. If a Mexican user types one thousand in their culture "1,000", it will be interpreted as 1 (one) in a Chilean culture website. We mainly need regions for this type of reasons and not much for the language itself.

How to Support Different Languages in ASP.NET MVC

There are two ways to incorporate different languages and cultures in ASP.NET MVC:

1. By using resource strings in all our site views.
2. By using different set of views for every language and locale.
3. By mixing between 1 and 2

Which one is the best?
It is a matter of convenience. Some people prefer to use a single view for all languages because it is more maintainable. While others think replacing views content with code like "@Resources.Something" might clutter the views and will become unreadable. Some project requirements force developers to implement different views per language. But sometimes you have no choice where layout has to be different like right-to-left languages. Even if you set dir="rtl", this may not be enough in real applications unless the project’s UI layout is really simple. Perhaps, a mix of the two is the best. Anyway, for this example, it makes sense to use resources since we won’t have any issue with the layout for the Spanish, English, and Arabic languages that we will use.

How can ASP.NET guess the user’s language?

On each HTTP request, there is a header field called Accept-Language which determines which languages the user’s browser supports:

        Accept-Language: en-us,en;q=0.5

This means that my browser prefers English (United States), but it can accept other types of English. The "q" parameter indicates an estimate of the user’s preference for that language. You can control the list of languages using your web browser.

 
Internet Explorer

 
Firefox

Globalizing our Web Site

We will create a new ASP.NET MVC web application and globalize it step by step.

Click "File->New Project" menu command within Visual Studio to create a new ASP.NET MVC 5 Project. We'll create a new project using the "MVC" template.

Creating the Model

We'll need a model to create our web application. Add a class named "Person" to the "Models" folder:

1 2 3 4 5 6 7 8

public class Person {         public string FirstName { get; set; }         public string LastName { get; set; }         public int Age { get; set; }         public string Email { get; set; }         public string Biography { get; set; } }

Internationalizing Validation Messages

Our model presented above contains no validation logic, and this is not the case in normal applications nowadays. We can use data annotation attributes to add some validation logic to our model. However, in order to globalize validation messages, we need to specify a few extra parameters. The "ErrorMessageResourceType" indicates the type of resource to look up the error message. "ErrorMessageResourceName" indicates the resource name to lookup the error message. Resource manager will pick the correct resource file based on the current culture.

Now modify the "Person" class and add the following attributes:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

public class Person {     [Display(Name = "FirstName", ResourceType = typeof(Resources.Resources))]        [Required(ErrorMessageResourceType = typeof(Resources.Resources),               ErrorMessageResourceName = "FirstNameRequired")]     [StringLength(50, ErrorMessageResourceType = typeof(Resources.Resources),                       ErrorMessageResourceName = "FirstNameLong")]     public string FirstName { get; set; }     [Display(Name = "LastName", ResourceType = typeof(Resources.Resources))]        [Required(ErrorMessageResourceType = typeof(Resources.Resources),               ErrorMessageResourceName = "LastNameRequired")]     [StringLength(50, ErrorMessageResourceType = typeof(Resources.Resources),                       ErrorMessageResourceName = "LastNameLong")]     public string LastName { get; set; }     [Display(Name = "Age", ResourceType = typeof(Resources.Resources))]        [Required(ErrorMessageResourceType = typeof(Resources.Resources),               ErrorMessageResourceName = "AgeRequired")]     [Range(0, 130, ErrorMessageResourceType = typeof(Resources.Resources),                    ErrorMessageResourceName = "AgeRange")]     public int Age { get; set; }     [Display(Name = "Email", ResourceType = typeof(Resources.Resources))]        [Required(ErrorMessageResourceType = typeof(Resources.Resources),               ErrorMessageResourceName = "EmailRequired")]     [RegularExpression(".+@.+\\..+", ErrorMessageResourceType = typeof(Resources.Resources),                                      ErrorMessageResourceName = "EmailInvalid")]     public string Email { get; set; }     [Display(Name = "Biography", ResourceType = typeof(Resources.Resources))]        public string Biography { get; set; } }

Localizing Data Annotations Validation Messages

Because we need to perform data validation on our model using Data Annotations, we will have to add translated resource strings for every culture our site will support. In this case, English, Spanish, and Arabic.

We will store resource files in a separate assembly, so we can reference them in other project types in the future.

Right click on the Solution and then choose the "Add->New Project" context menu command. Choose "Class Library" project type and name it "Resources".

Now right click on "Resources" project and then choose "Add->New Item" context menu command. Choose "Resource File" and name it "Resources.resx". This will be our default culture (en-US) since it has no special endings. Add the following names and values to the file like below:

Remember to mark the resource's access modifier property to "public", so it will be accessible from other projects.

Now create a new resource file and name it "Resources.es.resx" and add the following names and values like below:

Now, do the same for the Arabic version. You may not be able to enter the correct strings by keyboard because your OS may not be configured to accept Arabic. However, you can download the files from the link at the top. Anyway, the resource file is included for reference:

We need to reference "Resources" project from our web application, so that we can read the resource strings right from our web site. Right click on "References" under our web project "MvcInternationalization", and choose the "Resources" project from Projects tab.

Views

We need to extract the English text from all the views and move it to the resource files. Here is a trick, instead of typing the namespace name each time (e.g. "@Resources.Resources.LogOn "), we can add this namespace to the views Web.config and type "@Resources.LogOn" instead. Open the Web.config file under the views folder.