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.