Fermer

juin 18, 2020

Interface utilisateur Telerik pour ASP.NET MVC Wizard et composants Pager


Son juin et le temps pour une autre version forte de Telerik UI pour ASP.NET MVC qui comprend deux nouveaux composants — Wizard et Pager — plus un nouveau modèle de projet Visual Studio Dashboard et de nombreuses nouvelles améliorations. Lisez la suite pour voir les nouveautés de la dernière version de Interface utilisateur Telerik pour ASP.NET MVC !

Nouvelle interface utilisateur pour les composants MVC ASP.NET

Nouvelle interface utilisateur pour le composant Assistant MVC ASP.NET [19659004] Présentation des composants de l'assistant

Le nouvel assistant Telerik UI pour ASP.NET MVC vous permet de créer facilement des processus en plusieurs étapes et de simplifier les tâches de saisie des utilisateurs pendant les trajets. Chaque étape de l'assistant peut avoir son propre contenu (formulaire ou autre HTML), 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 incluses dans le processus.

 Présentation de l'assistant Telerik UI pour ASP.NET MVC "title =" Présentation de l'assistant Telerik UI pour ASP.NET MVC "/></p data-recalc-dims=

Interface utilisateur Telerik pour ASP.NET MVC Composant de l'assistant

Initialisation du composant de l'assistant

À ajoutez l'Assistant dans vos applications ASP.NET MVC donnez-lui simplement un nom et ajoutez le nombre d'étapes et de contenu requis, comme indiqué dans l'exemple de code ci-dessous:

@ (Html.Kendo () .Wizard ()

.Name ( "wizard" )

.Etapes (s => {

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

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

s.Add (). Contenu ( "Étape finale" );

})

)

Intégration des formulaires des composants de l'assistant

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

 Assistant Telerik UI pour ASP.NET MVC et intégration de formulaire "title =" Interface utilisateur Telerik pour ASP.NET MVC Wizard et intégration de formulaire "/></p data-recalc-dims=

Assistant Telerik UI pour ASP.NET MVC et intégration de formulaire

Un exemple partiel sur la façon d'intégrer le composant Form se trouve dans la section de code ci-dessous (pour plus de détails, consultez le formulaire Wizard démo).

@ (Html.Kendo (). Wizard ()

.Name ( "wizard" )

.Events (ev => ev. Terminé ( "onDone" ))

.Tag ( "form" )

.Steps (s =>

{

s.Add ()

.Titre ( "Registration" )

.Form (f => f

.Validatable (v =>

{

v.ValidateOnBlur ( true );

v.ValidationSummary (vs => vs. Activer ( false ));

})

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

.Items (items =>

{

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

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

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

items.Add (). Champ ( "DateOfBirth" ). Label (label => label.Text ( "DateOfBirth:" ). Facultatif ( true ));

[19659066]})

)

)

Afin de faciliter les scénarios où les formulaires sont intégrés dans l'assistant, l'interface utilisateur Telerik pour ASP.NET MVC Wizard peut être initialisé à partir d'un élément

ou

. La configuration se fait via l'option de configuration. Tag () .

@ (Html.Kendo (). Wizard ()

.Name ( "wizard" [19659016)])

.Tag ( "forme" )

.ValidateForms ( true )

.Étapes (s => {…}

)

Assistant de chargement de contenu

Vous pouvez charger le contenu dans les étapes de l'assistant de plusieurs façons:

  1. Utilisation de la prise en charge intégrée pour le chargement asynchrone de contenu à distance URL via l'option de configuration ContentUrl (chargement des données avec AJAX)
  2. Chargement du contenu local via la configuration de formulaire intégrée
  3. Chargement du contenu HTML local

Options de disposition des composants de l'assistant [19659159] À l'aide de l'option ContentPosition, la disposition de l'assistant peut être configurée dans l'un des trois modes de rendu suivants: un Stepper dans une orientati au-dessus du contenu de l'assistant, vertical gauche ou vertical à droite du contenu de l'étape Wizard .

@ (Html.Kendo (). Wizard () [Wizard90)

. Nom ( "wizard" )

.ContentPosition (WizardContentPosition.Right)

.Steps (s => {…}

)

 Telerik UI for ASP.NET MVC Stepper Right Orientation "title =" Interface utilisateur Telerik pour ASP.NET MVC Stepper Right Orientation "/> <br data-recalc-dims= Interface utilisateur Telerik pour ASP.NET MVC Wizard — Position verticale droite de Stepper

Assistant Accessibilité des composants et navigation au clavier

L'Assistant a une navigation par 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 standard des normes d'accessibilité telles que WCAG, Section 508 et WAI-ARIA, qui permettent aux utilisateurs handicapés d'utiliser facilement Telerik Wizard.

Nouvelle interface utilisateur pour ASP.NET MVC Pager Component

Présentation du composant Pager

L'interface utilisateur Telerik pour ASP.NET MVC Pager est un composant UI autonome réactif qui permet de diviser le contenu 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 MVC Pager Component -Themes "title =" Interface utilisateur Telerik pour ASP.NET MVC Pager Component -Themes "/></p data-recalc-dims=

Telerik UI pour ASP.NET MVC Pager Component

Utilisation du composant Pager

Pour ajouter le composant Pager à vos applications MVC, vous devez définir une source de données autonome et la transmettre par nom au Pager et au contrôle lié aux données qui l'utilisera, comme illustré dans l'exemple ci-dessous: [19659012] @ (Html.Kendo (). DataSource ()

.Name ( "dataSource1" )

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

)

@ (Html.Kendo ( ) .Pager ()

.Name ( "pager" )

.DataSource ( "dataSource1" )

.PageSizes ( true )

)

Paramètres et options de configuration du pager

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

.Numeric ( true ) // default

.Input ( true )

De plus, vous avez le contrôle sur les éléments Pager intégrés qui sont à rendre :

  • PageSizes () - rend la liste déroulante qui permet à l'utilisateur de modifier la taille de la page
  • Actualiser () - rend un bouton d'actualisation
  • PreviousNext () - bascule la visibilité des boutons pour naviguer vers les première, dernière, précédente et pages suivantes
  • Info () - bascule la visibilité des informations du pager actuel

Localisation intégrée du composant Pager

L'interface utilisateur pour ASP.NET MVC Le composant Pager a un support de localisation intégré, ce qui rend il est facile de traduire des messages tels que: le texte des info-bulles pour sa page et ses liens de navigation, le texte d'information et les étiquettes dans n'importe quelle langue dont votre application peut avoir besoin.

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

Pour ceux d'entre vous qui construisent une application semblable à un 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 mettez à jour votre version Telerik UI pour ASP.NET MVC avec le dernier package, vous pouvez créer un nouveau projet et choisissez le nouveau modèle de tableau de bord dans l'Assistant Créer un nouveau projet Telerik.

 Modèle Telerik UI pour ASP.NET MVC VS Project Dashboard "title =" Interface utilisateur Telerik pour ASP.NET MVC VS Project Dashboard Template "/ ></p data-recalc-dims=

Telerik U Modèle de projet de tableau de bord I pour ASP.NET MVC

Prochaines étapes dans l'interface utilisateur Telerik pour ASP.NET MVC dans R3 2020

Consultez la page Interface utilisateur Telerik pour ASP.NET MVC et voyez ce que nous préparons déjà la version R3 2020 prévue pour septembre. Non seulement vous aurez un aperçu de nos composants et fonctionnalités pipeline pour Telerik UI pour ASP.NET MVC, 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 MVC

Nous tenons à remercier pour le support continu et vous encourageons à télécharger une version d'essai gratuite de Telerik UI pour ASP.NET MVC, ou si vous êtes un détenteur de licence actif, vous pouvez simplement récupérer la dernière et la meilleure sur la page Votre compte!

Joyeux codage ASP.NET MVC!





Source link