建立 Localized JavaScript

從前在 asp 時代就有這樣子的需求, 那時候是用 Excel 表製作字串對應表, 再透過程式產生各種不同的 JavaScript 檔, 最後再根據需求動態引入不同的 JavaScript 來達成, 其實這個解決方案也還算不錯, 因為 Excel 可以由程式設計師以外的人來進行相關的翻譯工作, 一切 OK 之後, 再透過轉檔程式產生一堆的 JavaScript 即可!

到了 ASP.NET 時代, 透過 System.Web.Extensions.dll 的 ScriptResourceAttribue 將整個動作整合的更好了(但是要做的事情其實差不了多少, 只是比較美而已), 實作的步驟如下:

1. 建立一個 Class Library Project, 取名為 LocalizingScriptResources, 並刪除那個多餘的 Class1.cs.
2. 加入 System.Web.dll 和 System.Web.Extensions.dll 參考.
3. 新增一個 MyResource.resx 資源檔, 並作以下的編輯:
    
4. 新增一個 MyScript.js, 將 Build Action 設為 Embedded Resource, 然後寫一個簡單的 function 在裡面, 其中值得注意的是 String1 和 String2 的前綴字 MyNamespace.MyType, 等一下會再遇到.
   
5. 為了讓等會兒的範例更清楚, 再補上一個 MyResource.zh-TW.resx, 這次內容用中文的:
   
6. 接下來的動作是一切的關鍵, 做錯的話等會兒就看不到效果了. 打開 Properties 底下的 AssemblyInfo.cs, 在 using 底下加入以下兩行:

   [assembly: WebResource("LocalizingScriptResources.MyScript.js", "text/javascript")]
   [assembly: ScriptResource("LocalizingScriptResources.MyScript.js", "LocalizingScriptResources.MyResource", "MyNamespace.MyType")]

   • 第一行的 WebResourceAttribute 是將 MyScript 嵌入 dll 中, 注意第一個參數的名字必須是 Namespace.DotSplittedFolderName.FileName, 因為範例的 MyScript.js 是放在根目錄, 所以名字是 LocalizingScriptResources.MyScript.js, 如果把檔案放在 \F1\F2\MyScript.js 的話, 那名字就必須改成 LocalizingScriptResources.F1.F2.MyScript.js, 目錄的分隔符號要換成 "."
   • 第二行的 ScripteResourceAttribute, 參數一就是和第一行相同的名字, 參數二是 Resource 檔的名字, 命名規則和第一個參數類似, 但是不包含語系的後綴字, 也不包含最後的 .resx 附檔名, 參數三則是要在 JavaScript 中使用名型別名稱, 也就是步驟 5 的 MyNamespace.MyType, 可以取自己想要的名字, 但兩邊要對應.
   • 在這兒先 Build 看看吧, 應該要成功的, 把不小心犯的錯找出來, 順便休息一下!
7. 接下來準備實驗啦, 加入一個新的 WebSite Project, 並將 LocalizingScriptResources 加入為專案參考, 打開 Default.aspx, 加入一個 ScriptManager, 並在裡面加入一個 Script 參考, 然後再寫一個 pageLoad 方法去呼叫 MyScript.js 裡面的 function.

   <form id="form1" runat="server">
   <div>
       <asp:ScriptManager ID="ScriptManager1" runat="server">
           <Scripts>
               <asp:ScriptReference Assembly="LocalizingScriptResources" Name="LocalizingScriptResources.MyScript.js" />
           </Scripts>
       </asp:ScriptManager>
   </div>
   <script type="text/javascript">
   function pageLoad()
   {
       LocalizedMethod();
   }
   </script>
   </form>

8. 接下來可以打開 Browser 看看結果, 如果想切換語系的話, 可以在 IE 的 網際網路選項 -> 語言 -> 語言喜好設定 裡調整語言的優先順序, 然後再次瀏覽網頁, 應該就可以了.
9. 如果想強制切換語系檔的話, 可以直接修改 @Page 的 UICulture 屬性, 試試 en-US, zh-TW 或其他的 Culture name 體驗一下.

   <%@ Page UICulture="zh-TW" Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>