演练：使用客户端脚本全球化日期

  • 项目

更新：2007 年 11 月

在本演练中，您将使用 ECMAScript (JavaScript) 以全球化格式显示日、月和其他与日期相关的值。ASP.NET 中的 AJAX 功能基于 ScriptManager 控件中的设置提供客户端全球化支持。将这些全球化设置应用于 Web 应用程序后，可以使用客户端脚本基于区域性值设置 JavaScript Date 或 Number 对象的格式。此操作不需要回发到服务器。

客户端脚本使用的区域性值基于由用户的浏览器设置提供的默认区域性设置。或者，还可以通过在应用程序中使用服务器设置或服务器代码，将其设置为特定的区域性值。

区域性值提供有关特定区域性（区域设置）的信息。区域性值由两个表示语言的字母和两个表示国家或地区的字母组合而成。示例包括 es-MX（西班牙语/墨西哥）、es-CO（西班牙语/哥伦比亚）和 fr-CA（法语/加拿大）。

ASP.NET AJAX Date 扩展通过提供 localeFormat 方法，向 JavaScript Date 对象添加新功能。使用此方法可以基于浏览器的语言设置、服务器设置或服务器代码设置 Date 对象的格式。这些设置会影响服务器的区域性值，服务器然后对此区域性值进行解释，以生成一个客户端对象，并由 Sys.CultureInfo.CurrentCulture 属性公开该对象。此对象用于设置日期格式。

有关区域性和区域设置的更多信息，请参见 ASP.NET 全球化和本地化 和 CultureInfo 类概述。

先决条件

若要在您自己的开发环境中实现这些过程，您需要：

  • Microsoft Visual Studio 2005 或 Microsoft Visual Web Developer 速成版。

  • 一个支持 AJAX 的 ASP.NET 网站。

基于浏览器设置全球化日期

首先，您将使用浏览器中的语言首选项设置来指定如何设置日期格式。

基于浏览器语言首选项全球化日期

  1. 关闭任何打开的 Microsoft Internet Explorer 或默认浏览器的实例，以便所有新实例将使用新的区域设置。

  2. 打开 Internet Explorer 的一个新实例。

  3. 在**“工具”菜单上，依次单击“Internet 选项”、“常规”选项卡和“语言”**。

  4. 将语言首选项设置为 es-MX（西班牙语/墨西哥）并从列表中移除任何其他区域设置。

    Bb386581.alert_note(zh-cn,VS.90).gif说明：

    如果您使用不同的浏览器，请在该浏览器中进行等效的语言设置。

  5. 关闭浏览器。

  6. 在 Visual Studio 中，创建或打开支持 AJAX 的 ASP.NET 网页，然后切换到“设计”视图。

  7. 选择 ScriptManager 控件并将其 EnableScriptGlobalization 属性设置为 true。

    Bb386581.alert_note(zh-cn,VS.90).gif说明：

    如果页上不包含 ScriptManager 控件，请从“工具箱”的“AJAX Extensions”选项卡中添加一个。

  8. 在**“工具箱”的“AJAX Extensions”**选项卡中，双击 UpdatePanel 控件以将更新面板添加到页上。

  9. 将 UpdatePanel 控件的 ChildrenAsTriggers 属性设置为 false。

  10. 将 UpdatePanel 控件的 UpdateMode 属性设置为 Conditional。

  11. 在 UpdatePanel 控件内单击，然后从**“工具箱”中的“标准”**选项卡中，将 Button 控件和 Label 控件添加到 UpdatePanel 控件中。

    Bb386581.alert_note(zh-cn,VS.90).gif说明：

    确保将 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 文件的 system.web 节中包含下列 globalization 元素：

    <globalization culture="auto" />

    “auto”设置指定使用浏览器请求中的 ACCEPT-LANGUAGE 标头（它提供用户的语言首选项列表）设置区域性值。

  17. 保存更改，然后在您已更改语言设置的浏览器中运行网页。

  18. 单击“显示日期”按钮以查看基于浏览器语言设置的全球化日期值。

    下面的示例演示一个包含客户端脚本的完整 ASP.NET 网页，此脚本基于浏览器的语言首选项全球化日期。

    <%@ 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 runat="server">
    <title>Globalization Example</title>
</head>
<body>
    <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">
                   <asp:Button ID="Button1" runat="server" Text="Display Date" />
           <br />
                   <asp:Label ID="Label1" runat="server"></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 runat="server">
    <title>Globalization Example</title>
</head>
<body>
    <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">
                   <asp:Button ID="Button1" runat="server" Text="Display Date" />
           <br />
                   <asp:Label ID="Label1" runat="server"></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. 保存更改，然后在浏览器中运行网页。

  3. 单击“显示日期”按钮以查看全球化日期值。

    现在，日期格式设置将基于配置文件中的区域性属性，而不是基于浏览器语言首选项。

    下面的示例演示一个包含客户端脚本的完整 ASP.NET 网页，此脚本基于配置文件设置全球化日期。

    <%@ 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 runat="server">
    <title>Globalization Example</title>
</head>
<body>
    <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">
                   <asp:Button ID="Button1" runat="server" Text="Display Date" />
           <br />
                   <asp:Label ID="Label1" runat="server"></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 runat="server">
    <title>Globalization Example</title>
</head>
<body>
    <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">
                   <asp:Button ID="Button1" runat="server" Text="Display Date" />
           <br />
                   <asp:Label ID="Label1" runat="server"></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. 保存更改，然后在浏览器中运行网页。

  3. 单击“显示日期”按钮以查看全球化日期值。

    现在，日期格式设置将基于 @ Page 指令的 Culture 属性。

    下面的示例演示一个包含客户端脚本的完整 ASP.NET 网页，此脚本基于页面设置全球化日期。

    <%@ 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 runat="server">
    <title>Globalization Example</title>
</head>
<body>
    <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">
                   <asp:Button ID="Button1" runat="server" Text="Display Date" />
           <br />
                   <asp:Label ID="Label1" runat="server"></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 runat="server">
    <title>Globalization Example</title>
</head>
<body>
    <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">
                   <asp:Button ID="Button1" runat="server" Text="Display Date" />
           <br />
                   <asp:Label ID="Label1" runat="server"></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. 保存更改，然后在浏览器中运行网页。

  3. 单击“显示日期”按钮以查看全球化日期。

    现在基于服务器代码格式化日期值。

    下面的示例演示一个包含客户端脚本的完整 ASP.NET 网页，此脚本通过编程方式全球化日期。

    <%@ 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 runat="server">
    Protected Overrides Sub InitializeCulture()
        Me.Culture = "it-IT"
    End Sub
</script>

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

<head runat="server">
    <title>Globalization Example</title>
</head>
<body>
    <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">
                   <asp:Button ID="Button1" runat="server" Text="Display Date" />
           <br />
                   <asp:Label ID="Label1" runat="server"></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 runat="server">
        protected override void InitializeCulture()
        {
            this.Culture = "it-IT";
        }
</script>

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

<head runat="server">
    <title>Globalization Example</title>
</head>
<body>
    <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">
                   <asp:Button ID="Button1" runat="server" Text="Display Date" />
           <br />
                   <asp:Label ID="Label1" runat="server"></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 类。

请参见

任务

如何：为 ASP.NET 网页全球化设置区域性和 UI 区域性

其他资源

ASP.NET 全球化和本地化