MudBlazor button is not triggered

Question

My button for AddVerse does not trigger the function AddVerse when I click on it.

This is my page:

@page "/CommentVerse"
@inject IJerusalemBibleService JerusalemBibleService
@inject ICommentService CommentService

@if(ErrorMessage != null)
{
    <MudAlert Severity="Severity.Error">@ErrorMessage</MudAlert>
}
@if (Success)
{
    <MudAlert Severity="Severity.Success">Le commentaire a bien été ajouté!</MudAlert>
}

<EditForm Model="@model" OnValidSubmit="OnValidSubmit">
    <DataAnnotationsValidator />
    <MudGrid>
        <MudItem xs="12" sm="7">
            <MudCard>
                <MudCardContent>
                    <MudTextField T="string" Label="Verset(s)" Variant="Variant.Text" Text="@model.Verses" @bind-Value="model.Verses" Lines="10" Disabled="true" />
                    <MudTextField T="string" Label="Commentaire" Variant="Variant.Text" Text="@model.Comment" @bind-Value="model.Comment" Lines="10" />
                </MudCardContent>
                <MudCardActions>
                    <MudButton ButtonType="ButtonType.Submit" Variant="Variant.Filled" Color="Color.Primary" Class="ml-auto">Ajouter</MudButton>
                </MudCardActions>
            </MudCard>
        </MudItem>
        <MudItem xs="12" sm="5">
            <MudPaper Class="pa-4 mud-height-full">
                <MudText Typo="Typo.subtitle2">Rechercher un verset</MudText>

                @if (InProgress)
                {
                    <MudProgressCircular Color="Color.Primary" Indeterminate="true" />
                }
                else
                {
                    <MudSelect @bind-Value="Book" T="string" Label="Livres bibliques">
                        @foreach (var detailsBook in BiblesBooks.FrenchCatholicBible)
                        {
                            <MudSelectItem Value="@detailsBook.Key"/>
                        }
                    </MudSelect>

                    <MudNumericField Label="Chapitre" @bind-Value="Chapter" Min="1" Max="1000" />
                    <MudNumericField Label="Premier Verset" @bind-Value="FirstVerse" Min="1" Max="1000" />
                    <MudNumericField Label="Dernier Verset" @bind-Value="LastVerse" Min="1" Max="1000" />
                }
                <MudButton @OnClick="@(() => AddVerse())" Variant="Variant.Filled" Color="Color.Primary" Class="mt-2">Sélectionner le(s) verset(s)</MudButton>
            </MudPaper>
        </MudItem>
    </MudGrid>
</EditForm>

@code {
    CommentDto model = new CommentDto();
    bool Success = false;
    string Book { get; set; }
    int Chapter { get; set; } = 1;
    int FirstVerse { get; set; } = 1;
    int? LastVerse { get; set; } = null;
    string? ErrorMessage { get; set; } = null;
    bool InProgress { get; set; } = false;
    public int IntValue { get; set; }

    private void OnValidSubmit(EditContext context)
    {
        try
        {
            CommentService.Add(model);
            Success = true;
        }
        catch (Exception ex)
        {
            ErrorMessage = ex.Message;
            Success = false;
        }
        StateHasChanged();
    }

    private void AddVerse()
    {
        InProgress = true;
        try
        {
            model.Verses += JerusalemBibleService.GetVerse(Book, Chapter, FirstVerse, LastVerse);
        }
        catch (Exception ex)
        {
            ErrorMessage = ex.Message;
        }
        InProgress = false;
    }
}

In my main layout, I put the Provider tag and in the App .razor, I put the Routes rendermode to InteractiveServer. Yes I am in Blazor server using MudBlazor.

So I am wondering if all this is not about the rendering, but it should not, because I specefied that the render mode is interactiveserver. I'm in .net 8 if you want to know also.

So, why AddVerse is not triggered? I mean, there is no reason why it should not!?

Answer 1

OnClick is the event parameter for MudBlazor buttons while @onclick is a razor directive attribute for html click events