ASP.net MVC 多國語言 globalization (part 1)

8月 04, 2020

好讀版本

個網頁如果目標不只限於本地，或甚至酖酖想增加能見度，那網頁上的語言選擇性就會變為必要的功能之一

這東西真的是快搞死我，本來沒有這麼想裡他，想說用用Vue.js用個 json值慢慢帶入就好。好死不死看到不該看的文章

Globalization and Localization in ASP.NET Core – Detailed

第一眼當下以為是網頁公開或正式上線的方法，後來仔細一看發現完全不一樣

理解一下文字：

What is Globalization? Globalization is a process by which develoeprs make a product supported in multiple languages. This mostly involves improving the backend of web applications, which ultimately contributes to the SEO of the website. This includes meta-data, file names, labels and even the website URLs. What is Localization? Localization is the process to transalate the content to fulfil the demands of a particular culture / language. This does not limit to just transalting the texts, but also numbers, date and time formats, currency , symbols and so on.

Globalization 是開發者將網頁支援多國語的過程......這些包含了媒體資訊、檔案名稱、標籤甚至網頁連結 Localization 是指將內容轉換成目的的語言或形式。這不只限於翻譯文字，這同時包含轉換數字、日期格式、金額單位、符號...等等

基本上就跟我想做的事情差不多，甚至我沒想到的日期格是那些的也一併算在內。那身為"抄"人的我當然就馬上來試試看。

但是不管我怎麼看都是越看越困惑...這是？那是？那這個又要？

硬要實做下去，卻怎麼做也做不出來，後來仔細看一看、查一查，白癡喔人家版本比較新拉。心中有點不太爽，於是自己去查一下自己的版本的做法，結果也是搞了我超久。

所以我們先來對版本吧

Visual Studio 2015

[ASP.net](http://asp.net) MVC5

前端的Razoer

C# 的資源檔 (Resource File)

實際上的版本支援程度應該還可以再低一點，但能低多少我就不太確定了。

那接下來我就當各位有一些基本的.net MVC 的基礎瞜~有不懂就問吧！

先從最沒有問題的開始好了-資源檔

基本上就是準備不同語言所要對應的文字

在你的跟目錄按下右鍵>加入>ASP.NET資料夾>App_GlobalResources(一個專案只能開一個)

接著對著剛剛開的App_GlobalResources資料夾按右鍵>加入>新增項目，這裡我們接著選資源檔

這裡就是開始打你的變數名稱、他要帶的值

像是你的能網頁的開頭 title 預設是英文的話值應該要是myTitle，其他的就以此類推..

不是阿，那是英文，阿中文呢？我還要日文！

啊在同一個資料夾再新增個不就好了？只是要注意名稱要一樣阿

接下來是重點之一，這些檔案名稱都要重新命名成同一個格式

➡️

Resource.語言-國家.resx

其中Resource可以換成你爽的名子，語言、國家都是要填入各國語言(語系)代碼表

想是中文台灣就是 zh-TW、英文美國en-US...這邊提供列表，這就是網頁發送請求時辨別語系的方法

所以當你名稱改完之後應該會變成三個檔案

一個基礎檔案Resource.resx、中文的Resource.zh-TW.resx、英文的Resource.en-US.resx，要其他語言跟國家就自己加吧

OK！翻譯本都準備好了，那我們接下來些不要搞太複雜，我們在一個頁面上實做就好。省著一些麻煩，我們就直接用原本就幫我們做好的網頁做修改就好

打開我們的Views>Home>Index.cshtml，或是任何一個想先試看看的前端畫面，要抓取Resource裡面的內容，我用的方法是用Razor

<h1>@Resources.Resource.title</h1>
<p>@Resources.Resource.contant</p>
<a href="#" class="btn btn-primary btn-lg">@Resources.Resource.other</a>

Razor 之所以可以抓的到是因為我們在創建資源檔的時候VS很聰明地幫我們建好namespace跟class了

這時候如果打開我們的網頁，會發現他很自動的自己抓到瀏覽器相對應的語系，然後就直接顯示了，以我們的例子他就直接讀取了zh-TW的那份檔案了。

所以按照這個道理，如果我們把zh-TW改成別的語系，讓他找不到任何相對應的語系檔案，那應該就會變回預設的。測試過後，也確實是如此

這邊我是將檔案Resource.zh-TW.resx 改成Resource.ja-JP.resx

到這邊如果我們就讓瀏覽器去抓語系就好，納到這邊就做完了，但是如果瀏覽器所設定的語系，其實不是使用者的語系怎麼辦？

這時候我們就要來設定CultureInfo了

CultureInfo Provides information about a specific culture (called a locale for unmanaged code development). The information includes the names for the culture, the writing system, the calendar used, the sort order of strings, and formatting for dates and numbers.

CurrentUICulture Gets or sets the current culture used by the Resource Manager to look up culture-specific resources at run time.

CurrentCulture Gets or sets the CultureInfo object that represents the culture used by the current thread.

那由於我們目前只有在測試一個畫面，所以我們先處理一個Controllers就好。我們剛剛玩的畫面是Home底下的index，所以我們開啟HomeController.cs

public ActionResult Index(){
		System.Threading.Tread.CurrentCulture = new System.Globalization.CultureInfo("en-US");
		System.Threading.Tread.CurrentUICulture = new System.Globalization.CultureInfo("en-US");
		return View();
}

簡單來講，就是在讀取頁面之前我們就是把兩個值設定好CurrentUICulture跟CurrentCulture，我們帶入的值就是CultureInfo，而CultureInfo所設定的值便是"en-US"，也就是英語美國，重新整理網頁應該就會變為英語的畫面。

有注意到的話，我多加了一行時間，而時間的格式也跟著改變了。

//前端Razor抓取現在時間方法
<p>@DateTime.Now</p>

這主要是由於CultureInfo被我們設定成美系的，所以時間格式也變為月/日/年

而上方文字的更動是來自於Resource檔案，選擇英語("en-US")的檔案是由於CultureUIInfo被我們設定了。

所以可以嘗試看看如果把兩個值設定成不一樣會發生甚麼事。

聰明的你現在應該想到了，只要我們能將"en-US"變成一個變數，我們不就能任意切換語系了嗎？沒錯！事不宜遲把變數加上去吧，我們把剛剛在HomeController.cs的程式些改一下

public ActionResult Index(string lang){
  //記得這個變數不一定會有值
	if(!String.IsNullOrEmpty(lang)){
		System.Threading.Tread.CurrentCulture = new System.Globalization.CultureInfo(lang);
		System.Threading.Tread.CurrentUICulture = new System.Globalization.CultureInfo(lang);
	}
		return View();
}

前端(Index.cshtml)我們新增連結當作切換的方法(這邊也是使用Razor方法，純粹自己打html也是可以的)

@Html.ActionLink("English","Index","Home",new{lang = "en-US"},null);
@Html.ActionLink("中文","Index","Home",new{lang = "zh-Tw"},null);

完成之後，執行看看按下兩個連結，看畫面會不會在英文與中文之間切換。

打一打發現好耗體力@@，先打到這邊好了，下一期我們將討論：

如何將功能拓展至全網頁

如何在切換頁面之間依然保持選擇的語系

如何在離開網頁之後，再次回來依然保持選擇的語系

搜尋此網誌

為自己開路