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

100 XP

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)

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.
Abra o componente Todo e adicione uma diretiva @page do Razor ao início do arquivo com a URL relativa /todo.

CSHTML
```
@page "/todo"

<h3>Todo</h3>

@code {

}
```
Salve o arquivo Components/Pages/Todo.razor

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:

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:

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>).

CSHTML

@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

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>):

razor

@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();
}

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:

razor
```
<input placeholder="Something todo" />
<button @onclick="AddTodo">Add todo</button>

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

    private void AddTodo()
    {
        // Todo: Add the todo
    }
}
```
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:

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

    // Omitted for brevity...
}
```
Modifique o elemento <input> para associar newTodo ao atributo @bind:

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

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:

razor

@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;
        }
    }
}

Salve o arquivo Components/Pages/Todo.razor. Compile e inicie novamente o aplicativo.
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:

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

razor
```
<h3>Todo (@todos.Count(todo => !todo.IsDone))</h3>
```
Salve o arquivo Components/Pages/Todo.razor e execute o aplicativo novamente.
Adicione, edite e marque os itens como concluídos para testar o componente.

Unidade seguinte: Acessar recursos da plataforma no Blazor Hybrid

Anterior Avançar

Precisa de ajuda? Confira nosso guia de solução de problemas ou forneça comentários específicos relatando um problema.

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

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

Adicione o componente Todo à barra de navegação

Criar um item Todo

Associar uma lista de TodoItems

Adicionar elementos de formulário para criar listas de tarefas pendentes

Unidade seguinte: Acessar recursos da plataforma no Blazor Hybrid

Comentários