Asp.net Core Razor Pages form inside Bootstrap modal not working

Question

I would like to ask for your help, I have this modal, which properly pops up and displays the form fields, even the validation is great and the submit button also works, but the Add button doesn't and I couldn't figure out the reason why.

The code of the modal:

<!-- Modal -->
<form method="post">
  <div class="modal fade" id="newBenchmark" data-bs-backdrop="static" data-bs-keyboard="false"
  tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="staticBackdropLabel">
            Start a new benchmark
          </h5>
          <button type="reset" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
          </button>
        </div>
        <div class="modal-body">
          <div class="form-floating mb-4">
            <input asp-for="CreateInput.Name" class="form-control" />
            <label asp-for="CreateInput.Name" class="form-label">
              Name
            </label>
            <span asp-validation-for="CreateInput.Name" class="text-danger">
            </span>
          </div>
          <div class="container">
            <table class="table table-striped align-middle">
              <caption class="caption-top">
                Global
              </caption>
              <thead class="table-dark">
                <tr>
                  <th>
                    <div class="d-flex justify-content-center">
                      Key
                    </div>
                  </th>
                  <th>
                    <div class="d-flex justify-content-center">
                      Value
                    </div>
                  </th>
                  <th>
                  </th>
                </tr>
              </thead>
              <tbody>
                @foreach (var item in Model.ConfigurationItems) {
                <tr>
                  <td>
                    <input readonly asp-for="@item.Item2" class="form-control-plaintext" />
                  </td>
                  <td>
                    <input readonly asp-for="@item.Item3" class="form-control-plaintext" />
                  </td>
                  <td>
                  </td>
                </tr>
                }
                <tr>
                  <td>
                    <input asp-for="CreateInput.Key" class="form-control" />
                  </td>
                  <td>
                    <input asp-for="CreateInput.Value" class="form-control" />
                  </td>
                  <td>
                    <div class="d-flex justify-content-center">
                      <button type="button" class="btn btn-primary m-1" asp-page-handler="AddConfigItem">
                        Add
                      </button>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="modal-footer">
            <button type="reset" class="btn btn-secondary" data-bs-dismiss="modal">
              Cancel
            </button>
            <button type="submit" asp-page-handler="Start" class="btn btn-primary">
              Start
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</form>

The handler method in my PageModel class:

public IActionResult OnPostAddConfigItem()
    {
        var scope = Scope.Global;
        if(CreateInput.Key == "" || CreateInput.Value == "")
        {
            StatusMessage = "Error: Key or value is empty.";
            
            return Page();
        }
        else
        {
            ConfigurationItems.Add((scope, CreateInput.Key, CreateInput.Value));
            CreateInput.Key = "";
            CreateInput.Value = "";
            
            return Page();
        }
    }

I ran the program in debugging mode, to see, whether it gets into the handler method, but it didn't.

Than I stalked it a bit with the browser dev tools and I saw, that there weren't any POST requests on the network by clicking on the button.

I tried to find similar problems on the net, but I didn't succeed.

Answer 1

As Mike Brind said, a button with a type="button" does nothing by default and its function is that it can be pressed. I used it, because I didn't want to submit and validate the data of the whole form, rather I had a table inside my form and I used this button to add data to this table dynamically, without reloading or submitting the form.

I could manage this, via subscribing a JS function to this button's onclick event, by writing this:

// in a site.js file or embedded in html:
function addConfig(){
    /* do something here */
}

<button type="button" class="btn btn-primary m-1" onclick="addConfig()">Add</button>

And after that in the JS function, in this example: addConfig(), I implemented an ajax POST request call and called the handler function, that I originally wanted to call by the asp-page-handler tag.

I can suggest this way, if you wanna do some job from a form, but without submitting or reloading the the form.