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.

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

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

 @ (Html.Kendo (). Wizard () 
  .Name ( "wizard" [19659016)]) 
  .Tag ( "forme" ) 
  .ValidateForms ( true ) 
  .Étapes (s => {…} 
) 

 .Numeric (  true )  // default 
  .Input ( true )