How to Create Multilingual Website in Asp .Net

In this Post I will Explain you following Points:-

Globalization and Localization in ASP.NET
Globalization and Localization are essential aspects of developing ASP.NET C# web applications, particularly when aiming to support multiple languages and cultures. Even if your website is initially designed for a single language and culture, you can easily extend its support for different linguistic preferences using Globalization and Localization concepts in ASP.NET.
Globalization enables your web application to display its content based on the language preference set by the user in their browser. With ASP.NET, achieving Globalization and Localization is straightforward through the use of resource files.
Resource Files:
A resource file, typically in XML format, contains key-value pairs that you wish to translate into different languages. Think of it as a dictionary in C#. These resource files usually have a .resx extension.
In ASP.NET, there are two types of resource files:
1. Global Resource:
You can create a global resource file by placing it in the reserved folder "App_GlobalResources" at the root of your web application. Any .resx file in this folder has global scope, meaning you can utilize its resources on any page within the web application.
2. Local Resource:
Localization involves translating specific pages into different languages and cultures. Local resource files are specific to particular pages only, typically ASP.NET files with extensions such as .aspx, .ascx, or .master.
Each page in your web application can have its own local resource file. These files are placed in the "App_LocalResources" folder.
To implement Globalization and Localization:
1. Open Visual Studio.
2. Create a new empty website: File > New > Web Site.
3. Select "C#" from the left side of Visual Studio.
4. Choose "Empty Web Site."
By following these steps and understanding the concepts of Globalization and Localization, you can enhance the reach and usability of your ASP.NET web applications across different languages and cultures.

Name the website as you prefer. Now, add an ASPX page to your website.

I have designed the ASPX page. It includes a dropdown menu containing the various languages supported by my website. Additionally, I have created a simple login page with a link to the registration page.

Now, I have added another ASPX page to my website and named it 'Registration'.

Now, I want to design my web application to support different languages and cultures. To do this, I'll right-click on my website and add a resource file. Visual Studio will create an 'App_GlobalResources' folder containing these resource files.

I have added three resource files following this format:

For global resource files:

1. Resource.resx

2. Resource.da-dk.resx (for Danish language)

3. Resource.it-IT.resx (for Italian language support)

These are global resource files. Now, let's add local resources for the Login and Registration pages.

1. Add a new folder named 'App_LocalResources'.

2. Right-click on this folder and add a resource file.

Format for local resource files:

- For Login page: Login.aspx.language.resx or Login.aspx.language-culture.resx

- For Registration page: Registration.aspx.language.resx or Registration.aspx.language-culture.resx

Now, put common strings in the global resource file so that you can use these keys anywhere in your application. Open the global resource file and add key/value pairs.

I want to use the keyword 'Submit' in both the login and registration pages, which is why I have placed it in the global resource file.

Now, open the local resource file and add key/value pairs for the particular page.

For the login page:

Key: '12'

Value: 'Login'

Key: '13'

Value: 'Username'

also add key/value for the Registration page

How add resource key to the html element.

Syntax For local resource

Add key two Labels

meta:resourcekey=”keyname”

Syntax For global resource

Text=”<%$Resources:ResourceName,keyname%>”

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Login.aspx.cs" Inherits="Login1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
    <table class="auto-style1">
    <tr>
    <td class="auto-style2">Language</td>
    <td>
    <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
    <asp:ListItem>Select Language</asp:ListItem>
    <asp:ListItem Value="da-dk">Denis</asp:ListItem>
    <asp:ListItem Value="it-IT">Italian</asp:ListItem>
    <asp:ListItem Value="en-us">English</asp:ListItem>
    </asp:DropDownList>
    </td>
    </tr>
    <tr>
    <td class="auto-style2">
    <asp:Label ID="Label1" runat="server" Font-Size="Larger" ForeColor="#003399" Text="Login Panel" meta:resourcekey="LoginPanel"></asp:Label>
    </td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td class="auto-style2">
    <asp:Label ID="Label2" runat="server" Text="Username" meta:resourcekey="password"></asp:Label>
    </td>
    <td>
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    </td>
    </tr>
    <tr>
    <td class="auto-style2">
    <asp:Label ID="Label3" runat="server" Text="Password"></asp:Label>
    </td>
    <td>
    <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
    </td>
    </tr>
    <tr>
    <td class="auto-style2">&nbsp;</td>
    <td>
    <asp:Button ID="Button1" runat="server" Text="<%$Resources:Resource,submit%>" />
    <asp:HyperLink ID="HyperLink1" runat="server">Registration</asp:HyperLink>
    </td>
    </tr>
    <tr>
    <td class="auto-style2">&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    </table>
    </div>
    </form>
</body>
</html>

Now we need to override the InitializeCulture function and set the UICulture to the user selected language.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class Login1 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        InitializeCulture();
    }

    protected override void InitializeCulture()
    {
    if (Request.Form["DropDownList1"] != null)
        {
            UICulture = Request.Form["DropDownList1"];
            Session["culture"] = Request.Form["DropDownList1"];  //set the UICulture to the user selected language.
        }
    base.InitializeCulture();
       
    }

    protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
    {
        InitializeCulture();
      
    }
}

I have stored the selected culture in a session because I need this session value in the 'Registration.aspx' page to initialize the culture.

I will do the same thing for the registration page.

For changing the text of the submit button, we are using a global resource so that the registration page can also use the 'Submit' key from the global resource file. This way, we don’t have to include the 'Submit' key in every local resource; I've made this key a global key for all pages.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Registration.aspx.cs" Inherits="Registration1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
    <table class="auto-style1">
    <tr>
    <td>
    <asp:Label ID="Label1" runat="server" Font-Size="Larger" ForeColor="#0099FF" Text="Register"  ></asp:Label>
    </td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td>
    <asp:Label ID="Label2" runat="server" Text="name" meta:resourcekey="Name"></asp:Label>
    </td>
    <td>
    <asp:TextBox ID="TextBox1" runat="server" ></asp:TextBox>
    </td>
    </tr>
    <tr>
    <td>
    <asp:Label ID="Label3" runat="server" Text="lastname" meta:resourcekey="lastname"></asp:Label>
    </td>
    <td>
    <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
    </td>
    </tr>
    <tr>
    <td>
    <asp:Label ID="Label4" runat="server" Text="password" meta:resourcekey="Password"></asp:Label>
    </td>
    <td>
    <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
    </td>
    </tr>
    <tr>
    <td>
    <asp:Button ID="Button1" runat="server" Text="Submit" />
    </td>
    </tr>
    </table>
    </div>
    </form>
</body>
</html>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class Registration1 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        InitializeCulture();
    }
    protected override void InitializeCulture()
    {
        
    if (Session["culture"].ToString()!= null)
        {
            UICulture = Session["culture"].ToString();  //set the UICulture to the user selected language from session
        }
    base.InitializeCulture();
    }

}

Now run your application and choose language from drop down

Now click on Registration link

You can see that the text of the submit button is in Italian, which is coming from the global resource file. Therefore, if you want to use any key in multiple pages, it's advisable to put this key in the global resource file.

How to Create Multilingual Website in Asp .Net

Read Similar Articles