ASP.NET Core Razor Page, code behind method not being triggered

Question

I have a C# Razor Pages project.

I created a Login view in the following structure:

- Pages
  - Account
    - Login.cshtml

This is the code for my Login view

@page "{handler?}"
@model HAL_WEB.Pages.LoginModel
@{
    Layout = "_LayoutLogin";
}

<section class="section register min-vh-100 d-flex flex-column align-items-center justify-content-center py-4">
        <div class="container">
          <div class="row justify-content-center">
            <div class="col-lg-4 col-md-6 d-flex flex-column align-items-center justify-content-center">

              <div class="d-flex justify-content-center py-4">
                <a href="index.html" class="logo d-flex align-items-center w-auto">
                        <img src="assets/img/teamtruetech_logo.png" alt="">
                  <span class="d-none d-lg-block">HAL Admin</span>
                </a>
              </div><!-- End Logo -->

              <div class="card mb-3">

                <div class="card-body">

                  <div class="pt-4 pb-2">
                    <h5 class="card-title text-center pb-0 fs-4">Login to Your Account</h5>
                    <p class="text-center small">Enter your username & password to login</p>
                  </div>

                  <form id="login-form" class="row g-3 needs-validation" novalidate>

                    <div class="col-12">
                      <label for="yourUsername" class="form-label">Username</label>
                      <div class="input-group has-validation">
                        <span class="input-group-text" id="inputGroupPrepend"></span>
                        <input type="text" name="username" class="form-control" id="yourUsername" required>
                        <div class="invalid-feedback">Please enter your username.</div>
                      </div>
                    </div>

                    <div class="col-12">
                      <label for="yourPassword" class="form-label">Password</label>
                      <input type="password" name="password" class="form-control" id="yourPassword" required>
                      <div class="invalid-feedback">Please enter your password!</div>
                    </div>

                    <div class="col-12">
                      <div class="form-check">
                        <input class="form-check-input" type="checkbox" name="remember" value="true" id="rememberMe">
                        <label class="form-check-label" for="rememberMe">Remember me</label>
                      </div>
                    </div>
                    <div class="col-12">
                      <button class="btn btn-primary w-100" type="submit">Login</button>
                    </div>
                   @* <div class="col-12">
                      <p class="small mb-0">Don't have account? <a href="pages-register.html">Create an account</a></p>
                    </div>*@
                  </form>

                </div>
              </div>
            </div>
          </div>
        </div>
</section>

@section Scripts {
    <script src="~/assets/js/loginpage.js"></script>
}

And this is the code behind:

using HAL_WEB.Data;
using Microsoft.AspNetCore.Authentication.Cookies;
using Microsoft.AspNetCore.Authentication;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using System.Security.Claims;

namespace HAL_WEB.Pages
{
    public class LoginModel : PageModel
    {
        private readonly ApplicationDBContext _dbContext;

        public LoginModel([FromServices] ApplicationDBContext dbContext)
        {
            _dbContext = dbContext;
        }

        public void OnGet()
        {
        }

        public async Task<IActionResult> OnPostLoginAsync(string username, string password)
        {
            // Check if the provided credentials are valid
            if (IsValidCredentials(username, password))
            {
                // If the credentials are valid, log the user in
                await HttpContext.SignInAsync(
                  CookieAuthenticationDefaults.AuthenticationScheme,
                  new ClaimsPrincipal(new ClaimsIdentity(new[] { new Claim(ClaimTypes.Name, username) }, CookieAuthenticationDefaults.AuthenticationScheme)),
                  new AuthenticationProperties
                  {
                      IsPersistent = true, // Set this to true if you want the user to stay logged in after closing the browser
                      ExpiresUtc = DateTime.UtcNow.AddDays(7) // Set the expiration time for the cookie
                  });

                // Redirect the user to the home page
                return RedirectToPage("/Home");
            }
            else
            {
                // If the credentials are invalid, show an error message
                ModelState.AddModelError(string.Empty, "Invalid username or password.");
                return Page();
            }
        }

        private bool IsValidCredentials(string username, string password)
        {
            // Replace this with your own validation logic
            return username == "admin" && password == "password";
        }

        public IActionResult OnPostLoginTestAsync()
        {
        return new JsonResult(true);
    }
}

In my Javascript file I tried to call the method OnPostLoginTestAsync or OnPostLoginAsync without success.

I'm getting a "Bad Request 400" error:

This is my Javascript Axios code for calling the method:

// Use Axios to send a POST request to the server with the form data
axios.post('/Account/Login?handler=login', {
                username,
                password,
            })
     .then((response) => {
         // If the request is successful, redirect the page
         window.location.href = '/home';
     })
     .catch((error) => {
          // If there is an error, log it to the console
          console.error(error);
     });

Any clue what am I doing wrong? I'm going to /Account/Login?handler=login because the call is a Post and what I think is that the method OnPostLoginAsync should be executed.

UPDATE

I found something interesting, I created the following Get method:

public IActionResult OnGetTestAsync()
{
    return new JsonResult(true);
}

And in my Javascript, I changed the Axios url to be:

   axios.get('/Account/Login?handler=test')
                .then(function (response) {
                   
                })
                .catch(function (error) {
                    // Handle the error response
                });
               

And I could get the method executed! But when I change the method name back to:

OnPostTestAsync

and my Axios to:

axios.post('/Account/Login?handler=test')
                    .then(function (response) {
                    })
                    .catch(function (error) {
                        // Handle the error response
                    });

It never gets executed and I get 400 Bad Request. Any clue?