Les bases de Blazor : la mondialisation dans Blazor

Dans cet article, nous explorons les options de mondialisation pour le développement d’applications Web Blazor.

Dans un article précédent de cette série, nous avons découvert localisation pour le développement d’applications Web Blazor.

Tu peux accéder au code utilisé dans cet exemple sur GitHub.

Introduction

La mondialisation décrit un ensemble d’actions effectuées pour faire fonctionner une application dans le contexte d’un monde globalisé. Outre la sélection de la langue, qui est généralement incluse dans la localisation, la mondialisation inclut des différences culturelles telles que le formatage des nombres ou des dates.

Par exemple, les États-Unis utilisent le format de date MM/jj/aaaa (21/09/2023), tandis que la plupart des pays du monde utilisent jj/MM/aaaa (21/09/2023). Il existe également des différences dans la façon dont les dates sont formatées. Dans la plupart des pays d’Europe, nous utilisons un point décimal au lieu d’une barre oblique comme séparateur de date (21.09.2023).

Blazor utilise les types .NET intégrés du Système.Globalisation espace de noms, tel que le CultureInfo la classe et son CurrentCulture propriété.

Dans cet article, nous nous concentrerons principalement sur la façon de formater les dates et les nombres en fonction des paramètres culturels de l’application .NET.

Indice: Pour le rendre intéressant, j’utiliserai le de-CH culture pour les exemples de cet article. C’est ma culture natale et je suppose que la plupart des développeurs lisant cet article auront un paramètre de culture différent sur leur ordinateur.

Formatage des dates

Les bibliothèques de classes de base .NET fournissent méthodes de formatage des chaînes de date basé sur la culture actuelle d’une application .NET.

Les deux méthodes suivantes produisent un résultat dépendant de la culture :

@DateOfBirth.ToShortDateString()
@DateOfBirth.ToLongDateString()

La définition du DateOfBirth La propriété dans le bloc de code ressemble à ceci :

public DateTime DateOfBirth { get; set; } = new DateTime(1990, 9, 21);

Le ToShortDateString méthode renvoie la partie date du DateTime objet au format suivant : 21.09.1990. Rappelez-vous, j’utilise le de-CH culture pour les exemples de cet article. Votre résultat peut paraître différent, mais le format ressemblera à ceci.

Le ToLongDateString La méthode renvoie le nom du jour suivi du jour et du mois en lettres écrites avant l’année. Dans mon cas, ça revient Vendredi 21 septembre 1990.

Il existe des méthodes similaires pour afficher la partie temporelle du DateTime objet également.

Nous pouvons également utiliser le ToString méthode et fournir des modèles de format personnalisés. Par exemple:

@DateOfBirth.ToString("MM-dd-yyyy")

Ce qui suit montre le formatage de la date et le formatage des nombres (voir le chapitre suivant) en utilisant la culture de-CH en action.

Formatage des nombres

Les bibliothèques de classes de base .NET fournissent également méthodes de formatage des nombresy compris les nombres décimaux, les devises, les pourcentages, les nombres hexadécimaux et même les notations scientifiques.

Pour le formatage des nombres, nous utilisons le ToString méthode et fournir un modèle de format. Par exemple, nous pouvons exprimer un montant monétaire dans la monnaie de la culture actuelle comme ceci :

@DecimalValue.ToString("c")

Ou nous pouvons formater un nombre décimal, comprenant un séparateur de milliers et un point décimal.

@DecimalValue.ToString("n")

Il existe de nombreux autres modèles de formatage que nous pouvons utiliser. Pour plus d’informations, consultez le Documentation sur le format de numéro .NET.

Types de champs de formulaire pris en charge

Outre le formatage des dates et des nombres à afficher dans le navigateur, nous devons également gérer les champs de formulaire dans les applications Blazor.

Blazor utilise les paramètres de culture invariants lors de l’utilisation des types de saisie de formulaire suivants :

Pour les deux types d’entrée, l’analyse de l’entrée utilisateur et le rendu des valeurs de champ sont gérés par le navigateur et les paramètres de ses utilisateurs.

Par conséquent, nous n’avons besoin de rien de spécial pour que ces champs fonctionnent avec la culture actuelle des utilisateurs de l’application.

Types de champs de formulaire non pris en charge

Les types d’entrée suivants ne sont actuellement pas pris en charge par Blazor car ils ne sont pas pris en charge officiellement par les principaux navigateurs :

Par exemple, le type de saisie semaine n’est actuellement pris en charge que par Google Chrome et Microsoft Edge.

Cela pourrait changer à l’avenir et vous pouvez utiliser caniuse.com pour référence future.

Mondialisation invariante

Parfois, l’application peut être sans localisation ni globalisation. Dans ce cas, nous pouvons configurer l’application pour utiliser la culture invariante, qui repose généralement sur la en nous (États-Unis, anglais).

Il existe deux options principales pour configurer l’application pour la prise en charge de la culture invariante :

Nous pouvons définir la propriété suivante dans le fichier projet (.csproj) :

<PropertyGroup>
  <InvariantGlobalization>true</InvariantGlobalization>
</PropertyGroup>

Ou nous pouvons le configurer à l’aide du fichier runtimeconfig.json :

{
  "runtimeOptions": {
    "configProperties": {
      "System.Globalization.Invariant": true
    }
  }
}

Un cas d’utilisation courant de l’utilisation de la culture invariante concerne les outils internes utilisés par des personnes de la même région.

Indice: Ceci est particulièrement utile lors du développement d’une application cible pour un public international ou anglophone uniquement à partir d’un environnement de développement avec une autre culture par défaut.

Conclusion

La mondialisation est un élément important de toute application Web utilisée par différentes personnes dans différents pays. La langue est la partie la plus importante de la localisation. Et le formatage des dates et des nombres est la partie la plus importante de la mondialisation.

Blazor utilise la fonctionnalité .NET intégrée pour implémenter la mondialisation des applications Web. Nous pouvons ajuster les paramètres de culture pour une application entière ou utiliser les préférences de l’utilisateur.

Les types d’entrée intégrés utilisent les paramètres du navigateur de l’utilisateur lors du rendu et de l’analyse des dates et des nombres.

Bibliothèques de contrôle d’interface utilisateur, telles que Interface utilisateur Telerik pour Blazorsont souvent livrés avec des composants qui simplifient la gestion de la mondialisation et sont plus pratiques que ce que propose Blazor de base ou le comportement par défaut du navigateur.

Si vous souhaitez en savoir plus sur le développement de Blazor, vous pouvez regarder mon cours intensif Blazor gratuit sur YouTube. Et restez à l’écoute du blog Telerik pour en savoir plus Les bases du Blazor.