Changing UICulture of Master and Content Pages on Button Click in ASP.NET Using C#, VB.NET

Introduction

This article explains how to change the UICulture of the master and content pages on a button click in ASP.NET. This will enable users to select a language to view the contents of a page/site.

When the user selects a language, the UICulture of the page is set to that specific language and the page contents are displayed from the respective resource file. Here we will provide an option to change UICulture to one of 3 different cultures, "en-US", "hi-IN" and "fr-FR".

You can also refer to my previous article "How to localize ASP.NET controls based on browser's language and culture settings" to get started with localization.

Changing the UICulture of a Content Page

Step 1

Create a new ASP.NET Web application.

Step 2

Add some UI controls on the Default.aspx page with a "meta:resourceKey" attribute. This attribute gets values from the resource pages

<table class="tbl">
<tr>
<td colspan="2">
<asp:Button ID="btnEnglish" runat="server" meta:resourceKey="btnEnglish"
onclick="btn_Click" />
<asp:Button ID="btnHindi" runat="server" meta:resourceKey="btnHindi"
onclick="btn_Click" />
<asp:Button ID="btnFrench" runat="server" meta:resourceKey="btnFrench"
onclick="btn_Click" />
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblFirstName" runat="server"
AssociatedControlID="txtFirstName" meta:resourceKey="lblFirstName"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtFirstName" runat="server" CssClass="textbox"
meta:resourceKey="txtFirstName"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblLastName" runat="server"
AssociatedControlID="txtLastName" meta:resourceKey="lblLastName"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtLastName" runat="server" CssClass="textbox"
meta:resourceKey="txtLastName"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblMobile" runat="server"
AssociatedControlID="txtMobile" meta:resourceKey="lblMobile"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtMobile" runat="server" CssClass="textbox"
meta:resourceKey="txtMobile"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblOrganisation" runat="server"
AssociatedControlID="txtOrganisation" meta:resourceKey="lblOrganisation"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtOrganisation" runat="server" CssClass="textbox"
meta:resourceKey="txtOrganisation"></asp:TextBox>
</td>
</tr>
<tr>
<td valign="top">
<asp:Label ID="lblAddress" runat="server"
AssociatedControlID="txtAddress" meta:resourceKey="lblAddress"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtAddress" runat="server" TextMode="MultiLine"
meta:resourceKey="txtAddress"></asp:TextBox>
</td>
</tr>
</table>

Step 3

As you can see, we are using buttons for the three languages, English, Hindi and French. Add a resource file for each language and one for the default. So we will add the four resource files:

Default.aspx.en-US.resx
Default.aspx.fr-FR.resx
Default.aspx.hi-IN.resx
Default.aspx.resx

Please refer to my previous article "How to localize ASP.NET controls based on browser's language and culture settings" to get an idea of how to add a resource file and how to name it.

Step 4

Add values to the resource files for all the controls with the "meta:resourceKey" attribute. I have given a value for only the "Text" property of the controls. You can also provide values for other properties like ImageUrl of an Image. You can use Google translation as an alternative to translate text to other languages, like French, Hindi, and Portuguese etcetera.

Step 5

Import the following classes in the code behind file of Default.aspx:

C#

using System.Globalization;
using System.Threading;

Imports System.Globalization
Imports System.Threading

Then write the following to change the UICulture of the site on a button click. Here we have overridden the InitializeCulture function of the page to set the selected UICulture.

C#

protected override void InitializeCulture()
{
base.InitializeCulture();
if (Session["culture"] != null)
{
CultureInfo ci = new CultureInfo(Session["culture"].ToString());
Thread.CurrentThread.CurrentCulture = ci;
Thread.CurrentThread.CurrentUICulture = ci;
}
}
protected void btn_Click(object sender, EventArgs e)
{
Button btn = (Button)sender;
switch (btn.ID)
{
case ("btnEnglish"):
Session["culture"] = "en-US";
Server.Transfer(Request.Url.PathAndQuery, false);
break;
case ("btnHindi"):
Session["culture"] = "hi-IN";
Server.Transfer(Request.Url.PathAndQuery, false);
break;
case ("btnFrench"):
Session["culture"] = "fr-FR";
Server.Transfer(Request.Url.PathAndQuery, false);
break;
}
}

Protected Overrides Sub InitializeCulture()
MyBase.InitializeCulture()
If (Session("culture") IsNot Nothing) Then
Dim ci As New CultureInfo(Session("culture").ToString())
Thread.CurrentThread.CurrentCulture = ci
Thread.CurrentThread.CurrentUICulture = ci
End If
End Sub
Protected Sub btn_Click(sender As Object, e As EventArgs) Handles btnFrench.Click
Dim btn As Button = sender
Select Case btn.ID
Case ("btnEnglish")
Session("culture") = "en-US"
Server.Transfer(Request.Url.PathAndQuery, False)
Case ("btnHindi")
Session("culture") = "hi-IN"
Server.Transfer(Request.Url.PathAndQuery, False)
Case ("btnFrench")
Session("culture") = "fr-FR"
Server.Transfer(Request.Url.PathAndQuery, False)
End Select
End Sub

Changing UICulture of a Master Page

To change the UICulture of a Master page, follow the steps 1 to 4. In step 5, replace the InitilizeCulture method with the FrameworkInitialize method. The button click event will remain the same.

C#

protected override void OnInit(EventArgs e)
{
base.OnInit(e);
if (Session["culture"] != null)
{
CultureInfo ci = new CultureInfo(Session["culture"].ToString());
Thread.CurrentThread.CurrentCulture = ci;
Thread.CurrentThread.CurrentUICulture = ci;
}
}

Protected Overrides Sub OnInit(e As System.EventArgs)
MyBase.OnInit(e)
If (Session("culture") IsNot Nothing) Then
Dim ci As New CultureInfo(Session("culture").ToString())
Thread.CurrentThread.CurrentCulture = ci
Thread.CurrentThread.CurrentUICulture = ci
End If
End Sub

Conclusion

In this article, we have seen how to change UICulture of a site using a button click event. Here we have given users the ability to view content of the site in multiple languages. When the user clicks on a language button, all contents of the site are displayed in that language.