Building 🏗️ Multilingual Web Application Using .NET - Part One

Introduction

 

In this article, we will learn  a step by step process to create a multilingual webform application using Asp.net. Multilingual means we can  implement the website in multiple languages.

 

In today's world to grow customer ineraction, everyone needs to implement this procedure in their applications.

 

Prerequisites

• Visual Studio

Note

Before going through this session, please visit my previous articles related to Asp.net for better understanding.

 

Step 1

 

First we need to add a webpage and design for a multilingual form.

 

Code Ref

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="UserSignUp.aspx.cs" Inherits="multilingualAsp.UserSignUp" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <style>
        .button {
            background-color: #4CAF50;
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
        }

        .button1 {
            background-color:red;
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
        }
        .button4 {
            border-radius: 9px;
        }
        input[type=text], select {
        width: 100%;
        padding: 12px 20px;
        margin: 10px 0;
        display: inline-block;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
        font-family: 'Montserrat', sans-serif;
        text-indent: 10px;
        color: blue;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        font-size: 20px;
    }
     .UnderLine{
         text-decoration:underline;
         color:red;
     }

    </style>


    <div style="text-align:right;">
                <asp:DropDownList ID="ddLang" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddLang_SelectedIndexChanged">
                    <asp:ListItem Value="en-US" Text="English" />
                    <asp:ListItem Value="fr-FR" Text="français" />
                    <asp:ListItem Value="hi-IN" Text="हिंदी" />
                    <asp:ListItem Value="or-IN" Text="ଓଡିଆ" />
                </asp:DropDownList>
            </div>

    <div style="font-family: Arial Black;background-color:yellow; color:red; font-size:x-large;font-style:normal; text-align:center;">
        <asp:Label ID="lblMyName" runat="server" />
        </div>
    <div style="float:left">
            <table>
                <tr>
                    <td><asp:Label ID="lblName" runat="server" style="font-weight:bold"/></td>
                    <td><asp:TextBox ID="txtName" runat="server" /></td>
                </tr>
                <tr>
                    <td><asp:Label ID="lblAddress" runat="server" style="font-weight:bold"/></td>
                    <td><asp:TextBox ID="txtAddress" runat="server" /></td>
                </tr>
                <tr>
                    <td><asp:Label ID="lblState" runat="server" style="font-weight:bold"/></td>
                    <td><asp:TextBox ID="txtState" runat="server" /></td>
                </tr>
                <tr>
                    <td><asp:Label ID="lblCountry" runat="server" style="font-weight:bold"/></td>
                    <td><asp:TextBox ID="txtCountry" runat="server" /></td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <asp:Button ID="btnSave" runat="server" class="button button4" />
                        <asp:Button ID="btnCancel" runat="server" class="button1 button4"/>
                    </td>
                </tr>
            </table>
        </div>

     <div style="float:right">
            <h3>
                <asp:Label ID="lblh1" runat="server" CssClass="UnderLine"/>
            </h3>
                <h2>
                    <asp:Label ID="lblp1" runat="server" />
                </h2>
            <hr>

            <h3>
              <asp:Label ID="lblh2" runat="server" CssClass="UnderLine"/>
            </h3>
               <h2>
                   <asp:Label ID="lblp2" runat="server" />
               </h2>
         </div>
</asp:Content>

Code Description

 

Here in the dropdown list we added a value that is very important for translating langulages. It must satisfy the ISO Language Code extension. For example: To make a Hindi translation we added value "hi-IN" code.

<div style="text-align:right;">
                <asp:DropDownList ID="ddLang" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddLang_SelectedIndexChanged">
                    <asp:ListItem Value="en-US" Text="English" />
                    <asp:ListItem Value="fr-FR" Text="français" />
                    <asp:ListItem Value="hi-IN" Text="हिंदी" />
                    <asp:ListItem Value="or-IN" Text="ଓଡିଆ" />
                </asp:DropDownList>
            </div>

Language	ISO Code 2	ISO Code 3
Abkhazian	ab	abk
Afar	aa	aar
Afrikaans	af	afr
Albanian	sq	alb/sqi*
Amharic	am	amh
Arabic	ar	ara
Aragonese	an	arg
Armenian	hy	arm/hye*
Assamese	as	asm
Avestan	ae	ave
Aymara	ay	aym
Azerbaijani	az	aze
Bashkir	ba	bak
Basque	eu	baq/eus*
Belarusian	be	bel
Bengali	bn	ben
Bihari	bh	bih
Bislama	bi	bis
Bosnian	bs	bos
Breton	br	bre
Bulgarian	bg	bul
Burmese	my	bur/mya*
Catalan	ca	cat
Chamorro	ch	cha
Chechen	ce	che
Chinese	zh	chi/zho*
Church Slavic; Slavonic; Old Bulgarian	cu	chu
Chuvash	cv	chv
Cornish	kw	cor
Corsican	co	cos
Croatian	hr	scr/hrv*
Czech	cs	cze/ces*
Danish	da	dan
Divehi; Dhivehi; Maldivian	dv	div
Dutch	nl	dut/nld*
Dzongkha	dz	dzo
English	en	eng
Esperanto	eo	epo
Estonian	et	est
Faroese	fo	fao
Fijian	fj	fij
Finnish	fi	fin
French	fr	fre/fra*
Gaelic; Scottish Gaelic	gd	gla
Galician	gl	glg
Georgian	ka	geo/kat*
German	de	ger/deu*
Greek, Modern (1453-)	el	gre/ell*
Guarani	gn	grn
Gujarati	gu	guj
Haitian; Haitian Creole	ht	hat
Hausa	ha	hau
Hebrew	he	heb
Herero	hz	her
Hindi	hi	hin
Hiri Motu	ho	hmo
Hungarian	hu	hun
Icelandic	is	ice/isl*
Ido	io	ido
Indonesian	id	ind
Interlingua (International Auxiliary Language Association)	ia	ina
Interlingue	ie	ile
Inuktitut	iu	iku
Inupiaq	ik	ipk
Irish	ga	gle
Italian	it	ita
Japanese	ja	jpn
Javanese	jv	jav
Kalaallisut	kl	kal
Kannada	kn	kan
Kashmiri	ks	kas
Kazakh	kk	kaz
Khmer	km	khm
Kikuyu; Gikuyu	ki	kik
Kinyarwanda	rw	kin
Kirghiz	ky	kir
Komi	kv	kom
Korean	ko	kor
Kuanyama; Kwanyama	kj	kua
Kurdish	ku	kur
Lao	lo	lao
Latin	la	lat
Latvian	lv	lav
Limburgan; Limburger; Limburgish	li	lim
Lingala	ln	lin
Lithuanian	lt	lit
Luxembourgish; Letzeburgesch	lb	ltz
Macedonian	mk	mac/mkd*
Malagasy	mg	mlg
Malay	ms	may/msa*
Malayalam	ml	mal
Maltese	mt	mlt
Manx	gv	glv
Maori	mi	mao/mri*
Marathi	mr	mar
Marshallese	mh	mah
Moldavian	mo	mol
Mongolian	mn	mon
Nauru	na	nau
Navaho, Navajo	nv	nav
Ndebele, North	nd	nde
Ndebele, South	nr	nbl
Ndonga	ng	ndo
Nepali	ne	nep
Northern Sami	se	sme
Norwegian	no	nor
Norwegian Bokmal	nb	nob
Norwegian Nynorsk	nn	nno
Nyanja; Chichewa; Chewa	ny	nya
Occitan (post 1500); Provencal	oc	oci
Oriya	or	ori
Oromo	om	orm
Ossetian; Ossetic	os	oss
Pali	pi	pli
Panjabi	pa	pan
Persian	fa	per/fas*
Polish	pl	pol
Portuguese	pt	por
Pushto	ps	pus
Quechua	qu	que
Raeto-Romance	rm	roh
Romanian	ro	rum/ron*
Rundi	rn	run
Russian	ru	rus
Samoan	sm	smo
Sango	sg	sag
Sanskrit	sa	san
Sardinian	sc	srd
Serbian	sr	scc/srp*
Shona	sn	sna
Sichuan Yi	ii	iii
Sindhi	sd	snd
Sinhala; Sinhalese	si	sin
Slovak	sk	slo/slk*
Slovenian	sl	slv
Somali	so	som
Sotho, Southern	st	sot
Spanish; Castilian	es	spa
Sundanese	su	sun
Swahili	sw	swa
Swati	ss	ssw
Swedish	sv	swe
Tagalog	tl	tgl
Tahitian	ty	tah
Tajik	tg	tgk
Tamil	ta	tam
Tatar	tt	tat
Telugu	te	tel
Thai	th	tha
Tibetan	bo	tib/bod*
Tigrinya	ti	tir
Tonga (Tonga Islands)	to	ton
Tsonga	ts	tso
Tswana	tn	tsn
Turkish	tr	tur
Turkmen	tk	tuk
Twi	tw	twi
Uighur	ug	uig
Ukrainian	uk	ukr
Urdu	ur	urd
Uzbek	uz	uzb
Vietnamese	vi	vie
Volapuk	vo	vol
Walloon	wa	wln
Welsh	cy	wel/cym*
Western Frisian	fy	fry
Wolof	wo	wol
Xhosa	xh	xho
Yiddish	yi	yid
Yoruba	yo	yor
Zhuang; Chuang	za	zha
Zulu	zu	zul

 

Step 2

 

In this step, we add a ASP.NET Folder "App_GlobalResources" for saving language resource file.

 

Go to Solution Explorer > Right Click on Project name form Solution Explorer > Add > Add ASP.NET Folder > App_GlobalResources.

 

Step 3

 

In this step, we add Resources file for saving different languages under "App_GlobalResources" Folder.

 

Right Click on "App_GlobalResources" Folder form Solution Explorer > Add > New Item > Select "Resources File" under Visual C# > Enter Name (Like "Lang.or-IN.resx") > Add 

 

By using the same process we need to add 3 different resource files as mentioned below.

 

Language	File Name
English	Lang.en-US.resx
French	Lang.fr-FR.resx
Hindi	Lang.hi-IN.resx

 

Then we need to configure resouce files as mentioned beow. For example: for Lang.or-IN.resx,

 

 

Here name means the string name passed in resource manager and value means the string name  against this resource manager, whatever value in any language that is translated into the  language as mentioned. Here in web pabe page Name is shown in English language but after selection of Oriya language the Name is translated into "ନାମ".

 

Then change Build Action to "Embedded Resource" of added resource files. To do so, Select Resource file > Right Click go to Property> Change Build Action to Embedded Resource.

 

Step 4

 

In this step, we need to add code in code behind file for translating languages based on selected languaged with ISO language code.

 

Code Ref

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Resources; //import following Namespace first
using System.Globalization; //import following Namespace first
using System.Threading; //import following Namespace first
using System.Reflection; //import following Namespace first

namespace multilingualAsp
{
    public partial class UserSignUp : System.Web.UI.Page
    {
        ResourceManager rm;
        CultureInfo ci;

        protected void Page_Load(object sender, EventArgs e)
        {
            if (Session["Lang"] == null)
            {
                Session["Lang"] = Request.UserLanguages[0];
            }

            if (!IsPostBack)
            {
                LoadString(); //This function is used to translate languages based on selected languages
            }
        }

        private void LoadString()
        {
            Thread.CurrentThread.CurrentCulture = new CultureInfo(Session["Lang"].ToString());
            rm = new ResourceManager("multilingualAsp.App_GlobalResources.Lang", Assembly.GetExecutingAssembly()); //we configure resource manages for mapping with resource files in App_GlobalResources folder.
            ci = Thread.CurrentThread.CurrentCulture;

            lblName.Text = rm.GetString("Name", ci); //Name is the resource manager string name that should mathch with Name solumn of resorce files and if that matches then the value against the name will be translated as mentioned for each languages.
            lblAddress.Text = rm.GetString("Address", ci); //same as//
            lblState.Text = rm.GetString("State", ci); //same as//
            lblCountry.Text = rm.GetString("Country", ci);//same as//
            btnSave.Text = rm.GetString("Save", ci);//same as//
            btnCancel.Text = rm.GetString("Cancel", ci);//same as//
            lblMyName.Text = rm.GetString("Application", ci);//same as//

            lblh1.Text = rm.GetString("headerone", ci);//same as//
            lblh2.Text = rm.GetString("headertwo", ci);//same as//
            lblp1.Text = rm.GetString("paraone", ci);//same as//
            lblp2.Text = rm.GetString("paratwo", ci);//same as//
        }

        protected void ddLang_SelectedIndexChanged(object sender, EventArgs e) //this event for showing selected language.
        {
                Session["Lang"] = ddLang.SelectedValue;
                LoadString();
            }
    }
}

Code Description

 

Here I added code with description in green comment mark "//" at one place for better and faster understanding.

 

OUTPUT

 

The language selection is shown as below:

 

 

The content is translated into English.

 

 

The content is translated into French.

 

 

The content is translated into Hindi. 

 

 

The content is translated into Odia (The Mother language of the Odisha state, India).  

 

 

Link To Source Code,

• Multilingual Asp.net Web Application

Summary

 

In this article, we have learned,

• Introduction to multilingual Asp.net Web Application
• Configure resource files in Asp.net Global resource folder
• Way to set-up ISO Language code for translating content
• Setup resource manager in code behind(C#) based on resource files