[MVC 3] Dynamiser son site Internet avec du JavaScript

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 !

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 :)

Citation:

---

Envoyé par 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 :)

---

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:

---

1 2 3 4

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

---

Ou as-tu des tutoriaux ?

Merci d'avance pour tes réponses !

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:

---

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); } } }

---

OK merci pour ton aide.

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

Code:

---

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:

---

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:

---

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 :D

Merci d'avance pour ta réponse !

j'ai un doute sur:

Code:

---

$("#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

Niquel, avec un onClick sur mon input et le code JS suivant :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<script type="text/javascript"> function addToBiblio(){ event.preventDefault(); $.post("/Film/AddToBiblio", { idFilm: @Model.Movie.Id }, function (data, textStatus) { if (data == "OK") { $(".MessageAddToBiblio").fadeIn("slow").css("display", "block"); $('#zoneToAdd').fadeOut('slow').load('Film/Index/' + @Model.Movie.Id).fadeIn("slow"); } else { $(".MessageErrorAddToBiblio").css("display", "block"); } }); }; </script>

---

Je passe bien dans l'action de mon controlleur, l'ajout de mon film dans ma bibliothèque se fait et j'affiche une div contenant du texte pour informer l'utilisateur comme quoi son film a été ajouté à sa bibliothèque avec une popup FancyBox que j'active avec la fonction click() de Jquery.


Maintenant, j'ai une dernière question, et ce sera parfait !

J'ai une div qui contient justement le message "Ajouter ce film à la bibliothèque". Si le film est déjà ajouté à la bibliothèque, j'affiche le message comme quoi "Le film est déjà dans votre bibliothèque." grâce à un booléen qui est transmis depuis mon Model.

J'ai essayé d'utiliser la fonction load() de JQuery, mais le problème est que le booléen n'est pas mis à jour...

Du coup, il faut que je relance mon action "Film/Index/ID" ? Puis je le faire sans que l'utilisateur le voit (en JQuery) ?

Merci d'avance pour ta réponse !

Euh, je suis pas sur de ton pb...

Est-ce que tu n'arrives pas a setter ton booleen a true dans ton model au chargement de la page, ou est-ce que tu veux mettre a jour le contenu de ta div en fonction du retour ?

Bonsoir,

En fait, je veux juste mettre à jour ma div en gros, sauf que quand je le fais grâce à la méthode JQuery Load().

En sachant que ma div contient des structures itératives qui affichent différents messages selon si le film est déjà dans la bibliothèque de l'utilisateur.

• "Ajouter ce film dans votre bibliothèque"
• "Ce film est déjà dans votre bibliothèque"

Une fois le film ajouté dans la bibliothèque de l'utilisateur, via ma NOUVELLE :D fonction JQuery, je suis donc censé affiché "Ce film est déjà dans votre bibliothèque".

Sauf qu'avec le code suivant, ma zone se rafraîchit bien (dans le sens où le fadeOut et le fadeIn se réalisent), mais les conditions ne sont pas exécutées, du coup, j'ai le même affichage qu'avant l'ajout dans la bibliothèque du film.

Code:

---

1 2	$("#zoneToAdd").fadeOut("slow").load().fadeIn("slow");

---

J'espère que c'est assez clair...

Merci d'avance pour tes réponses !

Ah, j'ai trouvé !!:D. Si je met :

Code:

---

1 2 3

$("body").load('/Film/Index/' + @Model.Movie.Id); $("#zoneToAdd").fadeOut("slow").load().fadeIn("slow");

---

Je repasse bien par mon JS et toute la page est rechargé, puis un effet actualise la zone que je désire !

Je ne sais pas si c'est le meilleur moyen, mais en tout cas cela fait ce que je désire !

J'attends avant de mettre "Résolu" sur ce sujet pour voir si tu n'aurais pas une piste intéressante à me proposer !:ccool:

L'année commence bien !

Ah ben non, du coup, ma popup s'affiche jusqu'à ce que mon body soit raffraichit...


Je repars donc en arrière dans mes recherches...

Salut,

personnellement j'utiliserai cette syntaxe pour jQuery:

Code:

---

1 2 3 4 5 6 7 8 9 10

var id = "Ce que tu veux";   $.ajax({ url: "ton-url", data: { mesDonnees: id }, success: function(data){ $('#textBox').val(data.MonRetour); } });

---

Pour le controller:

Code:

---

1 2 3 4 5 6 7

[HttpPost] public ActionResult MonAction(String mesDonnees) { // traitement return Json(new { MonRetour = "test" }); }

---

http://forums.asp.net/p/1655438/4311...od+with+Jquery

Voilà :ccool: