- Internationalization (i18n) - Making your application able to support a multiple languages and locales
- Localization (L10n) - Making your application support a specific language/locale.
- Globalization is the combination of Internationalization and Localization.
To download sample project Click here. This Project explained in detail step by step in this blog.
First we need to have application, Here for example and explanation, we will take application which is basic template provided in VS 2013, for how to create this application you can refer one of my blog post. Once application is created then we can start our work here be following below steps:-
1. First we will create a folder Resources, where we will add our language specific resources files.
2. Now we need to add resource file there, for one for each languages with one default file, you can name them whatever you want, Let’s call it, “Resources”
- Add “Resurces.resx” file in folder, to add right click on resource folder, go to Add >> New Item >> Resource file >> Add
- Now add one file for each language you want, with culture details. Here I am adding file for Spanish, French (France) and Hindi , Named as “Resource.es.resx”, “Resource.fr-FR.resx” & “Resource.hi-IN.resx” respectively. Now our Resources folder will look like below image:-
- Make sure to modify access modifier for each file to public
3. Then add one class file in helper folder, name it as “CultureHelper.cs”, If you don’t have helper folder in solution then add one. To add file, Right Click on folder>> Add New Item>> Add new class file. In this file we will set culture info using threading.
4. Then add below lines of code in “CultureHelper.cs” file:-
public class CultureHelper
{
protected HttpSessionState
session;
//constructor
public
CultureHelper(HttpSessionState httpSessionState)
{
session = httpSessionState;
}
//Here we will look
for availabe culture to set else will set default culture
public static int CurrentCulture
{
get
{
if (Thread.CurrentThread.CurrentUICulture.Name
== "ex")
{
return 1;
}
else if
(Thread.CurrentThread.CurrentUICulture.Name == "fr-FR")
{
return 2;
}
else if
(Thread.CurrentThread.CurrentUICulture.Name == "hi-IN")
{
return 3;
}
else
{
return 0;
}
}
set
{
if (value == 1)
{
Thread.CurrentThread.CurrentUICulture = new CultureInfo("ex");
}
else if (value == 2)
{
Thread.CurrentThread.CurrentUICulture = new CultureInfo("fr-FR");
}
else if (value == 3)
{
Thread.CurrentThread.CurrentUICulture = new CultureInfo("hi-IN");
}
else
{
Thread.CurrentThread.CurrentUICulture = CultureInfo.InvariantCulture;
}
Thread.CurrentThread.CurrentCulture =
Thread.CurrentThread.CurrentUICulture;
}
}
}
5. Add one controller file, name it as “BaseController.cs”, we will use this controller as base for all other controller in application, so that code common code written here can be used in all the pages. We will write code here for setting the language in the current thread for a multilingual site for each page.
6. Then we need to add below methods in BaseController:-
/// <summary>
/// Common code to set culture for each thred
/// </summary>
protected override void ExecuteCore()
{
int culture = 0;
if (this.Session == null || this.Session["CurrentCulture"] == null)
{ int.TryParse(System.Configuration.ConfigurationManager.AppSettings["Culture"], out culture);
this.Session["CurrentCulture"] = culture;
}
else
{
culture = (int)this.Session["CurrentCulture"];
}
// calling CultureHelper class properties for
setting
CultureHelper.CurrentCulture =
culture;
base.ExecuteCore();
}
protected override bool DisableAsyncSupport
{
get { return true; }
}
7. Now we are done with most of basic setup for our application. Now when you run application you may see Index page will get loaded by default for an application. We well make changes in this age so that it will be available in multiple languages.
To change this page to support multiple languages, we need to follow below steps:-
- First find out all the text, which you want to show in multiple languages
- Then add this text in your “Resouce.resx” file with default language you want to display with key and value pair. Here key is the alternate keyword we will use for text to display, and value is always your text you want to show instead.
- In same way update all resource files, make sure to use same key with value as translation in respective language.After finding and updating resource files your files will be look like as below screens (For translations I have used Google translator so it may not correct grammatically):-
- Open HomeCotroller file, and inherit it from BaseController instead of Controller.
- Now in your application pages, for example here “HomeController.cs”, “Index.cshtml “view, we need to replace text with key we defined in resource file. So after replacing text on view and controller your pages will be look like below image:-
8. Now we need to allow user to select language as per his preference. For this here on page we will add one dropdown by which he can select language, you can have that in your login page or somewhere else as per requirement.
Let’s add dropdown in our layout page. i.e. “_Layout.cshtml.” Here I am adding this list next to top menu, after contact. And we also need to write an Ajax call to set culture and on success reloading the page. This Code will be as follows:-
<ul id="menu">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
<li>
<script>
function ReloadPage(e) {
debugger
var CurrentUrl = window.location.href;
//Change Culture info
$.ajax({
url: "@Url.Action("ChangeCurrentCulture","Home")",
type: "GET",
data: ({ 'LanguageID': e.value }),
success: function (result) {
if (result.success) {
//success code here
//Reload page to get
display in selected language
location.reload();
} else {
// error code here
}
},
error: function () {
alert("An error has
occured!!!");
}
});
//Referesh Page
}
</script>
<select onchange="ReloadPage(this)">
<option value="0">--Select Language--</option>
<option value="0">English</option>
<option value="1">Hindi</option>
<option value="2">French</option>
<option value="3">Mexicans</option>
</select>
</li>
</ul>
You need to add one method to any of your controller, which will be called and can be used to set culture info. I am adding this method to “HomeController” and naming it as, “ChangeCurrentCulture”
//Change Current Culture
public JsonResult ChangeCurrentCulture(int LanguageID)
{
// Change the current
culture for this user.
CultureHelper.CurrentCulture = LanguageID;
//Cache the new
current culture into the user HTTP session.
Session["CurrentCulture"] = LanguageID;
//Return true as
cluture info set
return Json(new { success = true }, JsonRequestBehavior.AllowGet);
}
Now when you run the code you must able to see Language drop down, and your page will be look like below screen,
On change of language selection your page will be displayed in selected language:-
Thanks.... :)
Comments
Post a Comment