Utilisation de l’interface utilisateur Telerik pour Blazor Forms et TileLayout

Le puissant composant TileLayout de Telerik UI pour Blazor vous permet de créer des tableaux de bord personnalisables pour vos utilisateurs et d’enregistrer et de restaurer une mise en page.

Amélioration des applications Web à l’aide de l’interface utilisateur Telerik pour Blazor et C#

Blazor est un framework de pointe conçu pour le développement d’applications Web utilisant la syntaxe C# et Razor. L’une de ses fonctionnalités les plus distinctives est Blazor Forms, un composant intégré offrant une prise en charge étendue des formulaires, comme un processus d’inscription ou l’obtention de commentaires d’utilisateurs via des commentaires sur un site Web.

Ce qui rend Blazor Forms exceptionnellement attrayant, c’est sa déployabilité sous forme de fichiers statiques, semblable à React, tout en tirant parti des packages NuGet. Cette fonctionnalité polyvalente et la possibilité d’utiliser les mêmes composants côté client et côté serveur en font un outil hautement souhaitable pour les développeurs. Blazor inclut également une prise en charge intrinsèque du routage, des validations et de la gestion des formulaires.

Blazor Forms va au-delà des formes traditionnelles de multiples manières. L’un de ses avantages significatifs est son fonctionnement dans un environnement sandbox sécurisé avec mémoire, ce qui se traduit par une exécution rapide similaire aux applications natives. Vous bénéficiez de l’assistance nécessaire pour créer des formulaires riches et complexes avec une validation flexible de manière très efficace. Il en résulte un système complet et maintenable pour la création de formulaires.

Interface utilisateur Telerik pour les formulaires Blazor

Pour faire passer vos Blazor Forms au niveau supérieur, Progressez Interface utilisateur Telerik pour Blazor fournit une excellente amélioration dans son Formulaire composant. Bibliothèque d’interface utilisateur de qualité professionnelle avec plus de 100 composants natifs, Telerik UI est idéale pour créer des applications modernes et riches en fonctionnalités.

Le composant Telerik UI pour Blazor Form facilite la génération et la personnalisation de formulaires basés sur le modèle spécifique de l’utilisateur. Ce composant offre un contrôle substantiel via divers paramètres et permet l’utilisation d’éditeurs par défaut et personnalisés.

L’intégration de Telerik UI pour Blazor avec Blazor Forms apporte une grande flexibilité et personnalisation. Cette puissante combinaison permet aux développeurs de créer des formulaires hautement personnalisés et conviviaux pour leurs applications Web, renforçant ainsi l’attrait de Blazor dans le développement Web moderne.

Nous avons ici un exemple de code du modèle d’application CRUD :

<TelerikForm Model="@person" OnValidSubmit="@HandleValidSubmit" class="k-form">
  <FormValidation>
    <DataAnnotationsValidator></DataAnnotationsValidator>
  </FormValidation>
  <FormItems>
    <FormGroup LabelText="User Details">
      <FormItem Field="@nameof(Person.FirstName)"
        EditorType="@FormEditorType.TextBox"
        LabelText="First name *">
      </FormItem>
      <FormItem Field="@nameof(Person.LastName)"
        EditorType="@FormEditorType.TextBox"
        LabelText="Last name *">
      </FormItem>
      <FormItem>
        <Template>
          <label for="country">Gender (optional):</label>
          <TelerikDropDownList @bind-Value="@person.Gender" DefaultText="Select gender"
            Data="@genders" TextField="Text" ValueField="Id"
            Width="100%" Id="GenderDDL">
              <DropDownListSettings>
                <DropDownListPopupSettings Height="auto"></DropDownListPopupSettings>
              </DropDownListSettings>
            </TelerikDropDownList>
          </Template>
      </FormItem>
      <FormItem Field="@nameof(Person.Email)"
          EditorType="@FormEditorType.TextBox"
          LabelText="Email">
      </FormItem>
    </FormGroup>
    <FormGroup LabelText="Team Preferences">
      <FormItem Field="@nameof(Person.StartDate)"
          EditorType="@FormEditorType.DatePicker"
          LabelText="Start date">
      </FormItem>
      <FormItem>
        <Template>
          <label for="country">Preferred Team *</label>
          <TelerikDropDownList @bind-Value="@person.PreferredTeam"
            DefaultText="Preferred team" Id="TeamDDL"
            Data="@Teams" Width="100%">
          </TelerikDropDownList>
        </Template>
      </FormItem>
    </FormGroup>
  </FormItems>
  <FormButtons>
    <TelerikButton ButtonType="ButtonType.Button" OnClick="@CancelForm">Cancel</TelerikButton>
    <TelerikButton ButtonType="@ButtonType.Submit" ThemeColor="primary">Submit</TelerikButton>
  </FormButtons>
</TelerikForm>

@if (ShowSuccessMessage)
{
<div class="alert alert-info">
  Application form submitted Successfully, we will get back to you
</div>
}

Voici le résultat de l’interface utilisateur :

Ce didacticiel utilise le thème Material-main.

Interface utilisateur Telerik pour Blazor TileLayout

Le Disposition des tuiles Le composant de Telerik UI pour Blazor est basé sur une grille CSS bidimensionnelle et affiche son contenu sous forme de tuiles. Vous pouvez faire glisser et réorganiser, en redimensionnant les vignettes avec plusieurs lignes et colonnes pour créer des tableaux de bord personnalisables pour vos utilisateurs.

Pour configurer le composant TileLayout, configurez la largeur, la hauteur, la largeur de colonne ou la hauteur de ligne pour définir les dimensions souhaitées de la mise en page et la taille de base de chaque tuile. Vous pouvez également définir les paramètres Redimensionnable et Réorganisable pour modifier la mise en page.

Ajouter <TileLayoutItem> instances à l’intérieur d’un <TileLayoutItems> balise, définissez le paramètre HeaderText de chaque vignette et ajoutez une balise imbriquée <Content> balise pour le contenu de la tuile.

Dans l’ensemble, le composant Blazor TileLayout est efficace et facile à configurer, offrant une expérience personnalisable et conviviale à vos utilisateurs.

Utiliser TileLayout par programmation

Enregistrez et restaurez les positions TileLayout en suivant ces étapes.

1. Créez votre projet Telerik UI pour Blazor.
2. Ajoutez une page Rasoir.
3. Utilisez NuGet et ajoutez le package Blazored.LocalStorage.

4. Ajoutez ce qui suit à votre Program.cs:

using Blazored.LocalStorage;
....
builder.Services.AddBlazoredLocalStorage();

5. Ajoutez à votre _Imports.razor:

@using Blazored.LocalStorage
@using Telerik.FontIcons
@using Telerik.SvgIcons

6. Ajoutez en haut de votre formulaire :

@inject Blazored.LocalStorage.ILocalStorageService LocalStorage
@inject IJSRuntime JsInterop

7. Ajoutez à vos boutons :

<TelerikButton OnClick="@SaveState" Icon="@FontIcon.Save" Class="mr-sm">Save State</TelerikButton>
<TelerikButton OnClick="@ReloadPage" Icon="@FontIcon.ArrowRotateCw" Class="mr-sm">Reload the page</TelerikButton>
<TelerikButton OnClick="@LoadState" Icon="@FontIcon.Download" Class="mr-sm">Load last State</TelerikButton>
<TelerikButton OnClick="@SetExplicitState" Icon="@FontIcon.Gear" Class="mr-sm">Configure State</TelerikButton>

8. Ajoutez vos tuiles comme vous le souhaitez :

<TelerikTileLayout @ref="@TileLayoutInstance"
  Columns="3"
  Resizable="true"
  Reorderable="true">
    <TileLayoutItems>
      <TileLayoutItem HeaderText="Panel 1"></TileLayoutItem>
      <TileLayoutItem HeaderText="Panel 2"></TileLayoutItem>
      <TileLayoutItem HeaderText="Panel 3" RowSpan="2">
        <Content>The tiles in this demo have little content intentionally so you can focus on the state. You can put any content and components in them.</Content>
      </TileLayoutItem>
      <TileLayoutItem HeaderText="Panel 4" ColSpan="2" RowSpan="2">
        <Content>Try resizing and moving me around, for example, then click the buttons above.</Content>
      </TileLayoutItem>
      <TileLayoutItem HeaderText="Panel 5"></TileLayoutItem>
    </TileLayoutItems>
</TelerikTileLayout>

9. Ajoutez le code suivant pour enregistrer et restaurer TileLayouts :

@code {
        TelerikTileLayout TileLayoutInstance { get; set; }
        TileLayoutState SavedState { get; set; }
 
        string stateStorageKey = "TelerikBlazorTileLayoutStateDocsKey";
 
        async Task SaveState()
        {
            
            var state = TileLayoutInstance.GetState();
 
            await LocalStorage.SetItemAsync (stateStorageKey, state);
        }
 
        async Task LoadState()
        {
            TileLayoutState storedState = await LocalStorage.GetItemAsync<TileLayoutState>(stateStorageKey);
 
            if (storedState != null)
            {
                
                TileLayoutInstance.SetState(storedState);
            }
        }
 
        void ReloadPage()
        {
            JsInterop.InvokeVoidAsync("window.location.reload");
        }
 
        async void SetExplicitState()
        {
            await LocalStorage.RemoveItemAsync (stateStorageKey);
            TileLayoutState desiredState = GetDefaultDemoState();
 
            
            TileLayoutInstance.SetState(desiredState);
        }
 
        
        protected override async Task OnAfterRenderAsync(bool firstRender)
        {
            var state = await LocalStorage.GetItemAsync<TileLayoutState>(stateStorageKey);
1.	            if (state != null && TileLayoutInstance != null)
            {
                TileLayoutInstance.SetState(state);
            }
        }
 
        TileLayoutState GetDefaultDemoState()
        {
            
            TileLayoutState defaultDemoState = new TileLayoutState()
            {
                ItemStates = new List<TileLayoutItemState>()
                {
                new TileLayoutItemState { Order = 1, ColSpan = 1, RowSpan = 1 },
                new TileLayoutItemState { Order = 2, ColSpan = 1, RowSpan = 1 },
                new TileLayoutItemState { Order = 3, ColSpan = 1, RowSpan = 2 },
                new TileLayoutItemState { Order = 4, ColSpan = 2, RowSpan = 2 },
                new TileLayoutItemState { Order = 5, ColSpan = 1, RowSpan = 1 },
                }
            };
            return defaultDemoState;
        }
    }

Voici le résultat pour ce code :

Conclusion

Telerik UI for Blazor est un framework de pointe pour le développement d’applications Web utilisant la syntaxe C# et Razor. Il fournit une prise en charge étendue des formulaires grâce à son composant Blazor Forms intégré.

Telerik UI for Blazor est une bibliothèque d’interface utilisateur de qualité professionnelle qui améliore Blazor avec plus de 100 composants natifs. L’un des composants uniques de la suite Telerik UI est le composant Form, qui facilite la génération et la personnalisation des formulaires. Le puissant composant TileLayout vous permet de créer des tableaux de bord personnalisables pour vos utilisateurs et d’enregistrer et de restaurer une mise en page.

Blazor Forms vous offre un degré élevé de flexibilité et de personnalisation, vous permettant ainsi de créer des formulaires hautement personnalisés et conviviaux pour les applications Web.

À tout moment, vous pouvez appeler l’équipe d’assistance légendaire de Telerik, même en période d’essai, pour vous guider vers la solution dont vous avez besoin. Essayez-le aujourd’hui.

Les références