Localising an ASP.Net application

In one of my seminars the issue of internationalisation,localisation ASP.Net applications, came up. More specifically I was asked to provide a hands-on example on how to localise an ASP.Net application.

This is what I did in the class and thought to share the whole experience with you people. The most important thing to point out is that in this world we live in, we should expect our site to be visited by various people from different cultures and languages.So we must be prepared to have our site internationalised. Thankfully ASP.Net simplifies the whole internationalisation/localisation process. The features I am going to demonstrate exist since ASP.Net 2.0.

In order to localise an ASP.Net application we place resource files in special folders. One of them is App_GlobalResources directory where all of our resource files are compiled into assemblies.We also have another special folder App_LocalResources for creating local resources. In a nutshell we can call these two directories, resource compilation directories, and we can pull data from those special directories in a strongly typed fashion.

Let's dive into our example.In this example we will place resource files (.resx ) into these special directories mentioned above.

  • Launch Visual Studio 2010/2008 (express editions will work fine). Create a new empty website and choose a suitable name for it. Choose c# as the development language. 
  • Add a new item in your site, a web form. Leave the default name-Default.aspx.Remember, I instructed you to choose the "Asp.Net Empty web site" from the available templates. At this point you should only have in your solution the Default.aspx web form and the web.config file.
  • Add a new item in your site, a Resource file.Name it localisation.resx. When the Visual Studio suggests that you place this file into the App_GlobalResources directory, go along with that.
  • Now let's go and add some data to our resource file. Click on the localisation.resx file. There you will see name-value pairs.

In my case I added:

Name                     Value

greeting                   Good Morning

anothergreeting         Good Afternoon

 

  • Drag and drop a label control onto the web form. Leave the default properties.
  • In the Page_Load event handling routine type 

Label1.Text = Resources.localisation.greeting + "" 
+ Resources.localisation.anothergreeting;

  • See how we can access the resource strings through the localisation class that was generated because we placed our localisation.resx file in App_GlobalResources directory.
  • Run you application and see the strings being printed to the screen through the label control.
  • Obviously the next step is to localise our little web site.We want to localise the page into Spanish. Add another Resource file item tou your file. Name this new file - localisation.es.resx 
  • Add the following in the localisation.es.resx file.

Name                     Value

greeting                   Buenos Dias

anothergreeting        Buenas Tardes

  • When the application compiles these resource files it will generate a seperate assembly for each one.
  • In the Default.aspx page we must change the Page directive. We should set the Culture and UICulture to auto.
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"
         Inherits="_Default" UICulture="auto" Culture="auto" %>
  • Run your application. If your preferred language is English you will see the english words appearing on the page. If you change your preferred language in the browser to Spanish and refresh the page, you will see the spanish words appearing.
  • Another way to achieve that is through the use of explicit/declarative syntax. Add another label control in the web page. We are going to use the $Resources keyword.

 <asp:Label ID="Label2" runat="server" 
Text="<%$Resources:localisation,greeting %>"></asp:Label>

Run your application and see the second label being localised when you switch languages in the browser.


Now let's see how to localise pages with the Page Resources.

  • We add another web form to our application, Default2.aspx.
  • Drag and drop into the web form, a label control, a button control and a calendar control. Change the text property of the Button to "Run" and the text property of the Label control to "I am a Person".
  • Then go to the Tools->Generate Local Resource and click on this option.
  • You will see under the App_LocalResources special directory a file called Default2.aspx.resx. The tool generates resource files for us automatically. 
  • If you open it, you will see that it has identified all those localised properties of the controls that can be localised and placed them in the resource file.
  • If we now have a  look at the markup we will see something like that
<form id="form1" runat="server">
    <div>
    
    </div>
 <asp:Button ID="Button1" runat="server" meta:resourcekey="Button1Resource1" 
        Text="Run" />
 <asp:Label ID="Label1" runat="server" meta:resourcekey="Label1Resource1" 
        Text="I am a person"></asp:Label>
 <asp:Calendar ID="Calendar1" runat="server" 
        meta:resourcekey="Calendar1Resource1"></asp:Calendar>
</form>

  • Note the meta tags that were added to the controls.Run your application and you will see that the calendar control translates its values based on the chosen locale. So switch languages between english and spanish and see it for yourself.
  • Now let's localise the remaining of the controls found on the page.We need another .resx page for that. So we just copy and paste the Default2.aspx.resx inside the App_LocalResources directory and rename the new .resx file to Default2.aspx.es.resx. Now I am going to localise the various name-value pairs into spanish.
  • Also note that the Page directive of the Default2.aspx markup is now
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" 
Inherits="Default2" culture="auto" meta:resourcekey="PageResource1" 
uiculture="auto" %>

  • Now let's see how we are going to localise some static text. In my default2.aspx page I can add some text like this
        <p><em>ASP.Net</em> is brilliant.</p>
  • Drag and drop a Localise control in the web form. Surround the text above within the Localise control.The final markup should be like this
    <asp:Localize ID="Localize1" runat="server" Mode="PassThrough">
            <p><em>ASP.Net</em> is brilliant.</p>
    </asp:Localize>
  • Run again the Generate Local Resource and then open the Default2.aspx.resx file. You will see a new entry for our static text.
  • Copy the "Localize1Resource1.Text" value from the Default2.aspx.resx file to the Default2.aspx.es.resx file. In the value field type <p><em>ASP.Net</em>es brillante.</p>
  • Run your application and see the results.You have successfully localised the static text.

 

Email me if you need the source code.


Hope it helps.

No Comments