[Débutant] Récupérer des données et les transmettre dans un modal

Bonjour,
Je commence le asp.net core depuis peux.

j'ai créé un PokemonViewModel :

Code:

1
2
3
4
5
6
7
8
9
10
11
public class PokemonViewModel
    {
        internal readonly string Name;
 
        public List<PokemonModel> Pokemons { get; set; }
 
        public List<PokeBallModel> PokeBalls { get; set; }
 
        public List<PokemonStatutModel> PokemonStatuts { get; set; }        
 
    }

j'ai crée un PokemonModel :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
public class PokemonModel
    {
        public PokemonModel()
        {
 
        }
 
        public int Id { get; set; }
 
        public string Name { get; set; }
 
        public string UsName { get; set; }
 
        public string JpName { get; set; }
 
        public string Type1 { get; set; }
 
        public string Type2 { get; set; }
 
        public int Rate { get; set; }
 
        public string Image { get; set; }
    }

j'ai créé un pokedexController :

Code:

1
2
3
4
5
6
7
8
9
10
11
#region ListeDesPokemons
            var pokemonList = new List<PokemonModel>();
            var Id = 1;
            var Img = 1;
 
            pokemonList.Add(new PokemonModel() { Id = Id++, Name = "Bulbizarre", UsName = "Bulbasaur(us)", JpName = "フシギダネ(jp)", Type1 = "Plante", Type2 = "Poison", Rate = 45, Image = "https://www.pokemontrash.com/pokedex/images/sugimori/00" + Img++ + ".png" });
#endregion
 
 var model = new PokemonViewModel();
 
            model.Pokemons = pokemonList;

je ne les met pas tous ici et de toute manière la liste sera sur une base de données.

J'aimerais récupérer les données du foreach:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 @foreach (var pokemon in Model.Pokemons)
                {
                    <form class="col" >
                        <button id="@pokemon.Id" type="button" class="btn" data-toggle="modal" data-target="#descriptionPokemon">
                            <div class="card text-center rounded-lg">
                                <div id="tailleCard" class="card-body">
                                    <h5 id="cardTitle" class="card-title">n°@pokemon.Id <br /> @pokemon.Name</h5>
                                    <img class="align-self-center" id="tailleImg" src="@pokemon.Image" alt="@pokemon.Name" />
                                </div>
                            </div>
                        </button>
                    </form>                   
 
                    }

que quand on clique sur le button ça ouvre un modal avec les infos du bon pokemon.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!-- Modal Description du pokémon choisi -->
<div class="modal fade" id="descriptionPokemon" tabindex="-1" role="dialog" aria-labelledby="descriptionPokemonModalLabel" aria-hidden="true">
    <div id="taillDescriptionModal" class="modal-dialog modal-dialog-scrollable mw-100 m-auto" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title font-weight-bold float-left" id="modalLabelStack2">n°pokemon.Id @ViewBag.pokemonId</h5>
                <div id="nomPokemonStack2" class="ml-auto">
                    <h5>pokemon.Name</h5>  <h5>pokemon.UsName</h5> <h5>pokemon.JpName</h5>
                </div>
                <button type="button" class="close" data-dismiss="modal" aria-label="close">
                    <span class="text-danger" aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="pokemonDescriptionStack2">
                    <img src="" alt="pokemon.Name" />
                    <div>
                        <span>Type : </span>
                        <span class="pokemon.Type1 badge">pokemon.Type1</span>
                        <span class="pokemon.Type2 badge">pokemon.Type2</span>
                    </div>
                </div>
            </div>
 
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
                <form method="post">
                    <button type="submit" class="btn btn-success" onclick=""> Choisir</button>
                </form>
            </div>
        </div>
    </div>
</div>

Pour le moment tous fonctionne bien quand je clique sur le button le modal s'ouvre mais je ne sais pas comment renseigner les valeurs du pokemon en questions dans le modal. voir la photo en pièce jointe.
merci d'avance.