Discussion :

[Mozofeuk]

Bonjour à tous,

Je cherche à changer le background d'une div en fonction de la sélection d'une DropDownList.

Ma div est présente dans mon _Layout.cshtml

Code :

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

1
2
 <div id="img-title">
                </div>

Code :

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

1
2
3
4
 
#img-title{
     background: url("../Images/MonImage.png") no-repeat;
}

Et dans mon contrôleur Create, j'aimerais changer l'image de fond de Div en fonction de la sélection sur une DropDownList :

Code :

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

1
2
3
4
 
<div class="editor-field">
     @Html.DropDownList("Type_ID", null,new { @class = "combo-box-form" })
</div>

Je suppose que cela va passer par un peu de Jquery j'ai donc fait un petit truc dans le genre :

Code :

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

1
2
3
4
 
function changeImage(image) {
                  $('#img-title').css("background", "url('Images/" + image + ".png')");
              };

Par contre comment faire pour détecter le changement de sélection et l'élément sélectionné afin de déclencher ma fonction changeImage ?

Sinon où suis-je sensé déposer mes fonctions JS pour respecter le patern MVC et les bonnes pratiques ?

Merci d'avance

[damienolive]

Bonjour,

En effet, il va te falloir passer par un peu de jQuery.
Tu as juste à capter l'évènement change de ta ddl.

exemple :

Code :

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

1
2
3
4
 
$('#maddl').change(function(){
    $('#img-title').css("background", "url('Images/" + $(this).val() + ".png')");
});

Je n'ai pas testé, mais ça devrait fonctionner.

Enfin, pour le jQuery, il est sans doute préférable de l'externaliser dans un fichier prévu à cet effet.
Sinon, tu peux également l'insérer dans la page directement mais c'est moins propre et surtout moins facile à maintenir.

[Mozofeuk]

OK merci à toi ça fonctionne très bien.

Enfin j'ai mis le code dans mon _Layout.cshtml comme ça :

Code :

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

1
2
3
4
5
6
7
8
  @Scripts.Render("~/bundles/jquery")
        <script>
            $(document).ready(function () {
                $('#maddl').change(function(){
                      $('#img-title').css("background", "url('Images/" + $(this).val() + ".png')");
                });
           });
        </script>

ça fonctionne très bien dans ma vue Create, mais par contre dans ma vue Edit (ou j'ai exactement la même DDL) au lieu de changer l'image ça me l'efface carrément, pourtant je vois avec Firebug que ça passe bien par la fonction changeImage (tout comme dans la vue Create). Et je vois bien toujours grâce à firebug en inspectant ma div qu'il m'a mis la bonne image en background...

Je comprend pas..

[Mozofeuk]

Étrangement c'est exactement sur les même pages où mon image ne s'affichait pas dans le post suivant : http://www.developpez.net/forums/d13...tml-disparait/