MudBlazor 按钮未触发

Question

当我点击 AddVerse 按钮时，它不会触发 AddVerse 功能。

这是我的页面：

@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;
    }
}

在我的主布局中，我将 Provider 标签放在应用程序中 .razor，我将路由渲染模式设置为InteractiveServer。是的，我在 Blazor 服务器中使用 MudBlazor。

所以我想知道这一切是否与渲染无关，但不应该，因为我指定渲染模式是interactiveserver。如果你也想知道的话，我正在使用 .net 8。

那么，为什么AddVerse没有被触发呢？我的意思是，没有理由不应该！？

Answer 1

OnClick

是 MudBlazor 按钮的事件参数，而

@onclick

是 html 单击事件的 razor 指令属性