Advertisment

Localize your website

author-image
PCQ Bureau
New Update

If a website wants to pull a large number visitors then it is important to

provide more localized content. This means that the site should show up in the

local language of the visitors accessing the webite. For example if a

non-English reader wants to access your website and your website is not

localized in his/her language, then you might end up losing that visitor. But if

your website is localized, you might be able to retain that visitor. With the

help of Web developer 2008 ASP.NET AJAX, you can build such websites in minutes.

But the only issue is that you should have a translator who knows and can

translate different languages.

Advertisment

Direct Hit!



Applies To: Web developers



USP: Localizing your website


Primary Link: msdn.microsoft.com


Keywords: Localization in AJAX

Earlier, developers used to develop such website, ie, localized websites with

the help of ASP.NET. So what's different in using Web developer 2008 ASP.NET

AJAX? Well the difference lies in the term AJAX. Earlier whole page had to be

rendered from the server and then the required language was shown to the user.

And if the user asks for any other response from the server then also the whole

page had to be refreshed. The technique behind this is that there is a global

resource residing on the server which consists of some keywords that do not

change in any case, ie the name doesn't depend on the language setting of the

user. And there is local resource on the server which contains all the

substitutes for the words that will be changed according the language displayed.

Now using the AJAX the resource gets downloaded on the client itself and

whenever the user demands for any language change then immediately the language

is change after he/she presses refresh button. But this time the text or labels

are not rendered from the server but the local resource that is downloaded at

the client side is used.

Now let us make a simple ASP.NET web site in which we will be implementing

the localization option. For this open the web developer 2008 and create a new

project named as 'websitelocalizaiton'. Now go to 'Website' menu and click on

'Add new item', select the template as resource file, provide the resource file

name as 'global' and then click on 'Add'. Then it may ask you to place the

resource file in the 'App_GlobalResources' folder, ideally it should be done,

hence click on 'Yes'. Once you have added the resource file you will see a

screen similar to that of Access data table. Under the name field write

'Heading' and under the value field write 'THIS IS A TEST WEBSITE'. It can be

understood as the 'Name' field which is the variable and the 'Value' field is

the value associated with the Name. Now save the resource file and close it.

Similarly add a new resource file and name it as 'default.aspx.resx' where we

will keep English words and add another named default.aspx.fr.resx where we will

keep some words of French language(for example). Add some name and value

associated with the 'Name' field, as shown in the image. Add local resource

folder to your website, by clicking on 'App_LocalResources' option from website

> Add ASP.NET folder and move the default.aspx.resx and default.aspx.fr.resx to

'App_LocalResources' folder. Now write the following code on to your website and

then build the solution.

Advertisment
For changing Web browser language setting, go to tools > Internet option

and then click on 'Language button'

<%@ Page Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.vb"

Inherits="_Default" UICulture="auto" %>






Website to demonstrate Localization
























/>







Advertisment









To change your Web browser language setting to French, for instance, go to

Tools > Internet option and then click on 'Language button'. Click on Add

button, select 'fr' from the list and click on Ok. Now select the 'fr' from the
list box and click on move up button and then click on Ok twice. View this
website in the browser, the 2nd label will be 'This is x Language' and when you

change the priority of language to English then the label will be 'This is

English'. How let's include AJAX in the picture. Below is a simple example which

displays date in localized format. We have a script manager included and we have

set the 'EnablescriptGlobalization' attribute to true. Then we have an update

panel which consists of a button and label. So whenever the button is clicked

then current date and time is displayed in the label. Copy the following code

inside the body tag.

As shown in the figure add some name and value associated with the

'Name' field for storing your content in specific language
Advertisment

EnableScriptGlobalization="true" />



UpdateMode="Conditional">

































Next we created an event handler, ie whenever the button is clicked a

function named 'localizedate' is called. Each time the function is called, a new

instance of date object is created and is then formated according to the local

formate. Copy the following code in the head tag of your web page.

The 'localeFormat' method is introduced with the new AJAX extension inside

the date object. This helps in reading the current language setting of the

browser and then formatting the date and time according to it. Open up this in

your web browser and click on the button, it shows the date in English without

refreshing the web page. Now change the language setting in your web browser and

then refresh the page. Next click on the button and it shows you the date and

time in French, and that too without refreshing the whole page.

Advertisment