Criar uma aplicação de lista de tarefas Blazor

Este tutorial fornece uma experiência de trabalho básica para criar e modificar um aplicativo Blazor. Para obter orientações Blazor detalhadas, consulte a documentação de referência Blazor.

Saiba como:

• Criar um projeto de app lista de tarefas Blazor
• Modificar componentes Razor
• Usar manipulação de eventos e vinculação de dados em componentes
• Usar o roteamento em um aplicativo Blazor

No final deste tutorial, você terá um aplicativo de lista de tarefas funcionando.

Pré-requisitos

Baixe e instale o .NET se ele ainda não estiver instalado no sistema ou se o sistema não tiver a versão mais recente instalada.

Criar um aplicativo Blazor

Crie um novo Blazor Web App chamado TodoList em um shell de comando:

.NET CLI

dotnet new blazor -o TodoList

A opção -o|--output cria uma pasta para o projeto. Se você criou uma pasta para o projeto e o shell de comando está aberto nessa pasta, omita a opção -o|--output e o valor para criar o projeto.

O comando anterior cria uma pasta chamada TodoList com a opção -o|--output para manter o aplicativo. A pasta TodoList é a pasta raiz do projeto. Altere os diretórios para a pasta TodoList com o seguinte comando:

.NET CLI

cd TodoList

Criar uma aplicação de lista de tarefas Blazor

Adicione um novo componente TodoRazor ao aplicativo usando o seguinte comando:

.NET CLI

dotnet new razorcomponent -n Todo -o Components/Pages

A opção -n|--name no comando anterior especifica o nome do novo componente Razor. O novo componente é criado na pasta Components/Pages do projeto com a opção -o|--output.

Importante

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

Abra o componente Todo em qualquer editor de arquivos e faça as seguintes alterações na parte superior do arquivo:

• Adicione uma diretiva @pageRazor com um URL relativo de /todo.
• Habilite a interatividade na página para que ela não seja apenas renderizada estaticamente. O modo de renderização do Servidor Interativo permite que o componente manipule eventos da interface do usuário do servidor.
• Adicione um título de página com o componente PageTitle, que permite adicionar um elemento HTML <title> à página.

Todo.razor:

razor

@page "/todo"
@rendermode InteractiveServer

<PageTitle>Todo</PageTitle>

<h3>Todo</h3>

@code {

}

Salve o arquivo Todo.razor.

Adicione o componente Todo à barra de navegação.

O componente NavMenu é usado no layout do aplicativo. Os layouts são componentes que permitem evitar a duplicação de conteúdo em um aplicativo. O componente NavLink fornece uma indicação na interface do usuário do aplicativo quando a URL do componente é carregada pelo aplicativo.

No conteúdo do elemento de navegação (<nav>) do componente NavMenu, adicione o seguinte elemento <div> para o componente Todo.

Em Components/Layout/NavMenu.razor:

razor

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

Salve o arquivo NavMenu.razor.

Crie e execute o aplicativo executando o comando dotnet watch run no shell de comando da pasta TodoList. Depois que o aplicativo estiver em execução, visite a nova página Todo selecionando o link Todo na barra de navegação do aplicativo, que carrega a página em /todo.

Deixe a aplicação a executar a linha de comandos. Cada vez que um arquivo é salvo, o aplicativo é reconstruído automaticamente e a página no navegador é recarregada automaticamente.

Adicione um arquivo TodoItem.cs à raiz do projeto (a pasta TodoList) para manter uma classe que representa um item todo. Use o seguinte código C# para a classe TodoItem.

TodoItem.cs:

C#

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

Nota

Se estiver usando o Visual Studio para criar o arquivo TodoItem.cs e a classe TodoItem, use uma das seguintes abordagens:

• Remova o namespace que o Visual Studio gera para a classe.
• Use o botão Copy no bloco de código anterior e substitua todo o conteúdo do arquivo gerado pelo Visual Studio.

Retorne ao componente Todo e execute as seguintes tarefas:

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

Components/Pages/Todo.razor:

razor

@page "/todo"
@rendermode InteractiveServer

<PageTitle>Todo</PageTitle>

<h3>Todo</h3>

<ul>
    @foreach (var todo in todos)
    {
        <li>@todo.Title</li>
    }
</ul>

@code {
    private List<TodoItem> todos = [];
}

A aplicação requer elementos da interface para adicionar tarefas à lista. Adicione uma entrada de texto (<input>) e um botão (<button>) abaixo da lista não ordenada (<ul>...</ul>):

razor

@page "/todo"
@rendermode InteractiveServer

<PageTitle>Todo</PageTitle>

<h3>Todo</h3>

<ul>
    @foreach (var todo in todos)
    {
        <li>@todo.Title</li>
    }
</ul>

<input placeholder="Something todo" />
<button>Add todo</button>

@code {
    private List<TodoItem> todos = [];
}

Salve o arquivo TodoItem.cs e o arquivo Todo.razor atualizado. No shell de comando, o aplicativo é reconstruído automaticamente quando os arquivos são salvos. O navegador recarrega a página.

Quando o botão Add todo é selecionado, nada acontece porque um manipulador de eventos não 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 AddTodo C# é chamado quando o botão é selecionado:

razor

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

@code {
    private List<TodoItem> todos = [];

    private void AddTodo()
    {
        // Todo: Add the todo
    }
}

Para obter o título do novo item todo, adicione um campo de cadeia de caracteres newTodo na parte superior do bloco @code:

C#

private string? newTodo;

Modifique o elemento text <input> para associá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 definindo newTodo como uma cadeia de caracteres vazia:

razor

@page "/todo"
@rendermode InteractiveServer

<PageTitle>Todo</PageTitle>

<h3>Todo</h3>

<ul>
    @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 = [];
    private string? newTodo;

    private void AddTodo()
    {
        if (!string.IsNullOrWhiteSpace(newTodo))
        {
            todos.Add(new TodoItem { Title = newTodo });
            newTodo = string.Empty;
        }
    }
}

Salve o arquivo Todo.razor. O aplicativo é reconstruído automaticamente no shell de comando e a página é recarregada no navegador.

O texto do título de cada item da lista de tarefas pode ser editável e uma caixa de seleção pode ajudar o utilizador a acompanhar os itens concluídos. Adicione uma entrada de caixa de seleção para cada item todo e vincule seu valor à propriedade IsDone. Altere @todo.Title para um elemento <input> vinculado a todo.Title com @bind:

razor

<ul>
      @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 lista que estão incompletos (IsDone é false). A expressão Razor no cabeçalho a seguir é avaliada sempre que Blazor rerenderiza o componente.

razor

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

O componente Todo concluído:

razor

@page "/todo"
@rendermode InteractiveServer

<PageTitle>Todo</PageTitle>

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

<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 List<TodoItem> todos = [];
    private string? newTodo;

    private void AddTodo()
    {
        if (!string.IsNullOrWhiteSpace(newTodo))
        {
            todos.Add(new TodoItem { Title = newTodo });
            newTodo = string.Empty;
        }
    }
}

Salve o arquivo Todo.razor. O aplicativo é reconstruído automaticamente no shell de comando e a página é recarregada no navegador.

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

Quando terminar, desligue o aplicativo no shell de comando. Muitos shells de comando aceitam o comando do teclado Ctrl+C para parar um aplicativo.

Publicar no Azure

Para obter informações sobre como implantar no Azure, consulte Guia de início rápido: implantar um aplicativo Web ASP.NET.

Próximos passos

Neste tutorial, você aprendeu como:

• Criar uma lista de tarefas para o projeto da aplicação Blazor
• Modificar componentes Razor
• Usar manipulação de eventos e vinculação de dados em componentes
• Usar o roteamento em um aplicativo Blazor

Saiba mais sobre as ferramentas para ASP.NET Core Blazor

ASP.NET Core Blazor