Exercício – Enlaces de dados e eventos

Neste exercício, você cria um componente básico da lista Todo dentro do seu aplicativo Blazor.

Criar a página Todo

1. Crie a página Todo:

   No Visual Studio, clique com o botão direito do mouse na Components/Pages pasta no Gerenciador de Soluções e selecione Adicionar>Componente Razor. Nomeie o componente Todo.razor.

   No Visual Studio Code, clique com o botão direito do mouse na pasta Pages em Gerenciador de Soluções e selecione componente Adicionar Novo Arquivo>Razor. Nomeie o componente Todo.razor. O arquivo deve ser criado dentro da Pages pasta

   Importante

   Os nomes de arquivo do componente Razor exigem uma primeira letra maiúscula. Expanda a Pages pasta e confirme se o nome do arquivo do Todo componente começa com uma letra maiúscula T. O nome do arquivo deve ser Todo.razor.

2. Abra o Todo componente e adicione uma @page diretiva Razor à parte superior do arquivo com uma URL relativa de /todo.

   @page "/todo"
   
   <h3>Todo</h3>
   
   @code {
   
   }
   

3. Salve o Components/Pages/Todo.razor arquivo

Adicionar o componente Todo à barra de navegação

O layout do aplicativo usa o NavMenu componente. Os layouts são componentes que permitem evitar a duplicação de conteúdo em um aplicativo. O NavLink componente renderiza uma marca âncora HTML que pode ser estilizada para fornecer uma indicação na interface do usuário do aplicativo quando a URL do aplicativo corresponde ao link.

Expanda a pasta Components/Layout no Solution Explorer e abra o arquivo NavMenu.razor . <nav>...</nav> Na seção do componente NavMenu, adicione o seguinte novo <div>...</div> e NavLink componente para o Todo componente.

Em Components/Layout/NavMenu.razor:

<!-- .. -->

<div class="nav-scrollable" onclick="document.querySelector('.navbar-toggler').click()">
    <nav class="flex-column">
        
        <!-- ... -->

        <div class="nav-item px-3">
            <NavLink class="nav-link" href="todo">
                <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Todo
            </NavLink>
        </div>
    </nav>
</div>

Guarde o ficheiro Components/Layout//NavMenu.razor. O navegador deve atualizar automaticamente e agora tem a entrada Todo na barra de navegação:

Criar um item Todo

No Gerenciador de Soluções, clique com o botão direito do mouse no projeto e selecione Adicionar>Nova Pasta. Nomeie a nova pasta Dados.

No Gerenciador de Soluções, clique com o botão direito do mouse na pasta Dados e selecione Adicionar>Classe. Nomeie a nova classe TodoItem.cs e selecione Adicionar. Essa nova classe manterá uma classe C# que representa um item todo.

Substitua o código da Linha 7 para baixo pelo seguinte código C# para a TodoItem classe. Declare o Title como uma cadeia de caracteres anulável usando ?. Guarde o ficheiro.

namespace BlazorHybridApp.Data;

public class TodoItem
{
    public string? Title { get; set; }
    public bool IsDone { get; set; } = false;
}

Vincular uma lista de TodoItems

Agora você está pronto para vincular uma coleção de TodoItem objetos ao HTML no Blazor. Para isso, faremos as seguintes alterações no Components/Pages/Todo.razor arquivo:

• Adicione a declaração using para TodoItem com @using BlazorHybridApp.Data.
• Adicione um campo para os itens todo no @code bloco . O Todo componente usa esse campo para manter o estado da lista todo.
• Adicione marcação de lista não ordenada e um foreach loop para renderizar cada item todo como um item de lista (<li>).

@page "/todo"
@using BlazorHybridApp.Data

<h3>Todo</h3>

<ul class="list-unstyled">
    @foreach (var todo in todos)
    {
        <li>@todo.Title</li>
    }
</ul>

@code {
    private List<TodoItem> todos = new();
}

Adicionar elementos de formulário para criar todos

1. O aplicativo requer elementos da interface do usuário para adicionar itens todo à lista. Adicione uma entrada de texto (<input>) e um botão (<button>) abaixo da lista não ordenada (<ul>...</ul>):

   @page "/todo"
   @using BlazorHybridApp.Data
   
   <h3>Todo</h3>
   
   <ul class="list-unstyled">
       @foreach (var todo in todos)
       {
           <li>@todo.Title</li>
       }
   </ul>
   
   <input placeholder="Something todo" />
   <button>Add todo</button>
   
   @code {
       private List<TodoItem> todos = new();
   }
   

2. Quando o Add todo botão é selecionado, nada acontece porque um manipulador de eventos não está anexado ao botão.

   Adicione um AddTodo método ao Todo componente e registre o método para o botão usando o @onclick atributo. O AddTodo método C# é chamado quando o botão é selecionado:

   <input placeholder="Something todo" />
   <button @onclick="AddTodo">Add todo</button>
   
   @code {
       private List<TodoItem> todos = new();
   
       private void AddTodo()
       {
           // Todo: Add the todo
       }
   }
   

3. Para obter o título do novo item todo, adicione um newTodo campo string na parte superior do @code bloco:

   @code {
       private List<TodoItem> todos = new();
       private string? newTodo;
   
       // Omitted for brevity...
   }
   

   Modifique o <input> elemento para vincular newTodo ao @bind atributo:

   <input placeholder="Something todo" @bind="newTodo" />
   

4. Atualize o AddTodo método para adicionar o TodoItem com o título especificado à lista. Limpe o valor da entrada de texto definindo newTodo como uma cadeia de caracteres vazia:

   @page "/todo"
   @using BlazorHybridApp.Data
   
   <h3>Todo</h3>
   
   <ul class="list-unstyled">
       @foreach (var todo in todos)
       {
           <li>@todo.Title</li>
       }
   </ul>
   
   <input placeholder="Something todo" @bind="newTodo" />
   <button @onclick="AddTodo">Add todo</button>
   
   @code {
       private List<TodoItem> todos = new();
       private string? newTodo;
   
       private void AddTodo()
       {
           if (!string.IsNullOrWhiteSpace(newTodo))
           {
               todos.Add(new TodoItem { Title = newTodo });
               newTodo = string.Empty;
           }
       }
   }
   

5. Guarde o ficheiro Components/Pages/Todo.razor. Recrie e reinicie o aplicativo.

6. Você pode tornar o texto do título de cada todo editável, e uma caixa de seleção pode ajudar o usuário a acompanhar os itens concluídos. Adicione uma entrada de caixa de seleção para cada item todo e vincule seu valor à IsDone propriedade. Altere o @todo.Title para um <input> elemento vinculado a todo.Title@bind com :

   <ul class="list-unstyled">
       @foreach (var todo in todos)
       {
           <li>
               <input type="checkbox" @bind="todo.IsDone" />
               <input @bind="todo.Title" />
           </li>
       }
   </ul>    
   

7. Atualize o <h3> cabeçalho para mostrar uma contagem do número de itens de todo que não estão completos (IsDone is false).

   <h3>Todo (@todos.Count(todo => !todo.IsDone))</h3>
   

8. Salve o Components/Pages/Todo.razor arquivo e execute o aplicativo novamente.

9. Adicione itens, edite itens e marque itens feitos para testar o componente.