Bài viết chia sẻ cách tạo đa ngôn ngữ cho website sử dụng asp.net
Demo hình ảnh
Tiếng anh
Tiếng pháp
Các bước thực hiện
Bài hướng dẫn này gồm có 4 bước chính như sau:
- Tạo User Control cho phép chọn multi-language dạng icon hoặc dropdown.
- Tạo một class extends từ Page
- Tạo trang .aspx
- Generate Local Resources tới trang .aspx trên
Language User Control
Chúng ta sẽ tạo ra một User Control với 2 button dạng ảnh, với mỗi button là một cờ, tương đương với ngôn ngữ mà các bạn định sử dụng. Khi người sử dụng click vào một button, thì ngôn ngữ sẽ được hiển thị thay thế cho ngôn ngữ gốc, do đó, chúng ta sẽ phải đăng ký User Control đó với những trang cho phép sử dụng đa ngôn ngữ. Và chúng ta sử dụng cookies để lưu trữ giá trị ngôn ngữ mà người sử dụng chọn.
Design Code
|
1 2 3 |
// 2 Image Buttons (En-US,fr-FR) <asp:ImageButton runat="server" ID="ImgBut_En" ImageUrl="~/Images/USALogo.png"><br /> <asp:ImageButton runat="server" ID="ImgBut_Fr" ImageUrl="~/Images/FRLogo.png"> |
Code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
//If cookie exists, then disable the Image button of the current language //so it won't refresh the page and return the same language which is useless protected void Page_Load(object sender, EventArgs e) { HttpCookie cookie = Request.Cookies["CurrentLanguage"]; if (!IsPostBack && cookie != null && cookie.Value != null) { if (cookie.Value.IndexOf("en-") >= 0) { ImgBut_En.Enabled = false; ImgBut_Fr.Enabled = true; } else { ImgBut_En.Enabled = true; ImgBut_Fr.Enabled = false; } } } //On En Button click, change the value of the CurrentLanguage cookie //reload page with English edition protected void ImgBut_En_Click(object sender, ImageClickEventArgs e) { HttpCookie cookie = new HttpCookie("CurrentLanguage"); cookie.Value = "en-US"; Response.SetCookie(cookie); Response.Redirect(Request.RawUrl); } //On En Button click, change the value of the CurrentLanguage cookie //reload page with French edition protected void ImgBut_Fr_Click(object sender, ImageClickEventArgs e) { HttpCookie cookie = new HttpCookie("CurrentLanguage"); cookie.Value = "fr-FR"; Response.SetCookie(cookie); Response.Redirect(Request.RawUrl); } |
BasePage Class
Chúng ta sẽ tạo một class có tên BasePage để kế thừa các hàm từ System.Web.Page, sau đó viết lại 2 hàm OnPreInit(EventArgs e) và InitializeCulture()
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Globalization; Public class BasePage : Page { //Check if cookie exists, then change our website culture to the desired language //else set our website culture to the default language (EN) here and //create the cookie with this value protected override void InitializeCulture() { string lang = string.Empty; HttpCookie cookie = Request.Cookies["CurrentLanguage"]; if (cookie != null && cookie.Value != null) { lang = cookie.Value; CultureInfo Cul = CultureInfo.CreateSpecificCulture(lang); System.Threading.Thread.CurrentThread.CurrentUICulture = Cul; System.Threading.Thread.CurrentThread.CurrentCulture = Cul; } else { if (string.IsNullOrEmpty(lang)) lang = "en-US"; CultureInfo Cul = CultureInfo.CreateSpecificCulture(lang); System.Threading.Thread.CurrentThread.CurrentUICulture = Cul; System.Threading.Thread.CurrentThread.CurrentCulture = Cul; HttpCookie cookie_new = new HttpCookie("CurrentLanguage"); cookie_new.Value = lang; Response.SetCookie(cookie_new); } base.InitializeCulture(); } } |
Tạo trang .aspx
Trang .aspx sẽ thực hiện dịch lại ngôn ngữ theo button mà người sử dụng đã chọn.
Design Code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
<%@ Page Language="C#" Theme="Default" AutoEventWireup="true" CodeFile="LanguagePage.aspx.cs" Inherits="LanguagePage" %> <%@ Register Src="~/UserControl/LanguageUserControl.ascx" TagName="LanguageUserControl" TagPrefix="uc1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <div id="Header"> < uc1:LanguageUserControl runat="server" ID="Language"> <h2> < asp:Label runat="server" ID="lbl_Language"> </h2> </div> <div id="Content"> <div class="Row"> <div class="label"> < asp:Label runat="server" ID="lbl_FirstName">< /asp:Label> </div> <div class="text"> < asp:TextBox runat="server" ID="txt_FirstName">< /asp:TextBox> </div> </div> <div class="Row"> <div class="label"> < asp:Label runat="server" ID="lbl_LastName">< /asp:Label> </div> <div class="text"> < asp:TextBox runat="server" ID="txt_LastName">< /asp:TextBox> </div> </div> < asp:Button runat="server" ID="Submit" OnClientClick="CheckLanguage();return false;"> </div> </form> <script> function get_cookie(cookie_name) { var results = document.cookie.match('(^|;) ?' + cookie_name + '=([^;]*)(;|$)'); if (results) return (unescape(results[2])); else return null; } function CheckLanguage() { if(get_cookie('CurrentLanguage') == "en-US") alert('Language : US-English'); else alert('Language : French-Francais'); } </script> </body> </html> |
Code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; //Extends BasePage public partial class LanguagePage : BasePage { protected void Page_Load(object sender, EventArgs e) { } } |
Generate Local Resource
Đây là bước cuối cùng, các bạn làm theo các thao tác sau
- Mở trang .aspx ở Tab Design
- Tools->Generate Local Resource, sau đó save trang .aspx lại
- Bạn sẽ phải tìm một folder trong thư mục ASP.Net mới được tạo với tên “App_LocalResourses“, trong đó bao gồm một file .resx
- Nhân đôi file đó lên, sau đó đổi lại tên file, thêm .fr trước .resx để cho phiên bản tiếng pháp
- Mở file đó lên, thực hiện dịch các đoạn nội dung bên trong, sau đó save lại
Download code
Vậy là xin chúc mừng bạn, bạn vừa học xong cách tạo một website đa ngôn ngữ cho trang Asp.net của mình. Bạn cũng có thể download mã nguồn bên dưới để phục vụ cho các project của bạn.
Bài viết được biên tập từ CodeProject
