Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Erro na página de cadastro de música

Ao navegar para a página de músicas, aparece este erro Tentei verificar alguns erros, ou configurações, mas o erro persiste Erro página Cadastrar música

@page "/CadastrarMusica"
@inject ArtistasAPI artistasAPI
@inject GeneroAPI generoAPI
@inject MusicasAPI musicaAPI
@inject NavigationManager navigationManager

<MudPaper Class="px-8 pt-2 pb-4 mx-12 my-8" Justify="Justify.Center">

    <MudText Class="mt-8" Typo="Typo.h4">Cadastro de Música</MudText>

    <MudForm>

        <MudTextField Class="mt-4" T="string" Placeholder="Nome da música/canção"
                      @bind-Value="nome"
                      Variant="Variant.Outlined"
                      Required="true"
                      RequiredError="Campo obrigatório." />

        <MudSelect Class="mt-4" T="ArtistaResponse" Label="Artistas"
                   Variant="Variant.Outlined" ValueChanged="ArtistaSelecionado" AnchorOrigin="Origin.BottomCenter">
            @if (artistas is not null)
            {
                @foreach (var artista in artistas)
                {
                    <MudSelectItem Value="artista" />
                }
            }
        </MudSelect>

        <MudNumericField Class="mt-4" Placeholder="Ano de lançamento"
                      @bind-Value="anoLancamento"
                      Variant="Variant.Outlined"
                      Lines="1"
                      Required="true"
                      RequiredError="Campo obrigatório." />

        <MudSelect Class="mt-4" T="GeneroResponse" Label="Gêneros"
                   Variant="Variant.Outlined" ValueChanged="GeneroSelecionado" AnchorOrigin="Origin.BottomCenter">
            @if (generos is not null)
            {
                @foreach (var generos in generos)
                {
                    <MudSelectItem Value="generos" />
                }
            }
            @if (GenerosSelecionados is not null)
            {
                @foreach (var genero in GenerosSelecionados)
                {
                    <MudAlert Severity="Severity.Info">
                        @(genero.nome) adicionado como gênero da música.
                    </MudAlert>
                }
            }

        </MudSelect>

        <div class="d-flex align-center justify-space-between mt-4">
            <MudButton Variant="Variant.Filled"
                       Color="Color.Primary"
                       @onclick="Cadastrar"
                       Class="ml-auto">
                Cadastrar
            </MudButton>
            <MudButton Variant="Variant.Filled"
                       Color="Color.Info"
                       @onclick="Voltar"
                       Class="ml-3">
                Voltar
            </MudButton>
        </div>

    </MudForm>

</MudPaper>

@code {
    private int anoLancamento;
    private string? nome;

    private ICollection<ArtistaResponse>? artistas;
    private ICollection<GeneroResponse>? generos;

    private List<GeneroResponse>? GenerosSelecionados { get; set; } = new();
    private ArtistaResponse? ArtistaDaMusica { get; set; }
    private List<GeneroRequest> GenerosRequest { get; set; } = new();

    protected override async Task OnInitializedAsync()
    {
        artistas = await artistasAPI.GetArtistasAsync();
        generos = await generoAPI.GetGenerosAsync();
    }

    private void ArtistaSelecionado(ArtistaResponse artista)
    {
        ArtistaDaMusica = artista;
    }

    private void GeneroSelecionado(GeneroResponse genero)
    {
        if (GenerosSelecionados is not null)
        {
            if (!GenerosSelecionados.Contains(genero))
            {
                GenerosSelecionados.Add(genero);
            }
        }
    }

  
    public async Task Cadastrar()
    {
        if (GenerosSelecionados is not null)
        {
            foreach (var genero in GenerosSelecionados)
            {
                GenerosRequest.Add(new GeneroRequest(genero.nome!, genero.descricao!));
            }
        }

        var musicaRequest = new MusicaRequest(nome!, ArtistaDaMusica!.id, anoLancamento, GenerosRequest);
        await musicaAPI.AddMusicaAsync(musicaRequest);
        navigationManager.NavigateTo("/MusicasPorArtista");
    }

    public void Voltar()
    {
        navigationManager.NavigateTo("/MusicasPorArtista");
    }
}
1 resposta
solução!

Oii, Maurício, tudo bem?

O erro diz que falta um manipulador de eventos associado ao evento com o ID 4. Isso acontece quando o evento ValueChanged não está configurado da forma certa.

Você pode ajustar os componentes MudSelect para usar o atributo @bind-Value em vez do evento ValueChanged.

Seria deste modo, por exemplo:

  • MudSelect para Artistas:

    <MudSelect Class="mt-4" T="ArtistaResponse" Label="Artistas"
               Variant="Variant.Outlined" @bind-Value="ArtistaDaMusica" AnchorOrigin="Origin.BottomCenter">
        @if (artistas is not null)
        {
            @foreach (var artista in artistas)
            {
                <MudSelectItem Value="artista" />
            }
        }
    </MudSelect>
    
  • MudSelect para Gêneros:

    <MudSelect Class="mt-4" T="GeneroResponse" Label="Gêneros"
               Variant="Variant.Outlined" @bind-Value="GeneroSelecionado" AnchorOrigin="Origin.BottomCenter">
        @if (generos is not null)
        {
            @foreach (var genero in generos)
            {
                <MudSelectItem Value="genero" />
            }
        }
        @if (GenerosSelecionados is not null)
        {
            @foreach (var genero in GenerosSelecionados)
            {
                <MudAlert Severity="Severity.Info">
                    @(genero.nome) adicionado como gênero da música.
                </MudAlert>
            }
        }
    </MudSelect>
    
  • Método GeneroSelecionado:

    private GeneroResponse GeneroSelecionado
    {
        get => new GeneroResponse();
        set
        {
            if (value != null && GenerosSelecionados is not null && !GenerosSelecionados.Contains(value))
            {
                GenerosSelecionados.Add(value);
            }
        }
    }
    

Se outra dúvida surgir, estamos disponíveis aqui no fórum.

Abraços!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓.