---
sidebar_position: 2
title: Sélection de la langue utilisateur
---

## Installer la localisation

Installer le package `Microsoft.Extensions.Localization`.

## Configurer la localisation

Ouvrer le fichier `Program.cs` :

```csharp title="Program.cs"
...

builder.Services.AddBlazoredModal();

// highlight-start
// Add the controller of the app
builder.Services.AddControllers();

// Add the localization to the app and specify the resources path
builder.Services.AddLocalization(opts => { opts.ResourcesPath = "Resources"; });

// Configure the localtization
builder.Services.Configure<RequestLocalizationOptions>(options =>
{
    // Set the default culture of the web site
    options.DefaultRequestCulture = new RequestCulture(new CultureInfo("en-US"));
    
    // Declare the supported culture
    options.SupportedCultures = new List<CultureInfo> { new CultureInfo("en-US"), new CultureInfo("fr-FR") };
    options.SupportedUICultures = new List<CultureInfo> { new CultureInfo("en-US"), new CultureInfo("fr-FR") };
});
// highlight-end

var app = builder.Build();

...

app.UseRouting();

// highlight-start
// Get the current localization options
var options = ((IApplicationBuilder)app).ApplicationServices.GetService<IOptions<RequestLocalizationOptions>>();

if (options?.Value != null)
{
	// use the default localization
    app.UseRequestLocalization(options.Value);
}

// Add the controller to the endpoint
app.UseEndpoints(endpoints =>
{
    endpoints.MapControllers();
});
// highlight-end

app.MapBlazorHub();

...
```

Afin de pouvoir changer de culture, nous allons devoir déclarer un contrôleur.

Créer un nouveau dossier à la racine du site qui se nomme `Controllers`.

Créer une nouvelle classe qui se nomme `CultureController`.

```csharp title="Controllers/CultureController.cs"
using Microsoft.AspNetCore.Localization;
using Microsoft.AspNetCore.Mvc;

/// <summary>
/// The culture controller.
/// </summary>
[Route("[controller]/[action]")]
public class CultureController : Controller
{
	/// <summary>
	/// Sets the culture.
	/// </summary>
	/// <param name="culture">The culture.</param>
	/// <param name="redirectUri">The redirect URI.</param>
	/// <returns>
	/// The action result.
	/// </returns>
	public IActionResult SetCulture(string culture, string redirectUri)
	{
		if (culture != null)
		{
			// Define a cookie with the selected culture
			this.HttpContext.Response.Cookies.Append(
				CookieRequestCultureProvider.DefaultCookieName,
				CookieRequestCultureProvider.MakeCookieValue(
					new RequestCulture(culture)));
		}

		return this.LocalRedirect(redirectUri);
	}
}
```

## Composant de sélection de langue

Le composant `CultureSelector` suivant montre comment définir la sélection de la culture de l’utilisateur.
Le composant est placé dans le dossier `Shared` pour être utilisé dans toute l’application.

Créer le composant `Shared/CultureSelector.razor`.

```cshtml title="Shared/CultureSelector.razor"
@using  System.Globalization
@inject NavigationManager NavigationManager

<p>
    <label>
        Select your locale:
        <select @bind="Culture">
            @foreach (var culture in supportedCultures)
            {
                <option value="@culture">@culture.DisplayName</option>
            }
        </select>
    </label>
</p>

@code
{
    private CultureInfo[] supportedCultures = new[]
    {
        new CultureInfo("en-US"),
        new CultureInfo("fr-FR")
    };

    private CultureInfo Culture
    {
        get => CultureInfo.CurrentCulture;
        set
        {
            if (CultureInfo.CurrentUICulture == value)
            {
                return;
            }

            var culture = value.Name.ToLower(CultureInfo.InvariantCulture);

            var uri = new Uri(this.NavigationManager.Uri).GetComponents(UriComponents.PathAndQuery, UriFormat.Unescaped);
            var query = $"?culture={Uri.EscapeDataString(culture)}&" + $"redirectUri={Uri.EscapeDataString(uri)}";

			// Redirect the user to the culture controller to set the cookie
            this.NavigationManager.NavigateTo("/Culture/SetCulture" + query, forceLoad: true);
        }
    }
}
```

Ajouter dans la div `<div class="top-row px-4">` dans `Shared/MainLayout.razor`, ajoutez le composant `CultureSelector` :

```cshtml title="Shared/MainLayout.razor"
...
<main>
	<div class="top-row px-4">
		<a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
		
		// highlight-start
			<div class="px-4">
				<CultureSelector />
			</div>
		// highlight-end
	</div>
...
```


Ajouter le code suivant dans le fichier `Pages/Index.razor` pour visualiser la modification de langue.

```cshtml title="Pages/Index.razor"
@using System.Globalization
...

<p>
    <b>CurrentCulture</b>: @CultureInfo.CurrentCulture
</p>

...
```

## Notion : Contrôleurs

Certaine action ne sont pas possible avec le modèle razor, comme la déclaration de cookie à la volée, pour déclarer un cookie il faut absolument qu'aucun élément HTML ne soit afficher avant.

Afin de palier à se problème, nous utilisons donc un contrôleur de type MVC sans la partie Vue et Modèle.

Voici une petite définition de l'architecture MVC :

Le modèle d’architecture MVC (Model-View-Controller) sépare une application en trois composants principaux : **M**odèle, **V**ue et **C**ontrôleur. 
Le modèle MVC vous permet de créer des applications qui sont plus faciles à tester et à mettre à jour que les applications monolithiques traditionnelles.

Les applications basées sur MVC contiennent :

* Des **M**odèles : des classes qui représentent les données de l’application. Les classes du modèle utilisent une logique de validation pour appliquer des règles d’entreprise à ces données. En règle générale, les objets du modèle récupèrent et stockent l’état du modèle dans une base de données.
* **V**ues : les vues sont les composants qui affichent l’interface utilisateur de l’application. En règle générale, cette interface utilisateur affiche les données du modèle.
* **C**ontrollers : classes qui :
	* Gérer les demandes de navigateur.
	* Récupérer des données de modèle.
	* Modèles d’affichage d’appel qui retournent une réponse.


Dans une application MVC, l’affichage affiche uniquement des informations. Le contrôleur gère et répond à l’entrée et à l’interaction de l’utilisateur. 
Par exemple, le contrôleur gère les segments d’URL et les valeurs de chaîne de requête et transmet ces valeurs au modèle. 
Le modèle peut utiliser ces valeurs pour interroger la base de données. 

Exemple :

* `https://localhost:5001/Home/Privacy`: spécifie le contrôleur `Home` et l’action `Privacy`.
* `https://localhost:5001/Movies/Edit/5`: est une demande de modification du film avec `ID=5` à l’aide du contrôleur `Movies` et de l’action `Edit`.


Le modèle architectural MVC sépare une application en trois groupes principaux de composants : modèles, vues et contrôleurs. 
Ce modèle permet d’obtenir la séparation des préoccupations : la logique d’interface utilisateur appartient à la vue. 
La logique d’entrée appartient au contrôleur. La logique métier appartient au modèle. 
Cette séparation permet de gérer la complexité lors de la création d’une application, car elle permet de travailler sur un aspect de l’implémentation à la fois sans affecter le code d’un autre. 
Par exemple, vous pouvez travailler sur le code des vues de façon indépendante du code de la logique métier.
