Exercício – vinculação de dados e eventos

  • 10 minutos

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

Criar a página de Lista de Tarefas (Todo)

  1. Criar a página Todo:

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

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

    Importante

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

  2. Abra o componente Todo e adicione uma diretiva @page do Razor ao início do arquivo com a URL relativa /todo.

    @page "/todo"

<h3>Todo</h3>

@code {

}

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

Adicione o componente Todo à barra de navegação

O layout do aplicativo usa o componente NavMenu. Layouts são componentes que permitem evitar a duplicação de conteúdo em um aplicativo. O componente NavLink renderiza uma marca de â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 Componentes/Layout no Gerenciador de Soluções e abra o arquivo NavMenu.razor. Na seção <nav>...</nav> do componente NavMenu, adicione o novo <div>...</div> a seguir e o componente NavLink ao componente Todo.

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>

Salve o arquivo Components/Layout//NavMenu.razor. O navegador será atualizado automaticamente e agora terá a entrada Todo na barra de navegação:

Captura de tela do elemento de navegação todo adicionado

Criar um item Todo

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

No Gerenciador de Soluções, clique com o botão direito do mouse na pasta Dados e, a seguir, selecione Adicionar>Classe. Dê à nova classe o nome TodoItem.cs e, a seguir, selecione Adicionar. Essa nova classe conterá uma classe C# que representa um item da Lista Todo.

Substitua o código da Linha 7 para baixo pelo código C# a seguir para a classe TodoItem. Declare o Title como uma cadeia de caracteres que permite valor nulo usando ?. Salve o arquivo.

namespace BlazorHybridApp.Data;

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

Associar uma lista de TodoItems

Agora você está pronto para associar uma coleção de objetos TodoItem ao HTML no Blazor. Faremos isso aplicando as alterações a seguir no arquivo Components/Pages/Todo.razor:

  • Adicione a declaração de uso para TodoItem com @using BlazorHybridApp.Data.
  • Adicione um campo para os itens de tarefas pendentes ao bloco @code. O componente Todo usa esse campo para manter o estado da lista de tarefas pendentes.
  • Adicione marcação da lista não ordenada e um loop foreach para renderizar cada item de tarefa pendente 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 listas de tarefas pendentes

  1. O aplicativo requer elementos de interface do usuário para adicionar itens de tarefas à 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. Nada acontece quando o botão Add todo é selecionado, porque nenhum manipulador de eventos está anexado ao botão.

    Adicione um método AddTodo ao componente Todo e registre o método para o botão usando o atributo @onclick. O método C# AddTodo é 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 de tarefa pendente, adicione um campo de cadeia de caracteres newTodo no início do bloco @code:

    @code {
    private List<TodoItem> todos = new();
    private string? newTodo;

    // Omitted for brevity...
}

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

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

  4. Atualize o método AddTodo para adicionar o TodoItem com o título especificado à lista. Limpe o valor da entrada de texto configurando newTodo para 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. Salve o arquivo Components/Pages/Todo.razor. Compile e inicie novamente o aplicativo.

  6. Você pode definir o texto do título de cada item da Lista Todo como editável, e uma caixa de seleção pode ajudar o usuário a acompanhar os itens que vão sendo concluídos. Adicione uma entrada de caixa de seleção para cada item de tarefa pendente e associe o valor dele à propriedade IsDone. Altere o @todo.Title para um elemento <input> vinculado a todo.Title com @bind:

    <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 cabeçalho <h3> para mostrar uma contagem do número de itens de tarefas pendentes que não foram concluídos (IsDone é false).

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

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

  9. Adicione, edite e marque os itens como concluídos para testar o componente.

    Captura de tela da página ToDo concluída