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>
  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>
  4. <meta name="google-translate-customization"
  5. content="3280487709591956-dc3fc45d489f056a-g5378ebab0cbcd0a4-12"/>
  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" %>
  4. <!DOCTYPE html>
  6. <html xmlns="http://www.w3.org/1999/xhtml">
  7. <head runat="server">
  8. <title></title>
  11. <meta name="google-translate-customization"
  12. content="3280487709591956-dc3fc45d489f056a-g5378ebab0cbcd0a4-12"/>
  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>
  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: