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

好讀版本

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

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

Globalization and Localization in ASP.NET Core – Detailed
Globalization and Localization in ASP.NET Core - Detailed
We will discuss in detail, Globalization and Localization in ASP.NET Core Application and go through various approaches on changing the Culture of the App.
https://www.codewithmukesh.com/blog/globalization-and-localization-in-aspnet-core/?utm_source=csharpdigest&utm_medium=email&utm_campaign=319

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

理解一下文字：

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);

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

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

  1. 如何將功能拓展至全網頁
  1. 如何在切換頁面之間依然保持選擇的語系
  1. 如何在離開網頁之後，再次回來依然保持選擇的語系

留言

張貼留言

這個網誌中的熱門文章

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

圖片
👨🏻‍💻 ASP.net MVC 多國語言 globalization (part 2) 上次 大概了解了所謂的Globalization，並且用Resource File 當作我們的語言資料抓取，最後利用連結呼叫Controller改變我們顯示的語系。 但上一次有很明顯的問題： 切到別的畫面這功能就沒用了 在別的畫面沒辦法切換語系 切換語系之後再換頁面設定就跑掉了 所以這次我們就要來解決這些問題。 要能解決這些問題，目標其實挺明顯的，就是這項功能要有全域化的設定，第一個想到的就是Global.asax這個檔案，它位於整個專案的根目錄， 這一篇 大約介紹了這個檔案大概是做甚麼的。 簡單來說，每當有任何請求來的時候都會先經過這裡，加上基於它是 HttpApplication 的衍伸。 所以很直覺的我們當初在HomeController設定的CurrentCulture與CurrentUICulture應該要在這裡設定才對，並且當有請求的時候我們都要設定一次，這也是替等等的語系切換做準備，所以打開Global.asax 並在裡面增加 Application_BeginRequest的方法，並且把上次的語系設定程式加進來： protected void Application_BeginRequest(object sender,EvenArgs e){ String cultureName ="en-US"; System.Threading.Thread.CurrentThread.CurrentCulture = new System.Globalization.CultureInfo(cultureName); System.Threading.Thread.CurrentThread.CurrentUICulture = new System.Globalization.CultureInfo(cultureName); } 不要忘了，我們是要測試多個畫面的語系切換，所以至少再開一個畫面，並且裡面也加一個Resource file 裡面的資訊。我這裡的例子一樣是利用.net MVC預設提供的About.cshtml，當然Resource file也不要忘記加了 About.cshtml (隨便找一個位置放就好) &
閱讀完整內容

修車之旅~ 果貿自行車(備份)

圖片
幾個月前腳踏車因為疑似爆胎所以想去檢查一下，就跑去了最近的一家美利達檢修 結果老闆看了一下似乎沒有問題，但是為了以防萬一我還是換了內胎，這時老闆就說外胎要不要一起換?看起來有點嚴重且龜裂。當時怕被騙(沒做功課)所以就沒有換外胎就換了內胎而已。 我上班的同事有些人對於腳踏車也有點研究所以就問了一下，問過後得知他們一致推薦在左營火車站附近的果貿自行車 上網查了一下在網路上算是頗有名，老板人也很好價格也是算你便宜的，但是同事與網路上都一再警告老闆超忙而且又只有他一個人在修車，所以可能要等上幾個小時 我當時覺得太遠(我住楠梓)又懶，直到我踢斷我的腳架之後就決定啟程 果貿自行車上網查一下開店時間似乎只有開一、三、六 下午5點~11點 出發前可以先打電話確認，當然要訂腳踏車也是可以的 做好覺悟的決心就騎著腳踏車出發了 會迷路的我當然不免俗的迷路了，感謝google大大的相救 到了之後人沒有想像中的多大該4、5個而已但是還是讓我等了一個小時才排到，來的客人車子比一台好啊 會等這麼久幾個原因，客人有時候會直接詢問老闆是否有相關零件，因為老闆的熱情他會馬上跑到後面拿出來給他，因此他在修理一台腳踏車的時候會無限被打斷。 這也沒甚麼差不插隊，畢竟就只有老闆一個人又加上大多東西都在倉庫，就是買零件而以但是要老闆幫你裝的話就要排隊了 後續不斷有客人來，有些熟客，他們都直接老闆小哥(以下稱老闆為小哥) 小哥是很熱情 "你好、謝謝" 常常掛嘴邊 在等的時候看到不少人也來買腳他車，小哥依照客人的用途與身材大概幫你選一台現場有的腳踏車。就看到他推薦一台ATX-786 4990元 輪到我，小哥看了一下，我突然想起我的後煞車也有點問題並且告訴他，小哥還特別謝謝我提醒他，最後他就問我"你要不要再多換一個東西" 我回"腳踏墊嗎?" "對" 果然瞞不過他，本來不想換因為問題不嚴重不過遲早會出問題，想說既然都來了就都換吧 在修車途中當然不免俗的被其他客人打斷 看到老闆換了一個比較大的腳踏墊老闆就對我說"你騎它通勤對吧，試試看負擔會減少許多" 騎腳踏車通勤都被看出來了我也沒什麼
閱讀完整內容