Multi language là gì

Chào các bạn, mình xin chia sẻ cách để tạo một trang web đa ngôn ngữ(Multi Language) trongASP.NETsử dụng ngôn ngữ lập trìnhC#và tài nguyên App_GlobalResources.

Bước 1: Tạo một Project Website ASP.NET

Bước 2: Thêm thư mục App_GlobalResources vào Project của bạn.

Bạn cần thêmApp_GlobalResourcesvào thư mục gốc của Project, có thể xem hình mình minh họa sau:

Nhấp chuột phải vào Project > Chọn Add > Add ASP.NET Folder > App_GlobalResources

Bước 3: Tạo file resource ngôn ngữ.resx

Ở đây mình tạo 2 fileEnglishVietnamese, nếu các bạn cần nhiều ngôn ngữ, có thể tạo nhiều hơn.

Nhấp chuột phải vào App_GlobalResources > Chọn Add > Resources File > Đặt tên cho file

Các bạn có thể đặt tên file theo mẫu:name.language-culture.resx

  • name: là tên Project của bạn (cái này bạn thích đặt tên gì cũng được, sau gọi cho đúng là ok)
  • language-culture: loại ngôn ngữ
    • English: để mặc định làlanguageluôn >name.language.resx
    • Vietnamese:language.vi-vn>name.language.vi-vn.resx
    • Các ngôn ngữ khác: (tương tự)

Bước 4: Định nghĩa giá trịNameValuetrong file ngôn ngữ

File name.languase.resx
File name.languase.vi-vn.resx

Các bạn mở 2 file đã tạo ở bước 3 và định nghĩa giá trị như 2 hình trên

Bước 5: Tạo một class BasePage

Code như sau:

using System; using System.Collections.Generic; using System.Globalization; using System.Linq; using System.Threading; using System.Web; namespace Filter.Class { public class BasePage : System.Web.UI.Page { protected override void InitializeCulture() { if(!string.IsNullOrEmpty(Request["lang"])) { Session["lang"] = Request["lang"]; } string lang = Convert.ToString(Session["lang"]); string culture = string.Empty; if(lang.ToLower().CompareTo("vi") == 0 ||string.IsNullOrEmpty(culture)) { culture = "vi-VN"; } if (lang.ToLower().CompareTo("en") == 0 || string.IsNullOrEmpty(culture)) { culture = "en-US"; } if(lang.ToLower().CompareTo("vi") == 0) { culture = "vi-VN"; } Thread.CurrentThread.CurrentCulture = CultureInfo.CreateSpecificCulture(culture); Thread.CurrentThread.CurrentUICulture = new CultureInfo(culture); base.InitializeCulture(); } } }

Bước 6: Tạo một trang Default.aspx và thay đổi kế thừa sang class BasePage

VD về kế thừa:

Trước: public partial class Default : System.Web.UI.Page
Sau: public partial class Default : BasePage

Code Design:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ASPNetMultiLanguage.Default" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Multi Language</title> </head> <body> <form id="form1" runat="server"> <div> <a href="?lang=en" runat="server" id="linkEnglishLang"> <asp:Literal ID="Literal1" runat="server" Text="<%$Resources:name.language, langEnglish%>" /> </a> <a href="?lang=vi" runat="server" id="linkVietnameseLang"> <asp:Literal ID="Literal2" runat="server" Text="<%$Resources:name.language, langVietnamese%>" /> </a> </div> <div> <ul> <li><a href="#"><asp:Literal ID="Literal3" runat="server" Text="<%$Resources:name.language, mnuHome%>" /></a></li> <li><a href="#"><asp:Literal ID="Literal4" runat="server" Text="<%$Resources:name.language, mnuIntroduction%>" /></a></li> <li><a href="#"><asp:Literal ID="Literal5" runat="server" Text="<%$Resources:name.language, mnuProduct%>" /></a<li><a href="#"><asp:Literal ID="Literal6" runat="server" Text="<%$Resources:name.language, mnuContactUs%>" /></a></li> </ul> </div> </form> </body> </html>

Thiết kế trang hiển thị với 2 đường link chuyển đổi ngôn ngữ và một số menu mẫu lấy dữ liệu từ file resources (các bạn nên sử dụng thẻ <asp:Literal> để lấy dữ liệu từ file resources)

Code Behind:

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace ASPNetMultiLanguage { public partial class Default : BasePage { protected void Page_Load(object sender, EventArgs e) { if(!string.IsNullOrEmpty(Convert.ToString(Session["lang"]))) { if(Convert.ToString(Session["lang"]) == "en") { linkVietnameseLang.Visible = true; linkEnglishLang.Visible = false; } else { linkEnglishLang.Visible = true; linkVietnameseLang.Visible = false; } } else { linkVietnameseLang.Visible = false; linkEnglishLang.Visible = true; } } } }

Code Behind có chức năng kiểm tra Session và chuyển đổi ngôn ngữ theo Session cho phù hợp.

Lời kết

Sau khi các bạn đã thực chính xác theo thứ tự các bước như trên, bạn sẽ có được một trang demo với 2 ngôn ngữ Anh và Việt, url chuyển đổi là ?lang=en và ?lang=vi, sử dụng Session rất đơn giản. Khi đã nắm rõ hoạt động, các bạn có thể mở rộng ra với nhiều ngôn ngữ hơn.

Download Source: http://www.mediafire.com/file/tbc92nacno649jj/ASPNetMultiLanguage.zip/file

Chúc các bạn thành công!

Mục:
Tài liệu hướng dẫn

Một đặc điểm, cũng đồng thời là ưu điểm của việc kinh doanh Thương mại điện tử là có thể thực hiện giao dịch trên phạm vi toàn cầu. Vì đặc tính đó, đôi khi Nhà bán hàng và Khách mua hàng vấp phải vấn đề rào cản ngôn ngữ.

Một khía cạnh khác, khi Nhà bán hàng cần mở rộng thị trường ra khỏi biên giới nội địa, Nhà bán hàng cần lưu ý đến vấn đề ngôn ngữ khi Khách mua hàng cần xem sản phẩm, thực hiện giao dịch, chăm sóc khách hàng,...

Khi đó, giao diện đa ngôn ngữ được xem là giải pháp tối ưu. Trang web của khách hàng có thể hiển thị với ngôn ngữ khác nhau, và Nhà bán hàng có thể tùy chỉnh ngôn ngữ cấu hình, cũng như Khách mua hàng được lựa chọn ngôn ngữ hiển thị.

Nhà bán hàng có nhiều sự lựa chọn về ứng dụng đa ngôn ngữ.Một trong đó, chính là ứng dụng Ap Multilanguage.

Các mục liên quan

  • Tổng quan về ứng dụng Ap Multilanguage
  • Cài đặt ứng dụng
  • Thiết lập box ngôn ngữ
  • Thiết lập ngôn ngữ
  • Dịch ngôn ngữ
  • File theme và Tùy chỉnh code CSS

Tổng quan về ứng dụng Ap Multilanguage

Ứng dụng Ap Multilanguagedo Apollo phát triển, hỗ trợ Nhà bán hàng dùng thử 15 ngày, trước khi sử dụng chính thức với mức phí150,000đ/tháng.

Ứng dụng Ap Multilanguage:

Không giới hạn các ngôn ngữ, website có thể sử dụng tiếng Anh, tiếng Nhật, tiếng Trung, tiếng Nga,...

Không giới hạn số lượng ngôn ngữ.

Dễ dàng sử dụng, Nhà bán hàng chỉ cần chọn ngôn ngữ và thêm vào cửa hàng của mình.

Hỗ trợ tất cả các trang của cửa hàng trong website của Nhà bán hàng.

Tùy chỉnh nâng cao với code và css.

Cấu hình và cài đặt đơn giản tiện lợi, dễ dàng sử dụng.

Trong quá trình thao tác, nếu Nhà bán hàng gặp khó khăn, vui lòng liên hệ Apollo để nhận được sự hỗ trợ:

  • Phone: 0904532191
  • Email:
  • Website:apollotheme.com/ticket/

Cài đặt ứng dụng

  1. Nhà bán hàng truy cập vào trangứng dụng Ap Multilanguage.
  2. ChọnCài đặt ứng dụng.


  3. Nhập tên miền Haravan.

  4. Hệ thống điều hướng về Trang quản trị Haravan. Tại đây, Nhà bán hàng chọn "Cài ứng dụng Ap Multilanguage".

  5. Khi ứng dụng được cài đặt thành công, hệ thống tự động điều hướng về trang ứng dụng Ap Multilanguage.

Để sử dụng ứng dụng, Nhà bán hàng truy cập vàoTrang quản trị Haravan -> Ứng dụng -> Ap Multilanguage.


Thiết lập box ngôn ngữ

Sau khi cài đặt ứng dụng, Nhà bán hàng cần thực hiện các thao tác nhằm thể hiện box ngôn ngữ ra website.

Nhà bán hàng vào phần Thiết lập > Box ngôn ngữ. Tại đây, Nhà bán hàng vào phần Tùy chỉnh Box Language, thực hiện theo các bước trong hướng dẫn.

Nhà bán hàng có thể thiết lập thêm một số tùy chỉnh cho box language như Tùy chỉnh vị trí hayChọn một kiểu hiển thị danh sách ngôn ngữ.

Trong Tùy chỉnh vị trí, Nhà bán hàng chọn một trong ba vị trí:

  • None
  • Float Left
  • Float Right

Đối vớiChọn một kiểu hiển thị danh sách ngôn ngữ, Nhà bán hàng chọn theo Chiều ngang hoặc Chiều dọc và chọn có icon hoặc không có icon với chiều hiển thị.


Nếu Nhà bán hàng chọn chiều dọc thì Nhà bán hàng cần chọn thêm kiểu mũi tênhiệu ứng hiển thị.

  • Chọn kiểu mũi tên:
    • Caret line black
    • Caret fill black
  • Hiệu ứng hiển thị:
    • none
    • zoomln
    • fadeln

Thiết lập ngôn ngữ

Bên cạnh ngôn ngữ mặc định mà ứng dụng hỗ trợ là Tiếng Việt, Nhà bán hàng được phép thêm vào các ngôn ngữ khác cho website.

Nhà bán hàng vào phần Thiết lập > Box ngôn ngữ. Tại đây, Nhà bán hàng vào phần Thiết lập ngôn ngữ.

Thêm ngôn ngữ hiển thị

Trong trangThiết lập ngôn ngữ, Nhà bán hàng thực hiện theo các bước sau:

  1. Nhà bán hàng lựa chọn ngôn ngữ cần thêm trongLanguage Source.
  2. Nhấp vào biểu tượng mũi tên màu xanh để switch đếnLanguage Using.
  3. Nhấn Save để ứng dụng ghi nhận ngôn ngữ.

Vô hiệu hóa/Kích hoạt ngôn ngữ

Một ngôn ngữ khi được thêm vàoLanguage Using. sẽ mặc định với trạng thái kích hoạt (Status is Active).

Nhà bán hàng có thể thực hiện vô hiệu hóa ngôn ngữ đó để tạm ngưng hiển thị ngoài website.

Ngược lại, Nhà bán hàng cũng có thể kích hoạt lại khi cần.

Xóa ngôn ngữ

Khác với thao tác vô hiệu hóa ngôn ngữ, xóa ngôn ngữ đồng nghĩa với việc Nhà bán hàng không thể tạo các bài dịch cho các bài viết cho website. Và việc xóa ngôn ngữ cũng đồng thời xóa đi toàn bộ dữ liệu của ngôn ngữ đó.

Lưu ý: Hành động xóa không thể hoàn tác và không thể phục nguyên dữ liệu. Nhà bán hàng cân nhắc trước khi thực hiện.


Dịch ngôn ngữ

Sau khi thực hiện Thiết lập (Box ngôn ngữ, Thiết lập ngôn ngữ), Nhà bán hàng vào Dịch ngôn ngữ, chọn mục muốn dịch bài.

Trong ứng dụngAp Multilanguage, Nhà bán hàng có thể dịch được các bài viết thuộcSản phẩm, Bộ sưu tập, Trang nội dung, Danh mục Blog, Blog, Menu.

Tiếp theo, Nhà bán hàng nhấp vào phần nội dung muốn dịch và nhập nôi dung.

Ứng dụng chuyển Tab để nhập nội dung cho ngôn ngữ thứ 2. Tại đây, Nhà bán hàng nhập tiêu đề nội dung theo ngôn ngữ tương ứng.

Tiếp theo, Nhà bán hàng sao chépcode điền vào nơi hiển thị tiêu đề và nội dung sản phẩm phần hiệu chỉnh theme (phần này có thể nhờ kỹ thuật Haravan hỗ trợ).

Kết quả như hình:


File theme và Tùy chỉnh code CSS

Tạo nội dung cố định với chức năng File theme

Phần File theme là hỗ trợ dịch những nội dung được nhập trong mục thiết lập theme (nội dung cố định).

Ví dụ: chọn page.contact

Một số nội dung được viết cố định trong code.
Ví dụ: dòng "Chúng tôi ở đây" như hình bên dưới bạn thay thế đoạn đó bằng cấu trúc {{tên trang.tên cum từ}}(tên trang và tên cụm từ bạn có thể đặt tùy í miễn sao cho bạn dễ nhớ khi bạn muốn sửa nội dung).

Tùy chỉnh code CSS

Tùy chỉnh code CSS giúp Nhà bán hàng thực hiện các tùy chỉnh cho các viết hay box ngôn ngữ thông qua code CSS.

  1. Trong Dịch ngôn ngữ >Tùy chỉnh code CSS.
  2. Nhập đoạn code CSS vào khung Enter your css code.
  3. Nhấn Save.

Nhà bán hàng xem thêm video hướng dẫn tại đây: