Post
Ask Question

Language Converter Using Google Translator Plugin In ASP.NET

In this article, I am going to discuss the language converter in ASP.NET using the free Website Translator plugin of Google. This Google language converter plugin is a very powerful tool which will convert your website content to different languages within fractions of a second. This plugin supports more than 90 languages.

Here, I am explaining  you the steps to integrate the language plugin in our website. 
 
STEP 1: Open the following link to create an account in Google,
 
 
STEP 2: If you have any Google account, just login with that account, otherwise, create a new one.
 
 

STEP 3: After login, just click (Add to your website now) button. Here's the figure:

 
STEP 4: Add any URL as your website URL.
 
 
STEP 5: Click Next and choose the following setting as in the following image:
 
 

STEP 6: Click on getCode to get the code and copy paste the code where you want to show the Language converter on your website. 
 

It will populate a dropdownlist with nearly 90+ languages in option.

Now, I am pasting it in my website as follows:

  1. <div>  
  2.    <div id="google_translate_element"></div>  
  3.    <script type="text/javascript">  
  4.                                function googleTranslateElementInit() {  
  5.                                new google.translate.TranslateElement  
  6.                                ({ pageLanguage: 'en',   
  7.                                layout: google.translate.TranslateElement.InlineLayout.SIMPLE },   
  8.                                'google_translate_element');  
  9.                            }  
  10. </script><script type="text/javascript"   
  11. src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit">  
  12. </script>  
  13.     </div>  
Save the following code and run the website. It will populate a dropdown with the following language options.

 
Here are the languages,

 
STEP 7: Now create your own UI or content which you want to change using this Google plugin. I want to change my UI language using this plugin. Here is the UI design.

 

Now, here is the HTML code of my UI design.
  1. <div>  
  2.             <table>  
  3.                 <tr>  
  4.                     <td>  
  5.                           
  6.                       Name:  
  7.                     </td>  
  8.                     <td>  
  9.                         <asp:TextBox ID="txt_name" runat="server"></asp:TextBox>  
  10.                     </td>  
  11.                 </tr>  
  12.                 <tr>  
  13.                     <td>  
  14.                         Registration No:  
  15.                     </td>  
  16.                     <td>  
  17.                         <asp:TextBox ID="Textxt_regtBox1" runat="server"></asp:TextBox>  
  18.                     </td>  
  19.                 </tr>  
  20.                 <tr>  
  21.                     <td>  
  22.                         Country:  
  23.                     </td>  
  24.                     <td>  
  25.                         <asp:TextBox ID="txt_country" runat="server"></asp:TextBox>  
  26.                     </td>  
  27.                 </tr>  
  28.             </table>  
  29.  </div>  
Add the following meta tag in the head section. 
  1. <head runat="server">  
  2.     <title></title>  
  3.         
  4.     <meta name="google-translate-customization"   
  5.      content="3280487709591956-dc3fc45d489f056a-g5378ebab0cbcd0a4-12"/>  
  6.        
  7. </head>  
Now link your UI content div with google_translate_element as follows. Here, I have given the complete code.
  1. <%@ Page Language="C#" AutoEventWireup="true"   
  2. CodeFile="Default.aspx.cs" Inherits="_Default" %>  
  3.   
  4. <!DOCTYPE html>  
  5.   
  6. <html xmlns="http://www.w3.org/1999/xhtml">  
  7. <head runat="server">  
  8.     <title></title>  
  9.        
  10.    
  11.     <meta name="google-translate-customization"   
  12.     content="3280487709591956-dc3fc45d489f056a-g5378ebab0cbcd0a4-12"/>  
  13.        
  14. </head>  
  15. <body>  
  16.     <form id="form1" runat="server">  
  17.     <div>  
  18.    <div id="google_translate_element"></div>  
  19.    <script type="text/javascript">  
  20.                      function googleTranslateElementInit() {  
  21.                      new google.translate.TranslateElement({ pageLanguage: 'en',   
  22.                      layout: google.translate.TranslateElement.InlineLayout.SIMPLE },   
  23.                      'google_translate_element');  
  24.                                                 }  
  25. </script><script type="text/javascript"   
  26. src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit">  
  27. </script>  
  28.     </div>  
  29.         <div  id="google_translate_element">  
  30.             <table>  
  31.                 <tr>  
  32.                     <td>  
  33.                          
  34.                        Name:  
  35.                     </td>  
  36.                     <td>  
  37.                         <asp:TextBox ID="txt_name"   
  38.                         runat="server"></asp:TextBox>  
  39.                     </td>  
  40.                 </tr>  
  41.                 <tr>  
  42.                     <td>  
  43.                         Registration No:  
  44.                     </td>  
  45.                     <td>  
  46.                         <asp:TextBox ID="Textxt_regtBox1"   
  47.                         runat="server"></asp:TextBox>  
  48.                     </td>  
  49.                 </tr>  
  50.                 <tr>  
  51.                     <td>  
  52.                         Country:  
  53.                     </td>  
  54.                     <td>  
  55.                         <asp:TextBox ID="txt_country"   
  56.                         runat="server"></asp:TextBox>  
  57.                     </td>  
  58.                 </tr>  
  59.             </table>  
  60.         </div>  
  61.     </form>  
  62. </body>  
  63. </html>  
Now run the website and change to any language. You will get the result as follows:
 
 
So in this way, you can change the language of your website using the Google Translator Plugin.
 
Read more articles on ASP.NET:


Similar Articles