Comment puis-je créer cela : 5 interface utilisateur Telerik pour les composants ASP.NET Core

Dans le monde d’aujourd’hui axé sur la technologie, créer une application Web est devenu assez simple. Mais se demander comment instaurer cohérence, accessibilité et facilité d’utilisation, même pour une interface utilisateur complexe, peut vous faire ressembler au Penseur de Rodin. Poursuivez votre lecture pour découvrir les cinq composants essentiels de l’interface utilisateur Telerik pour ASP.NET Core qui aident à résoudre l’énigme « Comment puis-je construire cela ».

Soyons réalistes : la création d’une bibliothèque complète de composants implique souvent la création de dizaines, voire de centaines de composants d’interface utilisateur. Leur création peut prendre beaucoup de temps, surtout une fois que vous dépassez les composants de base tels que les boutons et commencez à créer des contrôles d’interface utilisateur avancés tels que des listes déroulantes, des grilles, des graphiques, etc.

Heureusement, les bibliothèques d’interface utilisateur tierces sont là pour faciliter la vie quotidienne de votre développeur. Tirer parti d’une bibliothèque commerciale comme Progress Interface utilisateur Telerik pour ASP.NET Core peut vous faire économiser énormément de temps et d’efforts, augmentant ainsi votre productivité. Avec ses plus de 110 composants d’interface utilisateur prêts à l’emploi mais personnalisables, Telerik UI pour ASP.NET Core est la bibliothèque ASP.NET Core la plus complète du marché, vous permettant de créer des applications modernes, inclusives et performantes. Des simples contrôles et éléments de navigation aux outils de mise en page et aux grilles de données complexes, nous avons ce qu’il vous faut.

Après tout, une interface utilisateur attrayante et cohérente est le vendeur silencieux, n’est-ce pas ? Examinons maintenant en profondeur les cinq composants essentiels de l’interface utilisateur Telerik pour ASP.NET Core qui vous aideront à accélérer et à normaliser le développement de votre interface utilisateur.

1. Grille

Quel est le composant d’interface utilisateur le plus complexe auquel vous puissiez penser ? Je parie que vous pensiez à « la Grille ». Oui, le développer à partir de zéro peut prendre des mois et le maintenir encore plus… sans parler du moment où de nouvelles fonctionnalités doivent être ajoutées. Voyons comment nous pouvons vous aider.

Interface utilisateur Telerik pour Grille de données ASP.NET Core control est un composant rapide et riche en fonctionnalités qui peut à la fois gérer facilement de gros volumes de données grâce à la pagination, à la virtualisation et au défilement infini, et les visualiser et les manipuler d’une manière qui a du sens pour l’utilisateur. Vous pouvez choisir les fonctionnalités à utiliser et personnaliser complètement le composant en fonction de vos besoins.

Regardez la capture d’écran ci-dessous. Il présente certaines des fonctionnalités essentielles de l’interface utilisateur de Telerik pour ASP.NET Core telles que la pagination, le tri, le filtrage, le regroupement, l’exportation vers Excel, l’exportation au format PDF, le panneau de recherche, la sélection de cases à cocher, etc., dont la plupart peuvent être activées avec une simple propriété. .

Voyons maintenant un scénario d’implémentation typique pour démontrer à quel point il est facile de travailler avec le composant. Dans cette capture d’écran, vous pouvez voir quelques fonctionnalités intégrées populaires, notamment les opérations de tri, de pagination et de regroupement des données.

Et tout ce dont vous avez besoin est le code suivant :

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
    .Name("Grid")
    .Columns(columns =>
    {
            columns.Bound(p => p.ProductName)
            .ClientTemplate(
                @"<div class="product-photo"
                    style="background-image: url(" + @Url.Content("~/shared/web/foods/#:data.ProductID#.jpg") + ");"></div><div class="product-name">#: ProductName #</div>").Title("Product Name").Width(320);
            columns.Bound(p => p.UnitPrice).Title("Unit Price").Width(150);
            columns.Bound(p => p.UnitsInStock).Title("Units In Stock").Width(150).MinScreenWidth(800);
            columns.Bound(p => p.Category.CategoryName).EditorTemplateName("ClientCategoryEditor").ClientTemplate("#=templateCell(data)#").Width(180);
            columns.Bound(p => p.UnitsOnOrder).Title("Units On Order").Width(150).MinScreenWidth(800);
            columns.Bound(p => p.Discontinued).Width(130);
            columns.Command(command => command.Destroy()).Width(160);
    })
    .ToolBar(toolbar =>
    {
        toolbar.Create();
        toolbar.Save();
    })
    .Editable(editable => editable.Mode(GridEditMode.InCell))
    .Pageable()
    .Navigatable()
    .Sortable()
    .Groupable()
    .Filterable()
    .Scrollable()
    .Events(events => events.Sort("onSort"))
    .DataSource(dataSource => dataSource
        .Ajax()
        .Batch(true)
        .PageSize(20)
        .ServerOperation(false)
        .Events(events => events.Error("error_handler"))
        .Model(model =>
        {
            model.Id(p => p.ProductID);
            model.Field(p => p.ProductID).Editable(false);
            model.Field(p => p.Category).DefaultValue(
                ViewData["defaultCategory"] as Kendo.Mvc.Examples.Models.CategoryViewModel);
        })
        .Create("Products_Create", "Grid")
        .Read("Products_Read", "Grid")
        .Update("Products_Update", "Grid")
        .Destroy("Products_Destroy", "Grid")
    )
)
<script type="text/javascript">
        function error_handler(e) {
            if (e.errors) {
                var message = "Errors:\n";
                $.each(e.errors, function (key, value) {
                    if ('errors' in value) {
                        $.each(value.errors, function() {
                            message += this + "\n";
                        });
                    }
                });
                alert(message);
            }
        }
        function templateCell(data) {
            var template = "";
            if (data.dirtyFields.Category) {
                template += "<span class="k-dirty"></span>"
            }
            template += data.Category.CategoryName;
            return template;
        }
        
        function onSort(e) {
            var gridData = e.sender.dataSource.data()
            gridData.forEach(function (element) {
                if (!element.ProductName) {
                    e.preventDefault()
                }
            });
        }
    </script>
<style>
    .product-photo {
        display: inline-block;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background-size: 32px 35px;
        background-position: center center;
        vertical-align: middle;
        line-height: 32px;
        box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
        margin-left: 5px;
    }
    .product-name {
        display: inline-block;
        vertical-align: middle;
        line-height: 32px;
        padding-left: 3px;
    }
    .k-grid-content td {
        position: relative;
    }
</style>

Découvrez le Démo complète de l’interface utilisateur Telerik pour ASP.NET Core Grid ici.

Pour couvrir des scénarios plus avancés, vous pouvez explorer l’interface utilisateur Telerik pour ASP.NET Core Grille Pivotante et Grille Pivot v.2.

Vous souhaitez en savoir plus ?

2. Graphiques

Pensez un instant au nombre de domaines et d’industries qui utilisent les graphiques comme composant visuel indispensable pour les sites Web et les applications. Beaucoup, non ? Vérifiez votre application de fitness : elle suit vos mesures à l’aide d’un graphique, il en va de même pour les plans tarifaires, les rapports mensuels, etc. De nos jours, la visualisation est omniprésente.

Interface utilisateur Telerik pour Graphiques de base ASP.NET La bibliothèque comprend un large éventail de types de graphiques, des simples graphiques à barres aux graphiques financiers et scientifiques sophistiqués. Chaque série de graphiques est hautement personnalisable, vous aidant à comprendre facilement les tendances des données grâce à des représentations visuelles convaincantes.

Ci-dessous vous pouvez voir un exemple de graphique boursier utilisé pour visualiser l’évolution du prix d’un instrument financier sur une période spécifique.

Comment créer ce graphique ? Il vous suffit d’utiliser le code suivant :

<div class="demo-section wide">
    @(Html.Kendo().StockChart<Kendo.Mvc.Examples.Models.StockDataPoint>()
        .Name("stockChart")
        .Title("The Boeing Company \n (NYSE:BA)")
        .DataSource(ds => ds.Read(read => read
            .Action("_BoeingStockData", "Financial")
        ))
        .DateField("Date")
        .Series(series =>
        {
            series.Candlestick(s => s.Open, s => s.High, s => s.Low, s => s.Close);
        })
        .Navigator(nav => nav
            .Series(series =>
            {
                series.Area(s => s.Close);
            })
            .Select(
                DateTime.Parse("2009/02/05"),
                DateTime.Parse("2011/10/07")
            )
        )
    )
</div>

Démarrer avec Telerik UI pour ASP.NET Core Charts est simple. Consultez les ressources suivantes pour bien démarrer :

3. Planificateur (calendrier des événements)

Dans quel monde dynamique vivons-nous, n’est-ce pas ? La seule façon de gérer votre temps est de le suivre correctement, et c’est pourquoi un grand nombre d’applications Web nécessitent une planification, également appelée composant de calendrier d’événements.

De la gestion des réunions, des rendez-vous et des événements à la réservation d’un créneau horaire, l’interface utilisateur de Telerik pour Planificateur ASP.NET Core le contrôle vient à la rescousse.

Avec quelques lignes de code, vous pouvez couvrir même les exigences de planification les plus complexes, y compris des cas d’utilisation tels que les conversions de fuseaux horaires, la visualisation des ressources, le regroupement, l’édition, les événements en cours et récurrents.

Voici un exemple de vue de calendrier classique créée avec l’interface utilisateur Telerik pour ASP.NET Core Scheduler :

Et voici le code dont vous avez besoin pour son implémentation :

@using Kendo.Mvc.UI

<script id="event-template" type="text/x-kendo-template">
    <div class="template-container">
        # if (Image) { #
        <img alt="Telerik UI for ASP.NET Core Scheduler #: title # icon" src="@Url.Content("~/shared/web/scheduler/" + "#= Image #")" style="height:25px; width: 25px;" />
        # } #
        <h3 class="template-title-#= resources[0].value #">#: title #</h3>
    </div>
</script>
@(Html.Kendo().Scheduler<Kendo.Mvc.Examples.Models.Scheduler.Activity>()
    .Name("scheduler")
    .Date(new DateTime(2020, 10, 4))
    .StartTime(new DateTime(2020, 10, 4, 7, 00, 00))
    .EndTime(new DateTime(2020, 10, 4, 20, 00, 00))
    .Height(600)
    .EventTemplateId("event-template")
    .Views(views =>
    {
        views.DayView();
        views.WeekView(week =>
        {
            week.Selected(true);
        });
        views.WorkWeekView();
        views.MonthView();
        views.AgendaView();
    })
    .Resources(resource =>
    {
        resource.Add(m => m.Attendee)
        .Title("Attendee")
        .DataTextField("Text")
        .DataValueField("Value")
        .DataColorField("Color")
        .BindTo(new[] {
            new { Text = "Jason", Value = 1, Color = "#eaf8ff" },
            new { Text = "Maddie", Value = 2, Color = "#fdfdf4" }
        });
    })
    .DataSource(d => d
        .Model(m =>
        {
            m.Id(f => f.ID);
            m.Field(f => f.Title).DefaultValue("No title");
            m.Field(f => f.Attendee).DefaultValue(1);
        })
        .Read("Overview_Read", "Scheduler")
        .Create("Overview_Create", "Scheduler")
        .Destroy("Overview_Destroy", "Scheduler")
        .Update("Overview_Update", "Scheduler")
    )
)
<style>
    .template-container {
        margin-top: -8px;
    }
    .template-container img {
        float: left;
        margin: 0 4px;
        margin-right: 10px;
    }
    .template-container h3 {
        padding: 0 4px 4px;
        font-size: 12px;
        font-weight: 600;
        margin-right: 14px;
    }

    .template-title-1 {
        color: #65CCFF;
    }

    .template-title-2 {
        color: #D0D03B;
    }

    .k-event .k-i-reload,
    .k-event .k-i-non-recurrence {
        display: none;
    }
</style>

Pour des scénarios encore plus avancés, vous pouvez utiliser le Interface utilisateur Telerik pour ASP.NET Core GanttChart composant.

Vous souhaitez en savoir plus ?

4. Visionneuse PDF

Si vous devez inclure un PDF dans votre application ASP.NET Core, nous avons la clé pour le faire sans problème.

L’interface utilisateur Telerik pour Visionneuse PDF ASP.NET Core offre non seulement le moyen le plus simple de gérer les fichiers PDF, mais constitue également la meilleure alternative à la visionneuse PDF du navigateur. Pourquoi? Parce que la visionneuse PDF du navigateur s’ouvrira toujours dans un nouvel onglet, supprimant l’utilisateur du flux de candidature.

De plus, l’UX changera d’utilisateur à utilisateur, en fonction du navigateur qu’il utilise. Sans parler de la variété des options de conception et de personnalisation.

Et le meilleur, c’est qu’il est très simple à utiliser, avec seulement quelques lignes de code. Regardez l’exemple ci-dessous :

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.js"></script>
<script>
    window.pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.worker.js';
</script>

<div id="example">
    @(Html.Kendo().PDFViewer().Name("pdfviewer")
        .PdfjsProcessing(pdf => pdf.File(Url.Content("~/shared/web/pdfViewer/sample.pdf")))
        .Height(1200)
    )
</div>

<style>
    html body #pdfviewer {
        width: 100% !important;
    }
</style>

Saviez-vous que le PDF Viewer fait également partie des composants Smart (AI) dans l’interface utilisateur Telerik pour ASP.NET Core ?

L’assistant PDFViewer basé sur l’IA s’appuie sur la technique de génération augmentée par récupération (RAG) qui vous permet de discuter avec vos documents et de résumer, expliquer ou répondre à des questions en fonction du contexte de vos propres données. C’est pas cool ?

Démarrer avec Telerik UI pour ASP.NET Core PDFViewer est un jeu d’enfant. Consultez les ressources suivantes pour bien démarrer :

5. Liste déroulante

Vous souhaitez économiser de l’espace et afficher les options uniquement en cas de besoin ? Le choix évident consiste à utiliser une liste déroulante. Il améliore également l’expérience utilisateur en proposant un ensemble d’éléments prédéfinis comme un genre de film, une saveur de glace ou une taille de chaussette parmi laquelle choisir. Super!

Où est le piège ? Une liste déroulante fonctionnelle et bien stylisée est difficile à mettre en œuvre… généralement, un concepteur crée l’apparence, un utilisateur frontend implémente la conception et un développeur backend configure la liaison des données. Une grosse surcharge, non ?

Interface utilisateur Telerik pour Liste déroulante ASP.NET Core propose la solution en fournissant une liste déroulante rapide à configurer, conditionnée dans les wrappers HtmlHelper et TagHelper. Il couvre pratiquement tout : la liaison de données flexible, la virtualisation, les listes en cascade, la personnalisation de l’apparence via des modèles, des événements, la validation, l’accessibilité, l’intégration facile avec d’autres contrôles ASP.NET Core, la prise en charge de RTL et la navigation au clavier.

Voici un scénario classique dans lequel vous pouvez lier le composant à une liste de valeurs et sélectionner parmi les options disponibles :

Et voici le code dont vous aurez besoin :

<div class="k-d-flex k-justify-content-center" style="padding-top: 54px;">
    <div class="k-w-300">
        <h4 style="text-align: center;">Customize your Kendo Cap</h4>
        <div id="cap" class="black-cap"></div>
        <br />
        <br />
        <label for="color">Cap Color:</label>
        @(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%" })
        )
        <br />
        <br />
        <label for="size">Cap Size:</label>
        @(Html.Kendo().DropDownList()
              .Name("size")
              .BindTo(new List<string>() {
                  "S - 6 3/4\"",
                  "M - 7 1/4\"",
                  "L - 7 1/8\"",
                  "XL - 7 5/8\""
              })
             .HtmlAttributes(new { style = "width: 100%" })
        )
        <button class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md" id="get" style="margin-top: 2em; float: right;">Customize</button>
    </div>
</div>
<style>
    #cap {
        width: 242px;
        height: 225px;
        margin: 20px auto;
        background-image: url('@Url.Content("~/shared/web/dropdownlist/cap.png")');
        background-repeat: no-repeat;
        background-color: transparent;
    }
    .black-cap {
        background-position: 0 0;
    }
    .grey-cap {
        background-position: 0 -225px;
    }
    .orange-cap {
        background-position: 0 -450px;
    }
</style>

<script>
    function change() {
        var value = $("#color").val();
        $("#cap")
                .toggleClass("black-cap", value == 1)
                .toggleClass("orange-cap", value == 2)
                .toggleClass("grey-cap", value == 3);
    };

    $(document).ready( function () {
        $("#get").click(function () {
            var color = $("#color").data("kendoDropDownList"),
                size = $("#size").data("kendoDropDownList");

            alert('Thank you! Your Choice is:\n\nColor ID: ' + color.value() + ' and Size: ' + size.value());
        });
    });
</script>

Voici quelques ressources pour démarrer facilement avec l’interface utilisateur Telerik pour ASP.NET Core DropDownList :

Bonus : Progress Telerik REPL pour ASP.NET Core

Télérik REPL pour ASP.NET Core est un terrain de jeu gratuit pour créer, exécuter, enregistrer et partager des extraits de code et des exemples dans le confort de votre navigateur. Accélérez la création de projets en jouant avec des composants prédéfinis, en éditant des démos sur place et en enregistrant et partageant votre travail.

Résumé

« Comment puis-je construire ça? » n’a dit personne après avoir essayé Interface utilisateur Telerik pour ASP.NET Core. Créer une excellente UX est facilité grâce à notre concentration unique sur la conception et les outils associés. Associé au meilleur support du secteur, à une documentation détaillée et à une bibliothèque complète de ressources d’apprentissage, vous disposez de tout ce dont vous avez besoin pour augmenter la productivité et accélérer le développement.

Ne nous croyez pas sur parole…essayez Telerik UI pour ASP.NET Core gratuitement pendant 30 jours et accédez à une assistance professionnelle tout en le vérifiant. Essayez-le et voyez par vous-même à quel point il est facile de créer de superbes applications ASP.NET Core.

Essayez maintenant