Creating multilingual website (English / Hindi / Punjabi) using asp.net

This post will be some fun. We will learn how to create a multilingual website using asp.net. A website so built that it will work in any language you choose. By any i mean any ! It works like magic. A click of a button and the whole experience of the visitor changes, as he is now being served content in the language he understands. This helps your website reach more potential customers, not only people who understand English.

What is the logic behind this ?

There are two ways to convert content written in one language into another. Translation and Transliteration. During translation we keep the meaning of the sentence intact. We convert a sentence in some other language which has the same meaning in that language. For example if i translate “I need to drink water” in some other language, then i would speak this sentence in that language by keeping the meaning intact. Transliteration is the practice of converting a text from one writing system into another in a systematic way. For example when you write a message in your local language by using English, you are doing transliteration.
When we change the language of the asp.net website from one language to another, we are neither doing translation nor doing transliteration ! We are simple reading content from different files and just displaying what ever is written in those files. The website or the browser has no information as to which language is being displayed. The asp.net website just reads the content from the file and displays it. Its your responsibility to write content in different languages and keep them in proper files. If you make a mistake in writing or arranging the content, the website will not be able to detect it. It would just display the content as it is, whether its right or wrong.

Lets create our multilingual site step by step

Fire up visual studio and create a new asp.net website. Once you have your website in the solution explorer, right click on the website and select Add asp.net folder option and create App_LocalResources folder. See the screen shot below:

Please notice that you need to select App_LocalResources folder, not App_GlobalResources folder. We created this folder because we will be storing our resource files in this folder. Resource files are the files in which we will add our data in the different languages.

Add a new web page to your website

Right click on your website and add a new web page. Lets name this page as MultiLingualPage.aspx. See the screen capture below:

Add a resource file to your project

What is a resource file and why is it needed ? Any project that you create have some resources associated with it. Your images, audio files, video files, text files etc that you use in your project are all known as resources for your project. In this particular case we need different files in which we will store our strings. I have created this multilingual website in English and Hindi. So i will create 2 resource files, one for English and the second one for Hindi. Microsoft has created .net to be culture sensitive. Many cultures in this world are supported by .net. When i say cultures i mean spoken languages. The default culture for .net is en-US, which is United State’s English. If we want to change the culture to Indian Hindi, we will write hi-IN. Similarly Indian Punjabi is supported, we will write pa-IN. All resource files are culture specific. If I add hi-IN to the name of the resource file, it will automatically be read by asp.net website when you change the website’s culture to Indian Hindi. I will demonstrate later how to change the culture of your website.
For now lets just add 2 resource files to our App_LocalResources folder. To add a resource file, right click on the App_LocalResources folder and select Add New Item. Select the Resource File option and click Add. Earlier when we created App_LocalResources folder i specifically said that do not create App_GlobalResources folder. There was a reason behind this. Local resources are page specific where as Global resources are website specific. This means that every aspx page in your asp.net web application will have its own Local Resource file. The name of the Local Resource file for every web page will be the same as that of the page. We created a web page by the name MultiLingualPage.aspx, so the Resource files for this page will also have the same name. See the screen shot below:

By default this resource file will be considered for en-US culture. Next lets add a new resource file for Indian Hindi culture. See the screen shot below:

Thus we have 2 resource files in the App_LocalResources folder, one for en-US culture and the second one for hi-IN culture.

But how will the website change its language ?

We display text using labels. This is how you add a label to your page.

Text=”Hello World”

> For this label you have fixed the text to “Hello World”, and that too in English. Now what ever you do you can not change the language for this label. Every time you run your website this label will display Hello World and that too in English. Now the trick to change the language for you asp.net website is not to provide text to your label directly. We will keep the actual text in our resource files and provide the key for that text to our label so that the label reads the text from the resource file and displays the text. Look at the highlighted code below :

Text=”<%$Resources:HelloWorld Text%>”

> The above line directs the label to refer to the local resource file for the page in which it is kept and read the string whose key is HelloWorldText. Any thing that will be written for this key in the resource file will be read and displayed as text for this label. Add the following to your English resource file:

Similarly for your Hindi resource file add the Hello World ! string in Hindi. See the screen shot below.

But my keyboard is in English. How can i write other languages ?

Well, Google is the answer. Google provides both translation and transliteration services. The demo site i have created contains text written in English and Hindi. I wrote the content in English and the used Google translation and transliteration both to get appropriate conversions. Below are the links for both these services.

Google Translation Service : Click here
Google Transliteration Service : Click here

Last step, how to change the culture for the website ?

Put an asp.net DropDownList on your web page and provide it the following markup:

AutoPostBack=”True”>

This drop down list has two options, one for English and the second for Hindi. The value for English selection is en-US and that for Hindi selection is hi-IN. The user can choose the language of his choice from here and we will set the culture of the website accordingly. The code for changing the culture for the website will be added to the Global.asax file, in the Application_BeginRequest event. See below:

void Application_BeginRequest(Object sender, EventArgs e)
{
string culture = string.Empty;
foreach (string key in Request.Form.Keys)
{
if (key.Contains(“ddlChangeLanguage”))
culture = Request.Form[key];
}
System.Threading.Thread.CurrentThread.CurrentCulture =
System.Globalization.CultureInfo.CreateSpecificCulture(culture);
System.Threading.Thread.CurrentThread.CurrentUICulture =
new System.Globalization.CultureInfo(culture);
}

In the above code we are checking the Request.Form collection for the value of the dropdownllist that the user selected. Request.Form collection stores data in key value pairs. The key is the Id of the control for which the data is brought back and the value if the value the user selected. Here we are searching for the value of ddlChangeLanguage control, as the name of our DropDownlList was ddlChangeLanguage. Don’t worry about the above code, i have provided all the code for this along with the demo of this post.

We are done !

Now finally when you will run your site the user will be displayed the label in English by default. Then when he selects Hindi language from the drop down, we change the culture of the website in the Application_BeginRequest event. We set the culture to hi-IN and the web page automatically reads the Hindi resource file and displays the text in Hindi. Below are the screen shots of the demo application for this post, both in English and in Hindi.

This is how it looks when Hindi language is selected.

And this is how it looks when Punjabi language is selected.

Simple and smooth. You can download the code for this multilingual website and run it on your system to understand it even better. I have tried to explain quite in detail, but you might not get the real feel unless you download and run the code by yourself. Please post your queries as comments to this post in case you could not understand the concept even after running the website on your local machine. I will reply to your queries and help you understand the concept. Check the following link to see this multilingual site in action and also for downloading the source code.

Hope the information provided in this post was useful. Please provide us your comments / suggestions / appreciations which would help us in providing even more useful posts on this blog. You can help us in sharing this information by clicking the facebook share button, facebook like button or the twitter tweet button below. Also you can share this information on social bookmarking sites by clicking the links under “Share this knowledge” section.
Thanks for reading.