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.
Read more articles on ASP.NET: