Partilhar via

Demonstra Passo a passo: Globalizando uma data usando o script de cliente

  • Artigo

Nessa explicação passo a passo você usará ECMAScript (JavaScript) para exibir dias, meses e outros valores relacionados a datas em formatos globalizados.A funcionalidade AJAX no ASP.NET fornece suporte de globalização de cliente com base em uma configuração no controle ScriptManager.Depois que essas configurações de globalização tiverem sido aplicadas ao aplicativo da Web, você pode usar script de cliente para formatar um objeto JavaScript Date ou Number baseado em um valor cultural.Isso não exige um postback para o servidor.

O valor cultural usado pelo script de cliente é baseado na configuração da cultura padrão fornecida pelas configurações do navegador do usuário.Como alternativa, ele pode ser definido para um determinado valor cultural usando as configurações do servidor ou código do servidor em seu aplicativo.

Um valor cultural fornece informações sobre uma cultura específica (local).O valor cultural é uma combinação de duas letras para um idioma e duas letras para um país ou região.Os exemplos incluem es-MX (Espanhol, México), es-CO (Espanhol, Colômbia), e fr-CA (francês, Canadá).

O as extensões deData AJAX do ASP.NET adicionam funcionalidade ao método JavaScript Date Objeto fornecendo o método localeFormat.Esse método permite que um objeto Date seja formatado com base na configuração de idioma do navegador, em configurações do servidor ou em código do servidor.Essas configurações afetam o valor cultural do servidor, que é então interpretado pelo servidor para gerar um objeto cliente que é exposto pela propriedade Sys.CultureInfo.CurrentCulture.Este objeto é usado para a formatação de datas.

Para obter mais informações sobre culturas e locais, consulte Globalização e Localização no ASP.NET e a classe de visão geral CultureInfo.

Pré-requisitos

Para implementar os procedimentos no seu próprio ambiente de desenvolvimento você precisa:

  • Microsoft Visual Studio 2005 ou Microsoft Visual Web Developer Express Edition.

  • Um site da Web ASP.NET habilitado para AJAX.

Globalizando uma data com base em configurações do navegador

Para começar, você usará as configurações de preferência de idioma no navegador para especificar como formatar uma data.

Para globalizar uma data baseado na preferência de idioma do navegador

  1. Feche quaisquer instâncias abertas do Microsoft Internet Explorer ou do seu navegador padrão para que todas as novas instâncias usem uma nova configuração de local.

  2. Abra uma nova instância de Internet Explorer.

  3. No menu Ferramentas, clique em Opções da Internet, clique na guia Geral e em seguida, clique em Linguagem.

  4. Defina as preferência de idioma para es-MX (Espanhol, México) e remover quaisquer outras localidades da lista.

    Observação:

    Se você usar um navegador diferente, faça as configurações de idioma equivalentes nesse navegador.

  5. Feche o navegador.

  6. Em Visual Studio, crie ou abra um página da Web ASP.NET AJAX Habilitada e alternar para modo de design.

  7. Selecione o controle ScriptManager e defina sua propriedade EnableScriptGlobalization como true.

    Observação:

    Se a página não contiver um controle ScriptManager, adicione um da guia Extensões AJAX da Caixa de Ferramentas.

  8. Na guia Extensões AJAX da Caixa de Ferramentas, clique duas vezes no controle UpdatePanel para adicionar um painel de atualização para a página.

  9. Defina a propriedade ChildrenAsTriggers do controle UpdatePanel parafalse.

  10. Set the UpdateMode property of the UpdatePanel control to Conditional.

  11. Clique dentro do controle UpdatePanel e, em seguida, da guia Padrão da Caixa de Ferramentas, adicione um controle Button e um controleLabel ao controle UpdatePanel.

    Observação:

    Certifique-se de adicionar os controles Label e Button dentro do controle UpdatePanel.

  12. Certifique-se de que ID propriedade é conjunto para Button1, and conjunto its Text propriedade data de exibição.

  13. Certifique-se de que a propriedade ID do rótulo esteja definida como Label1.

  14. Alterne para modo de origem.

  15. Na parte inferior da página, crie um elemento script e adicione o seguinte script de cliente para ele:

    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);
  }
}

    Este código adiciona um manipulador click para o botão chamado Button1.O código chama a função formatDate, que cria um novo objeto Date e exibe a data formatada no elemento chamado Label1.A data é formatada usando a função localeFormat que é parte das extensões Microsoft AJAX Library para o objeto Date.

  16. No arquivo Web.config do site da Web, inclua o seguinte elemento globalization na seção system.web:

    <globalization culture="auto" />

    A configuração "Automático" especifica que o cabeçalho ACCEPT-LANGUAGE na solicitação do navegador (que fornece Lista de preferência de idioma do usuário) é usado para definir o valor cultural.

  17. Salve as alterações e execute a página da Web no navegador em que você alterou as configurações de idioma.

  18. clicar no botão Data de exibição para ver o valor de data globalizado é baseado nas configurações de linguagem da navegador.

    O exemplo a seguir mostra um página da Web ASP.NET completa com script de cliente que globaliza uma data baseado nas preferências de idioma do navegador.

    <%@ 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. Quando você terminar, redefina as configurações de idioma no navegador.

Globalizando uma data com base em definições de configuração

Se você desejar exibir datas formatadas em várias páginas, você pode definir a cultura no arquivo de configuração do Web Site.Em seguida, as configurações de formato se aplicam a datas em todas as páginas.

Para globalizar uma data com base nas definições do arquivo de configuração

  1. No arquivo Web.config do aplicativo, altere o elemento globalization na seção system.web para o seguinte:

    <globalization culture="fr-CA" />

    Esta configuração define o valor cultural para "fr-CA" (Francês, Canadá), independentemente do que a configuração de idioma do navegador especifica.

  2. Salvar as alterações e então execute a página da Web no seu navegador.

  3. clicar no botão Data de exibição para ver o valor de data globalizado.

    Agora a formatação de data é baseada no atributo da cultura em um arquivo de configuração em vez de na preferência de idioma do navegador.

    O exemplo a seguir mostra um página da Web ASP.NET completa com script de cliente que globaliza uma data com base nas definições do arquivo de configuração.

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

Globalizando uma data com base em configurações da página

Para definir a cultura para uma página individual, você pode usar o atributo Culture da diretiva @ page.The Culture attribute of the @ Page directive takes precedence over the setting in the configuration file and over the browser's language settings.

Para globalizar uma data baseado em uma configuração de página

  1. In the page you are working with, modify the @ Page directive to set the culture value to "de-DE" (German Germany), as shown in the following example:

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

  2. Salve suas alterações e então execute a página da Web no navegador.

  3. clicar no botão Data de exibição para ver o valor de data globalizado.

    The date formatting is now based on the Culture attribute of the @ Page directive.

    O exemplo a seguir mostra um página da Web ASP.NET completa com script de cliente que globaliza uma data baseada em uma configuração de página.

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

Globalizando uma data de forma programática

Se você desejar definir programaticamente o valor cultural para uma página, você pode substituir o método InitializeCulture da página em código do servidor.The InitializeCulture method takes precedence over culture settings in the @ Page directive, in the configuration file, and in the browser.

Para globalizar uma data de forma programática

  1. Adicione o seguinte método à página.

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

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

    Esse código substitui o método InitializeCulture da classe base Page e define o valor cultural para "it-IT" (Italiano, Itália).Este é o tempo apropriado no ciclo de vida da página para alterar programaticamente a cultura.

  2. Salve suas alterações e então execute a página da Web no navegador.

  3. clicar no botão Data de exibição para ver a data globalizada.

    O valor de data agora está sendo formatado com base no código do servidor.

    O exemplo a seguir mostra um página da Web ASP.NET completa com script de cliente que globalizes uma data programaticamente.

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

Formatando padrões

O método localeFormat pode aceitar uma variedade de padrões de formatação.Para obter mais informações sobre formatos de sequência de caracteres de data e hora, consulte Classe Sys.CultureInfo.

Consulte também

Tarefas

Como: conjunto a cultura e UI Culture for ASP.NET Web página globalização

Outros recursos

Globalização e Localização no ASP.NET