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

• Guide d'installation détaillé sur Linux
• Installation .Net

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

Dans votre fichier Pages/Todo.razor

Recopier 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;
        }
    }
}