Discussion :

[blasil64]

Bonsoir à tous,

Mon site a une fonctionnalité qui permet d'ajouter des films dans notre bibliothèque virtuelle, ou d'ajouter un film dans notre liste de films que l'on veut voir.

J'ai implémenter ceci grâce à deux boutons différents qui font appel à une méthode de mon "controller" et qui ajoute à ma base de données une ligne pour le rediriger vers sa bibliothèque virtuelle.

Jusqu'ici OK.

Maintenant, je cherche à le rendre plus dynamique. Le but serait que lorsque je clique sur l'un de mes boutons, l'action de rajouter le film dans ma bibliothèque se fasse de manière asynchrone et affiche peut-être une popup à l'utilisateur lui indiquant que l'action a été réalisé.

Je suppose que c'est possible, mais j'en ai aucune idée de comment le réaliser...

Avez-vous des pistes ou des tutoriels qui pourraient m'aider ?

Merci d'avance pour votre aide !

[Philippe Vialatte]

Salut,

personnellement, je ferais ca soit avec du Jquery "pur", qui appelle une action de façon asynchrone, et qui en fonction du type de retour, change des parties du DOM ou affiche une popup, soit avec Ajax.BeginForm


...mais perso, je dirais choix A

[blasil64]

Salut,

personnellement, je ferais ca soit avec du Jquery "pur", qui appelle une action de façon asynchrone, et qui en fonction du type de retour, change des parties du DOM ou affiche une popup, soit avec Ajax.BeginForm


...mais perso, je dirais choix A

C'est ce que je pensais, mais malheureusement, je n'ai pas beaucoup d'expérience dans le JQuery et encore moins avec l'ASP.NET MVC.

Pourrais tu me donner un exemple concret ? (Appel d'une méthode au clic d'un bouton, action métier et retour avec popup).

Le retour avec popup, je pense pouvoir le réaliser, j'utilise fancybox, j'aurai juste à initialiser la popup dans la réponse :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
$("a#response").fancybox({
            'hideOnContentClick': false
        });

Ou as-tu des tutoriaux ?

Merci d'avance pour tes réponses !

[Philippe Vialatte]

alors, tu devrais trouver pas mal d'infos ici:
http://api.jquery.com/jQuery.ajax/

et ici:
http://api.jquery.com/jQuery.post/

pour ton problème a toi, ca devrait etre qq chose comme:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
$.post("/Controller/Action", { movieId: 7,  userId: 5 }, function(data, textStatus ) {
                if (textStatus == "success") {
                    var result = eval(data);
                    if (result.length > 0) {
                        alert(result);
                    }
                }
            }

[blasil64]

OK merci pour ton aide.

Voilà ce que j'ai fait au niveau de mon javascript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<script type="text/javascript">
$("#addToBiblio").submit(function (event) {
        event.preventDefault();
        $.post("/Film/AddToBiblio/", { idFilm: 62206, idUser: 1 }, function (data, textStatus) {
            if (textStatus == "success") {
                var result = eval(data);
                if (result.length > 0) {
                    alert(result);
                }
            }
        });
    });
</script>

Ensuite, au niveau de mon HTML, j'ai :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
using (Html.BeginForm(null, null, FormMethod.Post, new { id = "addToBiblio" }))
                    {
                        <div class="addToBiblio">
                            <input type="submit" value="Dans ma bibliothèque" title="Ajouter ce film à votre bibliothèque" />
                        </div>
                    }

Et mon code du Controller :

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
 
public string AddToBiblio(int idFilm, int idUser)
        {
            try
            {
                Biblio biblioToAdd = new Biblio();
                biblioToAdd.IdFilm = 0;
                biblioToAdd.IdUtilisateur = 1;
                biblioToAdd....
 
                _model.AddToBiblio(biblioToAdd);
                _model.SaveChanges();
 
                return "OK, film ajouté !";
            }
            catch (Exception)
            {
                return "KO, film non ajouté !";
            }
        }

J'ai mis un point d'arrêt au niveau de mon action du controller, mais je ne passe pas dedans et la page se recharge...

Que dois-je modifier ? Je fais plusieurs tests en même temps

Merci d'avance pour ta réponse !

[Philippe Vialatte]

j'ai un doute sur:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("#addToBiblio").submit(function (event) {

Si je me rappelle bien, submit s'applique sur un formulaire, et la tu l'appliques sur un div

Essaye de mettre un alert, pour voir que ca passe bien, sinon, essayes de passer par le click sur ton bouton