Tirez le meilleur parti de l’interface utilisateur Telerik pour ASP.NET Core DropDownList

Voyons à quel point le composant déroulant de Telerik UI pour ASP.NET Core est vraiment puissant. Avec une variété d’options de personnalisation et une intégration facile dans d’autres composants, cet outil simple sera d’une grande aide !

Du point de vue de l’expérience utilisateur, les listes déroulantes sont très pratiques lorsque l’utilisateur doit choisir une option parmi un ensemble prédéterminé comme un genre de film, une saveur de crème glacée ou une taille de chaussette.

Cependant, une liste déroulante fonctionnelle et bien stylée est difficile à mettre en œuvre. Habituellement, un concepteur créerait l’apparence, un frontal implémenterait la conception et un développeur backend configurerait la liaison de données. Une surcharge importante pour une seule entrée.

Voici le progrès Interface utilisateur Telerik pour ASP.NET Core La liste déroulantefournissant une liste déroulante rapidement configurable intégrée dans les wrappers .NET Core HtmlHelper et TagHelper.

Ça sonne bien ? Nous ne faisons que commencer.

Le composant DropDownList peut être stylisé par une variété de thèmes prédéfinisqui gère son animation contextuelle.

Ses messages intégrés ont été traduits dans plus de 30 langues par la communauté active qui utilise l’interface utilisateur Telerik.

De plus, des scénarios complexes peuvent être facilement mis en œuvre en configurant des gestionnaires JavaScript pour les événements de la DropDownList.

Table des matières:

Une configuration rapide

Comme la plupart des listes déroulantes, le composant Telerik UI pour ASP.NET Core se lie à un modèle et a besoin d’un champ Id pour son .DataValueField et un champ Texte pour son .DataTextField configurations.

Liez-le aux données comme vous le souhaitez, en transmettant une collection statique ou en configurant un point de terminaison de serveur dont la réponse est consommée et ajoutée à la DropDownList par la configuration DataSource. Le DataSource est un composant distinct qui est intégré au DropDownList pour gérer ses opérations de données et la communication du serveur.

« Cela ressemble à beaucoup de travail, je pensais que vous aviez dit rapide installation. »

D’accord, si vous utilisez Visual Studio ou Code Visual Studiol’interface utilisateur Telerik pour les outils de productivité ASP.NET Core vous permettra d’obtenir la configuration de base de DropDownList en écrivant simplement une courte ligne.

HtmlHelper

TagHelper

Ce qu’il te reste alors c’est définir le nom du composant. Ce nom sera utilisé pour le
identifiant Attribut HTML côté client.

Définissez un ÉtiquetteOption à afficher lorsqu’aucune valeur n’est sélectionnée.

Choisissez si vous souhaitez utiliser le filtrage ou non.

Enfin, configurez une méthode Action dans le contrôleur pour fournir les données du composant. Configurez ensuite le transport de lecture de la source de données pour appeler le point de terminaison du serveur.

.DataSource(source =>
{
		source.Read(read => {
read.Action("ActionName", "ControllerName"});
	})

Lorsque le serveur répond avec les données, la liaison sera effectuée automatiquement en fonction des configurations .DataValueField et .DataTextField.

Fonctionnalités et caractéristiques étendues

Outre les fonctionnalités de base, DropDownList fournit des fonctionnalités de niche.

Liste déroulante en cascade

Un ensemble de DropDownLists peut être configuré pour cascader les uns des autres. Cascade c’est lorsque l’entrée d’un composant active l’autre. Ceci est utile lorsque la sélection du parent DropDownList détermine l’ensemble de données de l’enfant.

Les DropDownLists en cascade sont également bénéfiques dans les cas où vous souhaitez présenter plusieurs options mais consommez le moins d’espace d’écran possible. Les listes en cascade visent à accélérer la navigation, en particulier pour les utilisateurs qui interagissent de manière répétée avec une application particulière.

Pour configurer un enfant en cascade, assurez-vous qu’il est initialement désactivé en configurant son .Activer (faux) et .AutoBind(faux) propriétés. Passez ensuite le nom de son parent au .CascadeFrom propriété. De cette façon, lorsqu’une valeur est sélectionnée dans le parent, l’enfant sera activé et se liera aux données.

Pour filtrer la réponse de données du serveur, activez .ServerFiltering et ajoutez une propriété Data au Read Transport de DataSource.

.DataSource(source => source
     .Custom()
     .ServerFiltering(true)
     .Transport(transport => transport
     .Read(read =>
        {
          read.Action("Overview_Get_Products","DropDownList")           
             .Data("filterProducts");
        }))
)

Le paramètre de chaîne transmis à la propriété Data doit correspondre à une fonction de gestionnaire JavaScript. Dans celui-ci, accédez à la valeur du parent avec jQuery. La variable renvoyée par la fonction de gestionnaire sera attachée à la charge utile de la demande de lecture. Utilisez-le pour filtrer l’ensemble de données de l’enfant au niveau du backend.

function filterProducts() {
    return {
        categories: $("#categories").val()
    };
}

Passez en revue la cascade DropDownList plus en détail en vérifiant cet exemple Telerik REPL.

Personnalisez l’apparence de votre liste déroulante avec des modèles

L’exemple REPL ci-dessus présente également une autre fonctionnalité puissante de DropDownList. Je fais référence aux modèles d’interface utilisateur de Kendo que vous pouvez utiliser pour personnaliser l’apparence du composant.

L’exemple ci-dessus montre la Modèle, Modèle de valeur et Modèle de pied de page méthodes de configuration. Ces méthodes intègrent Modèles d’interface utilisateur de Kendo et vous permettent d’ajouter du HTML, du CSS et du JavaScript personnalisés à la partie respective du composant auquel ils sont appliqués.

Voici un extrait de la manière dont vous pouvez configurer un modèle externe pour personnaliser les éléments de la DropDownList :

.TemplateId("dropDownListTemplate")

<script id="dropDownListTemplate" type="text/x-kendo-template">
    <span class="k-state-default" style="background-image: url(" + Url.Content("~/shared/web/dropdownlist/") + "#:data.CategoryId#.jpg");" ></span>
    <span class="k-state-default" style="padding-left: 15px;">
        <h3>#: data.CategoryName #</h3>
    </span>
</script>

La DropDownList expose également les méthodes de configuration de modèle suivantes :Modèle de groupe,
Modèle d’en-tête, Pas de modèle de données et OptionLabelTemplate. Cliquez sur leurs noms et visitez l’API côté serveur pour afficher plus d’informations à leur sujet.

Les modèles personnalisés DropDownList ouvrent la porte à une personnalisation sans fin en vous donnant le contrôle pour ajouter des images ou des icônes ou pour styliser les valeurs sélectionnées et les en-têtes contextuels. Vous pouvez facilement rendre le contenu DropDownList plus personnalisé, donc plus attrayant et convivial.

Supposons que vous utilisez le composant pour collecter des informations ou des commentaires sur les clients. Les modèles peuvent aider à améliorer les taux de réponse en créant une apparence plus personnalisée.

Optimisez votre liste déroulante avec la virtualisation

De plus, la DropDownList prend en charge la virtualisation. Il s’agit d’une pratique d’optimisation qui améliore les performances lorsque de grands ensembles de données sont utilisés.

Cela fonctionne en demandant une nouvelle page de données au serveur chaque fois que l’utilisateur fait défiler la page chargée dans la fenêtre contextuelle.

En tirant parti de la fonctionnalité de virtualisation de Telerik UI pour le composant ASP.NET Core DropDownList, vous pouvez facilement améliorer les performances de l’application lorsque vous traitez beaucoup de données qui doivent être chargées. Souvent, la fonctionnalité de virtualisation ne sera même pas remarquée par l’utilisateur final car elle optimise l’expérience à un niveau subconscient.

Pour configurer la virtualisation, vous devez définir l’option PageSize de DataSource. Activez ensuite le .Virtuel propriété en définissant la .ItemHeight explicitement.

.Virtual(v => v.ItemHeight(26))

Facultativement, si le composant a une valeur initiale ou si vous utilisez la méthode de valeur côté client, configurez également le .ValueMapper pour obtenir l’index de cette valeur et ensuite charger la page appropriée qui la contient.

.Virtual(v => v.ItemHeight(26).ValueMapper("valueMapper"))
<script>
    function valueMapper(options) {
        $.ajax({
            url: "@Url.Action("Orders_ValueMapper", "DropDownList")",
            data: convertValues(options.value),
            success: function (data) {
                options.success(data);
            }
        });
    }

    function convertValues(value) {
        var data = {};

        value = $.isArray(value) ? value : [value];

        for (var idx = 0; idx < value.length; idx++) {
            data["values[" + idx + "]"] = value[idx];
        }

        return data;
    }
</script>

La voie de l’intégration

En parlant d’intégration, aucune entrée n’est isolée. La DropDownList ne fait pas exception.

Dans la plupart des cas, les composants de l’éditeur sont utilisés dans les formulaires. Nous n’avons pas manqué ce fait lorsque nous avons créé le Interface utilisateur Telerik pour le composant ASP.NET Core Form. Les éléments du formulaire vous permettent de personnaliser la façon dont ils sont édités. Parmi les autres composants de l’éditeur, ils vous permettent également d’utiliser une DropDownList.

Si vous avez besoin de recueillir des informations sur les commentaires de vos clients, par exemple, comment ils ont découvert votre entreprise, le moyen le plus simple consiste à configurer un formulaire avec une DropDownList contenant la liste des options disponibles sur l’application Web.

L’ajout d’une liste déroulante à un formulaire d’application Web offre aux utilisateurs un moyen transparent et sans effort de fournir des informations sans aucune saisie manuelle.

Pour ce faire, configurez une DropDownList en tant que propriété Editor de l’élément de formulaire.

@(Html.Kendo().Form<Kendo.Mvc.Examples.Models.Form.FormItemsViewModels>()
        .Name("exampleForm")
        .Items(items =>
        {
            items.AddGroup()
                .Label("Registration Form")
                .Items(i =>
                {

                    i.Add()
                        .Field(f => f.ModelField)
                        .Label(l => l.Text("DropDownList:").Optional(true))
                        .Editor(e =>
                        {
                            e.DropDownList()
                                .HtmlAttributes(new { })
                                .OptionLabel("Select...")
                                .DataTextField("ProductName")
                                .DataValueField("ProductID")
                                .DataSource(source =>
                                {
                                    source.Read(read =>
                                    {
                                        read.Action("Items_GetProducts", "Form");
                                    })
                                    .ServerFiltering(true);
                                });
                        });
                });
        })
)

Pour plus d’informations sur la configuration du composant formulaire, reportez-vous à son Documents et Démos.

Un autre scénario d’intégration courant consiste à utiliser une DropDownList pour modifier une colonne du Interface utilisateur Telerik pour ASP.NET Core Grid. L’ajout d’une liste déroulante à la colonne d’un composant Grid facilite davantage la saisie des données : cela limite les choix d’entrée pour une colonne sélectionnée, accélère la saisie des données et réduit les erreurs causées par la fatigue.

Pour intégrer une DropDownList dans une Grid, vous pouvez soit ajouter une UIHint annotation de données au champ qui se lie à la colonne particulière :

[UIHint("ClientCategory")]
public CategoryViewModel Category
{
  get;
  set;
}

Ou configurez un .EditorTemplateName de la colonne :

columns.Bound(p => p.Category).EditorTemplateName("ClientCategory");

Dans les deux cas, lors de la sérialisation, la Grille recherchera un ClientCategory.cshtml Vue partielle dans le Vues/Partagé/ÉditeurModèles répertoire du projet.

Là, vous avez également deux options, en utilisant une collection statique pour les données :

@model Kendo.Mvc.Examples.Models.CategoryViewModel

@(Html.Kendo().DropDownListFor(m => m)
            .DataValueField("CategoryID")
            .DataTextField("CategoryName")
            .BindTo((System.Collections.IEnumerable)ViewData["categories"])
)

Ou une source de données :

@model Kendo.Mvc.Examples.Models.CategoryViewModel

@(Html.Kendo().DropDownListFor(m => m)
            .DataValueField("CategoryID")
            .DataTextField("CategoryName")
            .DataSource(source =>
           {
              source.Read(read =>
             {
               read.Action("ActionName", "ControllerName");
             })
            .ServerFiltering(false);
           })
)

À l’étape suivante, assurez-vous que le .DataTextField de la DropDownList est affiché dans la colonne en ajoutant un ClientTemplate en ligne.

columns.Bound(p => p.Category).EditorTemplateName("ClientCategory") .ClientTemplate("#=Category.CategoryName#");

Vous pouvez aussi définir une valeur par défaut dans la propriété DataSource Model de la grille. Cette valeur sera appliquée à DropDownList lors de la création d’une nouvelle ligne.

.DataSource(dataSource => dataSource
            .Ajax()
            …
            .Model(model =>
            {
                model.Id(p => p.ProductID);
                model.Field(p => p.Category).DefaultValue(
                    ViewData["defaultCategory"] as Kendo.Mvc.Examples.Models.CategoryViewModel);
            })
            …
        )

Un exemple de l’approche peut être vu dans le Démo d’édition personnalisée de Grid.

Enfin, dans les scénarios personnalisés où vous utilisez des modèles d’interface utilisateur de Kendo complexes, vous pouvez y ajouter la DropDownList à l’aide de son .ToClientTemplate méthode.

<script id="ddlTemplate" type="text/x-kendo-template">
    @(Html.Kendo().DropDownList()
                 .Name("color")
                 .DataTextField("Text")
                 .DataValueField("Value")
                 .Events(e => e.Change("change"))
                 .BindTo(new List<SelectListItem>() {
                 new SelectListItem() {
                     Text = "Black",
                     Value = "1"
                 },
                 new SelectListItem() {
                     Text = "Orange",
                     Value = "2"
                 },
                 new SelectListItem() {
                     Text = "Grey",
                     Value = "3"
                 }
             })
                 .Value("1")
                 .HtmlAttributes(new { style = "width: 100%" })
           )
           .ToClientTemplate()
</script>

En conclusion, la DropDownList s’avère être un outil polyvalent et simple à utiliser pour améliorer l’expérience numérique fournie par votre projet web.

Il est rapide à configurer si vous souhaitez profiter de ses fonctionnalités de base.

Il est étonnamment puissant si vous avez une exigence plus complexe à portée de main et que vous devez plonger plus profondément.

Essayez l’interface utilisateur Telerik pour ASP.NET Core DropDownList aujourd’hui

Vous voulez commencer à tirer parti de la DropDownList ASP.NET Core, ou de l’un des plus de 110 autres composants prêts à l’emploi, comme la grille ou le planificateur ? Commencez un essai gratuit dès aujourd’hui et découvrez par vous-même que la création d’applications interactives riches pendant la moitié du temps n’est pas un conte de fées.

Essayez l’interface utilisateur Telerik pour ASP.NET Core

Partager c’est aimer

Une fois que vous avez essayé le composant DropDownList, n’oubliez pas de partager votre opinion et vos idées soit dans la section des commentaires ci-dessous, soit en visitant le Interface utilisateur Telerik pour le portail de commentaires d’ASP.NET Core. Votre contribution fait la différence !