VT2020-Blazor-Demo
Démonstration de Blazor en lien avec la fiche de synthèse VT2020-Blazor-Fiche dans le cadre du cours de veille technologique 2020-2021.
Installations
L’exécution des codes servant à la démonstration ci-dessous nécessite l’installation de Blazor
Démonstration
Le but de cette démonstration est de créer une application Blazor de liste de tâches.
Configuration
Tout d'abord il faut créer une l'application par la commande suivante :
dotnet new blazorserver -o TodoList
Mettez-vous daans le répértoire de l 'application ensuite :
cd TodoList
Afin d'ajouter un nouveau Todo Razor composant à l'application dans le dossier Pages :
dotnet new razorcomponent -n Todo -o Pages
Programme
Nous allons travailler sur trois fichiers TodoItem.cs qui représente notre élément TODO, le Shared/NavMenu.razor ainsi que le fichier Todo.razor contenant le composant Razor.
Tout d'abord, ajoutez un <NavLink> élément pour le Todo composant en ajoutant la balise d’élément de liste suivante sous les éléments de liste existants dans le fichier Shared/NavMenu.razor :
<li class="nav-item px-3">
<NavLink class="nav-link" href="todo">
<span class="oi oi-list-rich" aria-hidden="true"></span> Todo
</NavLink>
</li>
Ensuit,créez le fichier TodoItem.cs à la racine de votre projet et recopiez ce qui suit :
public class TodoItem
{
public string Title { get; set; }
public bool IsDone { get; set; }
}
Dans votre fichier Pages/Todo.razor, déjà existant, recopiez le contenu suivant :
@page "/todo"
<h3>Todo (@todos.Count(todo => !todo.IsDone))</h3>
<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 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;
}
}
}
Finalement, Exécutez l'application par la commande, en étant toujours dans le répertoire du projet:
dotnet run
vous pouvez consulter votre liste de tâches, maintenant sur https://localhost:5001/todo