Créez votre première application web avec ASP.NET Core à l’aide de Blazor

Windows Linux macOS

Modifier un composant

Les paramètres de composant sont spécifiés à l'aide d'attributs ou de contenu enfant, qui vous permettent de définir des propriétés sur le composant enfant. Définissez un paramètre sur le composant Counter pour spécifier de combien il s'incrémente à chaque clic de bouton :

  • Ajoutez une propriété publique pour IncrementAmount avec un attribut [Parameter].
  • Modifiez la méthode IncrementCount pour utiliser IncrementAmount lors de l'incrémentation de la valeur de currentCount.

Le code suivant montre comment y parvenir. Les lignes en surbrillance montrent les changements.

Components/Pages/Counter.razor
@page "/counter"
@rendermode InteractiveServer

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    [Parameter]
    public int IncrementAmount { get; set; } = 1;

    private void IncrementCount()
    {
        currentCount += IncrementAmount;
    }
}

Dans Home.razor, mettez à jour l’élément <Counter> pour ajouter un attribut IncrementAmount qui fait passer la quantité d’incrémentation à dix, comme indiqué par la ligne en surbrillance dans le code suivant :

Components/Pages/Home.razor
@page "/"

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<Counter IncrementAmount="10" />

Appliquez la modification à l’application en cliquant sur le bouton Rechargement à chaud XAML. Le composant Home possède désormais son propre compteur qui incrémente de dix chaque fois que le bouton Cliquez-moi est sélectionné, comme illustré dans l’image suivante. Le composant Counter (Counter.razor) dans /counter continue d’augmenter de un.

Le composant Home possède désormais son propre compteur qui incrémente de dix chaque fois que le bouton Cliquez-moi est sélectionné, comme illustré dans l’image suivante. Le composant Counter (Counter.razor) dans /counter continue d’augmenter de un.

La page d’accueil contient désormais un compteur qui incrémente par 10 affichant le compteur à 40.

Continuer