Site icon Blog ARC Optimizer

Ajout d’un téléavertisseur de blazor à votre affichage de données

Ajout d’un téléavertisseur de blazor à votre affichage de données


Apprenez à implémenter le composant TelerikPager dans un projet Blazor pour ajouter facilement la pagination aux contrôles liés aux données tels que Grid et ListView.

Dans cet article, nous explorerons le Composant de téléavertisseur de blazor de progrès Telerik UI pour Blazor. Ce composant permet une pagination pour les commandes liées aux données telles que Grid et ListView, vous permettant d’afficher de nombreux éléments et de les paginer. Commençons!

Pour exploiter tout le potentiel du contrôle du pager du blazor, nous créerons un exemple simple simulant un magasin de vêtements. Suivez ces étapes pour configurer un premier exemple de test:

  1. Créer un nouveau projet de type Application Web Blazoret définissez le Mode de rendu interactif à Serveur et le Emplacement d’interactivité à Mondial.

  2. Suivre guide d’installation pour les contrôles Telerik dans des projets basés sur le blazor.

  3. Ajoutez la feuille de style pour les styles d’icônes dans le App.razor Fichier en fonction de votre configuration:


<link href="_content/Telerik.UI.for.Blazor/css/kendo-font-icons/font-icons.css" rel="stylesheet" />

<link href="_content/Telerik.UI.for.Blazor.Trial/css/kendo-font-icons/font-icons.css" rel="stylesheet" />


<link href="https://blazor.cdn.telerik.com/blazor/8.1.1/kendo-font-icons/font-icons.css" rel="stylesheet" type="text/css" />
  1. Aller au app.css fichier et ajouter les styles suivants à la fin du fichier:

:root {
    --primary-color: #0d6efd;
    --success-color: #198754;
}

.hero-section {
    background: linear-gradient(135deg, var(--primary-color), #0b5ed7);
    color: white;
    padding: 3rem 0;
    margin-bottom: 2rem;
    border-radius: 0 0 20px 20px;
}


.product-card {
    transition: all 0.3s ease;
    border: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
    overflow: hidden;
    border-radius: 10px;
}

    .product-card:hover {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
    }

.product-img {
    height: 200px;
    object-fit: contain;
    padding: 20px;
    background-color: #f8f9fa;
    transition: transform 0.3s ease;
}

.product-card:hover .product-img {
    transform: scale(1.05);
}

.product-price {
    color: var(--success-color);
    font-weight: bold;
    font-size: 1.2rem;
}

.category-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 12px;
    padding: 3px 8px;
    border-radius: 20px;
    background-color: var(--primary-color);
    color: white;
}

.rating-badge {
    background-color: #ffc107;
    color: #212529;
    font-size: 12px;
    padding: 3px 8px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
}
  1. Dans le dossier Composants, créez un sous-dossier appelé AppComponentset créez les composants de rasoir suivants:

HeroSection.razor:

<header class="hero-section">
    <div class="container text-center">
        <h1 class="display-4 fw-bold mb-3">@Title</h1>
        <p class="lead mb-0">@Subtitle</p>
    </div>
</header>

@code {
    [Parameter]
    public string Title { get; set; }
    [Parameter]
    public string Subtitle { get; set; }
}

ProductCard.razor:

@using PagerDemo.Models
@using Telerik.Blazor.Components

<TelerikCard Width="300px" Class="product-card h-100">    
    <div class="position-relative">
        <CardImage Src="@Product.image" Class="product-img"  />
        <span class="category-badge">@FormatCategory(Product.category)</span>
    </div>    
    <CardBody>
        <CardTitle>@TruncateTitle(Product.title)</CardTitle>
        <p class="card-text">
            <span class="product-price">$@Product.price</span>
            <span class="rating-badge ms-2">                
                <TelerikFontIcon Icon="@FontIcon.Star" /> @Product.rating?.rate
            </span>
        </p>
    </CardBody>
    
    <CardFooter Class="bg-white">
        <TelerikButton Class="btn btn-outline-primary w-100">
            <TelerikFontIcon Icon="@FontIcon.Cart" /> Add to Cart
        </TelerikButton>
    </CardFooter>
</TelerikCard>

@code {
    [Parameter]
    public Product Product { get; set; }

    private string FormatCategory(string category)
    {
        if (string.IsNullOrEmpty(category))
            return "";
        return string.Join(" ", category.Split(' ').Select(word => char.ToUpper(word[0]) + word.Substring(1)));
    }

    private string TruncateTitle(string title)
    {
        if (title.Length > 50)
            return title.Substring(0, 50) + "...";
        return title;
    }
}

Vous pouvez voir que nous utilisons des composants Telerik comme TelerikCard Pour créer rapidement des interfaces utilisateur, car les composants Telerik offrent des propriétés et des sections prêtes à l’emploi pour répondre au contenu à nos besoins.

  1. Créer un dossier nommé ModelsRemplacement du contenu par les classes suivantes:
public class Product
{
    public int id { get; set; }
    public string title { get; set; }
    public double price { get; set; }
    public string description { get; set; }
    public string category { get; set; }
    public string image { get; set; }
    public Rating rating { get; set; }
}
public class Rating
{
    public double rate { get; set; }
    public int count { get; set; }
}
  1. Remplacer le contenu de Home.razor avec le code suivant:
@page "https://www.telerik.com/"
@using PagerDemo.Components.AppComponents
@using PagerDemo.Models

<PageTitle>Home</PageTitle>

<HeroSection Title="FakeStore Products" Subtitle="Browse our collection of high-quality products from the FakeStore API" />

<main class="container my-5">
    <div class="row mb-4">
        <div class="col">
            <div class="d-flex justify-content-between align-items-center">
                <h2 class="mb-0">Our Products</h2>
                <p class="mb-0 text-muted">@resultCountText</p>
            </div>
            <hr />
        </div>
    </div>

    @if (isLoading)
    {
        <div class="d-flex justify-content-center align-items-center" style="height: 50vh;">
            <TelerikLoader Visible="@LoaderVisible"
                           Size="@ThemeConstants.Loader.Size.Large"
                           ThemeColor="@ThemeConstants.Loader.ThemeColor.Tertiary"
                           Type="@LoaderType.ConvergingSpinner" />
        </div>
    }
    else
    {
        <div class="row g-4">
            @if (filteredProducts.Count == 0)
            {
                <div class="col-12">
                    <div class="alert alert-info">
                        No products found matching your criteria.
                    </div>
                </div>
            }
            else
            {
                @foreach (var product in filteredProducts)
                {
                    <div class="col-sm-6 col-md-4 col-lg-3 fade-in">
                        <ProductCard Product="product" />
                    </div>
                }
            }
        </div>
    }
</main>

@code {
    private const string API_URL = "https://fakestoreapi.com/products";
    private List<Product> allProducts = new();
    private List<Product> filteredProducts = new();
    private List<string> categories = new();
    private string currentCategory = "all";
    private string currentSearchTerm = "";
    private bool isLoading = true;
    private string resultCountText = "Loading products...";
    bool LoaderVisible { get; set; } = true;

    [Inject] private HttpClient Http { get; set; }

    protected override async Task OnInitializedAsync()
    {
        await FetchProducts();
    }

    private async Task FetchProducts()
    {
        try
        {
            isLoading = true;
            allProducts = await Http.GetFromJsonAsync<List<Product>>(API_URL) ?? new();
            categories = allProducts.Select(p => p.category).Distinct().ToList();
            filteredProducts = new List<Product>(allProducts);
            UpdateResultCount();
        }
        catch (Exception ex)
        {
            Console.Error.WriteLine("Error fetching products: " + ex.Message);
        }
        finally
        {
            isLoading = false;
        }
    }

    private void UpdateResultCount()
    {
        int count = filteredProducts.Count;
        resultCountText = $"{count} product{(count != 1 ? "s" : "")} found";
    }
}

Enfin, dans Program.csajoutez la ligne suivante pour injecter une référence au HTTP service:

var builder = WebApplication.CreateBuilder(args);
...
builder.Services.AddHttpClient();
var app = builder.Build();

Lors de l’exécution du code précédent, vous aurez une belle page qui charge les produits d’une API externe:

Nous avons créé une page de produit qui a l’air assez bien; Cependant, un problème auquel nous sommes actuellement confrontés est que tous les produits sont chargés sur la même page à la fois. Imaginez si vous aviez 100 produits ou, pire, 1 000 ou 10 000. Naviguer dans un si grand nombre de produits serait un véritable défi pour l’utilisateur.

Pour résoudre ce problème, nous ajouterons le Sacrer Composant de notre application, permettant une pagination avec le nombre souhaité de produits par page. Pour ce faire, nous devons modifier la section de code qui affiche les éléments de la liste. Dans notre cas, le code actuel est le suivant:

@foreach (var product in filteredProducts)
{
    <div class="col-sm-6 col-md-4 col-lg-3 fade-in">
        <ProductCard Product="product" />
    </div>
}

Ensuite, nous ajouterons le Pager Composant, qui nécessite au moins les trois propriétés suivantes:
  1. Total: Indique le nombre total d’éléments dans la source de données.
  2. PageSize: Spécifie le nombre d’éléments à afficher par page.
  3. Page: L’index de la page sur laquelle l’utilisateur est actuellement. Il peut être unidirectionnel ou bidirectionnel.

Vous pouvez placer le composant partout où il convient le mieux; Dans mon exemple, je le placerai au-dessus de la liste:

@page "https://www.telerik.com/"
@using BlazorPagerDemo.Components.AppComponents
@using BlazorPagerDemo.Models

<PageTitle>Home</PageTitle>

...

<main class="container my-5">
    ...
    else
    {
       ...
            else
            {
                <TelerikPager Total="@filteredProducts.Count" PageSize="5" @bind-Page="@Page"></TelerikPager>

                var pageData = filteredProducts.Skip((Page - 1) * PageSize).Take(PageSize).ToList();

                @foreach (var product in pageData)
                {
                    <div class="col-sm-6 col-md-4 col-lg-3 fade-in">
                        <ProductCard Product="product" />
                    </div>
                }                
            }
        </div>
    }
</main>

@code {

    public int PageSize { get; set; } = 3;
    public int Page { get; set; } = 1;

    ...
}

Dans le code ci-dessus, vous pouvez également voir que j’ai créé une variable appelée pageDataqui effectue le calcul pour filtrer les éléments de la page en fonction de la taille de la page et des valeurs de page actuelles. Le résultat est affiché ci-dessous:

Comme vous pouvez le voir, avec seulement quelques modifications, nous avons maintenant un composant esthétique qui ajoute une pagination à la liste des produits.

En plus des paramètres essentiels nécessaires pour que le composant Pager affiche correctement les informations, nous avons également les paramètres suivants qui permettent une personnalisation supplémentaire du téléavertisseur:

  • Adaptive (bool): Lorsqu’il est réglé sur trueles éléments du téléavertisseur s’adapteront en fonction de la taille de l’écran. Sur les petits écrans, un PageSize DropdownList sera affiché pour permettre à l’utilisateur de sélectionner une page, comme indiqué dans l’exemple suivant:

  • ButtonCount (int): Spécifie le nombre maximum de boutons de page à afficher dans l’interface. Il est important de noter que ce nombre doit être inférieur au calcul de Total / / PageSize. Par exemple, si vous le définissez sur 5, seuls cinq boutons seront affichés pour naviguer entre les pages, comme indiqué dans l’exemple suivant:

  • Class (string): Permet d’attribuer une classe CSS personnalisée au <div class="k-pager-wrap"> élément.
  • PageSizes (List<int?>): Permet de spécifier un ensemble d’index de page dans une liste déroulante pour une navigation rapide. Par exemple, si nous voulons que l’utilisateur accéde directement aux pages 1, 3 et 5, nous pouvons configurer le composant comme indiqué ci-dessous:
<TelerikPager Total="@filteredProducts.Count"
    ...
    PageSizes="@pageSizes"/>
...
@code{
     private List<int?> pageSizes = new() { 1, 3, 5 };
}

Avec cela, la liste déroulante affichée dans le téléavertisseur affichera uniquement les pages configurées dans le pageSizes propriété:

  • InputType (PagerInputType): Permet de spécifier une valeur de la PagerInputType énumération, soit Buttons ou Input. Lorsqu’il est affecté la valeur par défaut Buttonsles boutons numériques sont affichés pour naviguer vers des pages spécifiques. Alternativement, si la valeur est définie sur Inputune zone de texte apparaîtra au lieu des boutons, permettant aux utilisateurs de saisir directement un index de page. Le code suivant démontre l’utilisation de cette propriété:
<TelerikPager
    InputType="PagerInputType.Input"
    .../>

Ce qui précède affiche le résultat suivant dans le contrôle du téléavertisseur:

  • ShowInfo: Avec une valeur par défaut de TRUE, il vous permet de spécifier si les informations actuelles de la page et le nombre de lignes doivent être affichées dans l’interface graphique.
  • Size: Vous permet de modifier la taille du téléavertisseur en spécifiant les valeurs sm, md et lg.

Le contrôle du téléavertisseur fournit les événements suivants:

  • PageSizeChanged: Utilisé pour détecter le moment où l’utilisateur modifie le nombre d’éléments affichés par page à l’aide de la liste déroulante du Pager, permettant à la nouvelle taille sélectionnée d’être reçue en tant que paramètre.
  • PageChanged: Cet événement est déclenché lorsque l’utilisateur se rend à une page différente de celle actuelle. Il est idéal pour effectuer une sorte de validation ou de chargement de données dynamique. Dans la documentation, vous pouvez trouver un Exemple de chargement dynamique dans le contrôle du téléavertisseursimulant une charge de données lors du changement de la page. Cet exemple peut être adapté pour en faire un service qui fournit des données dynamiquement.

Conclusion

Tout au long de cet article, vous avez appris à implémenter le composant TelerikPager dans un projet de Blazor pour ajouter facilement la pagination. De plus, vous avez vu quels paramètres et événements peuvent être configurés pour adapter le comportement du téléavertisseur à vos besoins. Il est maintenant temps de se rendre au travail et de le mettre en œuvre dans vos propres projets.

Commencer

Le meilleur outil 2023 pour ta croissance Instagram !



Source link
Quitter la version mobile