Friday, 3 May 2013

Localizing an ASP.Net program using C#

Localizing an ASP.Net program using C#

See also the article about localizing a WPF system here
 
See also my video about localizing a WPF system here
 
These days when you are designing a GUI (Graphical User Interface) one of the many topics to discuss is that of localization. Simply, localization means that local date format, currency and language will be supported within the program. If you write the program with an intention to deploy to Germany, China and the United States, you need to support the differences in the 3 cultures.
 
German (de-DE)Chinese Standard (zh-CN)English (en-US)
dd.mm.yyyyyyyy/mm/dddd/mm/yyyy
65.000,00 €¥65,000.00$65,000.00
Montag星期一Monday
 
In the table above you can see the differences in the date format, currency and language. A well designed program will support all the culture specific attributes dynamically. The 3 ASP.Net pages below are a single ASPX page that uses different resource files to change the Labels and the Button text at runtime.
 
 
Internet Explorer uses the Language settings in the browser to dynamically choose which language resource to use. You can set you preference by selecting Tools=> Internet Options => General => Language => set your preference. For this example, you would want it to look like this.
 
 
Before you render the ASP.Net file (aspx), select which language you want to view the file in. If you want German, make sure German is at the top, if you want Chinese, put Chinese at the top, etc…
 
There are a few ways to implement localization into a WPF program. In this example I will use RESX files, as it is the approach I like the best.
 
After you have created your new ASP.Net website and create a directory structure like this.
 
 
NOTE: that the App_LocalResources directory is an ASP.Net directory and not just a regular directory. When you create the directory, do not use the normal New Directory context menu item value. Use the Add New ASP.Net directory and then select App_LocalResources.
 
Your resource files will look like this.
 
 
  • Create a Button - Button1, where we want the text to be Submit.
  • Create a Label - Label3, where we want the text to be Address.
  • Create a Label - Label1, where we want the text to be First Name.
  • Create a Label - Label2, where we want the text to be Last Name.
 
The LocalizeASP.aspx.resx is your default Resource file. You will need to create 3 additional Resources files for this example, one for English, German and Chinese. All 3 need to be moved into the App_LocalResources directory and named like in the above picture.
 
The LocalizeASP.aspx.de-DE.resx file will look like this:
 
 
The LocalizeASP.aspx.en-US.resx file will look like this:
 
 
The LocalizeASP.aspx.zh-CN.resx file will look like this:
 
 
In your aspx file add the following to the @Page directive
 
 culture="auto" meta:resourcekey="PageResource1" uiculture="auto" 
 
As well, add the meta:resourcekey attribute to each of the controls you have on the page that you wish to be localized. For example, the name of our button control is Button1 and in our resource files we make reference to it as Button1Resource1.Text. This means we want to change the Text attribute of the Button1 control. Therefore, we will add the below code within the open button tag.
 
 
                            <asp:Button ID="Button1" runat="server" Text="Submit" 
                                       meta:resourcekey="Button1Resource1" />

                         
 
And that is all. Run your application, view the localized values. Then change your language to either English, German, Chinese or any other language you have configured, hit refresh (F5) and see the localization take effect.
 
TIP: If for some reason this doesn’t work for you. Try deleting all the resource files, the App_LocalResource directory, remove the meta:resourcekey and the 3 attributes added to the apsx file within the @Page directive. Basically, undo everything except the table, labels, textboxes and button in the aspx file. Finally, try changing the view from source to design, make sure the page has focus and from the Extras menu select the Local Resource generator button to have Visual Studio generate the file for you. Then go through this exercise again.
 
Download the source

1 comment: