Blazor - Usando o padrão Repositório

Continuando a segunda parte do artigo vamos criar os componentes em nosso projeto Blazor para usar o repositório e exibir as categorias e os posts relacionados.

Vamos iniciar definindo no componente NavMenu.razor que esta na pasta Shared do projeto, o código para exibir no meu lateral esquerdo o link para as categorias cadastradas.

@inject ICategoriaRepository categoriaService

<div class="top-row pl-4 navbar navbar-dark">
    <a class="navbar-brand" href="">BlogApp</a>
    <button class="navbar-toggler" @onclick="ToggleNavMenu">
        <span class="navbar-toggler-icon"></span>
    </button>
</div>

<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
    <ul class="nav flex-column">

        @foreach (var categoria in Categorias)
        {
            <li class="nav-item px-4">
                <b><a href="/categoria/@categoria.CategoriaId">@categoria.Nome</a></b>
            </li>
        }
    </ul>
</div>

@code {
    private bool collapseNavMenu = true;

    private string NavMenuCssClass => collapseNavMenu ? "collapse" : null;
    public IEnumerable<Categoria> Categorias { get; set; }

    private void ToggleNavMenu()
    {
        collapseNavMenu = !collapseNavMenu;
    }
    protected override void OnParametersSet()
    {
        Categorias = categoriaService.Get();
    }
}

De forma bem simples injetamos o serviço referente a repositório para Categoria e obtemos todas as categorias no método OnParametersSet(). A seguir exibir cada categoria no menu percorremos cada objeto exibindo o nome e definindo o link para /categoria/@categoria.CategoriaId.

Assim quando cada link for clicado teremos a definição da chamada para a rota /categoria/id.

Vamos agora criar na pasta Pages o componente CategoriaPage.razor que vai exibir os posts referente à categoria selecionada no menu incluindo o código abaixo:

@page "/"
@page "/categoria/{id:int}"

@inject IPostRepository postService

@if (Posts.Count() > 0 )
{
    @foreach (var post in Posts)
    {
        <div>
            <h3><a href="/post/@post.PostId">@post.Titulo</a></h3>
            <p>@post.PublicadoEm?.ToString("dddd d MMMM yyyy") - @post.Autor</p>
            <p><i>@post.Conteudo</i></p>
        </div>
    }
}
else
{
   <h2>Macoratti.net - Quase tudo para .NET</h2>
}

@code {

    [Parameter]
    public virtual int Id { get; set; }

    public virtual IEnumerable<Post> Posts { get; set; }

    protected override void OnParametersSet()
    {
        try
        {
            Posts = postService.GetPostsPorCategoriaId(Id);
        }
        catch
        {
            throw new Exception("Erro ao obter os posts");
        }
    }
}

Note que estamos injetando uma instância do repositório para Post e no método OnParametersSet() estamos obtendo a relação de posts para o id da categoria selecionada.

Poderíamos continuar criando outro componente para exibir detalhes de um post ou mesmo definir uma url para acessar um post em outro link. Fica como um exercício.