为什么 "HandleValidSubmit()" 总是在 blazor 中被调用

Question

我发现我的代码很连线，我在页面中设置了三个按钮，返回、删除和提交。剃须刀代码

<div class="form-group row offset-sm-2">
    <button class="btn btn-secondary" @onclick="@GoBack">Go Back</button>
        <button class="btn btn-danger mr-2" @onclick="@DeleteQuizAsync">Delete</button>            
        <button type="submit" class="btn btn-primary mr-2">Submit</button>
</div>

cs代码在下面，问题是无论我点击删除还是提交按钮，它总是触发HandleValidSubmit()，并执行UpdateQuizAsync方法，实际上，如果我删除，实体已经被删除，然后执行UpdateQuizAsync () 会报错。

   public async Task DeleteQuizAsync(Guid quizId) {
                var response = await _httpClient.DeleteAsync($"https://localhost:7172/api/quizzes/{quizId}");
                if (response.IsSuccessStatusCode) {
                    Saved = true;
                    OperationFailure = false;
                    Message = "Delete successfully";
                    CssClass = "alert alert-success";
                }
                else {
                    Saved = false;
                    OperationFailure = true;
                    Message = "Delete unsuccessfully";
                    CssClass = "alert alert-danger";
                }
            }
     public async Task UpdateQuizAsync(Guid quizId, QuizUpdateDto quizUpdateDto) {
            var quizJson =
                new StringContent(
                    JsonSerializer.Serialize(quizUpdateDto),
                    Encoding.UTF8,
                    "application/json");
            var response = await _httpClient.PutAsync(
                  $"https://localhost:7172/api/quizzes/{quizId}", quizJson);
            if (response.IsSuccessStatusCode) {
                Saved = true;
                OperationFailure = false;
                Message = "Edit successfully";
                CssClass = "alert alert-success";
            }
            else {
                Saved = false;
                OperationFailure = true;
                Message = "Edit unsuccessfully";
                CssClass = "alert alert-danger";
            }
        }

        protected async Task HandleValidSubmit() {  
                await UpdateQuizAsync(Guid.Parse(quizId), Quiz);                
        }
        protected void HandleInvalidSubmit() {
            CssClass = "alert alert-danger";
            Message = "Validation failure";
        }
        protected void GoBack() {
            NavigationManager.NavigateTo("/quizzes");
        }
        protected async Task DeleteQuizAsync() {
            await DeleteQuizAsync(Guid.Parse(quizId));
        }

现在我改成这样的代码，它正在工作，我设置了一个 bool IsDelete，并在 HandleValidSubmit() 中添加了一个 if 语句，我可以避免每次单击删除按钮时都执行 UpdateQuizAsync()。

   public async Task DeleteQuizAsync(Guid quizId) {
            var response = await _httpClient.DeleteAsync($"https://localhost:7172/api/quizzes/{quizId}");
            if (response.IsSuccessStatusCode) {
                Saved = true;
                OperationFailure = false;
                Message = "Delete successfully";
                CssClass = "alert alert-success";
            }
            else {
                Saved = false;
                OperationFailure = true;
                Message = "Delete unsuccessfully";
                CssClass = "alert alert-danger";
            }
        }



public async Task UpdateQuizAsync(Guid quizId, QuizUpdateDto quizUpdateDto) {
        var quizJson =
            new StringContent(
                JsonSerializer.Serialize(quizUpdateDto),
                Encoding.UTF8,
                "application/json");
        var response = await _httpClient.PutAsync(
              $"https://localhost:7172/api/quizzes/{quizId}", quizJson);
        if (response.IsSuccessStatusCode) {
            Saved = true;
            OperationFailure = false;
            Message = "Edit successfully";
            CssClass = "alert alert-success";
        }
        else {
            Saved = false;
            OperationFailure = true;
            Message = "Edit unsuccessfully";
            CssClass = "alert alert-danger";
        }
    }

protected async Task HandleValidSubmit() {
    if (IsDelete) {
    }
    else {
        await UpdateQuizAsync(Guid.Parse(quizId), Quiz);
    }
      
}
protected void HandleInvalidSubmit() {
    CssClass = "alert alert-danger";
    Message = "Validation failure";
}
protected void GoBack() {
    NavigationManager.NavigateTo("/quizzes");
}
protected async Task DeleteQuizAsync() {
    IsDelete = true;
    await DeleteQuizAsync(Guid.Parse(quizId));
}

我想我的代码设计肯定有错误，谁能给我一个理想？ HandleInvalidSubmit() 应该由提交按钮触发，不是每个按钮都能触发 HandleInvalidSubmit()。

Answer 1

我认为表单中的第一个按钮（其类型不精确）会自动成为表单的“提交”按钮。

所以你应该尝试改变：

 <div class="form-group row offset-sm-2">
    <button type="button" class="btn btn-secondary" @onclick="@GoBack">Go Back</button>
    <button type="button" class="btn btn-danger mr-2" @onclick="@DeleteQuizAsync">Delete</button>            
    <button type="submit" class="btn btn-primary mr-2">Submit</button>
</div>

//迪伦

为什么 "HandleValidSubmit()" 总是在 blazor 中被调用

Why "HandleValidSubmit()" always been called in blazor

html

webassembly

blazor