Afficher un contenu en fonction d'une drop down liste

Version imprimable

Bonjour,
Comme dit dans le titre j'ai besoin d'afficher du contenu en fonction de la sélection d'une valeur dans une liste déroulante. Pour être un peu plus précis j'ai un module lien qui est composé de deux "objets". Un "objet" lien qui est composé de plusieurs champs (lien, image ,description, titre,..) et un objet catégorie. Une catégorie permet de regrouper plusieurs liens.
Le but est donc d'avoir une drop down liste affichant la liste des catégories et en fonction de la sélection faite afficher mes info sur les liens correspondants. J'ai donc besoin dans mon cas de récupérer la valeur sélectionnée et de la passer en paramètre de mon "renderAction" qui affichera la liste des liens correspondant.
Je sais qu'il est possible de le faire en javascript mais je ne connais pas du tout cette techno. J'aimerai donc savoir si il existe un moyen de le faire en asp.net MVC ou si je suis forcé de le faire en JS. Si c'est le cas quelques liens vers des tuto seront les bienvenus...
Après toutes ces explication place au code ;)
Voici mon contrôleur:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 /// <summary> /// Retourne la vue qui affiche la liste des catégories /// </summary> /// <param name="id">correspond a l'id du contenu (une catégorie appartient a un contenu)</param> /// <returns></returns> public ActionResult Liencategorie(int id) { var idLangue = _serviceLangue.getIdLangueDefault(); ViewData["categorie"] = new SelectList(_service.ListcategorieLien(id, idLangue), "idWsgModuleLienCategorieWsgModuleLienCategorieContenu", "titreWsgModuleLienCategorieContenu"); return View(); } /// <summary> /// permet d'afficher la liste des lien en fonction d'une catégorie /// </summary> /// <param name="id">correspond a l'id de la catégorie sélectionnée dans la liste</param> /// <returns></returns> public ActionResult LienListe(int id) { var idLangue = _serviceLangue.getIdLangueDefault(); return View(_service.ListLienContenuLangue(idLangue,id)); }
Puis ma vue avec la drop down liste:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<MaquetteNouvelleSolution.Models.wsgModuleLienCategorieContenu>" %> <fieldset> <legend>Lien</legend> <div> <%= Html.DropDownListFor(model => model.idWsgModuleLienCategorieWsgModuleLienCategorieContenu, (SelectList)ViewData["categorie"]) %> </div> <% Html.RenderAction("LienListe", "Liens", new { id= "8" }); %> </fieldset>
Pour L'instant l'id (en gras) est passé en dur mais il doit être remplacé par une variable qui correspond à la valeur de la ddl.
J'espère avoir été clair.
Merci d'avance pour le temps passé sur mon post.
cordialement

17/06/2011, 11h57
ElmMoncef

une méthode populaire est d'utiliser un script JS qui récupere la valeur de la dropDownList, et qui execute une action asynchrone(Ajax). cette action retournerait une vue partielle ou sera placee le contenu voulu. la vue partielle sera place dans un Div dans la page mere.

merci de ta réponse rapide. Lorsque j'ai fait quelques recherches c'est ce que j'ai vu (utilisation d'un script JS).
J'ai donc fait ceci pour récupérer la valeur de ma ddl:
Code:

1 2 3 4 <div> <%= Html.DropDownListFor(model => model.idWsgModuleLienCategorieWsgModuleLienCategorieContenu, (SelectList)ViewData["categorie"], new { onChange = "RecupValeur()" })%> </div>
et le script JS:
Code:

1 2 3 4 5 6 7 8 9 <script type="text/javascript"> function RecupValeur() { var valeur = 1; var ddl = document.getElementById('idWsgModuleLienCategorieWsgModuleLienCategorieContenu'); valeur = ddl.options[ddl.selectedIndex].value; return valeur; } </script>
Maintenant mon problème est que je ne sais pas comment passer ma valeur à ma vue partiel... si tu as une piste a me donner je suis preneur.
Pour les div encadrant la vue partiel c'était un simple oubli de ma par et je l'ai modifié.
Par contre je ne peut pas placer ma vue partiel dans ma page mère.

En faite pour la petit histoire je réalise un CMS. J'ai déja developpé la partie admin et je suis entraint de développer le frontOffice.
Donc j'ai une page mère(défaut) qui appelle une vue partiel "contenu". Cette vue permet de gérer l'affiche des différents contenus( article, actualité, lien, FAQ,...) d'une page. Et elle appelle elle-même des vues partiels pour afficher les différent composants. J'ai donc une imbrication à plusieurs niveau de vue partiel et je ne peut pas modifier ça...
J'espère avoir été clair
cordialement

17/06/2011, 12h45
ElmMoncef
alors, pour placer la vue partielle c'est simple:

dans ta vue mere, dans le Div en question, tu mets un RenderPartial(). c'est un truc facille à résoudre, ca existe dans les tutos elementaires de MVC.

Pour passer le parametre a la vue partielle:

1/le parametre doit etre passé à l'action qui retourne la vue partielle.
ceci en récuperant la valeur comme tu as ton script.

puis executer l'action avec ajax:
Code:

1 2 3 4 5 6 7 8 9 $Ajax.( { method:"POST", url:/Controlleur/Action/Parametre . . . } )
et c'est l'action qui devrait construire le modele selon le parametre et retourner un truc comme ceci

Return PartialView(model, taVuePartielle)

j'espere t'avoir aidé.

bonjour,
Désolé pour le temps de réponse je suis partie sur autre chose :aie: mais je revient sur le post. :P
En fait je ne suis pas sur que l'on se soit bien compris...
J'ai une drop down list et en fonction de la valeur selectionné j'affiche un contenu différent.
Actuellement à chaque changement de la valeur de la drop down liste je post le formulaire pour pouvoir afficher mon contenu. Cette méthode marche bien mais au niveau de l'expérience utilisateur c'est catastrophique :cry:
J'aimerai donc garder le même mode de fonctionnement mais sans être obliger de poster mon formulaire à chaque changement de la valeur de la drop down liste.

Voici mon code actuel:
Vue partiel qui contient la drop down liste et appelle la vue partiel "ListFaq". La vue partiel ListFAQ affiches les FAQ correspondant à la thématique sélectionné dans la drop down liste.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<MaquetteNouvelleSolution.Models.wsgModuleFaqThematiqueContenu>" %>
 
<fieldset>
<legend>FAQ</legend>
 
        <% using (Html.BeginForm())
           { %>
        <div>
            <%= Html.DropDownListFor(model => model.idwsgmodulefaqthematiqueWsgModuleFaqThematiqueContenu, (SelectList)ViewData["Thematique"], new { onChange = "this.form.submit();" })%>
        </div>
 
                <% } %>
        <div>
       <% Html.RenderAction("ListFaq", "FAQs", new { id = (int)ViewData["idThematique"] }); %>
       </div>
</fieldset>

Controller:

Code:

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
34
35
36
37
38
39
40
 
 
 /// <summary>
        /// permet d'afficher la liste déroulante qui permet de choisir la thématique, à chaque nouvelle sélection le formulaire est posté
        /// </summary>
        /// <param name="id"></param>
        /// <returns></returns>
        public ActionResult Thematique(int id)
        {
            var idLangue = _serviceLangue.getIdLangueDefault();
            ViewData["Thematique"] = new SelectList(_service.ListThematique(idLangue, id), "idwsgmodulefaqthematiqueWsgModuleFaqThematiqueContenu", "libelleWsgModuleFaqThematiqueContenu");
            ViewData["idThematique"] = _service.getThematiqueDefault(id, idLangue);
            return View();
        }
 
        /// <summary>
        /// permet d'afficher la liste déroute qui permet de choisir la thématique après que le premier post est été fait
        /// </summary>
        /// <param name="id"></param>
        /// <param name="wsgThematique"></param>
        /// <returns></returns>
        [HttpPost]
        public ActionResult Thematique(int id,wsgModuleFaqThematiqueContenu wsgThematique)
        {
            var idLangue = _serviceLangue.getIdLangueDefault();
            ViewData["idThematique"] = wsgThematique.idwsgmodulefaqthematiqueWsgModuleFaqThematiqueContenu;
            ViewData["Thematique"] = new SelectList(_service.ListThematique(idLangue, id), "idwsgmodulefaqthematiqueWsgModuleFaqThematiqueContenu", "libelleWsgModuleFaqThematiqueContenu");
            return View();
        }
 
        /// <summary>
        /// permet d'afficher la liste des FAQ correspondant à la thématique sélectionnée
        /// </summary>
        /// <param name="id"></param>
        /// <returns></returns>
        public ActionResult ListFaq(int id)
        {
            var idLangue = _serviceLangue.getIdLangueDefault();
            return View(_service.ListFaq(idLangue, id));
        }

Difficulté supplémentaire pour moi, je ne connais presque rien aux technologies type JS, JQUERY, AJAX. Je cherche donc des tuto, astuces, cours ou autres conseils...
J'espère avoir été clair.
Encore un fois merci pour le temps passé sur mon post
cordialement