Fermer

juin 18, 2020

Assistant Telerik UI ASP.NET Core et pager, aperçu 5 .NET 5.0Une minute de lecture

DotNetT2 Dark_1200x303


Juste un mois après la sortie R2 2020 de Telerik UI pour ASP.NET Core, nous sommes heureux de partager une autre mise à jour qui comprend deux nouveaux composants, Wizard et Pager, ainsi qu'un nouveau modèle de projet Visual Studio Dashboard, compatible avec. NET 5 preview 5 et de nombreuses nouvelles améliorations. Lisez la suite et découvrez les points forts de la dernière version de Interface utilisateur Telerik pour ASP.NET Core !

Compatibilité avec les versions d'aperçu de .NET 5.0

Nous poursuivons nos efforts pour rester à jour avec toutes les mises à jour par Microsoft dans les versions d'aperçu de .NET 5.0 jusqu'à sa sortie officielle plus tard cette année en novembre. Nous sommes heureux de partager que la dernière version de Telerik UI pour ASP.NET Core est compatible avec. Aperçu de 5.0 5.0 5 .

Nouvelle interface utilisateur pour les composants ASP.NET Core

Nouvelle interface utilisateur pour Composant de l'Assistant ASP.NET Core

Présentation du composant de l'Assistant

La nouvelle interface utilisateur Telerik pour ASP.NET Core Wizard vous permet de décomposer facilement les processus longs en plusieurs étapes et de simplifier les tâches de saisie des utilisateurs en leur exposant une seule forme à la fois . Chaque étape de l'assistant peut avoir son propre contenu (formulaire ou autre HTML), est livré avec une validation de formulaire intégrée (via l'intégration des composants de formulaire) pour les données d'entrée et un indicateur de progression indiquant le nombre d'étapes restantes pour atteindre leur objectif final pour le processus .

 Telerik UI for ASP.NET Core Wizard Component "title =" Telerik UI for ASP.NET Core Wizard Component "/> </span data-recalc-dims=

Telerik UI for ASP.NET Core Wizard Component

Wizard Component Initialization HTML et TAG Helpers

Pour ajouter l'Assistant dans vos applications ASP.NET Core il suffit de l'initialiser en lui donnant un nom et en ajoutant le nombre d'étapes et de contenu requis, comme indiqué dans l'exemple de code ci-dessous:

@ (Html.Kendo (). Wizard ()

.Name ( "wizard" )

.Steps (s => {

[19659025] s.Add (). Contenu ( "Initial Step" );

s.Add (). Content ( "Second Step" );

] s.Add (). Contenu ( "Final Step" );

})

)

Pour ceux d'entre vous qui préfèrent utiliser les aides TAG plutôt que HTML assistants, vous pouvez directement brancher les et t ags pour configurer votre composant Wizard.

Wizard Component Integration Form

L'assistant Telerik UI for ASP.NET Core fournit une intégration simple mais puissante avec le composant Telerik UI for ASP.NET Core Form.

Chaque étape de l'Assistant peut accepter une méthode de configuration .Form () qui définit de nombreuses options prêtes à l'emploi (car elles sont disponibles dans le contrôle Form lui-même). Cela vous donne l'avantage d'avoir toutes les fonctionnalités disponibles dans le composant Form autonome de l'assistant.

 Telerik UI for ASP.NET Core Wizard Validation "title =" Telerik UI for ASP.NET Core Wizard Validation "/> <br data-recalc-dims= Interface utilisateur Telerik pour ASP.NET Core Intégration du composant Assistant avec le composant Form

Un exemple partiel sur la façon d'intégrer le composant Form peut être trouvé dans la section de code ci-dessous (pour plus de détails, consultez la démonstration du formulaire Wizard ).

@ (Html.Kendo (). Wizard ()

.Name ( "wizard" )

.Events (ev =>) ev.Done ( "onDone" ))

.Tag ( "form" )

.Steps (s =>

[19659019] {

s.Add ()

.Title ( "Registration" )

.Form (f => f

[19659073] .Validatabl e (v =>

{

v.ValidateOnBlur ( true );

v.ValidationSummary (vs => vs.Enable ([19659078] false ));

})

.FormData ([19659078] nouveau {Username = "johny" Email = "john.doe@email.com" Password = "pass123" DateOfBirth = String.Format ( "{0: jjj, jj MMM aaaa}" DateTime.Now)})

.Items (items =>

{[19659022] items.Add (). Field ( "Username" ). Label (label => label.Text ( "Username:" ));

[19659077] items.Add (). Field ( "Email" ). Label (label => label.Text ( "Email:" ));

items.Add (). Champ ( "Password" ). Label (label => label.Text ( "Password: ")). InputHtmlAttributes ( nouveau {@type = " mot de passe " }). Conseil (" Conseil: entrez uniquement des caractères alphanumériques. ") ;

items.Add (). Champ ( "DateOfBirth" ). Label (label => label.Text ( "DateOfBirth:" ). Facultatif ([19659078] vrai ));

})

)

]…

)

Afin de faciliter les scénarios d'intégration des formulaires dans l'assistant, l'interface utilisateur Telerik pour ASP. NET Core Wizard peut être initialisé à partir d'un élément

ou d'un élément

. La configuration est définie via l'option de configuration .Tag () .

@ (Html.Kendo (). Wizard ()

.Name ( "wizard" [19659021)])

.Tag ( "forme" )

.ValidateForms ( true )

.Steps (s => {…}

)

Assistant Composant Chargement du contenu

L'Assistant vous permet de charger le contenu des étapes de plusieurs façons : [19659164] Utilisation de la prise en charge intégrée pour le chargement asynchrone de contenu à partir d'URL distantes via l'option de configuration ContentUrl (chargement de données avec AJAX)

  • Chargement de contenu local via la configuration de formulaire intégrée
  • Chargement local Contenu HTML
  • Disposition des composants de l'assistant

    Vous pouvez configurer le rendu de la disposition de l'assistant en utilisant l'option ContentPosition sur l'un des trois: une steppe r dans une orientation horizontale au-dessus du contenu de l'Assistant, vertical gauche ou côté droit vertical du contenu de l'étape Assistant .

    @ (Html.Kendo (). Wizard ()

    .Name ( "magicien" )

    .ContentPosition (WizardContentPosition.Right)

    .Steps (s => {…}

    )

     Telerik UI pour ASP.NET Core Stepper Left Orientation "title =" Telerik UI pour ASP.NET Core Stepper Left Orientation "/></p data-recalc-dims=

    Telerik Assistant d'interface utilisateur pour ASP.NET Core - Position verticale gauche du moteur pas à pas

    Accessibilité des composants de l'assistant et navigation au clavier

    L'assistant a une navigation au clavier intégrée qui permettra une navigation et une interaction faciles avec les étapes et les entrées du composant à l'aide du clavier . Il est également livré avec une prise en charge prête à l'emploi pour les normes d'accessibilité telles que WCAG, Section 508 et les attributs WAI-ARIA, qui permettent aux utilisateurs handicapés d'utiliser facilement Telerik Wizard.

    Nouvelle interface utilisateur pour ASP.NET Core Pager Component

    Présentation du composant Pager

    L'interface utilisateur Telerik pour ASP.NET Core Pager est un composant d'interface utilisateur autonome réactif qui permet le fractionnement du contenu et sa visualisation en pages. Le composant Pager permet l'intégration avec d'autres composants d'interface utilisateur liés aux données qui n'ont pas de pagination intégrée comme ListView, et vous pouvez également l'utiliser pour paginer vos données dans des modèles!

     Interface utilisateur Telerik pour ASP.NET Core Pager Component "title =" Interface utilisateur Telerik pour ASP.NET Core Pager Component "/> </span data-recalc-dims=

    Interface utilisateur Telerik pour ASP.NET Core Pager

    ] Aide de pageur HTML ou assistant de balise

    Pour ajouter le pageur à vos applications à l'aide d'un assistant HTML, vous devez définir une source de données autonome et la transmettre par son nom au pageur et au contrôle lié aux données qui l'utilisera, comme illustré dans l'exemple ci-dessous:

    @ (Html.Kendo (). DataSource ()

    .Name ( "dataSource1" )

    .Ajax (t => t.Read (read => read.Action ( "People_Read" "Pager" )). PageSize (20) )

    ) [19659046]

    @ (Html.Kendo (). Pager ()

    .Name ( "pager" [19659021])

    .DataSource ( "dataSource1" )

    .PageSizes ( true )

    )

    Alternativement , vous pouvez utiliser l'option d'assistance TAG pratique:

    < kendo-datasource nom = "dataSource1" type = "DataSourceTagHelperType .Ajax " opération-serveur = " false ">

    < transport >

    < lire [19659222] url = "@ Url.Action (" TagHelper_Products_Read "," DataSource ")" />

    </ transport >

    </ kendo-datasource >

    < kendo-pager nom = "pager1" rafraîchir = [[19659020] "true" datasource-id = "dataSource1" page-tailles = "true" >

    </ kendo-pager >

    Configuration et paramètres du pager

    Le composant Pager peut être configuré pour afficher un nombre spécifique de boutons qui seront affiché dans une page numérique, ou acceptez la saisie utilisateur via son paramètre de type:

    .Numeric ( true ) // par défaut

    .Input ( true )

    De plus, vous avez le contrôle sur les éléments de pager intégrés qui seront rendus :

    • PageSizes () - rend la liste déroulante qui permet à l'utilisateur de modifier la taille de la page
    • Refresh () - affiche un bouton d'actualisation
    • PreviousNext () - bascule la visibilité des boutons pour naviguer vers la première, la dernière, la page précédente et la page suivante
    • Info () - bascule la visibilité des informations actuelles du téléavertisseur

    Localisation intégrée du pager

    L'interface utilisateur pour le composant Pager ASP.NET Core prend en charge la localisation intégrée, ce qui facilite la traduction de messages tels que: le texte des info-bulles de sa page et des liens de navigation, des informations texte et libellés dans toutes les langues dont votre application peut avoir besoin.

     Interface utilisateur Telerik pour localisation ASP.NET Core Pager

    Interface utilisateur Telerik pour localisation ASP.NET Core Pager

    ] Nouveau projet de modèle de tableau de bord Visual Studio

    Pour ceux d'entre vous qui créent une application de type tableau de bord, le nouveau modèle de projet de tableau de bord Visual Studio sera utile avec sa disposition prédéfinie et ses blocs de construction d'interface utilisateur.

    Une fois que vous aurez mis à jour votre interface utilisateur Telerik pour ASP. Version NET Core avec t Dans le dernier package, vous pouvez créer un nouveau projet et choisir le nouveau modèle de tableau de bord à partir de l'assistant de création de projet Telerik.

     Assistant de création de projet Telerik UI pour ASP.NET Core "title =" Interface utilisateur de Telerik pour ASP.NET Core Create Project Assistant "/></p data-recalc-dims=

     Telerik UI pour ASP.NET Core VS Project Dashboard Template" title = "Telerik UI pour ASP.NET Core VS Project Dashboard Template" /> <br data-recalc-dims= Telerik UI pour ASP.NET Core Dashboard Project Template [19659295] Quelles sont les prochaines étapes dans Telerik UI pour ASP.NET Core?

    Consultez la page Telerik UI pour ASP.NET Core et voyez ce que nous préparons déjà pour la version R3 2020 prévue pour septembre . Non seulement vous aurez un aperçu de nos composants et fonctionnalités pour Telerik UI pour ASP.NET Core, mais vous aurez toujours la possibilité de nous aider à améliorer la suite avec vos précieux commentaires .

    Téléchargez la dernière version de Telerik UI pour ASP.NET Core

    Nous tenons à remercier pour le support continu et vous encourageons à télécharger une version d'essai gratuite de Telerik UI pour ASP.NET Core, ou si vous êtes un titulaire de licence actif, vous pouvez simplement récupérer la dernière et la meilleure sur la page Votre compte! Partagez vos réflexions avec nous sur notre portail de commentaires et aidez-nous à façonner l'avenir de l'interface utilisateur pour ASP.NET Core.

    Joyeux codage ASP.NET Core!




    Source link

    0 Partages