1
resposta

Não estou conseguindo renderizar a página

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

@page "/CadastrarMusica"
@inject ArtistaApi artistaApi
@inject GeneroAPI generoAPI

<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" AnchorOrigin="Origin.BottomCenter">
            @if (artistas is not null)
            {
                @foreach (var artista in artistas)
                {
                    <MudSelectItem Value="artista" />
                }
            }
        </MudSelect>

        <MudTextField 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" AnchorOrigin="Origin.BottomCenter">
            @if (generos is not null)
            {
                @foreach (var generos in generos)
                {
                    <MudSelectItem Value="generos" />
                }
            }
        </MudSelect>

        <div class="d-flex align-center justify-space-between mt-4">
            <MudButton Variant="Variant.Filled"
                       Color="Color.Primary"
                       Class="ml-auto">
                Cadastrar
            </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;

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

Boa tarde, tudo bem?

Tenta assim:

@page "/CadastrarMusica"
@inject ArtistaApi artistaApi
@inject GeneroAPI generoAPI

<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 Model="@musicaModel" OnValidSubmit="HandleValidSubmit">
        <MudTextField Class="mt-4" T="string" Placeholder="Nome da música/canção"
                      @bind-Value="musicaModel.Nome"
                      Variant="Variant.Outlined"
                      Required="true"
                      RequiredError="Campo obrigatório." />

        <MudSelect Class="mt-4" T="ArtistaResponse" Label="Artistas" Variant="Variant.Outlined" AnchorOrigin="Origin.BottomCenter" @bind-Value="musicaModel.ArtistaId">
            @if (artistas != null)
            {
                @foreach (var artista in artistas)
                {
                    <MudSelectItem Value="@artista.Id">@artista.Nome</MudSelectItem>
                }
            }
        </MudSelect>

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

        <MudSelect Class="mt-4" T="GeneroResponse" Label="Gêneros" Variant="Variant.Outlined" AnchorOrigin="Origin.BottomCenter" @bind-Value="musicaModel.GeneroId">
            @if (generos != null)
            {
                @foreach (var genero in generos)
                {
                    <MudSelectItem Value="@genero.Id">@genero.Nome</MudSelectItem>
                }
            }
        </MudSelect>

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

</MudPaper>

@code {
    private MusicaModel musicaModel = new MusicaModel();

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

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

    private async Task HandleValidSubmit()
    {
        Console.WriteLine($"Cadastro da música: Nome={musicaModel.Nome}, ArtistaId={musicaModel.ArtistaId}, AnoLancamento={musicaModel.AnoLancamento}, GeneroId={musicaModel.GeneroId}");
    }

    private void Voltar()
    {
        NavigationManager.NavigateTo("/ListaMusicas");
    }

    public class MusicaModel
    {
        public string Nome { get; set; }
        public int ArtistaId { get; set; }
        public int AnoLancamento { get; set; }
        public int GeneroId { get; set; }
    }
}