IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

ASP.NET MVC Discussion :

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


Sujet :

ASP.NET MVC

  1. #1
    Futur Membre du Club
    Homme Profil pro
    Développeur Web
    Inscrit en
    Septembre 2019
    Messages
    4
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 34
    Localisation : France, Vosges (Lorraine)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Septembre 2019
    Messages : 4
    Points : 6
    Points
    6
    Par défaut 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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 CSHTML : Sélectionner tout - Visualiser dans une fenêtre à part
    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 HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    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.
    Images attachées Images attachées  

  2. #2
    Futur Membre du Club
    Homme Profil pro
    Développeur Web
    Inscrit en
    Septembre 2019
    Messages
    4
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 34
    Localisation : France, Vosges (Lorraine)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Septembre 2019
    Messages : 4
    Points : 6
    Points
    6
    Par défaut Presque fini !
    Hey J'ai presque réussi, je vais expliquer ici :

    J'ai une view avec un button :
    Code CSHTML : Sélectionner tout - Visualiser dans une fenêtre à part
    <button type="submit" class="btn" onclick="getInfo(@pokemon.Id)"></Button>

    quand je clique dessus ça démarre un script :
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    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
    <script>
        function getInfo(val) {
            event.preventDefault;
            //debug log
            console.log('Star getInfo()');
            //end debug log
     
     
            $.ajax({
                url: '/Pokedex/PokemonDetails/',
                type: 'POST',
                dataType: "html",
                data: { "PokemonId": val },
                //data: json,
                //contentType: 'application/json; charset=utf-8',
                success: function (response) {
                    //debug log
                    console.log(val);
                    //en debug log
                    $("#pokemonDetails").html(response);
                    $('#pokemonDetails').modal('show');
                }
            })
     
        }
    </script>

    dans mon controller j'ai fais une action :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    [HttpPost]
            public IActionResult PokemonDetails(int PokemonId)
            {
     
                int SelectedPokemonId = PokemonId;
                TempData["SelectedPokemonId"] = SelectedPokemonId;
     
                TempData["SelectedPokemonName"] = SelectedPokemonName;
     
                return PartialView("_PokemonDetails");
            }
    Nom : pokemon2.png
Affichages : 828
Taille : 393,4 Ko

    Je ne sais pas comment avoir les infos du pokemons sélectionné en fonction de son Id.

    merci de m'éclairer.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. comment récupérer des resrvations et les enregistrer dans la base de donnée
    Par nizardinho dans le forum PHP & Base de données
    Réponses: 4
    Dernier message: 22/09/2015, 08h53
  2. Récupérer des données pour les insérer dans un schéma "radar"
    Par Onex3891 dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 11/10/2013, 19h45
  3. Réponses: 4
    Dernier message: 03/01/2008, 13h37
  4. Réponses: 7
    Dernier message: 22/03/2007, 00h28
  5. Réponses: 12
    Dernier message: 21/02/2007, 10h44

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo