Julien Lefebvre

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