Jul
1
2012

asp.Net Easily make your web application multilingual – Part 1

Living in Canada and working for a Federal Department, I always have to consider bilingual (multilingual) content when dealing with my applications.  Visual Studio 2010 and asp.net make this a fairly simple thing to do, here’s how.

Localization – A Multilingual web application

Lets start by using the proper keywords, anytime you want to have multilingual content, what you’re actually talking about is Localization.  This covers more than just the text you see on the screen, you need to think about the bigger picture, Date Formats and Currency are just examples of some of the things that are affected by a users Localization.

Things to consider

There’s an OOTB (Out of the box) method of localization which depends on the language setting in Browser and/or the language settings of the OS used by the User.  I never use this method because I personally know many people who’ve never bothered to change their Regional settings, ether because they don’t know how, or they don’t care.

I’m a bit anal in my coding, so I prefer to control as much of the User’s experience as possible, therefore, for the purpose of the exercise, I will walk you through my preferred method of localizing a website.

There’s alot of excellent info on MSDN if you want to know more, but the below will get you off to a start.  Just remember that a multilingual website exposes your content to an ever increasing audience and as such, should be treated with high regard.

Step. 1

  • Create a new webform called default.aspx using Visual Studio 2010.
  • Go to Design View, then from the Toolbar, Tools-Generate Local Resource.

Now at this point, things have already become interesting as Visual Studio has done a number of things on your behalf.

  • Firstly, it will have created a new folder in your Solution called App_LocalResources with a new file called default.aspx.resx.  This is called a Resource file, it will eventually contain all of the text for your default.aspx page in one language.  Double click on it to open it in Visual Studio 2010.  If you followed my steps above, Visual Studio will have already populated a few rows with information.
  • Keep the Resource file open and open your Default.aspx page in Source view.  You’ll notice references to meta:resourcekey(s), culture and uiculture, these were also added by Visual Studio.
  • The above things are all a part of the method which I do not use, therefore, time for some cleanup!

 

Step. 2 – Cleanup

  • Remove all instances of meta:resourcekey=”controlname”.  If you use the Generate Local Resource tool immediately after creating the page, cleanup only takes a few seconds as there are no control tags to clean.
  • In the Page Header, remove meta:resourcekey=”PageResource1″
  • Also in the Page Header, remove both culture references, culture=”auto” and uiculture=”auto”
  • Open the existing Resource file (default.aspx.resx) and delete all rows of text.

At this point you have a clean .aspx page and an empty Resource file.

Step. 3 – Additional Languages

  • right click default.aspx.resx, hit Copy, click on the App_LocalResources folder and right click again to Paste.
  • rename the Copy of default.aspx.resx to default.aspx.fr-CA.resx

Asp.net recognizes individual languages and their particulars (currency, date formats, etc.) as Culture.  In this case, we have identified the contents of default.aspx.fr-CA.resx as French-Canada, it you were in France, you would use default.aspx.fr-FR.resx.

This holds for english as well, note that in the UK, the use the pound, not the dollar, if you want your currency to automatically appear correct to your users, you would us en-US or en-GB, etc.

You can use the copy and paste trick above for any number of languages.

(You can find a comprehensive list of Culture’s here.)

At this point you are ready to begin populating the localized info, meaning you need the translated word or term for each label, hyperlink, etc. in each language.

  • open the English Resources file and add 1 row, type ‘WelcomeText’ in the Name column and ‘Welcome to my website’ in the Value column
  • open the French Resources file and add 1 row, type ‘WelcomeText’ in the Name column and ‘Bienvenue sur mon siteweb’ in the Value column

You now have content for the same Label in 2 languages, whoa a multilingual App!

My following Article will show you how to use Code Behind to finish the job.

Happy coding!

Go to asp.Net Easily make your web application multilingual – Part 2

If you enjoyed this post, please consider leaving a comment, or sharing it by Tweeting or using the FaceBook Like button.

You may also Subscribe to this blog and receive notifications of new posts by email using the feature at the top of the page.

Please remember to visit my Sponsors (right column) as it helps me get the bills paid.

Comments

comments

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Visit my Sponsors

Read previous post:
download
Hardware Must Have – Get yourself a WHS (Windows Home Server)

If you do any .Net of WordPress development outside the office, you need to get yourself a Windows Home Server....

Close