Language Converter Using Google Translator Plugin In ASP.NET

Debendra Dash
8y
18k
0
4

Article

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:

<div>
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement
({ pageLanguage: 'en',
layout: google.translate.TranslateElement.InlineLayout.SIMPLE },
'google_translate_element');
}
</script><script type="text/javascript"
src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit">
</script>
</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.

<div>
<table>
<tr>
<td>
Name:
</td>
<td>
<asp:TextBox ID="txt_name" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
Registration No:
</td>
<td>
<asp:TextBox ID="Textxt_regtBox1" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
Country:
</td>
<td>
<asp:TextBox ID="txt_country" runat="server"></asp:TextBox>
</td>
</tr>
</table>
</div>

Add the following meta tag in the head section.

<head runat="server">
<title></title>
<meta name="google-translate-customization"
content="3280487709591956-dc3fc45d489f056a-g5378ebab0cbcd0a4-12"/>
</head>

Now link your UI content div with google_translate_element as follows. Here, I have given the complete code.

<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<meta name="google-translate-customization"
content="3280487709591956-dc3fc45d489f056a-g5378ebab0cbcd0a4-12"/>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({ pageLanguage: 'en',
layout: google.translate.TranslateElement.InlineLayout.SIMPLE },
'google_translate_element');
}
</script><script type="text/javascript"
src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit">
</script>
</div>
<div id="google_translate_element">
<table>
<tr>
<td>
Name:
</td>
<td>
<asp:TextBox ID="txt_name"
runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
Registration No:
</td>
<td>
<asp:TextBox ID="Textxt_regtBox1"
runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
Country:
</td>
<td>
<asp:TextBox ID="txt_country"
runat="server"></asp:TextBox>
</td>
</tr>
</table>
</div>
</form>
</body>
</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.