Aller au contenu principal

29-3 Création (Select ville)

À l'étape précédente, la base du formulaire de création d'événements a été mise en place via les champs input.

Cependant, aucune option n'est présente dans la boite de sélection de ville. Il faut en effet remplir cette liste à partir d'un appel à l'API.

Pour faire cet appel, un contrôleur d'API de villes sera nécessaire. Heureusement, le service et le repository permettant de récupérer ces valeurs à partir de la BD existent déjà, donc le travail sera assez limité.

Créer le contrôleur d'API VillesController​

  1. Sous Snowfall.Web.Api/Controllers -> Add -> Scaffolded Item
  2. Sélectionner API Controller - Empty
  3. Nommer le contrôleur VillesController
    Snowfall.Web.Api/Controllers/VillesController.cs
    namespace Snowfall.Web.Api.Controllers
    {
        [Route("api/[controller]")]
        [ApiController]
        public class VillesController : ControllerBase
        {
        }
    }

Créer l'action VillesController#Index​

Pour retourner la liste de villes, une action Index répondant à la méthode HTTP GET peut être créée.

Cette action n'aura rien de très particulier outre qu'on récupère la liste de villes via le service et qu'on effectue le mappage en DTO.

De plus, remarquez qu'on injecte via injection de dépendances IVilleService et IMapper.

Snowfall.Web.Api/Controllers/VillesController.cs
namespace Snowfall.Web.Api.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class VillesController : ControllerBase
    {
        private readonly IVilleService _villeService;
        private readonly IMapper _mapper;
        
        public VillesController(
            IVilleService villeService,
            IMapper mapper)
        {
            _villeService = villeService;
            _mapper = mapper;
        }

        // GET /api/villes
        [HttpGet]
        public async Task<IActionResult> Index()
        {
            List<Ville> villes = await _villeService.GetAll();
            List<VilleDto> villesDto = _mapper.Map<List<VilleDto>>(villes);

            return Ok(villesDto);
        }
    }
}

Tester l'API​

Utilisez Postman ou Scalar pour faire une requête d'API avec api/villes. Vous devriez recevoir la liste de villes en format JSON.

Imgur

Récupérer les options de la boîte de sélection via l'API​

Maintenant qu'un point de terminaison d'API retourne la liste des villes disponibles dans le système, nous devrions pouvoir l'utiliser pour la boîte de sélection de villes.

Ajouter une variable List<VilleDto> à la page New​

Afin de contenir la liste de villes, on créera une variable List<VilleDto>? villes au niveau du composant de page

Snowfall.Web.Admin/Pages/Evenements/New.razor
<!-- ... -->

@code {
    private CreerEvenementDto _creerEvenementDto = new();
    private List<VilleDto>? villes;

    async Task GererSubmit()
    {
        Console.WriteLine("Le formulaire a bien été soumis");
    }
}

On assignera des valeurs à cette liste lors de l'initialisation de la composante à l'étape suivante.

Ajout de OnInitializedAsync​

Ajoutez la coquille de la fonction OnInitializedAsync qui est appelée lors de l'initialisation de la composante. Lors de l'initialisation, on voudra récupérer la liste de villes.

Snowfall.Web.Admin/Pages/Evenements/New.razor
@code {
    private CreerEvenementDto _creerEvenementDto = new();
    private List<VilleDto>? villes;
    
    protected override async Task OnInitializedAsync()
    {
        // Obtenir la liste de villes...
    }

    async Task GererSubmit()
    {
        Console.WriteLine("Le formulaire a bien été soumis");
    }
}

Créer VillesClient pour communiquer avec l'API​

Avant d'aller plus loin, il nous faut une classe HttpClient pour communiquer avec la portion villes de l'API.

En effet, tout comme on utilise EvenementHttpClient pour communiquer avec l'API dans le cadre d'un événement, on créera VilleHttpClient afin de communiquer avec la portion villes de l'API.

  1. Sous Web.Admin/HttpClients -> Add -> Class/Interface

  2. Nommer la classe VilleHttpClient

  3. Oups, ne reste des notes de cours pour cette section a été détruite lors d'un malencontreux incident! Imgur

    Vous devez compléter la classe par vous-même et créer une fonction ObtenirVilles qui retourne la liste des villes.

Utiliser le client HTTP dans le composant New​

Il ne reste qu'à utiliser le client et le retour pour les options de la boîte de sélection!

  1. Injecter VilleHttpClient dans New

    Snowfall.Web.Admin/Pages/Evenements/New.razor
    @page "/evenements/new"
    @using Microsoft.Extensions.Localization
    @using Snowfall.Application.Dtos.Evenements
    @using Snowfall.Application.Dtos.Villes
    @using Snowfall.Web.Admin.HttpClients
    @using Snowfall.Web.Admin.Resources
    @inject IStringLocalizer<Resources.Evenements.New> Localizer;
    @inject IStringLocalizer<SharedResources> LocalizerShared;
    @inject VilleHttpClient VilleHttpClient;

    <!-- ... -->

  2. Charger la liste de villes lors de l'initialisation du composant

    Snowfall.Web.Admin/Pages/Evenements/New.razor
    <!-- ... -->

    @code {
        private CreerEvenementDto _creerEvenementDto = new();
        private List<VilleDto>? villes;
        
        protected override async Task OnInitializedAsync()
        {
            villes = await VilleHttpClient.OtenirVilles();
        }

        async Task GererSubmit()
        {
            Console.WriteLine("Le formulaire a bien été soumis");
        }
    }

  3. Populer la liste d'options à partir de la variable villes, si elle n'est pas null

    Snowfall.Web.Admin/Pages/Evenements/New.razor
    <!-- ... -->

    <div class="form-floating mb-3">
        <InputSelect id="ville" class="form-select" @bind-Value="evenementDto.VilleId">
            <option value="">Veuillez faire une sélection</option>
            @if (@villes != null)
            {
                @foreach (var ville in villes)
                {
                    <option value="@ville.Id">@ville.Nom, @ville.PaysIso</option>
                }
            }
        </InputSelect>
        <label for="ville">@LocalizerEvenementDto["Ville"]</label>
    </div>

    <!-- ... -->

Test​

Vous pouvez tester et devriez obtenir une liste de villes dans la boîte de sélection!

http://localhost:4200