Đa ngôn ngữ (Multilingual) trong ASP.NET Core MVC

Như bạn được biết, hiện nay hơn 4,2 tỷ người trên thế giới được kết nối với internet. Vì thế, việc tiếp cận khách hàng trên thế giới chưa bao giờ dễ dàng đến thế. Vì vậy, thiết kế website, đặc biệt là thiết kế website đa ngôn ngữ là hết sức cần thiết cho mọi doanh nghiệp.

Hôm nay, mình sẽ hướng dẫn các bạn cách tạo đa ngôn ngữ (Multilingual) trong ASP.NET Core MVC một cách đơn giản nhất để ta dễ dàng hiểu được cách làm. Và tất nhiên, trong bài này chúng ta không tạo ra các entity nhé.

Tiến hành

Bước 1: Tạo mới project ASP.NET Core Web Application với MVC tên là MultilingualSolution.

Bước 2: Ví dụ hôm nay mình sẽ tiến hành tạo đa ngôn ngữ cho trang Index (Views/Home/Index.cshtml) với trang ban đầu như sau:

Và việc đầu tiên các bạn update code trong view (Views/Home/Index.cshtml) như sau:

Index.cshtml

@inject Microsoft.AspNetCore.Mvc.Localization.IViewLocalizer localizer
@{
    ViewData["Title"] = @localizer["Home Page"];
}

<div class="text-center">
    <h1 class="display-4">@localizer["Welcome"]</h1>
    <p class="text-center">@localizer["Welcome to quochieu.com"]</p>
</div>

Bước 3: Đăng ký dịch vụ trong Startup.cs trong các phương thức sau:

ConfigureServices()

services.AddLocalization(options => options.ResourcesPath = "Resources");
            services.AddMvc()
                .AddViewLocalization(Microsoft.AspNetCore.Mvc.Razor.LanguageViewLocationExpanderFormat.Suffix)
                .AddDataAnnotationsLocalization();

Configure()

var supportedCultures = new[] { "en", "vi", "kr" };
            var localizationOptions = new RequestLocalizationOptions().SetDefaultCulture(supportedCultures[0])
                .AddSupportedCultures(supportedCultures)
                .AddSupportedUICultures(supportedCultures);
            app.UseRequestLocalization(localizationOptions);

Bước 4: Và bây giờ là phần quan trọng, đó là dịch ra các ngôn ngữ khác nhau:

- Tạo mới các thư mục lần lượt và lồng nhau với tên là Resources → Views → Home:

- Trong Resources/Views/Home tạo các file resource với tên là Index.en.resx, Index.kr.resx, Index.vi.resx:

- Trong các file resource ta tiến hành dịch ra nhé:

Kết quả mong muốn như sau:

Để chuyển đổi ngôn ngữ, các bạn chú ý link sẽ thêm ?culture=kr hoặc ?culture=vi nhé.

Lời kết

Vì chúng ta không làm việc với các entity nên các bước thực hiện rất đơn giản.

Lưu ý các resource được dịch chỉ là văn bản, không là HTML.

Phần dịch tiếng Hàn mình không biết nên dịch qua loa bằng Google dịch nên có sai thì mong các bạn thông cảm.

Mong bài viết có ích với bạn, chúc các bạn thành công!

By Hiếu Quốc

Có lẽ bạn thích?