This blog is subject the DISCLAIMER below.

Sunday, February 10, 2008

How to create a multi-lingual web site Step By Step

As usual there are two ways to make a multi-lingual web site:

· The easy , beautiful and half functional way.

· The hard , ugly but full functional way.

We will go first through the common steps for the both ways

First create your ordinary web site with your VS

In the design view add one label and one button and leave them with their default values

From your solution explorer right click on your web site and click add new item and choose Resource File and rename it with you page name and extension (Default.aspx)

A Massage will pop for you asking for creating a Global Resources folder click no

Add a new folder with the name APP_LocalResources and put your Resource file on it

In the Label and the Button add new attribute meta:resourcekey="ResourceName"

Add a new string value in the resource file with the same resource key name and add .Text like ResourceName.Text and give it the Default language value like English

Copy the resource file and rename the new one to the secondary language name like Default.aspx.as-EG.resx

Give the ResourceName for the button another values in the Arabic resource file like عربي

Here come the easy way

Set the Culture and UICulture to Auto from designer or from aspx file like Culture="Auto" UICulture="Auto"

And now just run you application , The Button and the label now should have the default language values from the resource file

Change the default language for you explorer (most explorers will be from Tools->Internet Options->Language(Button)

If the Arabic language is not already there add it and move it up

Now refresh you page and the label and button should change their text to عربي

That’s easy as you can see :d but what is the user don’t know about how to change the browsers language, then we should use the bit harder way and use a button to change the Culture and the UICulture values from the code.


*You need now to change the Culture information on the button Click event, But the problem here is that the culture information will be reset on the postback, so you can use whatever way to keep its value but here I will use cookies .

Now make a new class with name common and put it in the App_Code folder

Make a bool attribute with the name ISArabic like

public static bool IsArabic

{
get

{
if (Thread.CurrentThread.CurrentUICulture.Name == "ar-EG")

return true;
else
return false;
}
}

Now on the button Click we will create a new cookie(if it doesn’t already exist) and give it the culture value just as fallows

HttpCookie myCookie = (HttpCookie)Request.Cookies["Localization"];

if (myCookie == null)

myCookie = new HttpCookie("Localization");

Then we will set the cookie value acording to the current choosen culture

if (Common.IsArabic)

myCookie.Values["Language"] = "en-US";

else

myCookie.Values["Language"] = "ar-EG";

then we set the cookie and add it and Then we redirect to the same page

myCookie.Expires = DateTime.Now.AddYears(1);

Response.Cookies.Add(myCookie);

Response.Redirect(Request.Url.AbsoluteUri);

Now add a new Item and choose Global Application Class

Add a new event called Application_BeginRequest and put the code which checks for the current culture on it just like that


void Application_BeginRequest(Object sender, EventArgs e)

{

HttpCookie myCookie = (HttpCookie)Request.Cookies["Localization"];

if (myCookie != null)

{

//Read culture from cookie
System.Threading.Thread.CurrentThread.CurrentUICulture = new System.Globalization.CultureInfo(myCookie.Values["Language"]); System.Threading.Thread.CurrentThread.CurrentCulture = System.Globalization.CultureInfo.CreateSpecificCulture(myCookie.Values["Language"]);

}

else

{

//Create new default cookie

myCookie = new HttpCookie("Localization");

myCookie.Values.Add("Language", "en-US");

myCookie.Expires = DateTime.Now.AddYears(1);

Response.Cookies.Add(myCookie);

//Set the thread default culture

System.Threading.Thread.CurrentThread.CurrentUICulture = new System.Globalization.CultureInfo("en-US");

System.Threading.Thread.CurrentThread.CurrentCulture = System.Globalization.CultureInfo.CreateSpecificCulture("en-US");

}
}

Don't forget to remove the Auto values for the Culture And UICulture

Now everything should work just fine

You can now use the resource file and change strings, pictures and icons just according to the chosen language

source files could be found here

No comments: