Partilhar via

Criar uma aplicação de lista de tarefas Blazor

Observação

Esta não é a versão mais recente deste artigo. Para a versão atual, consulte a versão .NET 10 deste artigo.

Advertência

Esta versão do ASP.NET Core não é mais suportada. Para obter mais informações, consulte a Política de suporte do .NET e .NET Core. Para a versão atual, consulte a versão .NET 10 deste artigo.

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:

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.

Use um dos seguintes modelos de hospedagem para criar um novo aplicativo Blazor chamado TodoList em um shell de comando:

  • Para uma experiência com Blazor Server, crie o aplicativo com o seguinte comando:

    dotnet new blazorserver -o TodoList

  • Para uma experiência com Blazor WebAssembly, crie o aplicativo com o seguinte comando:

    dotnet new blazorwasm -o TodoList

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:

cd TodoList

Criar uma aplicação de lista de tarefas Blazor

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

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.

dotnet new razorcomponent -n Todo -o Pages

A opção -n|--name no comando anterior especifica o nome do novo componente Razor. O novo componente é criado na pasta 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.

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.
  • Adicione um título de página com o componente PageTitle, que permite adicionar um elemento HTML <title> à página.

Abra o componente Todo em qualquer editor de arquivos e adicione uma diretiva @pageRazor com uma URL relativa de /todo.

Todo.razor:

@page "/todo"
@rendermode InteractiveServer

<PageTitle>Todo</PageTitle>

<h3>Todo</h3>

@code {

}

@page "/todo"
@rendermode InteractiveServer

<PageTitle>Todo</PageTitle>

<h3>Todo</h3>

@code {

}

@page "/todo"

<PageTitle>Todo</PageTitle>

<h3>Todo</h3>

@code {

}

@page "/todo"

<PageTitle>Todo</PageTitle>

<h3>Todo</h3>

@code {

}

@page "/todo"

<h3>Todo</h3>

@code {

}

@page "/todo"

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

Em Shared/NavMenu.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:

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

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

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

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

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

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

Observação

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:

@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 = [];
}

Components/Pages/Todo.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 = [];
}

Pages/Todo.razor:

@page "/todo"

<PageTitle>Todo</PageTitle>

<h3>Todo</h3>

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

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

Pages/Todo.razor:

@page "/todo"

<PageTitle>Todo</PageTitle>

<h3>Todo</h3>

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

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

Pages/Todo.razor:

@page "/todo"

<h3>Todo</h3>

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

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

Pages/Todo.razor:

@page "/todo"

<h3>Todo</h3>

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

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

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

@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 = [];
}

@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 = [];
}

@page "/todo"

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

@page "/todo"

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

@page "/todo"

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

@page "/todo"

<h3>Todo</h3>

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

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

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

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:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    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:

private string? newTodo;

private string newTodo;

Modifique o elemento text <input> para associánewTodo ao atributo @bind:

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

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

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

@page "/todo"

<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 = new();
    private string? newTodo;

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

@page "/todo"

<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 = new();
    private string? newTodo;

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

@page "/todo"

<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 = new();
    private string newTodo;

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

@page "/todo"

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

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:

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

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

O componente Todo concluído:

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

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

@page "/todo"

<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 = new();
    private string? newTodo;

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

@page "/todo"

<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 = new();
    private string? newTodo;

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

@page "/todo"

<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 = new();
    private string? newTodo;

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

@page "/todo"

<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 = new();
    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 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

Saiba mais sobre as ferramentas para ASP.NET Core Blazor

ASP.NET Núcleo Blazor

  • Last updated on