by July 5, 2008 0 comments



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.

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.

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" %>
<head runat="server">
<title>Website to demonstrate Localization</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="LabelHeader" runat="server" Text="<%$Resources:Global, Heading
%>" />
<br />
<asp:Label ID="Label" runat="server" Text="Default Label Text" meta:resourcekey="Label"
/>
</div>
</form>
</body>
</html>

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

<asp:ScriptManager ID="ScriptManager1" runat="server"
EnableScriptGlobalization="true" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="False"
UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="Panel1" runat="server">
<asp:Button ID="Button" runat="server" Text="Click Here" />
<br />
<asp:Label ID="Label" runat="server"></asp:Label>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>

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.

<script type="text/javascript">
Sys.UI.DomEvent.addHandler($get("Button"), "click", localizedate);
function localizedate() {
var d = new Date();
$get(‘Label’).innerHTML = d.localeFormat("dddd, dd MMMM yyyy HH:mm:ss");
}
</script>

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.

No Comments so far

Jump into a conversation

No Comments Yet!

You can be the one to start a conversation.

<