Bases de Blazor : composants de modèles avec RenderFragments

Nous apprendrons ce que sont les composants basés sur un modèle et comment ils nous aident à implémenter des composants Blazor plus réutilisables.

Dans cet article, nous apprenons ce que sont les composants basés sur un modèle dans le développement Web Blazor. Nous implémentons également un composant Dialog qui peut être modélisé et utilisé dans une application Web Blazor.

Tu peux accéder au code utilisé dans cet exemple sur GitHub.

Introduction

Composants modélisés nous permettent de fournir un code HTML extrait d’un composant Blazor vers un autre composant. Ce concept est largement utilisé dans orienté composants bibliothèques d’interface utilisateur.

Cela nous permet de construire composants d’ordre supérieuroù nous avons une tâche commune que nous souhaitons résoudre dans un composant mais qui permet au composant consommateur de personnaliser son apparence.

Un composant peut avoir un ou plusieurs paramètres basés sur un modèle. Nous utilisons le RenderFragement tapez pour les définir et les utiliser.

Implémentation d’un composant basé sur un modèle

Commençons par un exemple pratique illustrant comment implémenter un composant basé sur un modèle. Dans cet article, nous construisons un Dialog composant.

Le Dialog Le composant définit un en-tête, un corps et une section de boutons. Dans une application réelle, un composant de dialogue est un exemple parfait où vous souhaitez une apparence cohérente dans toute l’application tout en autorisant un contenu personnalisé pour chaque cas d’utilisation.

Nous créons un Dialog.razor fichier et ajoutez le code de modèle suivant :

<h2>@Title</h2>
<div>@Body</div>

<div style="display: flex; margin-top: 10px;">
    @if (Buttons != null)
    {
        foreach (var button in Buttons)
        {
            <button style="margin-right: 10px;"
                    onclick="@button.Action">
                @button.Text
            </button>
        }
    }
</div>

Tout d’abord, nous utilisons un élément d’en-tête HTML pour afficher le titre de la boîte de dialogue et un div élément pour restituer le corps de la boîte de dialogue. Nous explorerons les différences entre les deux ci-dessous, en parcourant la section code du Dialog composant.

La dernière section du modèle est plus complexe. Nous utilisons un div élément et utilisez du code C# pour vérifier l’élément Button propriété pour null. Ensuite, nous utilisons un foreach instruction pour parcourir le Buttons propriété et rendre un button élément pour chaque élément du Buttons liste.

Maintenant, implémentons le Dialog section de code du composant.

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

    [Parameter]
    public RenderFragment? Body { get; set; }
}

Premièrement, nous avons deux propriétés marquées du Parameter attribut. Il indique à Blazor d’accepter une valeur lors de l’utilisation du composant. Vous pouvez en savoir plus sur l’utilisation des paramètres dans le Création d’un composant Blazor article.

La différence entre les deux paramètres est que nous utilisons le string? tapez pour le Title la propriété et le RenderFragement tapez pour le Body propriété.

Le RenderFragment le type est ce qui nous permet de définir une propriété qui contient une partie du modèle de composant. Nous verrons comment transmettre cette valeur lors de l’utilisation du Dialog composant sous peu.

Comme vous pouvez le constater, l’utilisation des valeurs des deux propriétés dans le modèle du composant est simple. Nous utilisons le @ symbole pour référencer les propriétés. Il n’y a aucune différence d’utilisation entre un string-tapé et un RenderFragementPropriété de paramètre de composant typé.

La seule chose qui manque dans la section de code que nous utilisons dans le modèle est le Buttons propriété. Ajoutons le code manquant à la section code.

@code {
    public record DialogButton(string Text, Action Action);

    [Parameter]
    public string? Title { get; set; }

    [Parameter]
    public RenderFragment? Body { get; set; }

    [Parameter]
    public IEnumerable<DialogButton>? Buttons { get; set; }
}

Nous utilisons le record mot-clé pour créer un DialogButton taper. Il contient deux propriétés : une Text propriété de type stringEt un Action propriété de type Action.

Nous définissons également les manquants Buttons propriété de type IEnumerable<DialogButton> et ajoutez le Parameter attribut.

Nous verrons comment proposer des boutons personnalisés en utilisant le DialogButton tapez ensuite.

Utilisation d’un composant basé sur un modèle

Maintenant que nous avons un Dialog composant, nous souhaitons implémenter un premier cas d’utilisation.

Regardez le code suivant implémenté sur le Index composante du projet. Vous pouvez utiliser le Dialog composante tout au long du projet.

@page "https://www.telerik.com/"

<PageTitle>Basic Dialog</PageTitle>

<Dialog Title="Are you sure?" Buttons="@Buttons">
    <Body>Do you really want to delete this user?</Body>
</Dialog>

Tout d’abord, utilisez le @page directive pour définir ce composant Blazor en tant que composant de page. Le "https://www.telerik.com/" définit que ce composant doit être chargé lorsque l’utilisateur accède à la route d’index de l’application Web.

Ensuite, nous utilisons le PageTitle composant pour fournir un texte personnalisé à l’onglet du navigateur.

Maintenant, enfin, à l’utilisation du Dialog.

Nous faisons référence à Dialog composant et fournir des valeurs pour le Title et le Buttons propriétés. Jusqu’ici, tout va bien.

Passons maintenant à la partie intéressante de la façon de fournir un modèle au Body propriété du Dialog composant. Comme vous pouvez le voir, nous utilisons une nouvelle balise Body et joignez le modèle que nous souhaitons fournir au modèle Dialog composant.

Dans ce cas, nous fournissons uniquement du texte. Cependant, nous implémenterons un exemple plus avancé plus tard. Apprenons d’abord comment cela fonctionne avant de devenir fou.

Implémentons ensuite la section de code du composant.

@code {
    public IEnumerable<DialogButton> Buttons { get; set; } = new List<DialogButton>{
        new DialogButton("Delete", () =>
        {
            Debug.WriteLine("Delete");
        }),
        new DialogButton("Cancel", () =>
        {
            Debug.WriteLine("Cancel");
        })
    };
}

Nous définissons un Buttons propriété de type IEnumerable<DialogButton> et créez et ajoutez deux éléments à la liste. Nous définissons un Supprimer et un Annuler bouton. Nous fournissons également une simple instruction de journal comme action sur chaque bouton.

Pour compiler ce code, nous devons ajouter deux éléments supplémentaires using instructions en haut du composant :

@using static BlazorTemplatedComponents.Shared.Dialog;
@using System.Diagnostics;

La première using L’instruction importe l’espace de noms contenant le DialogButton taper. La deuxième instruction using contient le Debug.WriteLine méthode. Cela nous permet d’écrire dans l’onglet Sortie de Visual Studio ou dans tout autre récepteur de journaux lors de l’utilisation d’un autre IDE.

Maintenant, démarrons l’application et nous pouvons voir les valeurs fournies dans le Index composant appliqué au Dialog composant sur l’écran.

Un scénario plus avancé pour les composants de modèle

Mais que se passe-t-il si nous voulons fournir un modèle plus complexe au modèle Dialog composant qu’un simple texte ?

Examinons l’utilisation plus avancée suivante de Dialog composant.

<Dialog Title="Do you want to move this team?" Buttons="@Buttons">
    <Body>
        <h4>Team members</h4>
        <table>
            <thead>
                <tr>
                    <th width="200">Name</th>
                    <th>Age</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var member in Members)
                {
                    <tr>
                        <td>@member.Name</td>
                        <td>@member.Age</td>
                    </tr>
                }
            </tbody>
        </table>
    </Body>
</Dialog>

Cette fois, nous souhaitons demander à l’utilisateur s’il souhaite déplacer une équipe existante vers une autre organisation.

Pour indiquer clairement combien et quels membres de l’équipe sont déplacés, nous les montrons dans un tableau fourni dans le cadre du Dialog le composant est basé sur un modèle Body propriété.

Nous pouvons utiliser tout le code Blazor et C# auquel nous sommes habitués lorsque nous travaillons avec des composants non basés sur des modèles.

Regardons la section de code du composant :

@code {
    public record TeamMember(string Name, int Age);

    public IEnumerable<TeamMember> Members { get; set; } = new List<TeamMember>{
        new TeamMember("Peter", 37),
        new TeamMember("Jessica", 32)
    };

    public IEnumerable<DialogButton> Buttons { get; set; } = new List<DialogButton>{
        new DialogButton("OK", () =>
        {
            Debug.WriteLine("OK");
        }),
        new DialogButton("Cancel", () =>
        {
            Debug.WriteLine("Cancel");
        })
    };
}

Encore une fois, nous fournissons deux boutons utilisant le DialogButton tapez au Button propriété du Dialog composant. Cependant, le contenu du Body l’élément est très différent.

Nous définissons un Members propriété dans le code du composant. Dans une application réelle, nous aurions peut-être chargé ces informations à partir d’un service backend.

Ensuite, nous faisons référence à Members propriété dans le code du modèle et parcourez la liste des membres pour afficher une ligne de tableau pour chaque membre de l’équipe.

Encore une fois, nous démarrons l’application pour voir la boîte de dialogue rendue à l’écran.

Cette fois, nous voyons les plus avancés Body section de la Dialog composant rendant un code HTML table avec une ligne par membre de l’équipe.

Conclusion

Composants modélisés sont un excellent outil pour mettre en œuvre des composants d’ordre supérieur lors de la création d’applications Web Blazor.

Nous pouvons avoir un ou plusieurs paramètres de type RenderFragment par composant et, par conséquent, fournissez un ou plusieurs modèles aux composants Blazor.

Le composant modélisé nous aide à fournir un aspect et sensation cohérents et un expérience utilisateur cohérente dans toute l’application Web, tout en restant permettant la personnalisation là où c’est nécessaire.

Tu peux accéder au code utilisé dans cet exemple sur GitHub.

Si vous souhaitez en savoir plus sur le développement de Blazor, vous pouvez regarder mon cours intensif Blazor gratuit sur YouTube. Et restez à l’écoute du blog Telerik pour en savoir plus Les bases du Blazor.