Composant

Un composant est une partie de l'interface utilisateur qui peut être réutilisée dans plusieurs endroits de l'application.

Par exemple, un formulaire de connexion peut être utilisé sur plusieurs pages.

Création d'un composant

On peut donc créer un composant FormulaireConnexion qui contiendra un formulaire de connexion.

Il ressemblera à ceci:

<form>
    <div>
        <label for="login">Login</label>
        <input type="text" id="login">
    </div>
    <div>
        <label for="password">Mot de passe</label>
        <input type="password" id="password">
    </div>
    <button type="submit">Se connecter</button>
</form>

On peux désormais utiliser ce composant dans une page:

@page "/test"

<PageTitle>Login Page</PageTitle>

<h1>Connectez vous</h1>

<FormulaireConnexion></FormulaireConnexion>

Composant avec paramètres

Il est possible de passer des paramètres à un composant.

Par exemple pour un composant 'Bouton' qui prendra un texte paramètre:

<button>@Text</button>

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

On pourra l'utiliser ainsi:

<Bouton Text="Cliquez ici"></Bouton>

Composant avec événements

Il est possible de déclencher des événements depuis un composant.

Par exemple pour un composant 'Bouton' qui déclenche un événement OnClick:

<button @onclick="OnClick">@Text</button>

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

    [Parameter]
    public EventCallback OnClick { get; set; }
}

On pourra l'utiliser ainsi:

<Bouton Text="@Text" OnClick="DoSomething"></Bouton>

@code {
    string Text { get; set; } = "Cliquez ici";

    private void DoSomething()
    {
        Console.WriteLine("Clic !");
        Text = "Clic !";
    }
}

EventCallback

Dans l'exemple ci dessus on passe un EventCallback nommé OnClick.

Si vous avez compris l'exemple quand on cliquera sur le bouton cela appelera la fonction que l'on a passé a notre composant.

Si l'on veux appeler cette fonction en dehors d'un bouton, on peux le faire comme ceci

@code {
    [Parameter]
    public EventCallback OnClick { get; set; }

    private void Woot()
    {
        OnClick.InvokeAsync();
    }
}

Si l'on veux renvoyer un paramètre dans notre fonction on ajoute notre type de paramètre comme ceci EventCallback<TypeDuParam>.

@code {
    [Parameter]
    public EventCallback<Pingouin> OnClickWithParam { get; set; }

    private void WootWoot()
    {
        var Pin = new Pingouin() {
            Vivant = false
        };
        OnClickWithParam.InvokeAsync(Pin);
    }

    // A mettre ailleurs
    public class Pingouin {
        public bool Vivant { get; set; }
    }
}

De cette manière on pourra récupérer notre Pingouin dans la fonction appelé

<Banquise OnClickWithParam="Oui" >

@code {
    private void Oui(Pingouin p) {
        Console.WriteLine(p.Vivant);
    }
}