Difference between revisions of "VT2020-Blazor-Demo"
Jump to navigation
Jump to search
Houda.El-Aji (talk | contribs) |
Houda.El-Aji (talk | contribs) |
||
Line 10: | Line 10: | ||
=== Configuration === |
=== Configuration === |
||
+ | Tout d'abord il faut créer une l'application par la commande suivante : |
||
+ | <pre> dotnet new blazorserver -o TodoList </pre> |
||
+ | Mettez-vous daans le répértoire de l 'application ensuite : |
||
+ | <pre> cd TodoList </pre> |
||
+ | |||
+ | Afin d'ajouter un nouveau <code>Todo</code> Razor composant à l'application dans le dossier Pages : |
||
+ | <pre> dotnet new razorcomponent -n Todo -o Pages </pre> |
||
=== Programme === |
=== Programme === |
Revision as of 12:55, 30 November 2020
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
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; } } }