Поделиться через

Пошаговое руководство. Глобализация даты с использованием клиентского сценария

  • Статья

Обновлен: Ноябрь 2007

В этом пошаговом руководстве используется сценарий ECMAScript (JavaScript), с помощью которого количество дней, месяцев и другие связанные с датой значения отображаются в глобализованном формате. Средства AJAX в ASP.NET обеспечивают поддержку клиентской глобализации, основанную на параметре элемента управления ScriptManager. После применения этих глобализационных параметров к веб-приложению можно использовать клиентский сценарий для форматирования объекта JavaScript Date или Number на основе значения, задающего язык и региональные параметры. При этом выполнять обратную передачу на сервер не требуется.

Значение, задающее язык и региональные параметры, используемое клиентским сценарием, основывается на действующем по умолчанию параметре идентификатора языка и региональных параметров в параметрах обозревателя, с которым работает пользователь. В качестве альтернативы можно установить определенное значение идентификатора языка и региональных параметров в серверных параметрах или серверном коде приложения.

Данное значение предоставляет сведения о языке и региональных параметрах (языковом стандарте). Это комбинация двух букв, идентифицирующих язык, и двух букв, идентифицирующих страну или регион. Примерами являются es-MX (испанский — Мексика), es-CO (испанский — Колумбия) и fr-CA (французский — Канада).

Расширения ASP.NET AJAX Date добавляют в объект JavaScript Date новые функциональные возможности, предоставляя метод localeFormat. Этот метод позволяет форматировать данные объекта Date с учетом языковой установки обозревателя, серверных параметров или серверного кода. Эти установки влияют на серверное значение, задающее язык и региональные параметры, которое затем интерпретируется сервером для создания клиентского объекта, доступного через свойство Sys.CultureInfo.CurrentCulture. Данный объект используется для форматирования дат.

Дополнительные сведения об идентификаторах языка и региональных параметров, а также о языковых стандартах, см. в разделе Глобализация и локализация ASP.NET и общих сведениях о классе CultureInfo.

Обязательные компоненты

Для реализации процедур в собственной среде разработки вам потребуются:

  • Microsoft Visual Studio 2005 или Microsoft Visual Web Developer, экспресс-выпуск;

  • веб-узел ASP.NET с поддержкой AJAX.

Глобализация даты на основе параметров обозревателя

В первом примере способ форматирования даты задается на основе языковых параметров обозревателя.

Глобализация даты на основе языковой установки обозревателя

  1. Закройте все открытые экземпляры Microsoft Internet Explorer или другого используемого по умолчанию обозревателя, чтобы новые экземпляры использовали новую установку языкового стандарта.

  2. Откройте новый экземпляр Internet Explorer.

  3. В меню Сервис выберите команду Параметры Интернета, в открывшемся окне перейдите на вкладку Общие и нажмите кнопку Язык.

  4. Задайте языковую установку es-MX (испанский (Мексика)) и удалите из списка все остальные языковые стандарты.

    Bb386581.alert_note(ru-ru,VS.90).gifПримечание.

    Если используется другой обозреватель, задайте в нем эквивалентные языковые параметры.

  5. Закройте обозреватель.

  6. В Visual Studio создайте или откройте веб-страницу ASP.NET с поддержкой AJAX и переключитесь в режим конструктора.

  7. Выберите элемент управления ScriptManager и установите его свойство EnableScriptGlobalization в true.

    Bb386581.alert_note(ru-ru,VS.90).gifПримечание.

    Если страница не содержит элемент управления ScriptManager, добавьте его с вкладки AJAX-расширенияПанели элементов.

  8. На вкладке AJAX-расширенияПанели элементов дважды щелкните элемент управления UpdatePanel, чтобы добавить на страницу панель обновления.

  9. Задайте для свойства ChildrenAsTriggers элемента управления UpdatePanel значениеfalse.

  10. Задайте для свойства UpdateMode элемента управления UpdatePanel значение Conditional.

  11. Щелкните внутри элемента управления UpdatePanel и с вкладки СтандартнаяПанели элементов добавьте элементы управления Button и Label в элемент управления UpdatePanel.

    Bb386581.alert_note(ru-ru,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, входящей в состав расширений Microsoft AJAX (библиотека) для объекта Date.

  16. В файл Web.config веб-узла включите следующий элемент globalization в раздел system.web:

    <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 приложения измените элемент globalization в разделе system.web следующим образом:

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

Глобализация даты на основе параметров страницы

Для того чтобы задать идентификатор языка и региональных параметров для отдельной страницы, можно воспользоваться атрибутом Culture директивы @ Page. Атрибут Culture директивы @ Page имеет более высокий приоритет, чем языковые параметры, заданные в файле конфигурации или обозревателе.

Глобализация даты на основе параметров страницы

  1. В коде страницы, с которой вы работаете, измените директиву @ Page, задав идентификатор языка и региональных параметров «de-DE» (немецкий (Германия)), как показано в следующем примере:

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

  2. Сохраните изменения и откройте веб-страницу в обозревателе.

  3. Нажмите кнопку Отобразить дату, чтобы увидеть глобализованное значение даты.

    Теперь форматирование даты выполняется на основе атрибута Culture директивы @ Page.

    В следующем примере показана полная веб-страница 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";
}

    Этот код переопределяет метод InitializeCulture базового класса Page и задает для языка и региональных параметров значение «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.

См. также

Задачи

Практическое руководство. Установка значений Culture и UICulture для глобализации веб-страниц ASP.NET

Другие ресурсы

Глобализация и локализация ASP.NET