逐步解說：使用用戶端指令碼將日期全球化

  • 發行項

更新：2007 年 11 月

在此逐步解說中，您將會使用 ECMAScript (JavaScript)，以全球化格式顯示日期、月份及其他日期相關值。ASP.NET 中的 AJAX 功能可根據 ScriptManager 控制項中的設定，來提供用戶端全球化支援。將這些全球化設定套用至 Web 應用程式之後，您就能使用用戶端指令碼，根據文化特性值來格式化 JavaScript Date 或 Number 物件。這不需要回傳至伺服器。

用戶端指令碼所使用的文化特性值，是根據使用者瀏覽器設定所提供的預設文化特性設定。此外，也可以使用伺服器設定或您應用程式中的伺服器程式碼，設定為特定的文化特性值。

文化特性值會提供特定文化特性 (地區設定) 的詳細資訊。文化特性值由兩字母的語言值、加上兩字母的國家或地區值組合而成。範例包括了 es-MX (墨西哥西班牙文)、es-CO (哥倫比亞西班牙文) 及 fr-CA (加拿大法文)。

ASP.NET AJAX 日期擴充功能藉由提供 localeFormat 方法，將功能加入至 JavaScript Date 物件。此方法可讓 Date 物件根據瀏覽器語言設定、伺服器設定或伺服器程式碼加以格式化。這些設定會影響伺服器文化特性值，伺服器之後會解譯該值以產生由 Sys.CultureInfo.CurrentCulture 屬性公開的用戶端物件。此物件用來格式化日期。

如需文化特性與地區設定的詳細資訊，請參閱 ASP.NET 全球化和當地語系化 及 CultureInfo 類別概觀。

必要條件

若要在自己的開發環境中實作這些程序，您需要：

  • Microsoft Visual Studio 2005 或 Microsoft Visual Web Developer Express 版。

  • 具備 AJAX 能力的 ASP.NET 網站。

根據瀏覽器設定將日期全球化

若要開始，您將會使用瀏覽器中的語言喜好設定來指定格式化日期的方法。

根據瀏覽器語言喜好設定將日期全球化

  1. 關閉 Microsoft Internet Explorer 或預設瀏覽器任何開啟的執行個體，如此一來，所有新的執行個體都將使用新的地區設定。

  2. 開啟 Internet Explorer 的新執行個體。

  3. 按一下 [工具] 功能表上的 [網際網路選項]、然後按一下 [一般] 索引標籤，再按一下 [語言]。

  4. 將語言喜好設定為 es-MX (墨西哥西班牙文)，並移除清單中的任何其他地區設定。

    注意事項：

    如果您使用其他瀏覽器，請使用該瀏覽器中的相對語言設定。

  5. 關閉瀏覽器。

  6. 在 Visual Studio 中建立或開啟具備 ASP.NET AJAX 能力的 Web 網頁，並切換至 [設計] 檢視。

  7. 選取 ScriptManager 控制項，並將其 EnableScriptGlobalization 屬性設定為 true。

    注意事項：

    如果頁面未包含 ScriptManager 控制項，請從 [工具箱] 的 [AJAX Extensions] 索引標籤中新增一個。

  8. 在 [工具箱] 的 [AJAX 擴充功能] 索引標籤中按兩下 UpdatePanel 控制項，以便將更新面板加入至頁面。

  9. 將 UpdatePanel 控制項的 ChildrenAsTriggers 屬性設定為 false。

  10. 將 UpdatePanel 控制項的 UpdateMode 屬性設定為 Conditional。

  11. 按一下 UpdatePanel 控制項內部，然後從 [工具箱] 的 [標準] 索引標籤中，將 Button 控制項與 Label 控制項加入至 UpdatePanel 控制項。

    注意事項：

    請確定您已將 Label 與 Button 控制項加入至 UpdatePanel 控制項內部。

  12. 確定將按鈕的 ID 屬性設定為 Button1，然後將其 Text 屬性設定為 [顯示日期]。

  13. 確定將標籤的 ID 屬性設定為 Label1。

  14. 切換至原始碼檢視。

  15. 在頁面底部建立一個 script 項目，然後將下列用戶端指令碼加入其中。

    Sys.UI.DomEvent.addHandler($get("Button1"), "click", formatDate);
function formatDate() {
  var d = new Date();
  try {
    $get('Label1').innerHTML = d.localeFormat("dddd, dd MMMM yyyy HH:mm:ss");
  }
  catch(e) {
    alert("Error:" + e.message);
  }
}

    Sys.UI.DomEvent.addHandler($get("Button1"), "click", formatDate);
function formatDate() {
  var d = new Date();
  try {
    $get('Label1').innerHTML = d.localeFormat("dddd, dd MMMM yyyy HH:mm:ss");
  }
  catch(e) {
    alert("Error:" + e.message);
  }
}

    此程式碼會將 click 處理常式加入至名為 Button1 的按鈕。程式碼會呼叫 formatDate 函式，以建立新的 Date 物件，並在名為 Label1 的項目中顯示已格式化的日期。日期使用 localeFormat 函式加以格式化，該函式為 Date 物件之 Microsoft AJAX Library 擴充功能的一部分。

  16. 在網站的 Web.config 檔案中，將下列 globalization 項目包括在 system.web 區段中。

    <globalization culture="auto" />

    "auto" 設定表示指定瀏覽器要求中的 ACCEPT-LANGUAGE 標頭 (其中提供使用者的語言喜好設定清單) 來設定文化特性值。

  17. 儲存變更，然後在您已變更語言設定的瀏覽器中執行 Web 網頁。

  18. 按一下 [顯示日期] 按鈕，即可看到以瀏覽器語言設定為基礎的全球化日期值。

    下列範例顯示具有用戶端指令碼以根據瀏覽器語言喜好設定將日期全球化的完整 ASP.NET Web 網頁。

    <%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head >
    <title>Globalization Example</title>
</head>
<body>
    <form id="form1" >
        <asp:ScriptManager ID="ScriptManager1"  EnableScriptGlobalization="true"/>
        <asp:UpdatePanel ID="UpdatePanel1"  ChildrenAsTriggers="False" 
                         UpdateMode="Conditional">
            <ContentTemplate>
                   <asp:Panel ID="Panel1"  GroupingText="Update Panel">
                   <asp:Button ID="Button1"  Text="Display Date" />
           <br />
                   <asp:Label ID="Label1" ></asp:Label>
                   </asp:Panel>
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>
<script type="text/javascript">
    Sys.UI.DomEvent.addHandler($get("Button1"), "click", formatDate);
    function formatDate() {
      var d = new Date();
      try {
        $get('Label1').innerHTML = d.localeFormat("dddd, dd MMMM yyyy HH:mm:ss");
      }
      catch(e) {
        alert("Error:" + e.message);
      }
    }
</script>

    <%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head >
    <title>Globalization Example</title>
</head>
<body>
    <form id="form1" >
        <asp:ScriptManager ID="ScriptManager1"  EnableScriptGlobalization="true"/>
        <asp:UpdatePanel ID="UpdatePanel1"  ChildrenAsTriggers="False" 
                         UpdateMode="Conditional">
            <ContentTemplate>
                   <asp:Panel ID="Panel1"  GroupingText="Update Panel">
                   <asp:Button ID="Button1"  Text="Display Date" />
           <br />
                   <asp:Label ID="Label1" ></asp:Label>
                   </asp:Panel>
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>
<script type="text/javascript">
    Sys.UI.DomEvent.addHandler($get("Button1"), "click", formatDate);
    function formatDate() {
      var d = new Date();
      try {
        $get('Label1').innerHTML = d.localeFormat("dddd, dd MMMM yyyy HH:mm:ss");
      }
      catch(e) {
        alert("Error:" + e.message);
      }
    }
</script>

  19. 當您完成後，請在瀏覽器中重設語言設定。

根據組態設定將日期全球化

如果您想在多個頁面上顯示格式化的日期，可以在網站的組態檔中設定文化特性。所有頁面的日期就會套用該格式設定。

根據組態檔設定將日期全球化

  1. 在應用程式的 Web.config 檔中，將 system.web 區段中的 globalization 項目變更如下：

    <globalization culture="fr-CA" />

    此設定會將文化特性值設定為 "fr-CA" (加拿大法文)，無論瀏覽器的語言設定指定為何。

  2. 儲存變更，然後在瀏覽器中執行 Web 網頁。

  3. 按一下 [顯示日期] 按鈕即可看到全球化的日期值。

    現在日期是根據組態檔中的 culture 屬性來格式化，而非根據瀏覽器語言喜好設定。

    下列範例顯示具有用戶端指令碼以根據組態檔設定將日期全球化的完整 ASP.NET Web 網頁。

    <%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head >
    <title>Globalization Example</title>
</head>
<body>
    <form id="form1" >
        <asp:ScriptManager ID="ScriptManager1"  EnableScriptGlobalization="true"/>
        <asp:UpdatePanel ID="UpdatePanel1"  ChildrenAsTriggers="False" 
             UpdateMode="Conditional">
            <ContentTemplate>
                   <asp:Panel ID="Panel1"  GroupingText="Update Panel">
                   <asp:Button ID="Button1"  Text="Display Date" />
           <br />
                   <asp:Label ID="Label1" ></asp:Label>
                   </asp:Panel>
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>

<script type="text/javascript">
    Sys.UI.DomEvent.addHandler($get("Button1"), "click", formatDate);
    function formatDate() {
      var d = new Date();
      try {
        $get('Label1').innerHTML = d.localeFormat("dddd, dd MMMM yyyy HH:mm:ss");
      }
      catch(e) {
        alert("Error:" + e.message);
      }
    }
</script>

    <%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head >
    <title>Globalization Example</title>
</head>
<body>
    <form id="form1" >
        <asp:ScriptManager ID="ScriptManager1"  EnableScriptGlobalization="true"/>
        <asp:UpdatePanel ID="UpdatePanel1"  ChildrenAsTriggers="False" 
                         UpdateMode="Conditional">
            <ContentTemplate>
                   <asp:Panel ID="Panel1"  GroupingText="Update Panel">
                   <asp:Button ID="Button1"  Text="Display Date" />
           <br />
                   <asp:Label ID="Label1" ></asp:Label>
                   </asp:Panel>
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>

<script type="text/javascript">
    Sys.UI.DomEvent.addHandler($get("Button1"), "click", formatDate);
    function formatDate() {
      var d = new Date();
      try {
        $get('Label1').innerHTML = d.localeFormat("dddd, dd MMMM yyyy HH:mm:ss");
      }
      catch(e) {
        alert("Error:" + e.message);
      }
    }
</script>

根據頁面設定將日期全球化

若要設定個別頁面的文化特性，您可以使用 @ Page 指示詞的 Culture 屬性。@ Page 指示詞的 Culture 屬性的執行優先順序高於組態檔中的設定和瀏覽器的語言設定。

根據頁面設定將日期全球化

  1. 修改您正在使用之頁面中的 @ Page 指示詞，將文化特性值設定為 "de-DE" (德國德文)，如下列範例所示：

    <%@ Page Language="C#" AutoEventWireup="true" Culture="de-DE" %>

  2. 儲存變更，然後在瀏覽器中執行 Web 網頁。

  3. 按一下 [顯示日期] 按鈕即可看到全球化的日期值。

    現在日期是根據 @ Page 指示詞的 Culture 屬性來格式化。

    下列範例顯示具有用戶端指令碼以根據頁面設定將日期全球化的完整 ASP.NET Web 網頁。

    <%@ Page Language="VB" Culture="de-DE" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head >
    <title>Globalization Example</title>
</head>
<body>
    <form id="form1" >
        <asp:ScriptManager ID="ScriptManager1"  EnableScriptGlobalization="true"/>
        <asp:UpdatePanel ID="UpdatePanel1"  ChildrenAsTriggers="False" 
             UpdateMode="Conditional">
            <ContentTemplate>
                   <asp:Panel ID="Panel1"  GroupingText="Update Panel">
                   <asp:Button ID="Button1"  Text="Display Date" />
           <br />
                   <asp:Label ID="Label1" ></asp:Label>
                   </asp:Panel>
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>

<script type="text/javascript">
    Sys.UI.DomEvent.addHandler($get("Button1"), "click", formatDate);
    function formatDate() {
      var d = new Date();
      try {
        $get('Label1').innerHTML = d.localeFormat("dddd, dd MMMM yyyy HH:mm:ss");
      }
      catch(e) {
        alert("Error:" + e.message);
      }
    }
</script>

    <%@ Page Language="C#" Culture="de-DE" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head >
    <title>Globalization Example</title>
</head>
<body>
    <form id="form1" >
        <asp:ScriptManager ID="ScriptManager1"  EnableScriptGlobalization="true"/>
        <asp:UpdatePanel ID="UpdatePanel1"  ChildrenAsTriggers="False" 
             UpdateMode="Conditional">
            <ContentTemplate>
                   <asp:Panel ID="Panel1"  GroupingText="Update Panel">
                   <asp:Button ID="Button1"  Text="Display Date" />
           <br />
                   <asp:Label ID="Label1" ></asp:Label>
                   </asp:Panel>
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>

<script type="text/javascript">
    Sys.UI.DomEvent.addHandler($get("Button1"), "click", formatDate);
    function formatDate() {
      var d = new Date();
      try {
        $get('Label1').innerHTML = d.localeFormat("dddd, dd MMMM yyyy HH:mm:ss");
      }
      catch(e) {
        alert("Error:" + e.message);
      }
    }
</script>

以程式設計方式來全球化日期

如果您想以程式設計方式來設定頁面的文化特性值，您可以在伺服器程式碼中覆寫頁面的 InitializeCulture 方法。InitializeCulture 方法的執行優先順序高於 @ Page 指示詞、組態檔和瀏覽器中的文化特性設定。

以程式設計方式將日期全球化

  1. 將以下方法加入至頁面中：

       Protected Overrides Sub InitializeCulture()
        Me.Culture = "it-IT"
    End Sub

    protected override void InitializeCulture()
{
    this.Culture = "it-IT";
}

    此程式碼會覆寫基底 Page 類別的 InitializeCulture 方法，並將文化特性值設定為 "it-IT" (義大利文 (義大利))。這是以程式設計方式頁面生命週期內進行變更文化特性的適當時機。

  2. 儲存變更，然後在瀏覽器中執行 Web 網頁。

  3. 按一下 [顯示日期] 按鈕即可看到全球化的日期。

    現在日期值是根據伺服器程式碼來格式化。

    下列範例顯示具有用戶端指令碼，以透過程式設計方式將日期全球化的完整 ASP.NET Web 網頁。

    <%@ Page Language="VB" Culture="de-DE" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<script >
    Protected Overrides Sub InitializeCulture()
        Me.Culture = "it-IT"
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml">

<head >
    <title>Globalization Example</title>
</head>
<body>
    <form id="form1" >
        <asp:ScriptManager ID="ScriptManager1"  EnableScriptGlobalization="true"/>
        <asp:UpdatePanel ID="UpdatePanel1"  ChildrenAsTriggers="False" 
             UpdateMode="Conditional">
            <ContentTemplate>
                   <asp:Panel ID="Panel1"  GroupingText="Update Panel">
                   <asp:Button ID="Button1"  Text="Display Date" />
           <br />
                   <asp:Label ID="Label1" ></asp:Label>
                   </asp:Panel>
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>

<script type="text/javascript">
    Sys.UI.DomEvent.addHandler($get("Button1"), "click", formatDate);
    function formatDate() {
      var d = new Date();
      try {
        $get('Label1').innerHTML = d.localeFormat("dddd, dd MMMM yyyy HH:mm:ss");
      }
      catch(e) {
        alert("Error:" + e.message);
      }
    }
</script>

    <%@ Page Language="C#" Culture="de-DE" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<script >
        protected override void InitializeCulture()
        {
            this.Culture = "it-IT";
        }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">

<head >
    <title>Globalization Example</title>
</head>
<body>
    <form id="form1" >
        <asp:ScriptManager ID="ScriptManager1"  EnableScriptGlobalization="true"/>
        <asp:UpdatePanel ID="UpdatePanel1"  ChildrenAsTriggers="False" 
             UpdateMode="Conditional">
            <ContentTemplate>
                   <asp:Panel ID="Panel1"  GroupingText="Update Panel">
                   <asp:Button ID="Button1"  Text="Display Date" />
           <br />
                   <asp:Label ID="Label1" ></asp:Label>
                   </asp:Panel>
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>

<script type="text/javascript">
    Sys.UI.DomEvent.addHandler($get("Button1"), "click", formatDate);
    function formatDate() {
      var d = new Date();
      try {
        $get('Label1').innerHTML = d.localeFormat("dddd, dd MMMM yyyy HH:mm:ss");
      }
      catch(e) {
        alert("Error:" + e.message);
      }
    }
</script>

格式化模式

localeFormat 方法可以接受各式各樣的格式化模式。如需日期和時間字串格式的詳細資訊，請參閱 Sys.CultureInfo 類別。

請參閱

工作

HOW TO：設定 ASP.NET Web 網頁全球化的文化特性和 UI 文化特性

其他資源

ASP.NET 全球化和當地語系化