Bienvenue à Blogs CodeS-SourceS Identification | Inscription | Aide

Liens

Asp.Net MVC Cascading Ajax DropDown avec les composants Telerik
Le composant Telerik ComboBox est un bon compromis si vous avez besoin d'une dropdown list avec un système d'autocomplétion tout en gardant un code html sémantique.
Je vous laisse découvrir les démos de ce composant en suivant ce lien.

Dernièrement, j'avais besoin d'avoir un effet de filtre automatique sur un deuxième ComboBox en fonction de la saisie sur le premier Combox.
Je vous propose donc de partager ma solution avec vous.

Dans votre View, sur la définition de vos ComboBox, rajoutez un appel Javascript sur la fonction OnChange de votre première liste :

<% Html.Telerik().ComboBox()
   .Name("Liste1")
   .ClientEvents(events => events.OnChange("Liste1_onChange"))
   .AutoFill(true)
   .BindTo(new SelectList(Model.Liste1, "Id", "Nom"))
   .HighlightFirstMatch(true)
   .Filterable(filtering => { filtering.FilterMode(AutoCompleteFilterMode.Contains); })
   .Render();
%>


<% Html.Telerik().ComboBox()
   .Name("Liste2")
   .AutoFill(true)
   .BindTo(new SelectList(Model.Liste2, "Id", "Nom"))
   .HighlightFirstMatch(true)
   .Filterable(filtering => { filtering.FilterMode(AutoCompleteFilterMode.Contains); })
   .Render();
%>


A la fin de votre View, rajoutez le code Javascript permettant de faire un appel Ajax pour alimenter votre deuxième ComboBox en fonction du premier choix.

<script type="text/javascript">
  function Liste1_onChange() {
    var combobox = $(this).data('tComboBox');
    if (combobox != null) {
      var value = combobox.value();
      $.getJSON('<%=Url.Action("_AjaxGetData", "MonController") %>?id=' + value, null, function (data) {
        if (data != null) {
          var body = $('#List2').data('tComboBox');
          body.dataBind(data);
          body.select(0);
        }
      });
    }
  }
</script>


En résumé, on récupère la sélection dans la variable value, puis on fait un appel Ajax (Controller : MonController, Méthode : _AjaxGetData) en passant la value dans le paramètre id. On récupère les valeurs en Json que l'on assigne à la ComboBox List2.
Bien sûr, en fonction du comportement que vous souhaitez, il faut rajouter du code dans les else des if pour indiquer ce que vous voulez si l'utilisateur met vide dans la première liste ou si vous ne récupèrez aucune valeur dans l'appel Ajax.

Puis, il suffit de créer la méthode dans votre Controller MonController pour renvoyer les données en Ajax.

public JsonResult _AjaxGetData(string id)
{
   var mesvaleurs = monRepository.GetData();
   if (!string.IsNullOrEmpty(id))
   {
     mesvaleurs = mesvaleurs.Where(v => v.MaProprieteId.Equals(id));
   }

   return new JsonResult {
     Data = new SelectList(mesvaleurs.ToList(), "Id", "Nom"),
     JsonRequestBehavior = JsonRequestBehavior.AllowGet
   };
}


Voilà, vous avez des cascading ComboBox avec l'ergonomie des composants Telerik. N'hésitez pas à faire un commentaire si vous avez des remarques ou des solutions pour améliorer la solution (ou des liens vers d'autres solutions).

Julien Lefebvre

Ce post vous a plu ? Ajoutez le dans vos favoris pour ne pas perdre de temps à le retrouver le jour où vous en aurez besoin :
Posted: samedi 26 février 2011 14:00 par jlefebvre
Classé sous : , ,

Commentaires

Pas de commentaires

Les commentaires anonymes sont désactivés

Les 10 derniers blogs postés

- Merci par Blog de Jérémy Jeanson le 10-01-2019, 20:47

- Office 365: Script PowerShell pour auditer l’usage des Office Groups de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 11:02

- Office 365: Script PowerShell pour auditer l’usage de Microsoft Teams de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 10:39

- Office 365: Script PowerShell pour auditer l’usage de OneDrive for Business de votre tenant par Blog Technique de Romelard Fabrice le 04-25-2019, 15:13

- Office 365: Script PowerShell pour auditer l’usage de SharePoint Online de votre tenant par Blog Technique de Romelard Fabrice le 02-27-2019, 13:39

- Office 365: Script PowerShell pour auditer l’usage d’Exchange Online de votre tenant par Blog Technique de Romelard Fabrice le 02-25-2019, 15:07

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Stream Portal par Blog Technique de Romelard Fabrice le 02-21-2019, 17:56

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Video Portal par Blog Technique de Romelard Fabrice le 02-18-2019, 18:56

- Office 365: Script PowerShell pour extraire les Audit Log basés sur des filtres fournis par Blog Technique de Romelard Fabrice le 01-28-2019, 16:13

- SharePoint Online: Script PowerShell pour désactiver l’Option IRM des sites SPO non autorisés par Blog Technique de Romelard Fabrice le 12-14-2018, 13:01