L'internationalisation est un problème complexe. Ainsi regardons la propriété [Date1] et son calendrier :
On constate que le calendrier est un calendrier français alors que la culture de la page est [en-US]. En HTML5 existe un attribut [lang] permettant de fixer la langue de la page ou d'un composant de la page. On peut alors écrire dans la vue [Action14Get.cshtml] le code suivant :
1. @model Exemple_03.Models.ViewModel14
2. @using Exemple_03.Resources
3. @using System.Threading
4. @{
5. Layout = null;
6. var lang = Session["lang"] as string; 7. } 8. 9. <!DOCTYPE html> 10. 11.<html lang="@lang"> 3
12.<head> 13. ...
• ligne 6 : on récupère la culture dans la session ;
• ligne 11 : on fixe l'attribut [lang] de la page avec cette valeur.
Les tests montrent que le calendrier reste en français même lorsque la page est par ailleurs affichée en anglais. Il y a également un problème avec l'autre date du formulaire :
En [1], la date continue à être demandée au format français jj/mm/aaaa (20/11/2013) alors que le format américain est mm/dd/yyyy (10/21/2013). Nous allons essayer de résoudre ces deux problèmes avec une nouvelle vue et un nouveau modèle de vue.
JQuery UI est un projet dérivé du projet JQuery et offre des composants pour les formulaires dont un calendrier. Ce calendrier peut être internationalisé. C'est ce que nous allons montrer.
Pour commencer, ajoutons [JQuery UI] à notre projet. 1
Une fois JQuery UI installé, de nouveaux éléments apparaissent dans le projet :
• en [1], la bibliothèque [JQuery UI] en versions normale et minifiée ; • en [2], la feuille de style de [JQuery UI] ;
Le calendrier JQuery UI est par défaut en anglais. Pour être internationalisé, il faut ajouter des scripts qu'on peut trouver à l'URL [https://github.com/jquery/jquery-ui/tree/master/ui/i18n] :
Pour avoir le calendrier JQuery UI en français, on copiera le contenu du fichier [jquery.ui.datepicker-fr.js] ci-dessus dans le dossier [Scripts] du projet.
Le code de la nouvelle vue [Action15.cshtml] est obtenu par recopie de la vue précédente [Action14.cshtml] puis modifié. Nous ne présentons que les modifications :
1
1. @model Exemple_03.Models.ViewModel15 2. @using Exemple_03.Resources 3. @using System.Threading 4. @{ 5. Layout = null; 6. } 7. 8. <!DOCTYPE html> 9. 10.<html lang="@Model.Culture"> 11.<head>
12. <meta name="viewport" content="width=device-width" /> 13. <title>Action15</title>
14. ...
15. <link rel="stylesheet" href="~/Content/themes/base/jquery-ui.css" />
16. <script type="text/javascript" src="~/Scripts/jquery-ui-1.10.3.js"></script>
17. <script type="text/javascript" src="~/Scripts/jquery.ui.datepicker-fr.js"></script> 18. <script>
19. $(document).ready(function () {
20. var culture = '@Thread.CurrentThread.CurrentCulture'; 21. Globalize.culture(culture);
22. $("#Date1").datepicker($.datepicker.regional['@Model.Regionale']); 23. });
24. </script> 25.</head> 26.<body>
27. <h3>@MyResources.titre</h3>
28. @using (Html.BeginForm("Action15", "Second")) 29. {
30. <table> 31. ...
32. <tr>
33. <td>@Html.LabelFor(m => m.Date1)</td>
34. <td>@Html.TextBox("Date1", Model.StrDate1)</td> 35. <td>@Html.ValidationMessageFor(m => m.Date1)</td> 36. </tr>
37. </tbody> 38. </table> 39. <p>
40. <input type="submit" value="Valider" /> 41. </p>
42. }
43. <!-- choix d'une langue -->
44. @using (Html.BeginForm("Lang", "Second")) 45. {
46. <table> 47. <tr>
48. <td><a href="javascript:postForm('fr-FR','/Second/Action15')">Français</a></td> 49. <td><a href="javascript:postForm('en-US','/Second/Action15')">English</a></td> 50. </tr>
51. </table> 52. }
53.</body> 54.</html>
• ligne 15 : on référence la feuille de style de JQuery UI ; • ligne 16 : on référence la version de JQuery UI téléchargée ;
• ligne 17 : on référence le script du calendrier français que nous venons de télécharger ;
• ligne 34 : la méthode [Html.TextBox] va générer ici une balise une balise [input] de type [text], d'id [Date1] et de name [Date1] ;
• ligne 19 : lorsque le chargement de la page sera terminé, la fonction JQuery UI [datepicker] sera appliquée à l'élément d' id [Date1], donc l'élément de la ligne 34. Cette fonction fait que lorsque l'utilisateur va mettre le focus sur le champ de saisie de [Date1], un calendrier va apparaître lui permettant de saisir une date. La fonction [datepicker] admet un paramètre qui lui indique la langue du calendrier. La variable [@Model.Regionale] doit valoir :
• 'fr' pour un calendrier français, • '' pour un calendrier anglais ;
Le modèle de la vue précédente [Action15.cshtml] sera le modèle [ViewModel15] suivant :
Son code est celui du modèle [ViewModel14] légèrement modifié. Nous ne présentons que les modifications :
1. using Exemple_03.Resources; 2. ... 3. using System.Web; 4. 5. namespace Exemple_03.Models 6. {
7. [Bind(Exclude = "Culture,Regionale,StrDate1,FormatDate")] 8. public class ViewModel15 : IValidatableObject
9. { 10. 11. ...
12. [Display(ResourceType = typeof(MyResources), Name = "date1")]
13. [RegularExpression(@"\s*\d{2}/\d{2}/\d{4}\s*", ErrorMessageResourceType = typeof(MyResources), ErrorMessageResourceName = "infoIncorrecte")]
14. [Required(ErrorMessageResourceType = typeof(MyResources), ErrorMessageResourceName =
"infoRequise")]
15. public string Regexp1 { get; set; } 16.
17. [Display(ResourceType = typeof(MyResources), Name = "date2")]
18. [Required(ErrorMessageResourceType = typeof(MyResources), ErrorMessageResourceName =
"infoRequise")]
19. [DataType(DataType.Date)]
20. public DateTime Date1 { get; set; } 21.
22. // constructeur
23. public ViewModel15() 24. {
25. // Culture du moment
26. Culture = HttpContext.Current.Session["lang"] as string; 27. cultureInfo=new CultureInfo(Culture);
28. // Régionale du calendrier JQuery
29. Regionale = MyResources.ResourceManager.GetObject("regionale", cultureInfo).ToString();
30. // format de date
31. FormatDate = MyResources.ResourceManager.GetObject("formatDate", cultureInfo).ToString(); 32. } 33. 34. 35. 36. // validation
37. public IEnumerable<ValidationResult> Validate(ValidationContext validationContext) 38. {
39. // liste des erreurs
40. List<ValidationResult> résultats = new List<ValidationResult>(); 41. // le même msg d'erreur pour tous
42. string errorMessage = MyResources.ResourceManager.GetObject("infoIncorrecte", cultureInfo).ToString();
43. ...
44. // Regexp1
45. try 46. {
47. DateTime.ParseExact(Regexp1, FormatDate, cultureInfo); 48. }
49. catch 50. {
51. résultats.Add(new ValidationResult(errorMessage, new string[] { "Regexp1" })); 52. }
53.
54. // on rend la liste des erreurs
55. return résultats; 56.
57. } 58.
59. // champs en-dehors du modèle de l'action
60. public string Culture { get; set; } 61. public string Regionale { get; set; } 62. public string StrDate1 { get; set; } 63. public string FormatDate { get; set; } 64.
65. // données locales
66. private CultureInfo cultureInfo; 67. }
68. }
Par rapport au modèle précédent [ViewModel14], nous avons quatre propriétés supplémentaires :
• ligne 60 : la culture de la vue, 'fr-FR' ou 'en-US'. Cette culture est initialisée dans le constructeur ligne 26 ;
• ligne 61 : la culture régionale du calendrier JQuery, 'fr' pour un calendrier français, '' pour un calendrier anglais. Ce champ est initialisé par les ligne 29 du constructeur ;
• ligne 63 : le format de la date de la ligne 15 : 'dd/MM/yyyy' pour une date française, 'MM/dd/yyyy' pour une date anglaise. Ce champ est initialisé ligne 31 du constructeur ;
• ligne 62 : la chaîne de caractères à afficher dans le champ de saisie de [Date1]. Ce champ sera initialisé par l'action ; • ligne 47 : la date [Regexp1] est maintenant vérifiée selon le format de la culture courante.
Les valeurs des propriétés [Regionale] et [FormatDate] sont trouvées dans les fichiers de ressources [MyResources]. Les fichiers de ressources français [MyResources] [MyResources.fr-FR] [1] et le fichier de ressources anglais [2] évoluent comme suit :
Nous sommes presque prêts. Nous ajoutons une action [Action15] au contrôleur [SecondController] :
1. // Action15
2. public ViewResult Action15(FormCollection formData) 3. {
4. // méthode HTTP
5. string method = Request.HttpMethod.ToLower(); 6. // modèle
7. ViewModel15 modèle = new ViewModel15(); 8. if (method == "get") 9. { 10. modèle.StrDate1 = ""; 11. } 12. else 13. { 14. TryUpdateModel(modèle, formData); 15. modèle.StrDate1 = modèle.Date1.ToString(modèle.FormatDate); 16. } 17. // affichage vue
18. return View("Action15", modèle); 19. }
• ligne 2 : la méthode [Action15] traite aussi bien les [GET] que les [POST]. Dans ce dernier cas, les valeurs postées sont récupérées dans le paramètre [formData] ;
• ligne 5 : on récupère la méthode HTTP de la requête ;
• ligne 7 : on crée le modèle de la vue qui va être affichée (le formulaire) ;
• lignes 8-11 : dans le cas d'une commande [GET], la zone de saisie de [Date1] est initialisée avec une chaîne vide ; • lignes 12-16 : dans le cas d'une commande [POST] :
• ligne 14 : le modèle est initialisé avec les valeurs postées,
• ligne 15 : la zone de saisie de [Date1] est initialisée avec une chaîne de caractères qui est la valeur de [Date1] formatée selon la culture courante [dd/MM/yyyy] pour une date française, [MM/dd/yyyy] pour une date anglaise ;
• ligne 18 : la vue [Action15.cshtml] est affichée avec son modèle. Faisons des tests :
• en [1], un calendrier français lorsque la page est en français ; • en [2], un calendrier anglais lorsque la page est en anglais ; • en [3], une date au format français lorsque la page est en français ; • en [4], la même date au format anglais lorsque la page est en anglais ;
6.7 Conclusion
Comme on l'aura compris, le thème de l'internationalisation d'une application est un thème complexe...
1 2
3