[Bug] Erro na página Cadastrar Musica

Olá Igor, bom dia!

Parece que você está enfrentando um problema com o layout da página de cadastro de música. Vamos tentar resolver isso juntos.

1. Verifique o CSS e as Classes:

   • Certifique-se de que as classes CSS usadas, como px-8, pt-2, pb-4, etc., estão definidas corretamente no seu projeto. Se estiver usando uma biblioteca como o MudBlazor, verifique se ela está corretamente configurada.

2. Verifique os Componentes:

   • As tags <MudPaper>, <MudText>, <MudForm>, etc., são componentes do MudBlazor. Certifique-se de que o MudBlazor está instalado e configurado corretamente no seu projeto.

3. Verifique os Erros no Console:

   • A imagem mostra um erro no console relacionado ao evento EventId: '4'. Isso pode estar relacionado a um problema de vinculação de dados ou a um evento não tratado. Verifique se todos os eventos, como ValueChanged="ArtistaSelecionado" e ValueChanged="GeneroSelecionado", estão implementados corretamente no código.

4. Verifique a Inicialização dos Dados:

   • Certifique-se de que os dados de artistas e generos estão sendo carregados corretamente no método OnInitializedAsync(). Você pode adicionar um Console.WriteLine ou usar o depurador para verificar se os dados estão sendo populados.

5. Verifique o HTML Gerado:

   • Use as ferramentas de desenvolvedor do navegador para inspecionar o HTML gerado e verifique se todos os elementos estão sendo renderizados conforme esperado.

6. Teste o Layout:

   • Tente simplificar o layout removendo alguns componentes temporariamente para ver se o problema persiste. Isso pode ajudar a identificar se algum componente específico está causando o problema.

Espero que essas dicas ajudem a identificar e resolver o problema no layout da sua página.

Bons estudos!

Encontrei o Erro, ele está no GeneroAPI. Bom pelo menos eu acho que sim, pois quando eu comento esse campo ele funciona, mas ainda dá alguns erros. Um deles é que ele está mostrando o Json quando eu seleciono o artista e não o nome, tentei mudar aqui, mas ele deixa como nulo.

Visão geral:

Ao clicar em Artistas:

Ao clicar em Gênero:

Parte que foi comentada no código:

Código GeneroAPI:

using ScreenSound.Web.Requests;
using ScreenSound.Web.Response;
using System.Net.Http.Json;

namespace ScreenSound.Web.Services;

public class GeneroAPI
{
    private readonly HttpClient _httpClient;

    public GeneroAPI(IHttpClientFactory factory)
    {
        _httpClient = factory.CreateClient("API");
    }

    public async Task<ICollection<GeneroResponse>?> GetGenerosAsync()
    {
        return await _httpClient.GetFromJsonAsync<ICollection<GeneroResponse>>("generos");
    }

    public async Task<GeneroResponse?> GetGeneroPorNomeAsync(string nome)
    {
        return await _httpClient.GetFromJsonAsync<GeneroResponse>($"generos/{nome}");
    }

    public async Task AddGeneroAsync(GeneroRequest generoRequest)
    {
        await _httpClient.PostAsJsonAsync("genero", generoRequest);
    }

    public async Task EditGeneroAsync(GeneroRequestEdit generoRequestEdit)
    {
        await _httpClient.PutAsJsonAsync($"genero", generoRequestEdit);
    }

    public async Task DeleteGeneroAsync(int id)
    {
        await _httpClient.DeleteAsync($"genero/{id}");
    }
}

Igor, boa tarde!

Pode disponibilizar o git do seu projeto para podermos olhar aqui mais no detalhe?

No aguardo.

Segue o link do meu GitHub:

https://github.com/IgorTudisco/Entity-Framework-Core

Caminho das páginas ScreenSound.Web/Pages

Igor, boa noite!

Acessar o projeto ajudou bastantae hehee. Vamos lá:

• O primeiro problema que você apontou, resolvendo parcialmente comentando o GenerosAPI foi porque estava faltando registrar o serviço no Program.cs

• Com relação a exibição dos dados dos artistas no formato .json aconteceu, por que tem uma refatoração a ser realizada no record ArtistaResponse:

• 

• Aqui sem exte método, quando lá na page quando informado o objeto do tipo ArtistaResponse o comportamento padrão é executar o ToString(), que funciona como uma ficha daquele objeto, por se queremos a exibição do nome fizemos a refatoração.

Espero que tenha ajudado, mas caso tenha alguma dúvida nos mande aqui!

Abraços!

Muito obrigado professor, realmente eu não tinha prestado atenção nesses detalhes.

Agora o Cadastrar está funcionando liso, mas o meu editar não. Não estou conseguindo puxar o artista e nem o Gênero da musica. Aparentemente, está tudo certo com o editar.

Código:

@page "/EditarMusica/{NomeMusica}"

@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">Edição 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="Deletar"
                       Class="ml-auto">
                Deletar
            </MudButton>
            <MudButton Variant="Variant.Filled"
                       Color="Color.Info"
                       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; }

    public MusicaResponse? Musica { get; set; }

    [Parameter]
    public string? NomeMusica { get; set; }

    protected override async Task OnInitializedAsync()
    {
        Musica = await musicaAPI.GetMusicaPorNomeAsync(NomeMusica!);
        anoLancamento = Musica!.anoLancamento;
        nome = Musica!.Nome;
        ArtistaDaMusica = new ArtistaResponse(Musica.ArtistaId, Musica.NomeArtista, "", "");
    }

    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 Deletar()
    {
        await musicaAPI.DeleteMusicaAsync(Musica!.Id);
        navigationManager.NavigateTo("/MusicasPorArtista");

    }
}

Conseguir resolver esse problema, agora aparece a lista de Artista e Gênero.

Também conseguir fazer a edição da musica, porém, não consegui alterar o gênero dela. Tem alguma dica? Por que o MusicaRequestEdit, não tem um argumento de gênero que nem o MusicaRequest?

Métodos da página de editar musica:

@code {
    private int? anoLancamento;
    private string? nome;
    private ArtistaResponse? artista;
    private GeneroResponse? genero;

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

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

    public MusicaResponse? Musica { get; set; }
    public MusicaRequestEdit? MusicaEdit { get; set; }

    [Parameter]
    public string? NomeMusica { get; set; }

    protected override async Task OnInitializedAsync()
    {
        Musica = await musicaAPI.GetMusicaPorNomeAsync(NomeMusica!);
        anoLancamento = Musica!.anoLancamento;
        nome = Musica!.Nome;
        ArtistaDaMusica = new ArtistaResponse(Musica.ArtistaId, Musica.NomeArtista, "", "");

        artistas = await artistasAPI.GetArtistasAsync();
        generos = await generoAPI.GetGenerosAsync();
    }

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

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

    private async Task Edit()
    {
        MusicaEdit = new MusicaRequestEdit(Musica!.Id, nome!, artista!.Id, anoLancamento!);
        await musicaAPI.EditMusicaAsync(MusicaEdit!);
        navigationManager.NavigateTo("/MusicasPorArtista");
    }

    public async Task Deletar()
    {
        await musicaAPI.DeleteMusicaAsync(Musica!.Id);
        navigationManager.NavigateTo("/MusicasPorArtista");

    }

    private void Voltar()
    {
        navigationManager.NavigateTo("/MusicasPorArtista");
    }
}