Why "HandleValidSubmit()" always been called in blazor

Question

I found my code is very wired, I set three buttons in page, Go back, Delete, and Submit. razor code

<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 code is at below, question is no matter I click Delete or Submit button, it always trigger HandleValidSubmit(), and excute UpdateQuizAsync method, actually, if I do delete, the entity has been removed, then do UpdateQuizAsync() will give me an error.

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

and now I change to code like this, it is working, I set a bool IsDelete, and add an if statement in HandleValidSubmit(), and I can avoid do UpdateQuizAsync() every time when I click Delete button.

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

I think there must a error in my code design, can anybody give me an ideal ? HandleInvalidSubmit() should be trigger by Submit button, not every button can trigger HandleInvalidSubmit().

Answer 1

I believe that the first button in a form, without precision for its type, is automatically a "Submit" button for the form.

So you should try to change with:

 <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>

//Dylan