Implement Multi Language Support for Client Side Validations in ASP.NET 3.5

• Download source - 29.81 KB

Introduction

This article talks about how to develop a multilingual web page in Visual Studio 2008 and enable client script exposed alert messages based on respective language.

Background

A few days ago, I was working on my applications to enable them for multiple languages (English, French and Japanese) to address audiences of different regions.

Enabling an aspx page for multiple languages is very easy and for doing so, we need to maintain resource files (*.resx) for each and every language, and easily generate resource file(s).

To generate resource files, open aspx page in design mode, then go to Tools-->Generate Local resource.

This will create a meta resource key for all string values in a resource file and same entry inserted in markup, like:

<asp:Label ID="lblcname" runat="server" Text="Customer Name: *" 
	meta:resourcekey="lblcnameResource1" />

Now we need to override InitializeCulture at the page level:

protected override void InitializeCulture()
        {
            string culture = string.Empty;
            culture = Request.Form["ddlLang"];
            if (string.IsNullOrEmpty(culture)) culture = "Auto";
            UICulture = culture;
            Page.Culture = culture;
            if (culture != "Auto")
            {
                CultureInfo ci = new CultureInfo(culture);
                Thread.CurrentThread.CurrentCulture = ci;
                Thread.CurrentThread.CurrentUICulture = ci;
            }
        }

But my focus is to develop multilanguage support for client side, so if JavaScript is popping up an alert, that should be in the respective language.

Using the Code

To implement the client side capabilities, I have created a resource file there under App_globalResources ASP.NET folder, and in each file I maintain JavaScript messages in the respective language. 

Like in Resource-fr-CA, the messageID and Messages are:

CustIDMessage         Identifiant client doit être entier    CustNameMessage     Nom du client ne peut pas être vide    NoErrorMessage       Aucune erreur trouvée   
   

Based on the selected culture, I am registering these messageIDs (CustIDMessage, CustNameMessage and NoErrorMessage) as JavaScript variables.       

public void GetResourceString()
        {
            XDocument resDoc = new XDocument();
            StringBuilder sb = new StringBuilder();
            string resfile = Server.MapPath("~/App_GlobalResources/Resource-" + 
			ddlLang.SelectedValue.ToString()+".resx");
            resDoc = XDocument.Load(resfile);
            string MessageKey = null;
            string MessageString = null;
            Int32 Iteration = 0;

            foreach (var el in resDoc.Root.Descendants("data"))
            {
                MessageString = el.Value;
                MessageKey = ((System.Xml.Linq.XAttribute)el.FirstAttribute).Value;
                Iteration = Iteration + 1;
                string ss = string.Format("var {0} = '{1}';", 
					MessageKey, MessageString);
                sb.AppendLine(ss);
            }

            Page.ClientScript.RegisterStartupScript(this.GetType(), 
					"jsMessages", sb.ToString(), true);
        } 

In the above code, I load the resource file by using Linq's XDocument and iterating the Xdocument to get MessageKey and MessageString. Here I create the script to register MessageKey as the variable name and MessageString as value.

After iterations, I register the resulting string as startup script.

On the aspx page, I have one button. On clicking on that button, it validates fields and pop up alert.

<asp:Button  id="btnvalidate" runat="server" 
	OnClientClick="return validateEntry();" style="color: #008080;
       	font-weight: bold" Text="Validate" meta:resourcekey="btnvalidate" />  
<script language="Javascript">
function validateEntry()
    {
        var msg='';    
        var custid=document.getElementById('custID').value;
        var custname=document.getElementById('custName').value;   
        
        if(trim(custid)!='' && isNaN(trim(custid)))
        {
         msg+=CustIDMessage+'\n';        
        } 
                
        if(trim(custname)=='')
        {
         msg+=CustNameMessage;        
        }   
        
        if(msg=='')  
        {      
         alert(NoErrorMessage);
        }
        else
        {
         alert(msg); 
         }
         
         return false;         
    }
</script>

And if the selected language is Japanese, then the following script gets generated:

 <script type="text/javascript">
//<![CDATA[
var CustIDMessage = '顧客IDの整数である必要があります';
var CustNameMessage = '顧客名を空白にすることはできません';
var NoErrorMessage = 'しないエラーが検出されました';
//]]>
</script> 

When I enter string in Customer Id and customer name is left blank, on clicking the validate button, I get the alert message in Japanese. 

Points of Interest 

This implementation is very easy and doesn't require hard coding in JavaScript. There may be issues due to some Unicode characters.