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

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