Microsoft Word CH05__P10

Size: px

Start display at page:

Download "Microsoft Word CH05__P10"

党国
5 years ago
Views:

1 探討 JavaScript 的日期全球化功能關於文化特性值使用瀏覽器語言設定來全球化 JavaScript 的日期值使用 Web.config 的設定來全球化 JavaScript 的日期值使用網頁設定來全球化 JavaScript 的日期值使用伺服器端程式碼來全球化 JavaScript 的日期值 JavaScript 日期值全球化的優先順序

2 日期 " 是一個實務應用程式必定會使用到的資料項目, 而隨著全球化與資訊無國界的形成, 如何讓 JavaScript 以全球化格式來顯示日期值便成為一項重要的課題微軟公司也深知此一道理, 因此在 ASP.NET 3.5 AJAX 中, 替別提供了用戶端 JavaScript 的日期全球化功能在套用了相關的全球化設定之後, 用戶端 JavaScript 就可以根據某個文化特性值來格式化 Date 或 Number 物件, 重點是, 它完全不需要將網頁回傳至 Web 伺服器用戶端 JavaScript 所使用的文化特性值可以來自不同的設定, 包括 : 使用者的瀏覽器語言設定 Web.config 的設定網頁本身的設定亦或是以伺服器端程式碼來設定本章的重點, 就是要說明如何使用這四種方式來完成 JavaScript 的日期全球化 5-1 關於文化特性值文化特性值提供了特定文化 ( 地區設定 ) 的相關資訊大家必須瞭解, 文化特性值是由代表語言的兩個字母以及代表國家或地區的另外兩個字母所組合而成舉例來說,es-MX 代表墨西哥西班牙文,es-CO 代表哥倫比亞西班牙文,fr-CA 代表加拿大法文,en-US 代表美國英文,zh-TW 代表台灣中文, zh-cn 則代表中國中文 ASP.NET 3.5 AJAX 是藉由賦予 JavaScript 的 Date 物件一個 localeformat 方法來使其具備日期全球化功能 localeformat 方法使得 Date 物件可以根據下列四種方式來全球化日期 : 使用瀏覽器語言設定來全球化 JavaScript 的日期值使用 Web.config 的設定來全球化 JavaScript 的日期值使用網頁設定來全球化 JavaScript 的日期值使用伺服器端程式碼來全球化 JavaScript 的日期值正如大家所知道的, 要設定伺服器端的文化特性值, 也是使用上述四種方式基本上,ASP.NET 3.5 AJAX 提供了一種用戶端與伺服器端一致的設定方式來全球化日期值基本上, 伺服器會解譯您的文化特性值設定方式, 產生一個用於格式化日期的用戶端物件, 並透過 Sys.CultureInfo. CurrentCulture 屬性來加以揭露 5-2

3 我們在前一章就曾經說過, 您的網頁必須加入一個 ScriptManager 控制項, 才能享有 ASP.NET 3.5 AJAX 對 JavaScript 所提供的各項擴充功能由此可知, 欲享有 JavaScript 的日期全球化功能, 您同樣必須在網頁中加入一個 ScriptManager 控制項, 而且請記得, 務必將 ScriptManager 控制項的 EnableScriptGlobalization 屬性設定成 True 5-2 使用瀏覽器語言設定來全球化 JavaScript 的日期值欲使用瀏覽器語言設定來全球化 JavaScript 的日期值, 您的瀏覽器必須依下列步驟進行設定 :( 以下我們以 Internet Explorer 做為說明對象 ) 1. 開啟 Internet Explorer 2. 從工具功能表中選取網際網路選項 3. 按一下一般索引標籤頁面中的語言按鈕 4. 於圖表 5-1 所示的語言喜好設定對話方塊中, 加入您所要採用的語言, 並且將其移至清單中的最上方, 然後按一下確定按鈕圖表除了瀏覽器的語言設定之外, 請於您網站的組態檔 Web.config 中, 於 system.web 區段之內, 加入設定如下的 globalization 項目 : <globalization culture="auto" /> 5-3

4 "auto" 設定表示以瀏覽器請求中的 ACCEPT-LANGUAGE 標頭 ( 它提供使用者語言偏好清單 ) 來設定文化特性值這是一個 Button 伺服器控制項, 位於 UpdatePanel 控制項之內這是一個 HTML input 按鈕, 位於 UpdatePanel 控制項之外圖表 5-2 網頁範例使用瀏覽器語言設定來全球化 JavaScript 的日期值圖表 5-2 是網頁範例 CH5_DemoForm001.aspx 的執行畫面, 不論您是按下 UpdatePanel 控制項之內的 Button 伺服器控制項按鈕, 或是按下 UpdatePanel 控制項之外的 HTML input 按鈕, 都會執行 JavaScript 函式來顯示目前的日期時間, 重點是, 所顯示的日期時間將會採用瀏覽器的語言設定來加以全球化您可以在圖表 5-1 所示的對話方塊中變更語言清單中的語言順序, 然後重新執行本網頁並檢視其執行結果, 此舉將可證明所顯示的日期時間格式是根據瀏覽器的語言設定來加以全球化本網頁範例的設計技巧說明如下 : 首先, 請檢視本網頁的宣告式標記內容 : <form id="form1" runat="server"> <asp:scriptmanager ID="ScriptManager1" runat="server" EnableScriptGlobalization="true" /> <asp:updatepanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="False" UpdateMode="Conditional"> <ContentTemplate> <asp:panel ID="Panel1" runat="server" GroupingText="Update Panel"> 5-4

5 <asp:button ID="btnDisplayDate" runat="server" Text=" 顯示日期 " /> <br /> <asp:label ID="Label1" runat="server"></asp:label> </asp:panel> </ContentTemplate> </asp:updatepanel> <input id="button1" type="button" value=" 顯示日期 " onclick="return DisplayDate();"/> <div id="message"></div> </form> 在檢視以上的宣告式標記內容時, 有三點必須特別注意到第一, 務必將 ScriptManager 控制項的 EnableScriptGlobalization 屬性設定成 True 第二,Button 伺服器控制項位於 UpdatePanel 控制項之內, 它被按下後會將日期時間顯示在同位於 UpdatePanel 控制項之內的 Label 控制項第三,HTML input 按鈕位於 UpdatePanel 控制項之外, 它被按下後會執行 JavaScript 函式 DisplayDate() 並將日期時間顯示在同位於 UpdatePanel 控制項之外的 <div> 項目上請替網頁撰寫以下的 JavaScript, 重點在於, 為了能夠讓日期時間值全球化, 請務必建立一個 Date 物件並使用其 localeformat 方法來顯示日期時間 : <script type="text/javascript"> // 設定當按下 Button 伺服器控制項就執行 JavaScript 函式 formatedate() Sys.UI.DomEvent.addHandler($get("btnDisplayDate"), "click", formatdate); function formatdate() { // 建立一個 Date 物件 var d = new Date(); try { // 使用 Date 物件的 localeformat 方法來顯示日期時間 $get('label1').innerhtml = d.localeformat("dddd, dd MMMM yyyy HH:mm:ss"); 5-5

6 catch(e) { alert(" 錯誤 :" + e.message); function DisplayDate() { // 建立一個 Date 物件 var d = new Date(); try { // 使用 Date 物件的 localeformat 方法來顯示日期時間 $get('message').innerhtml = d.localeformat("dddd, dd MMMM yyyy HH:mm:ss"); return false; catch(e) { alert(" 錯誤 :" + e.message); </script> 5-3 使用 Web.config 的設定來全球化 JavaScript 的日期值您可以使用組態檔 Web.config 的設定來全球化 JavaScript 的日期值, 該設定將會套用至網站中的所有網頁, 而且此一設定的優先順序將高於瀏覽器的語言設定舉例來說, 假設您希望日期時間值要採用代表墨西哥西班牙文的文化特性, 請於您網站的組態檔 Web.config 中, 於 system.web 區段之內, 加入設定如下的 globalization 項目 : <globalization culture="es-mx" /> CH5 專案之 Web.config 中的原先的全球化設定是 <globalization culture="auto" />, 現在請您將其更改成 <globalization culture="es-mx" 5-6

7 />, 然後再次執行網頁範例 CH5_DemoForm001.aspx, 您會發現,JavaScript 利用 Date 物件之 localeformat 方法所顯示的日期時間已採用墨西哥西班牙文的文化特性 ( 如圖表 5-3 所示 ) JavaScript 所顯示的日期時間採用墨西哥西班牙文的文化特性圖表使用網頁設定來全球化 JavaScript 的日期值指示詞當中使用 Culture 屬性來決定要使用哪一個文化特性值來全球化 JavaScript 的日期時間值請注意,@Page 指示詞設定的優先順序將高於 Web.config 組態檔設定以及瀏覽器語言設定 JavaScript 所顯示的日期時間採用德國德文的文化特性圖表

8 網頁範例指示詞來設定網頁的文化特性值圖表 5-4 是網頁範例 CH5_DemoForm002.aspx 的執行畫面,JavaScript 所顯示的日期時間之所以會採用德國德文的文化特性, 是因為我們如下所示, 指示詞當中加入 Culture="de-DE" 的屬性設定 : <%@ Page Language="VB" AutoEventWireup="true" CodeFile="CH5_DemoForm002.aspx.vb" Inherits="CH5_DemoForm002" Culture="de-DE" %> 5-5 使用伺服器端程式碼來全球化 JavaScript 的日期值您可以使用伺服器端程式碼去覆寫基底 Page 類別的 InitializeCulture 方法來設定網頁的文化特性值, 此作法的優先順序高於先前所述的三種方式選取網頁的文化特性圖表

9 選取網頁的文化特性圖表 5-6 網頁範例示範覆寫基底 Page 類別的 InitializeCulture 方法來設定網頁的文化特性值圖表 5-5 與 5-6 是網頁範例 CH5_DemoForm003.aspx 的執行畫面, 在您選取某一個文化特性之後, 按下特定的按鈕便會以該文化特性來全球化 JavaScript 的日期時間值本範例主要在示範如何使用伺服器端程式碼去覆寫基底 Page 類別的 InitializeCulture 方法來設定網頁的文化特性值相關程式碼如下所列 : ' 覆寫基底 Page 類別的 InitializeCulture 方法 ' 以便設定網頁的文化特性值 Protected Overloads Overrides Sub InitializeCulture() If Request.Form("DropDownList1") <> Nothing Then Dim selectedlanguage As String = Request.Form("DropDownList1") UICulture = Request.Form("DropDownList1") Culture = Request.Form("DropDownList1") Thread.CurrentThread.CurrentCulture = _ CultureInfo.CreateSpecificCulture(selectedLanguage) Thread.CurrentThread.CurrentUICulture = New CultureInfo(selectedLanguage) End If MyBase.InitializeCulture() End Sub 5-9

10 ' 此段程式碼負責將文化特性的名稱填入 DropDownList 控制項中 Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) _ Handles Me.Load If Not IsPostBack Then Dim mysortedlist As New SortedDictionary(Of String, String)() For Each ci As CultureInfo In _ CultureInfo.GetCultures(CultureTypes.SpecificCultures) mysortedlist.add(ci.englishname, ci.name) Next Me.DropDownList1.DataSource = mysortedlist Me.DropDownList1.DataTextField = "Key" Me.DropDownList1.DataValueField = "Value" Me.DropDownList1.DataBind() End If End Sub 5-6 JavaScript 日期值全球化的優先順序之前我們提了四種方式來全球化 JavaScript 的日期值, 這四種方式的優先順序如下所示 : 1. 使用伺服器端程式碼來全球化 JavaScript 的日期值擁有最高的優先順序 2. 其次是, 使用網頁設定來全球化 JavaScript 的日期值 3. 第三是, 使用 Web.config 的設定來全球化 JavaScript 的日期值 4. 最後則是使用瀏覽器語言設定來全球化 JavaScript 的日期值 5-10

導讀 ASP.NET HTML ASP 第一篇基礎篇第 1 章認識 ASP.NET ASP.NET ASP.NET ASP.NET ASP.NET 第 2 章認識 Visual Studio 20 開發環境 Visual Studio 20 Visual Studio 20 第二篇 C# 程式

導讀 ASP.NET HTML ASP 第一篇基礎篇第 1 章認識 ASP.NET ASP.NET ASP.NET ASP.NET ASP.NET 第 2 章認識 Visual Studio 20 開發環境 Visual Studio 20 Visual Studio 20 第二篇 C# 程式導讀 ASP.NET HTML ASP 第一篇基礎篇第 1 章認識 ASP.NET ASP.NET ASP.NET ASP.NET ASP.NET 第 2 章認識 Visual Studio 20 開發環境 Visual Studio 20 Visual Studio 20 第二篇 C# 程式語言篇第 3 章 C# 程式語言基礎 C# C# 3.0 var 第 4 章基本資料處理 C# x