Générer une application de liste de tâches Blazor

Ce tutoriel fournit une expérience de travail de base pour créer et modifier une application Blazor. Pour des conseils détaillés Blazor, consultez la Blazor documentation de référence.

Découvrez comment :

• Créer un projet d’application Blazor de liste de tâches
• Modifier des composants Razor
• Utiliser la gestion des événements et la liaison de données dans des composants
• Utiliser le routage dans une application Blazor

À la fin de ce tutoriel, vous disposerez d’une application de liste de tâches fonctionnelle.

Prérequis

Téléchargez et installez .NET s’il n’est pas déjà installé sur le système ou si la version installée sur celui-ci n’est pas la plus récente.

Créer une application Blazor

Créez une nouvelle Web App Blazor nommée TodoList dans un interpréteur de commandes :

dotnet new blazor -o TodoList

L’option -o|--output crée un dossier pour le projet. Si vous avez créé un dossier pour le projet et que l’interpréteur de commandes est ouvert dans ce dossier, omettez l’option et la valeur -o|--output pour créer le projet.

La commande précédente crée un dossier nommé TodoList avec l’option -o|--output pour contenir l’application. Le dossier TodoList est le dossier racine du projet. Changez de répertoire pour accéder au dossier TodoList à l’aide de la commande suivante :

cd TodoList

Générer une application Blazor de liste de tâches

Ajoutez un nouveau composant TodoRazor à l’application à l’aide de la commande suivante :

dotnet new razorcomponent -n Todo -o Components/Pages

L’option -n|--name de la commande précédente spécifie le nom du nouveau composant Razor. Le nouveau composant est créé dans le dossier Components/Pages du projet avec l’option -o|--output.

Important

La première lettre des noms de fichiers des composants Razor doit être en majuscule. Ouvrez le dossier Pages et vérifiez que le nom de fichier du composant Todo commence par la lettre majuscule T. Le nom de fichier doit être Todo.razor.

Ouvrez le composant Todo dans n’importe quel éditeur de fichier et apportez les modifications suivantes en haut du fichier :

• Ajoutez une directive @pageRazor avec une URL relative de /todo.
• Activez l’interactivité sur la page afin qu’elle ne soit pas uniquement rendue statiquement. Le mode de rendu de serveur interactif permet au composant de gérer les évènements d’interface utilisateur depuis le serveur.
• Ajoutez un titre de page avec le composant PageTitle, ce qui permet d’ajouter un élément HTML <title> à la page.

Todo.razor:

@page "/todo"
@rendermode InteractiveServer

<PageTitle>Todo</PageTitle>

<h3>Todo</h3>

@code {

}

Enregistrez le fichier Todo.razor.

Ajoutez le composant Todo à la barre de navigation.

Le composant NavMenu est utilisé dans la disposition de l’application. Les dispositions sont des composants qui vous permettent d’éviter la duplication de contenu dans une application. Le composant NavLink fournit un signal dans l’interface utilisateur de l’application quand l’URL du composant est chargée par l’application.

Dans le contenu de l’élément de navigation (<nav>) du composant NavMenu, ajoutez l’élément <div> suivant pour le composant Todo.

Dans Components/Layout/NavMenu.razor :

<div class="nav-item px-3">
    <NavLink class="nav-link" href="todo">
        <span class="oi oi-list-rich" aria-hidden="true"></span> Todo
    </NavLink>
</div>

Enregistrez le fichier NavMenu.razor.

Générez et exécutez l’application en exécutant la commande dotnet watch run dans l’interpréteur de commandes à partir du dossier TodoList. Une fois l’application en cours d’exécution, accédez à la nouvelle page Tâches en sélectionnant le lien Todo dans la barre de navigation de l’application, ce qui permet de charger la page au niveau de /todo.

Laissez l’application exécuter l’interpréteur de commandes. Chaque fois qu’un fichier est enregistré, l’application est automatiquement regénérée, et la page est automatiquement rechargée dans le navigateur.

Ajoutez un fichier TodoItem.cs à la racine du projet (dossier TodoList) pour contenir une classe qui représente un élément de tâche. Utilisez le code C# suivant pour la classe TodoItem.

TodoItem.cs:

namespace BlazorSample;

public class TodoItem
{
    public string? Title { get; set; }
    public bool IsDone { get; set; }
}

Notes

Si vous utilisez Visual Studio pour créer le fichier TodoItem.cs et la classe TodoItem, utilisez l’une des approches suivantes :

• Supprimez l’espace de noms généré par Visual Studio pour la classe.
• Utilisez le bouton Copier dans le bloc de code précédent, puis remplacez l’ensemble du contenu du fichier généré par Visual Studio.

Retournez au composant Todo, puis effectuez les tâches suivantes :

• Ajoutez un champ pour les éléments todo dans le bloc @code. Le composant Todo utilise ce champ pour maintenir l’état de la liste de tâches.
• Ajoutez un balisage de liste non triée et une boucle foreach pour effectuer le rendu de chaque élément todo en tant qu’élément de liste (<li>).

Components/Pages/Todo.razor:

@page "/todo"
@rendermode InteractiveServer

<PageTitle>Todo</PageTitle>

<h3>Todo</h3>

<ul>
    @foreach (var todo in todos)
    {
        <li>@todo.Title</li>
    }
</ul>

@code {
    private List<TodoItem> todos = new();
}

L’application nécessite des éléments d’interface utilisateur pour ajouter des éléments todo à la liste. Ajoutez une entrée de texte (<input>) et un bouton (<button>) sous la liste non ordonnée (<ul>...</ul>) :

@page "/todo"
@rendermode InteractiveServer

<PageTitle>Todo</PageTitle>

<h3>Todo</h3>

<ul>
    @foreach (var todo in todos)
    {
        <li>@todo.Title</li>
    }
</ul>

<input placeholder="Something todo" />
<button>Add todo</button>

@code {
    private List<TodoItem> todos = new();
}

Enregistrez le fichier TodoItem.cs ainsi que le fichier Todo.razor mis à jour. Dans l’interpréteur de commandes, l’application est automatiquement regénérée quand les fichiers sont enregistrés. Le navigateur recharge la page.

Quand le bouton Add todo est sélectionné, rien ne se produit, car aucun gestionnaire d’événements n’est attaché au bouton.

Ajoutez une méthode AddTodo au composant Todo et inscrivez-la pour le bouton en utilisant l’attribut @onclick. La méthode C# AddTodo est appelée lorsque le bouton est sélectionné :

<input placeholder="Something todo" />
<button @onclick="AddTodo">Add todo</button>

@code {
    private List<TodoItem> todos = new();

    private void AddTodo()
    {
        // Todo: Add the todo
    }
}

Pour obtenir le titre du nouvel élément todo, ajoutez un champ de chaîne newTodo en haut du bloc @code :

private string? newTodo;

Modifiez l’élément de texte <input> pour lier newTodo avec l’attribut @bind :

<input placeholder="Something todo" @bind="newTodo" />

Mettez à jour la méthode AddTodo pour ajouter TodoItem avec le titre spécifié à la liste. Supprimez la valeur du texte d’entrée en définissant newTodo sur une chaîne vide :

@page "/todo"
@rendermode InteractiveServer

<PageTitle>Todo</PageTitle>

<h3>Todo</h3>

<ul>
    @foreach (var todo in todos)
    {
        <li>@todo.Title</li>
    }
</ul>

<input placeholder="Something todo" @bind="newTodo" />
<button @onclick="AddTodo">Add todo</button>

@code {
    private List<TodoItem> todos = new();
    private string? newTodo;

    private void AddTodo()
    {
        if (!string.IsNullOrWhiteSpace(newTodo))
        {
            todos.Add(new TodoItem { Title = newTodo });
            newTodo = string.Empty;
        }
    }
}

Enregistrez le fichier Todo.razor. L’application est automatiquement regénérée dans l’interpréteur de commandes, et la page est rechargée dans le navigateur.

Le texte du titre pour chaque élément todo peut être rendu modifiable et une case à cocher peut aider l’utilisateur à effectuer le suivi des éléments terminés. Ajoutez une entrée de case à cocher pour chaque élément todo et liez sa valeur à la propriété IsDone. Changez @todo.Title en un élément <input> lié à todo.Title avec @bind :

<ul>
      @foreach (var todo in todos)
      {
         <li>
            <input type="checkbox" @bind="todo.IsDone" />
            <input @bind="todo.Title" />
         </li>
      }
</ul>

Mettez à jour l’en-tête <h3> pour afficher le nombre d’éléments todo qui ne sont pas terminés (IsDone est false). L’expression Razor dans l’en-tête suivant est évaluée chaque fois que Blazor réaffiche le composant.

<h3>Todo (@todos.Count(todo => !todo.IsDone))</h3>

Le composant Todo terminé :

@page "/todo"
@rendermode InteractiveServer

<PageTitle>Todo</PageTitle>

<h1>Todo (@todos.Count(todo => !todo.IsDone))</h1>

<ul>
    @foreach (var todo in todos)
    {
        <li>
            <input type="checkbox" @bind="todo.IsDone" />
            <input @bind="todo.Title" />
        </li>
    }
</ul>

<input placeholder="Something todo" @bind="newTodo" />
<button @onclick="AddTodo">Add todo</button>

@code {
    private List<TodoItem> todos = new();
    private string? newTodo;

    private void AddTodo()
    {
        if (!string.IsNullOrWhiteSpace(newTodo))
        {
            todos.Add(new TodoItem { Title = newTodo });
            newTodo = string.Empty;
        }
    }
}

Enregistrez le fichier Todo.razor. L’application est automatiquement regénérée dans l’interpréteur de commandes, et la page est rechargée dans le navigateur.

Ajoutez des éléments, modifiez des éléments et marquez des éléments todo effectués pour tester le composant.

Une fois que vous avez fini, arrêtez l’application dans l’interpréteur de commandes. De nombreux interpréteurs de commandes acceptent la commande clavier Ctrl+C (Windows) ou ⌘+C (macOS) pour arrêter une application.

Publier sur Azure

Pour plus d’informations sur le déploiement sur Azure, consultez Démarrage rapide : Déployer une application web ASP.NET.

Étapes suivantes

Dans ce didacticiel, vous avez appris à :

• Créer un projet d’application Blazor de liste de tâches
• Modifier des composants Razor
• Utiliser la gestion des événements et la liaison de données dans des composants
• Utiliser le routage dans une application Blazor

Découvrez les outils pour ASP.NET Core Blazor :

ASP.NET Core Blazor