Discussion :

[patxy]

Bonjour,

J'aimerais afficher une vue de détails, avec plusieurs cases à cocher. J'aimerais que le cochage/décochage des cases soit pris en compte dans une base de données sans nécessiter l'utilisation d'un bouton submit, ou un rafraichissement de la page.

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
@ModelType MvcApplication4.OpportuniteDetails
 
@Code
    ViewData("Title") = "Details"
End Code
 
<script type="text/javascript">
    $(function () {
        $(':checkbox').change(function () {
            $.ajax({
                url: '@Url.Action("update")',
                type: 'POST',
                data: { isChecked: $(this).is(':checked') },
                success: function (result) { }
            });
        });
    });
</script>
 
[...]
 
@Html.Raw("mail envoyé?") @Html.CheckBox(Model.Reseaux.mail)

ou ceci :

Code :

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

<input type="checkbox" name="facebook" id="facebook" onclick="function()" />

Mon souci est que quand je coche ou décoche la case, je ne rentre pas dans ce script. (déjà que je sais pas encore trop bien ce que je devrai faire après :-( ).

Autre truc bizarre, le code source généré par le serveur :

Code :

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

mail envoyé? <input id="False" name="False" value="true" type="checkbox"><input name="False" value="false" type="hidden">

En plus de rentrer dans le script, ça me dérangerait pas de pouvoir changer le name="False", et comprendre pourquoi il y a un second input de type="hidden".



édit : je viens de comprendre un truc un peu con. Le script s'exécutant coté client, le programme de débogage de VS ne devait jamais s'arrêter sur un point d'arrêt présent dans le script... Donc, je précise un peu plus le souci.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
    $(function () {
        $(':checkbox').change(function () {
            alert("test")
            $.ajax({
                url: '@Url.Action("update")',
                type: 'POST',
                data: { isChecked: $(this).is(':checked') },
                success: function (result) { }
            });
        });
    });
</script>

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
    $(function () {
        $(':checkbox').change(function () {
            $.ajax({
            alert("test")
                url: '@Url.Action("update")',
                type: 'POST',
                data: { isChecked: $(this).is(':checked') },
                success: function (result) { }
            });
        });
    });
</script>

Il n'y a que dans le premier cas que l'alerte est affichée. Le truc c'est que je sais pas trop à quoi le $.ajax est sensé servir.

[alexxxx69]

Alors plusieurs choses.

Dans ta vue se serait plus simple de nommer ta fonction javascript :

Code :

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

1
2
3
4
5
6
7
8
9
 
<script type="text/javascript">
    function nomDeLaFonction(objetAppelant) {
            $.ajax({
                .......
            });
        });
    });
</script>

et dans ta vue sois tu met du code html direct :

Code :

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

<input type="checkbox" name="facebook" id="facebook" onclick="nomDeLaFonction(this)" />

Soit tu peux passer par les Helpers MVC

Code :

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

@Html.CheckBox....

Regarde bien le constructeur de @Html.CheckBox tu as la possibilité de lui indiquer dans HTMLAttributes un nom, un id, l'évènement onClick...

Dans ton cas cela pourrais être :

Code :

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

1
2
 
@Html.CheckBox("facebook", true, new { id = "facebook", onclick="MaFonction(this)" })

Après pour ton problème de fonction ajax :

Il n'y a que dans le premier cas que l'alerte est affichée. Le truc c'est que je sais pas trop à quoi le $.ajax est sensé servir.

C'est normal car $.ajax est une fonction de JQuery qui a aussi un constructeur comme toutes les fonctions : jQuery.ajax( url [, settings] )
Donc si à la place du paramètre url tu met un alert ça risque pas de marcher.
Aussi si tu veux déboguer ce code il te faut mettre un point d'arret dans ton navigateur (avec firebug pour firefox ou autre outils de dev). Cette fonction va faire une requete au serveur pour aller soit récupérer des infos, soit en poster. Regarde sur le site de JQuery c'est très bien expliqué

[patxy]

Merci pour ton aide alexxxx69.

Je viens de comprendre comment la fonction ajax fonctionnait. Envoyer une alert au controleur, c'était pas la meilleur idée.


Pour le moment mon code est celui-ci :

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
<script type="text/javascript">
    $(function test() {
        $(':checkbox').change(function () {
            alert($(this.name))
            $.ajax({
                url: '@Url.Action("update")',
                type: 'POST',
                data: { name: "test", isChecked: $(this).is(':checked') },
                success: function (result) { }
            });
        });
    });
</script>
 
@Html.CheckBox("facebook", Model.Reseaux.facebook)

Ceci fonctionne bien, si ce n'est que je ne trouve pas comment renvoyer l'id ou le name de la checkbox.

Ouais en fait non c'est de la merde comme j'ai fait... Je trouve mieux et je reviens...

[alexxxx69]

regarde au niveau du constructeur de @Url.Action tu dois pouvoir passer des paramètres. Moi je me prend pas la tête et je met l'url direct /ControllerName/Action?param1=blablabla&param2=...

Tu dois pouvoir faire pareil avec le helper MVC

[patxy]

Moi je me prend pas la tête et je met l'url direct /ControllerName/Action?param1=blablabla&param2=...

Comment ça? petit exemple de ton idée? je ne saisis pas très bien où tu veux en venir.
édit : je crois que j'ai compris où tu voulais en venir... Mais pourquoi ne pas passer les infos via le champ data juste en dessous?


Sinon, pour le moment, ma version la moins buggée est sans le html helper :

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
 
<script type="text/javascript">
    $(function test() {
        $(':checkbox').change(function () {
            alert($(this.name))
            $.ajax({
                url: '@Url.Action("update")',
                type: 'POST',
                data: { name: "test", isChecked: $(this).is(':checked') },
                success: function (result) { }
            });
        });
    });
</script>
 
            @If Model.Reseaux.facebook = False Then
                @<input type="checkbox" name="facebook" id="facebook" onclick="test()" />
            Else
                @<input type="checkbox" name="facebook" id="facebook" onclick="test()" checked="checked" />
            End If

[alexxxx69]

En fait je te met un exemple :

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
$("#divPopup").dialog({
        autoOpen: false, width: 500, height: 200, modal: true,
        buttons: {
            "Valider": function () {
                $.post("../Objet/SupprimerOccurenceObjet",
                    $("#formOccSupp").serialize(),
                    function () {
                        $("#divPopup").dialog("destroy");
                        alert("Objet supprim\351");
                        $("#divPopup").remove();
                        $("#" + nomObjet).click();
                    });
            },
            Annuler: function () {
                $(this).dialog("destroy");
                $("#divPopup").remove();
            }
        }
    });

C'est le code qui ouvre un popup JQuery et qui post le formulaire qu'il contient.

La fonction $.post équivaut à la fonction $.ajax avec type: 'POST'.
Le premier paramètre est mon url : "../Objet/SupprimerOccurenceObjet" qui est constituée du nom du contrôleur (Objet) suivi du nom de la méthode (SupprimerOccurenceObjet).

Le deuxième paramètre contient les données que j’envoie à mon contrôleur, ici un formulaire sérialisé ($("#formOccSupp").serialize()).

Le troisième paramètre de la fonction post correspond à ce qui doit être fait en cas de succès du post, ici une fonction anonyme qui détruit le popup, affiche un message...

J'aurais pu rajouter des paramètres à mon url si la fonction correspondante dans le contrôleur à un prototype qui en contient.
exemple dans le controleur :

Code :

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

public ActionResult maFonction(int idObjet) ...

Mon url sera "../NomContrôleur/maFonction?idObjet=5 par exemple. Quand je met un point d'arrêt dans le contrôleur, je récupère 5 dans la variable idObjet. Tu peux passer autant de paramètres en les séparant par des &
nomFonction?param1=5&param2=bonjour&param3=...

Je n'utilise pas le helper @URL.Action car ma fonction javascript est dans un fichier js a part donc je n'ai jamais essayé si ça marche.

Y'a toujours plusieurs moyens d'arriver à faire ce que tu veux. Pas forcément des bonnes et des mauvaises, il faut juste toujours coder pareil comme ça on s'embrouille pas.

Mais pourquoi ne pas passer les infos via le champ data juste en dessous?

Tu peux passer les infos dans la variable data. Tu pourrais à la rigueur englober ta checkbox dans des balises form comme ça tu post ton formulaire sérialisé que tu récupère dans ta fonction, ou alors avoir une fonction du genre NomFonction(string idCheckbox, bool valeur) que t'appelle en ajax avec l'url "../NomContrôleur/NomFonction?idCheckbox=...&valeur=..."

A voir

[patxy]

Merci pour l'exemple. Je le relirai demain à tête plus reposée pour un peu moins m'embrouiller.

J'ai réussi à passer le nom de la checkbox que je renvoie, il suffisait simplement de faire ça :

Code :

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

data: { name: this.name, isChecked: $(this).is(':checked') },

par contre... Cette checkbox est dans une page qui détaille 1 objet. J'aimerais aussi renvoyer l'id de cet objet. Pour le moment, je peux l'obtenir de 2 façons :
c'est le chiffre à la fin de l'url, ou alors c'est aussi "model.opportunite.idOpportunite". Pour le moment, je cherche comment récupérer ce paramètre et l'envoyer au controleur.

Pour le moment, les 2 variables sont bien passées au controleur. Il ne me reste plus qu'à créer une chaine linq avec les 3 paramètres pour updater la DB.