Générer une application de liste de tâches Blazor
Remarque
Ceci n’est pas la dernière version de cet article. Pour la version actuelle, consultez la version .NET 8 de cet article.
Avertissement
Cette version d’ASP.NET Core n’est plus prise en charge. Pour plus d’informations, consultez la Stratégie de prise en charge de .NET et .NET Core. Pour la version actuelle, consultez la version .NET 8 de cet article.
Important
Ces informations portent sur la préversion du produit, qui est susceptible d’être en grande partie modifié avant sa commercialisation. Microsoft n’offre aucune garantie, expresse ou implicite, concernant les informations fournies ici.
Pour la version actuelle, consultez la version .NET 8 de cet article.
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 application Blazor Web App 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.
Utilisez l’un des modèles d’hébergement suivants pour créer une application Blazor nommée TodoList
dans un interpréteur de commandes :
Pour une expérience avec Blazor Server, créez l’application avec la commande suivante :
dotnet new blazorserver -o TodoList
Pour une expérience avec Blazor WebAssembly, créez l’application avec la commande suivante :
dotnet new blazorwasm -o TodoList
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 Todo
Razor à 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
.
dotnet new razorcomponent -n Todo -o 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 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
@page
Razor 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.
Ouvrez le composant Todo
dans n’importe quel éditeur de fichier et apportez les modifications suivantes en haut du fichier :
- Ajoutez une directive
@page
Razor avec une URL relative de/todo
. - Ajoutez un titre de page avec le composant
PageTitle
, ce qui permet d’ajouter un élément HTML<title>
à la page.
Ouvrez le composant Todo
dans un éditeur de fichiers, puis ajoutez une directive @page
Razor avec l’URL relative /todo
.
Todo.razor
:
@page "/todo"
@rendermode InteractiveServer
<PageTitle>Todo</PageTitle>
<h3>Todo</h3>
@code {
}
@page "/todo"
<PageTitle>Todo</PageTitle>
<h3>Todo</h3>
@code {
}
@page "/todo"
<PageTitle>Todo</PageTitle>
<h3>Todo</h3>
@code {
}
@page "/todo"
<h3>Todo</h3>
@code {
}
@page "/todo"
<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
:
Dans Shared/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; }
}
public class TodoItem
{
public string? Title { get; set; }
public bool IsDone { get; set; }
}
public class TodoItem
{
public string? Title { get; set; }
public bool IsDone { get; set; }
}
public class TodoItem
{
public string Title { get; set; }
public bool IsDone { get; set; }
}
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 composantTodo
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();
}
Pages/Todo.razor
:
@page "/todo"
<PageTitle>Todo</PageTitle>
<h3>Todo</h3>
<ul>
@foreach (var todo in todos)
{
<li>@todo.Title</li>
}
</ul>
@code {
private List<TodoItem> todos = new();
}
Pages/Todo.razor
:
@page "/todo"
<PageTitle>Todo</PageTitle>
<h3>Todo</h3>
<ul>
@foreach (var todo in todos)
{
<li>@todo.Title</li>
}
</ul>
@code {
private List<TodoItem> todos = new();
}
Pages/Todo.razor
:
@page "/todo"
<h3>Todo</h3>
<ul>
@foreach (var todo in todos)
{
<li>@todo.Title</li>
}
</ul>
@code {
private List<TodoItem> todos = new();
}
Pages/Todo.razor
:
@page "/todo"
<h3>Todo</h3>
<ul>
@foreach (var todo in todos)
{
<li>@todo.Title</li>
}
</ul>
@code {
private IList<TodoItem> todos = new List<TodoItem>();
}
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();
}
@page "/todo"
<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();
}
@page "/todo"
<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();
}
@page "/todo"
<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();
}
@page "/todo"
<h3>Todo</h3>
<ul>
@foreach (var todo in todos)
{
<li>@todo.Title</li>
}
</ul>
<input placeholder="Something todo" />
<button>Add todo</button>
@code {
private IList<TodoItem> todos = new List<TodoItem>();
}
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
}
}
<input placeholder="Something todo" />
<button @onclick="AddTodo">Add todo</button>
@code {
private List<TodoItem> todos = new();
private void AddTodo()
{
// Todo: Add the todo
}
}
<input placeholder="Something todo" />
<button @onclick="AddTodo">Add todo</button>
@code {
private List<TodoItem> todos = new();
private void AddTodo()
{
// Todo: Add the todo
}
}
<input placeholder="Something todo" />
<button @onclick="AddTodo">Add todo</button>
@code {
private List<TodoItem> todos = new();
private void AddTodo()
{
// Todo: Add the todo
}
}
<input placeholder="Something todo" />
<button @onclick="AddTodo">Add todo</button>
@code {
private IList<TodoItem> todos = new List<TodoItem>();
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;
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;
}
}
}
@page "/todo"
<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;
}
}
}
@page "/todo"
<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;
}
}
}
@page "/todo"
<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;
}
}
}
@page "/todo"
<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 IList<TodoItem> todos = new List<TodoItem>();
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;
}
}
}
@page "/todo"
<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;
}
}
}
@page "/todo"
<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;
}
}
}
@page "/todo"
<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;
}
}
}
@page "/todo"
<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 :