当EditForm有OnValidSubmit时所有值都会重置

Question

我有 Blazor 组件。传入 Id，但当编辑表单的 OnValidSubmit 首先触发时，它会按预期运行“OnInitializedAsync()”。

我在页面加载时首先将参数设置为 true，并在第一次运行“OnInitializedAsync()”时将其设置为 false。

但是这个值始终为 true，因此我只想在第一页加载时获取的值全部重置，并且用户输入的内容将被忽略。

我看过脚手架工之前所做的事情（尽管由于某种原因它目前无法工作），看起来应该可以工作。

ChatGPT 和网上的例子看起来是一样的。

如何仅在第一页加载时触发数据的初始获取？

谢谢。

@page "/myprediction/edit/{id}"
@using FootballHeadzGame.Data
@using Microsoft.EntityFrameworkCore
@* @inject FootballHeadz3.Data.ApplicationDbContext DB *@
@inject NavigationManager NavigationManager
@inject IPredictionRepository _predictionRepository
@attribute [Authorize]

<PageTitle>Edit Prediction</PageTitle>

@if (_predictionToEdit is null)
{
    <p><em>Loading...</em></p>
}
else
{
    <div class="card">
        <div class="card-header">
            <h1>Edit Prediction</h1>
        </div>
        <MessageComponent Message="@_message" MessageError="@_messageError" />
        <div class="card-body">
            <EditForm FormName="Prediction" Model="_predictionToEdit" OnValidSubmit="UpdatePrediction" class="row row-cols-sm-auto g-1 align-items-center">
                <div>
                    <DataAnnotationsValidator />
                    <ValidationSummary />
                </div>
                <div class="col-6">
                    <label class="visually-hidden" for="inlineFormInputGroupUsername">Home Team</label>
                    <div class="input-group">
                        <div class="input-group-text">@_predictionToEdit.HomeTeam</div>
                        <InputText @bind-Value="_predictionToEdit.HomeScorePredictionString" style="width:40px;" class="form-control"></InputText>
                    </div>
                </div>

                <div class="col-6">
                    <label class="visually-hidden" for="inlineFormInputGroupUsername">Away Team</label>
                    <div class="input-group">
                        <InputText @bind-Value="_predictionToEdit.AwayScorePredictionString" style="width:40px;" class="form-control"></InputText>
                        <div class="input-group-text">@_predictionToEdit.AwayTeam</div>
                    </div>
                </div>

                <div class="col-12">
                    <button type="submit" class="btn btn-primaryfh">Update</button>
                </div>
            </EditForm>
        </div>
    </div>
}


@code {
    [Parameter]
    public string Id { get; set; }

    [CascadingParameter]
    Task<AuthenticationState> authenticationStateTask { get; set; }

    private string? _message;
    private string? _messageError;
    //private FixtureModel _predictionToEdit;

    [SupplyParameterFromForm]
    private PredictionModel _predictionToEdit { get; set; } = new();

    private int userId;

    private bool first { get; set; } = true;



    // [SupplyParameterFromForm]
    // public MiniLeagueModel? MiniLeagueModel { get; set; }

    protected override async Task OnInitializedAsync()
    {
        // This is always zero not sure why
        //if (_predictionToEdit.UserId == 0)
        if (first)
        {
            var authState = await authenticationStateTask;
            userId = Convert.ToInt32(authState.User.Claims.FirstOrDefault().Value);

            _predictionToEdit.UserId = userId;
            _predictionToEdit.FixtureId = Convert.ToInt32(Id);

            // I'm not passing a prediction model in here because it passes it out and it would be a mess
            _predictionToEdit = await _predictionRepository.GetAsync(userId, Convert.ToInt32(Id));

            _message = userId.ToString() + ". " + Id;
            first = false;
        }
    }


    private async Task UpdatePrediction()
    {
        await ClearMessages();

        if (_predictionToEdit.HomeScorePredictionString == null || _predictionToEdit.AwayScorePredictionString == null)
        {
            //var isNumeric = int.TryParse("123", out _);
            //if (int.TryParse())
            _messageError = "You must fill in the score";
        }
        else
        {
            _predictionToEdit.HomeScorePrediction = Convert.ToInt32(_predictionToEdit.HomeScorePredictionString);
            _predictionToEdit.AwayScorePrediction = Convert.ToInt32(_predictionToEdit.AwayScorePredictionString);
            await _predictionRepository.UpdateAsync(_predictionToEdit);

            NavigationManager.NavigateTo("/mypredictions");
        }

    }

    private async Task ClearMessages()
    {
        _message = null;
        _messageError = null;
    }

}

Answer 1

如果您没有使用SSR，您可以使用

OnAfterRender(bool first)

来检查首次加载。
如果你使用SSR。提交时不会保存“第一个”值。您可以尝试使用服务器会话存储来保存“第一个”值以供检查。当会话结束时，会话存储将被清除。

    [CascadingParameter]
    HttpContext? httpContext { get; set; }

    protected override void OnInitialized(){

        if (httpContext.Session.GetInt32("first")==null)
        {
            ...reset value.....

            httpContext.Session.SetInt32("first",1);
        }
    }

程序.cs

...
builder.Services.AddDistributedMemoryCache();
builder.Services.AddSession();
...
app.UseSession();