1.您可能不熟悉Razor Pages，Razor Pages使用OnGet和OnPost来处理Http Get和Post请求。如果您需要在当前PageModel中使用另一个Get或Post方法，则需要定义方法名称，如下所示：* * OnGet处理程序名称或OnPost**处理程序名称。
2.如果您的.cshtml.cs文件位于：Pages/Employees/Index.cshtml.cs，请求URL应为：/Employees/Index。如果您在PageModel中设置了处理程序，则请求URL应为：/Employees/Index?handler=xxx.
3.对于如何在Razor Pages中使用Ajax，Razor Pages默认启用防伪令牌验证，所以需要在ajax中将此令牌添加到header中。
如果你在Razor Pages中使用表单，它会默认生成一个带有token的输入。如果没有，你需要手动添加@Html.AntiForgeryToken()。

• • 您可以观看完整的工作演示：**

页面（页面/员工/索引. cshtml）：

@page
@model IndexModel
<button class="btn btn-info mb-3" id="btn1">Add Employee</button>
<div class="modal Add-Emp">
    <div class="modal-dialog">
        <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title">Add Employee</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <!-- Modal body -->
            <div class="modal-body">
                <form method="post">
                    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                    <div class="form-group">
                        <label>Name</label>
                        <input type="text" placeholder="Enter Name" class="form-control" id="Name" autocomplete="off" />
                    </div>
                    <div class="form-group">
                        <label>Age</label>
                        <input type="text" placeholder="Enter Age" class="form-control" id="Age" autocomplete="off" />
                    </div>
                    <div class="form-group">
                        <label>Email</label>
                        <input type="text" placeholder="Enter Email" class="form-control" id="Email" autocomplete="off" />
                    </div>
                </form>
            </div>

            <!-- Modal footer -->
            <div class="modal-footer">
                <button class="btn btn-primary" onclick="AddEmployee();">Save</button> I
                <button class="btn btn-danger btn-default" data-bs-dismiss="modal">Close</button>
            </div>

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

@section Scripts
{
    <script>
        $("#btn1").click(function () {
            $(".Add-Emp").modal("show")
        })
        function AddEmployee() {
            debugger
            var objData = { Name: $("#Name").val(), Age: $("#Age").val(), Email: $("#Email").val() }

            $.ajax({
                url: "/Employees/Index?handler=AddEmployee",
                type: "Post",
                data: JSON.stringify(objData), //change here...
                contentType: "application/json; charset=utf-8", //change here...
                headers: {
                    RequestVerificationToken:
                        $('input:hidden[name="__RequestVerificationToken"]').val()
                },   //add this....
                dataType: "json",
                success: function () { alert("Data Saved"); },
                error: function () { alert("Error!!!"); }
            })
        }
    </script>
}

页面/员工/索引. cshtml.cs：

public class IndexModel : PageModel
{
    //...
    public IList<Employee> Employee { get; set; }

    public async Task OnGetAsync()
    {
        Employee = await _context.Employee.ToListAsync();
    }

    public JsonResult OnGetEmployeeList()
    {
        var data = _context.Employee.ToList();
        return new JsonResult(data);
    }

    public JsonResult OnPostAddEmployee([FromBody]Employee e)
    {
        var emp = new Employee()
        {
            Name = e.Name,
            Age = e.Age,
            Email = e.Email
        };
       
        return new JsonResult("Success!!!");
    }
}