Dot Net Rules

Localizing an ASP.Net MVC 4.0 application

In this post I will demonstrate with a hands on demo how to localise your ASP.Net MVC applications.  

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 MVC simplifies the whole internationalisation/localisation process.

I would like to talk about the Thread.CurrentCulture property that impacts formatting. That means that this property instructs the runtime how it should display strings e.g the currency in ($ or  €) or how the date should be displayed.

The other imporant property is Thread.CurrentUICulture which is used by the Resource Manager to look up culture-specific resources at run-time.

I have installed VS 2012 Ultimate edition in my Windows 8 machine. Υou can use Visual Studio Express 2012 for Web. You can install Visual Studio Express 2012 for Web if you download Web Platform Installer.You can download this tool from this link.

1) I am launching VS 2012 and I will Visual C# as the programming language. I will also select ASP.NET MVC 4 Web Application from the available templates. Choose C# as the development language and Internet Application. I will name my application MvcLocalization.All the necessary files are created

2) In the Ιndex.chstml  view in the Home folder add the following code

@{
  
    var mysalary = 2450.0m;
 
    var birthday = new DateTime(1980, 2, 17); 
    
}
 
<div>
    @mysalary.ToString("c")
 
</div>
 
 
 
<br />
 
 
<div>
 
    @birthday.ToShortDateString()
 
</div>

I just declare two variables and output them back to the screen. I format the mysalary  value as currency.

3) Now we need to change our settings in the web.config file.In the <system.web> section add

<globalization culture="auto" uiCulture="auto"/>

4) Build and run your application and you should will see something like the picture below

My default culture in this machine is US English. So everything is formatted accordingly.

I go to Internet Explorer ( I view my app in IE ) -> Tools ->Languages->Set Language Preferences and add another language (Greek)

Now I run again my application. Now I see the new culture format is applied in both my strings.

Have a look at the picture below

 The way ASP.Net runtime managed to display everything in the new culture because it identified the Accept-Language HTTP Header and the globalization entry in the web.config.

5) Now let's move to the next step of localisation and localise some other strings.

To localise text I am going to use .resx files. These files are xml file and are capable of storing localised text per culture.

We need a .resx for every language we want to support.All these resources are compiled in strongly typed classes.

Ι change my language back to English.

I will add a string in the Index.cshml view

<div>Welcome</div>

Now I need to create my resource files.I go to Home (Views Folder) and I add a resource item - Resources.resx.

Now you will that there is Resources.resx.cs file created.Inside there, there is a strongly typed class. In the editor that pops up I will make a new entry.

Have a look at the picture below

Now I go back to the Index.cshtml file and

change this

<div>Welcome</div>

to

<div>@MvcLocalization.Views.Home.Resources.WelcomeText</div>

I add the namespace and then the name of the class (Resources) and the name of the string (WelcomeText).

Build and run your application. You will see the text "Welcome to you all!!!"

Now if I want to add another language I must add create another .resx file.Once more I go to Home (Views Folder) and I add a resource item - Resources.el.resx.

Then I add another entry for the greek language.

Have a look at the picture below

Now,I go to Internet Explorer ( I view my app in IE ) -> Tools ->Languages->Set Language Preferences and add another language (Greek)

I build and run my application. Now I see the localised text "Kαλώς Ήλθατε"

Hope it helps!!!