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
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