How to produce bootstrap modal editable form from html data object list in Razor Pages

Now I would like to be able to show the form when I click the Edit button of each row from the html list (the .cshtml file) and pass the corresponding id.

Shown below is sample. Be aware that there will be lot of other troubles even when the case-sensitive issue of JavaScript method has been solved according to the AI answer. Therefore, I suggest that you follow the completely working sample shown below.

Model

.cshtml.cs

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using RazorPages.Models;

namespace RazorPages.Pages
{
    public class Ajax3Model : PageModel
    {
        public IList<Car> Cars { get; set; } = default!;
        public Car Car { get; set; } = default!;

        public void OnGet()
        {
            Cars = new List<Car>
            {
                new Car { Id = 1, Brand = "Ford", Year = 2022, Price = 20000 },
                new Car { Id = 2, Brand = "Renault", Year = 2019, Price = 25000 },
                new Car { Id = 3, Brand = "Audi", Year = 2025, Price = 40000 }
            };
        }

        public IActionResult OnGetDataResponse(int? id)
        {
            if (id == null)
            {
                return NotFound();
            }

            var cars = new List<Car>
            {
                new Car { Id = 1, Brand = "Ford", Year = 2022, Price = 20000 },
                new Car { Id = 2, Brand = "Renault", Year = 2019, Price = 25000 },
                new Car { Id = 3, Brand = "Audi", Year = 2025, Price = 40000 }
            };

            var car = cars.FirstOrDefault(c => c.Id == id);
            if (car == null)
            {
                return NotFound();
            }

            return new JsonResult(car);
        }

        public IActionResult OnPostEdit(Car car)
        {
            if (!ModelState.IsValid)
            {
                Cars = new List<Car>
                {
                    new Car { Id = 1, Brand = "Ford", Year = 2022, Price = 20000 },
                    new Car { Id = 2, Brand = "Renault", Year = 2019, Price = 25000 },
                    new Car { Id = 3, Brand = "Audi", Year = 2025, Price = 40000 }
                };
                
                // The ModelState is invalid, so we return the page with the validation errors.
                // ViewData is used to pass the validation result to the view, which can then
                // display appropriate messages to the user in Modal.
                ViewData["ValidationResult"] = "invalid";
                return Page();
            }
            return RedirectToPage("Index");
        }
    }
}

.cshtml

@page
@model RazorPages.Pages.Ajax3Model

<!-- Bootstrap Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static"
     data-bs-keyboard="false" tabindex="-1"
     aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5"
                    id="staticBackdropLabel">
                    Edit Car
                </h1>
                <button type="button" class="btn-close"
                        data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form method="post" id="myForm" asp-page-handler="Edit">
                    <div class="form-group">
                        <label asp-for="Car.Id" class="control-label"></label>
                        <input type="text" asp-for="Car.Id" class="form-control" />
                        <span asp-validation-for="Car.Id" class="text-danger"></span>
                    </div>
                    <div class="form-group">
                        <label asp-for="Car.Brand" class="control-label"></label>
                        <input type="text" asp-for="Car.Brand" class="form-control" />
                        <span asp-validation-for="Car.Brand" class="text-danger"></span>
                    </div>
                    <div class="form-group">
                        <label asp-for="Car.Year" class="control-label"></label>
                        <input type="text" asp-for="Car.Year" class="form-control" />
                        <span asp-validation-for="Car.Year" class="text-danger"></span>
                    </div>
                    <div class="form-group">
                        <label asp-for="Car.Price" class="control-label"></label>
                        <input type="text" asp-for="Car.Price" class="form-control" />
                        <span asp-validation-for="Car.Price" class="text-danger"></span>
                    </div>
                    <div class="form-group">
                        <input type="submit" value="Submit" class="btn btn-primary" />
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

Initial

Edit link clicked