Difference between revisions of "VT2020-Blazor-Demo"
Jump to navigation
Jump to search
Houda.El-Aji (talk | contribs) |
Houda.El-Aji (talk | contribs) |
||
Line 12: | Line 12: | ||
=== Programme === |
=== Programme === |
||
+ | Dans votre fichier <code>Pages/Todo.razor</code> |
||
+ | |||
+ | Recopier le contenu suivant : |
||
+ | |||
+ | <pre> |
||
+ | |||
+ | @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; |
||
+ | } |
||
+ | } |
||
+ | } |
||
+ | |||
+ | </pre> |
||
=== Utilisation === |
=== Utilisation === |
Revision as of 12:47, 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
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; } } }