VT2020-Blazor-Demo

From air
Jump to navigation Jump to search

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